'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { useI18n } from '@/lib/i18n/client'

export default function DraftResponseButton({ ticketId, label }: { ticketId: string; label?: string }) {
  const { t } = useI18n()
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function requestDraft() {
    setLoading(true)
    setError(null)
    const response = await fetch(`/api/tickets/${ticketId}/draft`, { method: 'POST' })
    setLoading(false)

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

    router.refresh()
  }

  return (
    <div>
      <button
        type="button"
        onClick={requestDraft}
        disabled={loading}
        className="rounded-md px-3 py-1.5 text-xs font-medium text-zinc-500 border border-zinc-200 transition hover:border-zinc-400 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
      >
        {loading ? t('ticketDetail.draftButton.generating') : (label ?? t('ticketDetail.draftButton.generate'))}
      </button>
      {error ? <p className="mt-1 text-xs text-red-700 dark:text-red-300">{error}</p> : null}
    </div>
  )
}