'use client'

import { useState, useEffect, useRef, type FormEvent } from 'react'
import { useRouter } from 'next/navigation'
import {
  FieldGrid,
  FieldGroup,
  FieldLabel,
  LabelWithTooltip,
  PrimaryButton,
  SecondaryButton,
  SelectField,
  TextareaField,
} from '@/app/FormFields'
import { useI18n } from '@/lib/i18n/client'
import { getConfigOptionLabel } from '@/lib/config-option-labels'
import type { SupportedLanguage } from '@/lib/user-language'

type PreviewState =
  | { stage: 'idle' }
  | { stage: 'generating' }
  | { stage: 'ready'; translatedBody: string; sourceText: string; submitterLanguage: SupportedLanguage }
  | { stage: 'stale'; translatedBody: string; submitterLanguage: SupportedLanguage }
  | { stage: 'error'; message: string }

export default function ExpertResponseForm({
  ticketId,
  initialDraft,
  severityOptions,
  concernOptions,
  submitterLanguage,
}: {
  ticketId: string
  initialDraft?: string | null
  severityOptions: string[]
  concernOptions: string[]
  submitterLanguage?: SupportedLanguage
}) {
  const { language, t } = useI18n()
  const router = useRouter()
  const originalDraft = initialDraft?.trim() ?? ''
  const [responseText, setResponseText] = useState(initialDraft ?? '')
  const [severity, setSeverity] = useState('')
  const [concerns, setConcerns] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [preview, setPreview] = useState<PreviewState>({ stage: 'idle' })
  const [translatedBodyEdited, setTranslatedBodyEdited] = useState('')
  const [showAiDraftConfirm, setShowAiDraftConfirm] = useState(false)
  const prevResponseTextRef = useRef(initialDraft ?? '')

  // Mark translation as stale when the expert edits the response text after a preview is ready
  useEffect(() => {
    if (
      preview.stage === 'ready' &&
      responseText !== prevResponseTextRef.current &&
      responseText !== preview.sourceText
    ) {
      setPreview({ stage: 'stale', translatedBody: preview.translatedBody, submitterLanguage: preview.submitterLanguage })
    }
    prevResponseTextRef.current = responseText
  }, [responseText, preview])

  const needsTranslation = Boolean(submitterLanguage && submitterLanguage !== language)
  const draftMatchesResponse = Boolean(originalDraft) && responseText.trim() === originalDraft

  const canSubmit = responseText.trim().length >= 10 && severity !== '' && concerns !== ''

  async function generatePreview() {
    setPreview({ stage: 'generating' })
    try {
      const res = await fetch(`/api/tickets/${ticketId}/respond/preview`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ responseText }),
      })
      const data = await res.json().catch(() => null) as {
        sameLanguage?: boolean
        translatedBody?: string
        submitterLanguage?: string
        error?: string
      } | null

      if (!res.ok || !data) {
        setPreview({ stage: 'error', message: data?.error ?? t('ticketDetail.expertResponseForm.translationError') })
        return
      }

      if (data.sameLanguage) {
        // Languages match — just submit directly
        setPreview({ stage: 'idle' })
        return
      }

      const sl = (data.submitterLanguage ?? submitterLanguage ?? 'es') as SupportedLanguage
      setTranslatedBodyEdited(data.translatedBody ?? '')
      setPreview({ stage: 'ready', translatedBody: data.translatedBody ?? '', sourceText: responseText, submitterLanguage: sl })
    } catch {
      setPreview({ stage: 'error', message: t('ticketDetail.expertResponseForm.translationError') })
    }
  }

  async function sendResponse(acceptsAiDraft: boolean) {
    setLoading(true)
    setError(null)

    const hasReviewedTranslation = preview.stage === 'ready' || preview.stage === 'stale'
    const translatedBody = hasReviewedTranslation ? translatedBodyEdited.trim() : null
    const previewSubmitterLang = (preview.stage === 'ready' || preview.stage === 'stale')
      ? preview.submitterLanguage
      : null

    const response = await fetch(`/api/tickets/${ticketId}/respond`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        responseText,
        resolutionSeverity: severity,
        resolutionConcerns: concerns,
        ...(acceptsAiDraft ? { acceptsAiDraft: true } : {}),
        ...(translatedBody && previewSubmitterLang
          ? { translatedBody, submitterLanguage: previewSubmitterLang }
          : {}),
      }),
    })

    setLoading(false)
    if (!response.ok) {
      const payload = await response.json().catch(() => ({})) as { error?: string }
      setError(payload.error ?? t('ticketDetail.expertResponseForm.error'))
      return
    }

    router.refresh()
  }

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(null)

    if (draftMatchesResponse) {
      setShowAiDraftConfirm(true)
      return
    }

    await sendResponse(false)
  }

  const showTranslationPanel = needsTranslation && (
    preview.stage === 'generating' ||
    preview.stage === 'ready' ||
    preview.stage === 'stale' ||
    preview.stage === 'error'
  )

  return (
    <>
      <form
        onSubmit={submit}
        className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900 space-y-4"
      >
      <FieldGroup>
        <FieldLabel htmlFor="expert-response" required>{t('ticketDetail.expertResponseForm.responseLabel')}</FieldLabel>
        <TextareaField
          id="expert-response"
          value={responseText}
          onChange={(event) => setResponseText(event.target.value)}
          className="min-h-[220px]"
        />
      </FieldGroup>

      <FieldGrid>
        <FieldGroup>
          <LabelWithTooltip
            htmlFor="resolution-severity"
            required
            tooltipId="resolution-severity-help"
            tooltipText={t('ticketDetail.expertResponseForm.severityTooltip')}
          >
            {t('ticketDetail.expertResponseForm.severity')}
          </LabelWithTooltip>
          <SelectField
            id="resolution-severity"
            value={severity}
            onChange={(e) => setSeverity(e.target.value)}
            placeholderValue=""
            aria-describedby="resolution-severity-help"
          >
            <option value="">{t('ticketDetail.expertResponseForm.selectSeverity')}</option>
            {severityOptions.map((opt) => (
              <option key={opt} value={opt}>{getConfigOptionLabel(opt, language)}</option>
            ))}
          </SelectField>
        </FieldGroup>
        <FieldGroup>
          <LabelWithTooltip
            htmlFor="resolution-concerns"
            required
            tooltipId="resolution-concerns-help"
            tooltipText={t('ticketDetail.expertResponseForm.concernTooltip')}
          >
            {t('ticketDetail.expertResponseForm.concernType')}
          </LabelWithTooltip>
          <SelectField
            id="resolution-concerns"
            value={concerns}
            onChange={(e) => setConcerns(e.target.value)}
            placeholderValue=""
            aria-describedby="resolution-concerns-help"
          >
            <option value="">{t('ticketDetail.expertResponseForm.selectConcern')}</option>
            {concernOptions.map((opt) => (
              <option key={opt} value={opt}>{getConfigOptionLabel(opt, language)}</option>
            ))}
          </SelectField>
        </FieldGroup>
      </FieldGrid>

      {showTranslationPanel ? (
        <div className="rounded-md border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20 space-y-3">
          <div className="flex items-center justify-between gap-3">
            <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-200">
              {t('ticketDetail.expertResponseForm.translationPreviewHeading')}
            </h3>
            {(preview.stage === 'ready' || preview.stage === 'stale') ? (
              <button
                type="button"
                onClick={generatePreview}
                className="text-xs font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200"
              >
                {t('ticketDetail.expertResponseForm.regenerateTranslation')}
              </button>
            ) : null}
          </div>

          {preview.stage === 'generating' ? (
            <p className="text-sm text-blue-700 dark:text-blue-300">{t('ticketDetail.expertResponseForm.translationGenerating')}</p>
          ) : null}

          {preview.stage === 'stale' ? (
            <p className="text-sm text-amber-700 dark:text-amber-300">{t('ticketDetail.expertResponseForm.translationStaleWarning')}</p>
          ) : null}

          {preview.stage === 'error' ? (
            <p className="text-sm text-red-700 dark:text-red-300">{preview.message}</p>
          ) : null}

          {(preview.stage === 'ready' || preview.stage === 'stale') ? (
            <div className="space-y-2">
              <p className="text-xs text-blue-700 dark:text-blue-400">
                {t('ticketDetail.expertResponseForm.translationPreviewNote')}
              </p>
              <TextareaField
                value={translatedBodyEdited}
                onChange={(e) => setTranslatedBodyEdited(e.target.value)}
                className="min-h-[160px] text-sm"
              />
            </div>
          ) : null}
        </div>
      ) : null}

      {error ? <p className="text-sm text-red-700 dark:text-red-300">{error}</p> : null}

      <div className="flex items-center gap-3">
        {needsTranslation && preview.stage === 'idle' && canSubmit ? (
          <button
            type="button"
            onClick={generatePreview}
            className="rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
          >
            {t('ticketDetail.expertResponseForm.sendWithTranslation')}
          </button>
        ) : null}

          <PrimaryButton
            type="submit"
            loading={loading}
            disabled={!canSubmit || preview.stage === 'generating' || preview.stage === 'stale'}
          >
            {loading ? t('ticketDetail.expertResponseForm.sending') : t('ticketDetail.expertResponseForm.send')}
          </PrimaryButton>
        </div>
      </form>

      {showAiDraftConfirm ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="ai-draft-confirm-title"
            className="w-full max-w-md rounded-lg border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
          >
            <h2 id="ai-draft-confirm-title" className="text-base font-semibold text-zinc-950 dark:text-white">
              {t('ticketDetail.expertResponseForm.confirmAiDraftTitle')}
            </h2>
            <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
              {t('ticketDetail.expertResponseForm.confirmAiDraft')}
            </p>
            <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
              <SecondaryButton
                type="button"
                disabled={loading}
                onClick={() => setShowAiDraftConfirm(false)}
              >
                {t('ticketDetail.expertResponseForm.confirmAiDraftCancel')}
              </SecondaryButton>
              <PrimaryButton
                type="button"
                loading={loading}
                onClick={() => {
                  setShowAiDraftConfirm(false)
                  void sendResponse(true)
                }}
              >
                {t('ticketDetail.expertResponseForm.confirmAiDraftSend')}
              </PrimaryButton>
            </div>
          </div>
        </div>
      ) : null}
    </>
  )
}