import { useState } from 'react';
import { ShieldCheck, Loader2 } from 'lucide-react';

import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Label,
  Textarea,
} from '@ump/shared';

import { canPublish, integrityIssues, type Paper } from '../domain/paperModel';

/**
 * INV-1 human-approval gate. A paper can only become `published` by the owner clicking through
 * this explicit confirmation; the action is disabled while the integrity gate (INV-3) is unmet.
 */
export function PublishGateDialog({
  paper,
  open,
  onOpenChange,
  onConfirm,
  publishing,
}: {
  paper: Paper;
  open: boolean;
  onOpenChange: (v: boolean) => void;
  onConfirm: (note: string) => void;
  publishing: boolean;
}) {
  const [note, setNote] = useState('');
  const issues = integrityIssues(paper);
  const ready = canPublish(paper);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <ShieldCheck className="h-5 w-5 text-primary" />
            Phê duyệt &amp; xuất bản bài báo
          </DialogTitle>
          <DialogDescription>
            Đây là bước phê duyệt của con người (INV-1). Hệ thống không tự xuất bản — bạn chịu trách
            nhiệm về nội dung được công bố.
          </DialogDescription>
        </DialogHeader>

        {ready ? (
          <div className="space-y-3">
            <div className="rounded-md bg-emerald-50 p-3 text-sm text-emerald-700">
              Bài báo đã đạt cổng kiểm soát tính toàn vẹn. Xác nhận để công bố.
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="approval-note">Ghi chú phê duyệt (tuỳ chọn)</Label>
              <Textarea
                id="approval-note"
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder="Ví dụ: Đã rà soát nguồn và số liệu."
                rows={3}
              />
            </div>
          </div>
        ) : (
          <div className="space-y-2">
            <p className="text-sm text-muted-foreground">
              Chưa thể xuất bản — vui lòng xử lý các vấn đề sau:
            </p>
            <ul className="list-disc space-y-1 pl-5 text-sm text-amber-700">
              {issues.map((m) => (
                <li key={m}>{m}</li>
              ))}
            </ul>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={publishing}>
            Huỷ
          </Button>
          <Button onClick={() => onConfirm(note)} disabled={!ready || publishing}>
            {publishing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
            Phê duyệt &amp; Xuất bản
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
