'use client'

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

export default function ExpertReplyForm({ ticketId }: { ticketId: string }) {
  const { t } = useI18n()
  const router = useRouter()
  const [text, setText] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const trimmed = text.trim()
    if (trimmed.length < 5) {
      setError(t('ticketDetail.expertReplyForm.minWords'))
      return
    }
    setLoading(true)
    setError(null)
    try {
      const res = await fetch(`/api/tickets/${ticketId}/reply`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ responseText: trimmed }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError((data as { error?: string }).error ?? t('ticketDetail.expertReplyForm.error'))
        return
      }
      setText('')
      router.refresh()
    } catch {
      setError(t('ticketDetail.expertReplyForm.generic'))
    } finally {
      setLoading(false)
    }
  }

  return (
    <section className="rounded-lg border border-sky-200 bg-sky-50 p-5 dark:border-sky-400/30 dark:bg-sky-400/10">
      <h2 className="mb-1 text-sm font-semibold text-sky-950 dark:text-sky-100">
        {t('ticketDetail.expertReplyForm.heading')}
      </h2>
      <p className="mb-4 text-sm text-sky-800 dark:text-sky-200">
        {t('ticketDetail.expertReplyForm.body')}
      </p>
      <form onSubmit={handleSubmit} className="space-y-3">
        <TextareaField
          value={text}
          onChange={(e) => setText(e.target.value)}
          rows={4}
          required
          placeholder={t('ticketDetail.expertReplyForm.placeholder')}
          className="border-sky-300 focus:border-sky-700 focus:ring-sky-700/20 dark:border-sky-500/40"
        />
        {error ? <p className="text-sm text-red-700 dark:text-red-300">{error}</p> : null}
        <PrimaryButton
          type="submit"
          loading={loading}
          disabled={text.trim().length < 5}
        >
          {loading ? t('ticketDetail.expertReplyForm.sending') : t('ticketDetail.expertReplyForm.send')}
        </PrimaryButton>
      </form>
    </section>
  )
}