'use client'

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

type TranslationStatus = 'approved' | 'pending' | 'stale' | 'rejected' | null

type Props = {
  entryId: string
  targetLanguage: 'es'
  translationStatus: TranslationStatus
  currentTranslation: { title: string; bodyMarkdown: string } | null
}

export default function KbTranslationPanel({
  entryId,
  targetLanguage,
  translationStatus,
  currentTranslation,
}: Props) {
  const { t } = useI18n()
  const router = useRouter()
  const [generating, setGenerating] = useState(false)
  const [generateError, setGenerateError] = useState<string | null>(null)
  const [reviewing, setReviewing] = useState<'approve' | 'reject' | null>(null)
  const [reviewError, setReviewError] = useState<string | null>(null)
  const [editing, setEditing] = useState(false)
  const [editTitle, setEditTitle] = useState(currentTranslation?.title ?? '')
  const [editBody, setEditBody] = useState(currentTranslation?.bodyMarkdown ?? '')
  const [savingEdit, setSavingEdit] = useState(false)
  const [editError, setEditError] = useState<string | null>(null)

  async function handleGenerate() {
    setGenerating(true)
    setGenerateError(null)
    try {
      const res = await fetch(`/api/knowledge/${entryId}/translate/generate`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ language: targetLanguage }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => null) as { error?: string } | null
        setGenerateError(data?.error ?? t('knowledge.translation.generateError'))
      } else {
        router.refresh()
      }
    } catch {
      setGenerateError(t('knowledge.translation.generateError'))
    } finally {
      setGenerating(false)
    }
  }

  async function handleReview(action: 'approve' | 'reject') {
    setReviewing(action)
    setReviewError(null)
    try {
      const res = await fetch(`/api/knowledge/${entryId}/translate`, {
        method: 'PATCH',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ language: targetLanguage, action }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => null) as { error?: string } | null
        setReviewError(data?.error ?? t('knowledge.translation.reviewError'))
      } else {
        router.refresh()
      }
    } catch {
      setReviewError(t('knowledge.translation.reviewError'))
    } finally {
      setReviewing(null)
    }
  }

  async function handleSaveEdit() {
    setSavingEdit(true)
    setEditError(null)
    try {
      const res = await fetch(`/api/knowledge/${entryId}/translate`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ language: targetLanguage, title: editTitle, bodyMarkdown: editBody }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => null) as { error?: string } | null
        setEditError(data?.error ?? t('knowledge.translation.saveTranslationError'))
      } else {
        setEditing(false)
        router.refresh()
      }
    } catch {
      setEditError(t('knowledge.translation.saveTranslationError'))
    } finally {
      setSavingEdit(false)
    }
  }

  const statusBadge = translationStatus === 'approved'
    ? <span className="rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-400/10 dark:text-green-300">{t('knowledge.translation.statusApproved')}</span>
    : translationStatus === 'pending'
      ? <span className="rounded bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-400/10 dark:text-amber-200">{t('knowledge.translation.statusPending')}</span>
      : translationStatus === 'stale'
        ? <span className="rounded bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-800 dark:bg-orange-400/10 dark:text-orange-200">{t('knowledge.translation.statusStale')}</span>
        : null

  return (
    <section className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="mb-4 flex items-center justify-between gap-3">
        <h3 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('knowledge.translation.heading')}</h3>
        {statusBadge}
      </div>

      {!translationStatus || translationStatus === 'rejected' ? (
        <div className="space-y-3">
          <p className="text-sm text-zinc-600 dark:text-zinc-400">{t('knowledge.translation.noTranslation')}</p>
          <button
            type="button"
            onClick={handleGenerate}
            disabled={generating}
            className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
          >
            {generating ? t('knowledge.translation.generating') : t('knowledge.translation.generate')}
          </button>
          {generateError ? <p className="text-sm text-red-700 dark:text-red-300">{generateError}</p> : null}
        </div>
      ) : null}

      {translationStatus === 'pending' && currentTranslation ? (
        <div className="space-y-4">
          <div className="rounded-md bg-zinc-50 p-3 dark:bg-zinc-800/60">
            <p className="mb-1 text-xs font-medium text-zinc-500 dark:text-zinc-400">Title</p>
            <p className="text-sm text-zinc-950 dark:text-zinc-100">{currentTranslation.title}</p>
            <p className="mb-1 mt-3 text-xs font-medium text-zinc-500 dark:text-zinc-400">Body</p>
            <pre className="whitespace-pre-wrap font-mono text-xs text-zinc-700 dark:text-zinc-300">{currentTranslation.bodyMarkdown}</pre>
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => handleReview('approve')}
              disabled={reviewing !== null}
              className="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-green-700 disabled:opacity-50"
            >
              {reviewing === 'approve' ? t('knowledge.translation.approving') : t('knowledge.translation.approve')}
            </button>
            <button
              type="button"
              onClick={() => handleReview('reject')}
              disabled={reviewing !== null}
              className="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
            >
              {reviewing === 'reject' ? t('knowledge.translation.rejecting') : t('knowledge.translation.reject')}
            </button>
          </div>
          {reviewError ? <p className="text-sm text-red-700 dark:text-red-300">{reviewError}</p> : null}
        </div>
      ) : null}

      {(translationStatus === 'approved' || translationStatus === 'stale') && currentTranslation ? (
        <div className="space-y-3">
          {translationStatus === 'stale' ? (
            <div className="flex gap-2">
              <button
                type="button"
                onClick={handleGenerate}
                disabled={generating}
                className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
              >
                {generating ? t('knowledge.translation.generating') : t('knowledge.translation.generate')}
              </button>
              {generateError ? <p className="text-sm text-red-700 dark:text-red-300">{generateError}</p> : null}
            </div>
          ) : null}

          {!editing ? (
            <button
              type="button"
              onClick={() => {
                setEditTitle(currentTranslation.title)
                setEditBody(currentTranslation.bodyMarkdown)
                setEditing(true)
              }}
              className="text-sm font-medium text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
            >
              {t('knowledge.translation.editTranslation')}
            </button>
          ) : (
            <div className="space-y-3">
              <p className="text-xs text-zinc-500 dark:text-zinc-400">{t('knowledge.translation.canonicalNote')}</p>
              <div className="space-y-2">
                <label className="block text-xs font-medium text-zinc-600 dark:text-zinc-400">Title</label>
                <TextField
                  value={editTitle}
                  onChange={(e) => setEditTitle(e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <label className="block text-xs font-medium text-zinc-600 dark:text-zinc-400">Body</label>
                <TextareaField
                  value={editBody}
                  onChange={(e) => setEditBody(e.target.value)}
                  className="min-h-[240px] font-mono text-sm"
                />
              </div>
              <div className="flex gap-2">
                <PrimaryButton type="button" loading={savingEdit} onClick={handleSaveEdit}>
                  {savingEdit ? t('knowledge.translation.savingTranslation') : t('knowledge.translation.saveTranslation')}
                </PrimaryButton>
                <button
                  type="button"
                  onClick={() => setEditing(false)}
                  className="text-sm text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
                >
                  Cancel
                </button>
              </div>
              {editError ? <p className="text-sm text-red-700 dark:text-red-300">{editError}</p> : null}
            </div>
          )}
        </div>
      ) : null}
    </section>
  )
}