import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import type { CouncilRankRecommendation } from "@/components/admin/review/evaluationCategoryRecommendation";
import { renderMinhChungKhoSummary } from "@/components/admin/review/AdminApproveReviewDialog";

export type AdminRejectReviewDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  docxCompletenessGaps: string[];
  /** Cùng khối « Minh chứng (kho) » như hộp thoại duyệt. */
  evidenceSummary?: CouncilRankRecommendation | null;
  onConfirm: (feedback: string) => void | Promise<void>;
};

export function AdminRejectReviewDialog({
  open,
  onOpenChange,
  docxCompletenessGaps,
  evidenceSummary,
  onConfirm,
}: AdminRejectReviewDialogProps) {
  const [busy, setBusy] = useState(false);
  const [feedback, setFeedback] = useState("");

  const handleConfirm = async () => {
    if (busy) return;
    setBusy(true);
    try {
      await onConfirm(feedback.trim());
      setFeedback("");
      onOpenChange(false);
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        if (!v) setFeedback("");
        onOpenChange(v);
      }}
    >
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Từ chối hồ sơ</DialogTitle>
        </DialogHeader>
        <div className="space-y-3">
          {evidenceSummary ? (
            <div className="rounded-md border border-border bg-muted/20 p-3 text-sm">
              <p className="font-medium text-foreground">Minh chứng (kho)</p>
              {renderMinhChungKhoSummary(evidenceSummary)}
            </div>
          ) : null}
          {docxCompletenessGaps.length > 0 ? (
            <Alert>
              <AlertTitle>Gợi ý lý do (từ kiểm tra tự động)</AlertTitle>
              <AlertDescription>
                <ul className="list-disc pl-4 mt-2 space-y-1 text-sm">
                  {docxCompletenessGaps.map((g) => (
                    <li key={g}>{g}</li>
                  ))}
                </ul>
              </AlertDescription>
            </Alert>
          ) : null}
          <div>
            <Label htmlFor="reject-feedback">Phản hồi cho ứng viên (tùy chọn)</Label>
            <Textarea
              id="reject-feedback"
              className="mt-1.5 min-h-[100px]"
              placeholder="Nhập lý do từ chối hoặc yêu cầu bổ sung…"
              value={feedback}
              onChange={(e) => setFeedback(e.target.value)}
            />
          </div>
        </div>
        <DialogFooter className="gap-2 sm:gap-0">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
            Hủy
          </Button>
          <Button
            type="button"
            variant="destructive"
            onClick={() => void handleConfirm()}
            disabled={busy}
          >
            {busy ? "Đang lưu…" : "Xác nhận từ chối"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
