'use client'

import { texts } from '@/texts'
import CreateEventPreviewCard from '@/components/events/create/CreateEventPreviewCard'
import FaqEditor from '@/components/events/create/FaqEditor'
import { WizardFormFullWidth, WizardFormGrid, WizardSectionTitle, WizardStepFooter } from '@/components/events/create/WizardFormLayout'
import { combineDateAndMinutes, formatWizardDate, type EventWizardFormData } from '@/components/events/create/types'

interface Step4FaqPreviewProps {
  data: EventWizardFormData
  categoryName?: string
  // استان فعلاً در پیش‌نمایش نمایش داده نمی‌شود.
  // provinceName?: string
  cityName?: string
  isSaving: boolean
  onBack: () => void
  onChange: (patch: Partial<EventWizardFormData>) => void
  onSaveDraft: () => void
}

export default function Step4FaqPreview({
  data,
  categoryName,
  // provinceName,
  cityName,
  isSaving,
  onBack,
  onChange,
  onSaveDraft,
}: Step4FaqPreviewProps) {
  let startsAtPreview = '—'
  let endsAtPreview = '—'

  try {
    if (data.startDate) {
      startsAtPreview = formatWizardDate(combineDateAndMinutes(data.startDate, data.startTime))
    }
    if (data.endDate) {
      endsAtPreview = formatWizardDate(combineDateAndMinutes(data.endDate, data.endTime))
    }
  } catch {
    // preview only
  }

  return (
    <WizardFormGrid>
      <WizardSectionTitle description={texts.events.previewSectionDescription}>{texts.events.previewEventTitle}</WizardSectionTitle>

      <WizardFormFullWidth>
        <CreateEventPreviewCard
          categoryName={categoryName}
          cityName={cityName}
          data={data}
          endsAt={endsAtPreview}
          startsAt={startsAtPreview}
        />
      </WizardFormFullWidth>

      <WizardFormFullWidth>
        <div className="rounded-2xl border border-fifth/20 bg-fifth/5 p-4">
          <p className="text-sm font-bold text-text-dark">{texts.events.readyToSave}</p>
          <ul className="mt-3 grid gap-2 text-xs text-text-muted sm:grid-cols-2">
            <li>✓ {texts.events.checklistIntroDone}</li>
            <li>✓ {texts.events.checklistScheduleDone}</li>
            <li>✓ {texts.events.checklistPricingDone}</li>
            <li>✓ {texts.events.checklistPosterDone}</li>
          </ul>
        </div>
      </WizardFormFullWidth>

      <WizardSectionTitle description={texts.events.faqSectionDescription}>{texts.events.faqs}</WizardSectionTitle>

      <WizardFormFullWidth>
        <FaqEditor
          items={data.faqs}
          onChange={(faqs) => {
            onChange({ faqs })
          }}
        />
      </WizardFormFullWidth>

      <WizardStepFooter
        isLoading={isSaving}
        primaryLabel={texts.events.saveDraft}
        primaryType="button"
        onBack={onBack}
        onPrimary={onSaveDraft}
      />
    </WizardFormGrid>
  )
}