import { useState, type ReactElement } from "react";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import type {
  CouncilRankRecommendation,
  RequiredSlotEvidenceStatusLabel,
} from "@/components/admin/review/evaluationCategoryRecommendation";

function reviewStatusTextClass(label: RequiredSlotEvidenceStatusLabel): string {
  if (label === "Đạt") return "text-green-600 dark:text-green-400 font-medium";
  if (label === "Không đạt" || label === "Chưa có tệp trên kho") {
    return "text-red-600 dark:text-red-400 font-medium";
  }
  return "text-muted-foreground font-medium";
}

function cannotConfirmApproveFromEvidence(status: RequiredSlotEvidenceStatusLabel): boolean {
  return (
    status === "Chưa có tệp trên kho" ||
    status === "Không đạt" ||
    status === "Chưa xác định loại minh chứng" ||
    status === "Đang tải trạng thái kho…" ||
    status === "Chưa tải được kho"
  );
}

export function renderMinhChungKhoSummary(
  recommendation: CouncilRankRecommendation,
): ReactElement {
  return (
    <dl className="mt-2 text-xs space-y-1">
      <div>
        <dt className="text-muted-foreground inline">Loại minh chứng (theo Đơn): </dt>
        <dd className="inline text-foreground">{recommendation.evidencePathLabel}</dd>
      </div>
      <div>
        <dt className="text-muted-foreground inline">Trạng thái thẩm định kho (đã phê duyệt / đã từ chối): </dt>
        <dd className={`inline ${reviewStatusTextClass(recommendation.requiredSlotEvidenceStatusLabel)}`}>
          {recommendation.requiredSlotEvidenceStatusLabel}
        </dd>
      </div>
    </dl>
  );
}

export type AdminApproveReviewDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  docxCompletenessGaps: string[];
  recommendation: CouncilRankRecommendation;
  onConfirm: () => void | Promise<void>;
};

export function AdminApproveReviewDialog({
  open,
  onOpenChange,
  docxCompletenessGaps,
  recommendation,
  onConfirm,
}: AdminApproveReviewDialogProps) {
  const [busy, setBusy] = useState(false);

  const approveBlocked = cannotConfirmApproveFromEvidence(recommendation.requiredSlotEvidenceStatusLabel);

  const handleConfirm = async () => {
    if (busy || approveBlocked) return;
    setBusy(true);
    try {
      await onConfirm();
      onOpenChange(false);
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Xác nhận duyệt hồ sơ</DialogTitle>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div className="rounded-md border border-border bg-muted/20 p-3">
            <p className="font-medium text-foreground">Gợi ý hạng (tham khảo)</p>
            <p className="text-muted-foreground mt-1">
              <span className="font-semibold text-foreground">{recommendation.rank}</span>
              {" — "}
              {recommendation.detail}
            </p>
            {renderMinhChungKhoSummary(recommendation)}
          </div>
          {docxCompletenessGaps.length > 0 ? (
            <Alert variant="destructive">
              <AlertTitle>Cảnh báo trước khi duyệt</AlertTitle>
              <AlertDescription>
                <ul className="list-disc pl-4 mt-2 space-y-1">
                  {docxCompletenessGaps.map((g) => (
                    <li key={g}>{g}</li>
                  ))}
                </ul>
              </AlertDescription>
            </Alert>
          ) : (
            <p className="text-muted-foreground">Không phát hiện thiếu sót cơ bản theo Đơn và kho minh chứng.</p>
          )}
        </div>
        <DialogFooter className="gap-2 sm:gap-0">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
            Hủy
          </Button>
          <Button
            type="button"
            onClick={() => void handleConfirm()}
            disabled={busy || approveBlocked}
            title={
              approveBlocked
                ? "Không thể duyệt: minh chứng kho chưa đủ điều kiện (trống, chưa phân loại, từ chối trên kho hoặc chưa tải được trạng thái)."
                : undefined
            }
          >
            {busy ? "Đang lưu…" : "Xác nhận duyệt"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
