'use client'

import { useEffect } from 'react'

import CreateEventPreviewCard from '@/components/events/create/CreateEventPreviewCard'
import FaqEditor from '@/components/events/create/FaqEditor'
import {
  combineDateAndMinutes,
  formatWizardDate,
  type EventWizardEditLocks,
  type EventWizardFormData,
} from '@/components/events/create/consumer/types'

interface Step4FaqPreviewProps {
  data: EventWizardFormData
  categoryName?: string
  // استان فعلاً در پیش‌نمایش نمایش داده نمی‌شود.
  // provinceName?: string
  cityName?: string
  /** Present in edit mode; FAQs stay editable regardless of locks. */
  locks?: EventWizardEditLocks
  onBindSubmit: (submit: (() => void) | null) => void
  onChange: (patch: Partial<EventWizardFormData>) => void
  onSaveDraft: () => void
}

export default function Step4FaqPreview({
  data,
  categoryName,
  // provinceName,
  cityName,
  onBindSubmit,
  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
  }

  useEffect(() => {
    onBindSubmit(onSaveDraft)

    return () => {
      onBindSubmit(null)
    }
  }, [onBindSubmit, onSaveDraft])

  return (
    <>
      <div className="consumer-surface flex flex-col gap-4 p-4">
        <CreateEventPreviewCard
          categoryName={categoryName}
          cityName={cityName}
          data={data}
          endsAt={endsAtPreview}
          startsAt={startsAtPreview}
        />
      </div>
      <div className="consumer-surface flex flex-col gap-4 p-4 mt-2">
        <FaqEditor
          items={data.faqs}
          onChange={(faqs) => {
            onChange({ faqs })
          }}
        />
      </div>
    </>
  )
}