'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { useEscapeToClose } from '@/lib/hooks/use-escape-to-close';

interface Props {
  open: boolean;
  title: string;
  description: string;
  confirmLabel: string;
  onConfirm: (justification: string) => void;
  onCancel: () => void;
  isPending?: boolean;
}

export function ConfirmWithJustificationDialog({
  open,
  title,
  description,
  confirmLabel,
  onConfirm,
  onCancel,
  isPending,
}: Props) {
  const [text, setText] = useState('');
  useEscapeToClose(open, onCancel);
  if (!open) return null;
  const disabled = text.trim().length < 20 || !!isPending;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
        <h2 className="text-lg font-bold text-slate-900">{title}</h2>
        <p className="mt-1 text-sm text-slate-500">{description}</p>
        <label className="mt-4 block text-sm">
          <span className="font-medium text-slate-700">Justification</span>
          <textarea
            aria-label="Justification"
            value={text}
            onChange={(e) => setText(e.target.value)}
            className="mt-1 w-full rounded-md border border-slate-300 p-2 text-sm"
            rows={4}
            placeholder="≥ 20 characters — recorded in the audit log"
          />
        </label>
        <div className="mt-4 flex gap-2">
          <Button variant="outline" className="flex-1" onClick={onCancel}>
            Cancel
          </Button>
          <Button className="flex-1" disabled={disabled} onClick={() => onConfirm(text.trim())}>
            {isPending ? 'Working…' : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}