'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

interface DeleteKbEntryButtonProps {
  entryId: string
  title: string
}

export default function DeleteKbEntryButton({ entryId, title }: DeleteKbEntryButtonProps) {
  const router = useRouter()
  const [confirming, setConfirming] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleDelete() {
    setDeleting(true)
    setError(null)
    try {
      const res = await fetch(`/api/knowledge/${entryId}`, { method: 'DELETE' })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? 'Failed to delete entry')
        setDeleting(false)
        setConfirming(false)
        return
      }
      router.push('/knowledge')
      router.refresh()
    } catch {
      setError('Network error — please try again')
      setDeleting(false)
      setConfirming(false)
    }
  }

  if (!confirming) {
    return (
      <button
        onClick={() => setConfirming(true)}
        className="rounded px-3 py-1.5 text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 dark:text-red-400 dark:border-red-400/30 dark:hover:bg-red-400/10 transition-colors"
      >
        Delete entry
      </button>
    )
  }

  return (
    <div className="flex items-center gap-3">
      <p className="text-sm text-zinc-700 dark:text-zinc-300">
        Delete <span className="font-medium">{title}</span>? This cannot be undone.
      </p>
      <button
        onClick={handleDelete}
        disabled={deleting}
        className="rounded px-3 py-1.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 transition-colors"
      >
        {deleting ? 'Deleting…' : 'Yes, delete'}
      </button>
      <button
        onClick={() => setConfirming(false)}
        disabled={deleting}
        className="rounded px-3 py-1.5 text-sm font-medium text-zinc-600 border border-zinc-200 hover:bg-zinc-50 dark:text-zinc-400 dark:border-zinc-700 dark:hover:bg-zinc-800 transition-colors"
      >
        Cancel
      </button>
      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
    </div>
  )
}