'use client'

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

export type KnowledgeProposal = {
  id: string
  title: string
  slug: string
  bodyMarkdown: string
  createdAt: string
}

export default function ProposalReviewPanel({ proposals }: { proposals: KnowledgeProposal[] }) {
  const { t } = useI18n()
  const router = useRouter()
  const [busyId, setBusyId] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  async function reviewProposal(id: string, action: 'accept' | 'dismiss') {
    setBusyId(id)
    setError(null)

    const response = await fetch(`/api/knowledge/proposals/${id}`, {
      method: 'PATCH',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ action }),
    })

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

    router.refresh()
  }

  if (proposals.length === 0) return null

  return (
    <section className="rounded-lg border border-amber-300 bg-amber-50 p-5 dark:border-amber-400/40 dark:bg-amber-300/10">
      <div>
        <h2 className="text-sm font-semibold text-amber-950 dark:text-amber-100">{t('knowledge.proposals.heading')}</h2>
        <p className="mt-1 text-sm text-amber-900 dark:text-amber-100/80">
          {t('knowledge.proposals.intro')}
        </p>
      </div>
      {error ? <p className="mt-3 text-sm text-red-700 dark:text-red-300">{error}</p> : null}
      <ul className="mt-4 space-y-3">
        {proposals.map((proposal) => (
          <li key={proposal.id} className="rounded border border-amber-200 bg-white p-4 dark:border-amber-400/30 dark:bg-zinc-950">
            <h3 className="text-sm font-semibold text-zinc-950 dark:text-white">{proposal.title}</h3>
            <p className="mt-1 break-all font-mono text-xs text-zinc-600 dark:text-zinc-400">{proposal.slug}</p>
            <p className="mt-2 line-clamp-3 whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-300">
              {proposal.bodyMarkdown}
            </p>
            <div className="mt-3 flex gap-2">
              <PrimaryButton
                type="button"
                disabled={busyId === proposal.id}
                onClick={() => reviewProposal(proposal.id, 'accept')}
                className="rounded px-3 py-1.5 text-xs"
              >
                {t('knowledge.proposals.accept')}
              </PrimaryButton>
              <button
                type="button"
                disabled={busyId === proposal.id}
                onClick={() => reviewProposal(proposal.id, 'dismiss')}
                className="rounded border border-zinc-300 px-3 py-1.5 text-xs font-semibold text-zinc-800 hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
              >
                {t('knowledge.proposals.dismiss')}
              </button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}