'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';

export function AdminConfirmAction({
  endpoint,
  body,
  title,
  description,
  confirmLabel = 'Confirm',
  danger = false,
}: {
  endpoint: string;
  body: Record<string, unknown>;
  title: string;
  description: string;
  confirmLabel?: string;
  danger?: boolean;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [reason, setReason] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const needsReason = 'reason' in body || body.requireReason === true;

  async function submit() {
    setBusy(true); setError(null);
    try {
      const payload = {
        ...body,
        reason: needsReason ? reason : body.reason,
        confirm: true as const,
      };
      delete (payload as { requireReason?: boolean }).requireReason;
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Action failed.');
      setOpen(false);
      setReason('');
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <Button variant={danger ? 'danger' : 'outline'} size="sm" onClick={() => setOpen(true)}>
        {title}
      </Button>
      {open && (
        <div className="fixed inset-0 z-50 flex items-end justify-center bg-navy/45 p-0 sm:items-center sm:p-4" role="dialog" aria-modal aria-labelledby="admin-confirm-title">
          <div className="w-full max-w-md rounded-t-[var(--radius-lg)] border border-border bg-card p-4 text-navy shadow-[var(--shadow-lg)] sm:rounded-[var(--radius-lg)]">
            <h2 id="admin-confirm-title" className="text-lg font-extrabold">{title}</h2>
            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
            {needsReason && (
              <label className="mt-3 block text-sm font-semibold">
                Reason
                <textarea
                  className="mt-1 min-h-24 w-full rounded-[var(--radius-md)] border border-border px-3 py-2 text-sm"
                  value={reason}
                  onChange={e => setReason(e.target.value)}
                  required
                  minLength={5}
                />
              </label>
            )}
            {error && <p className="mt-2 text-sm text-danger" role="alert">{error}</p>}
            <div className="mt-4 flex gap-2">
              <Button variant="outline" className="flex-1" onClick={() => setOpen(false)} disabled={busy}>Cancel</Button>
              <Button
                variant={danger ? 'danger' : 'default'}
                className="flex-1"
                loading={busy}
                disabled={needsReason && reason.trim().length < 5}
                onClick={() => void submit()}
              >
                {confirmLabel}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}