'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { FieldGroup, FieldLabel, PrimaryButton, TextareaField } from '@/app/FormFields'
import { useI18n } from '@/lib/i18n/client'

export default function ClarificationForm({
  ticketId,
  questions,
}: {
  ticketId: string
  questions: string[]
}) {
  const { t } = useI18n()
  const [answers, setAnswers] = useState<string[]>(() => questions.map(() => ''))
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

  function setAnswer(index: number, value: string) {
    setAnswers((prev) => prev.map((a, i) => (i === index ? value : a)))
  }

  const allAnswered = answers.every((a) => a.trim().length > 0)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!allAnswered) return
    setLoading(true)
    setError(null)

    const submissionText = questions
      .map((q, i) => `${i + 1}. ${q}\n\n${answers[i].trim()}`)
      .join('\n\n---\n\n')

    const res = await fetch(`/api/tickets/${ticketId}/messages`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ submissionText }),
    })

    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? t('ticketDetail.clarificationForm.error'))
      setLoading(false)
      return
    }

    router.refresh()
  }

  return (
    <div className="rounded-lg border border-amber-300 bg-amber-50 p-6 dark:border-amber-400/40 dark:bg-amber-300/10">
      <h2 className="text-sm font-semibold text-amber-950 mb-3 dark:text-amber-100">
        {t('ticketDetail.clarificationForm.heading')}
      </h2>
      <form onSubmit={handleSubmit} className="space-y-5">
        {questions.map((q, i) => (
          <FieldGroup key={i}>
            <FieldLabel htmlFor={`clarification-answer-${i}`} className="text-amber-900 dark:text-amber-100/90">
              <span className="font-semibold">{i + 1}.</span> {q}
            </FieldLabel>
            <TextareaField
              id={`clarification-answer-${i}`}
              value={answers[i]}
              onChange={(e) => setAnswer(i, e.target.value)}
              rows={9}
              required
              className="border-amber-400 focus:border-amber-500 focus:ring-amber-500/15 dark:border-amber-400/60 dark:focus:border-amber-300 dark:focus:ring-amber-300/15"
              placeholder={t('submit.answerPlaceholder')}
            />
          </FieldGroup>
        ))}
        {error && <p className="text-xs text-red-700 dark:text-red-300">{error}</p>}
        <PrimaryButton
          type="submit"
          loading={loading}
          disabled={!allAnswered}
          className="w-full"
        >
          {loading ? t('ticketDetail.clarificationForm.submitting') : t('ticketDetail.clarificationForm.submitButton')}
        </PrimaryButton>
      </form>
    </div>
  )
}