"use client";

/**
 * 검사 모달 컴포넌트
 *
 * 카드 하단 "검사" 행 클릭 시 열리는 모달.
 * - 검사 항목 목록 (item_inspection_info 기반)
 * - 각 항목별 측정값 입력 + 합불 판정
 * - 종합 판정 + 비고
 * - 검사 완료 버튼
 */

import React, { useState, useEffect, useCallback } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Loader2, CheckCircle2, XCircle, AlertCircle, ClipboardList } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";

// ===== 타입 =====

interface InspectionInfoItem {
  id: string;
  item_id: string;
  item_code: string;
  item_name: string;
  inspection_type: string;
  inspection_item_name: string;
  inspection_standard: string;
  pass_criteria: string;
  is_required: string;
  sort_order: string;
  memo: string;
}

interface InspectionResultItem {
  inspectionInfoId: string;
  inspectionItemName: string;
  inspectionStandard: string;
  passCriteria: string;
  isRequired: string;
  measuredValue: string;
  judgment: "pass" | "fail" | "";
}

interface InspectionModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** 카드 행 데이터 */
  rowData: Record<string, unknown>;
  /** 품목 코드 (item_inspection_info 조회용) */
  itemCode?: string;
  /** 품목명 */
  itemName?: string;
  /** 참조 ID (검사 결과 저장 key) */
  referenceId?: string;
  /** 참조 테이블 */
  referenceTable?: string;
  /** 화면 ID */
  screenId?: string;
  /** 검사 유형 필터 */
  inspectionType?: string;
  /** 저장 완료 콜백 */
  onSaved?: (overallJudgment: "pass" | "fail") => void;
}

// ===== 판정 배지 =====

function JudgmentBadge({ judgment }: { judgment: "pass" | "fail" | "" }) {
  if (!judgment) return null;
  return judgment === "pass" ? (
    <Badge className="bg-green-600 text-white hover:bg-green-700">합격</Badge>
  ) : (
    <Badge className="bg-red-600 text-white hover:bg-red-700">불합격</Badge>
  );
}

// ===== 메인 컴포넌트 =====

export function InspectionModal({
  open,
  onOpenChange,
  rowData,
  itemCode,
  itemName,
  referenceId,
  referenceTable,
  screenId,
  inspectionType,
  onSaved,
}: InspectionModalProps) {
  const [infoItems, setInfoItems] = useState<InspectionInfoItem[]>([]);
  const [resultItems, setResultItems] = useState<InspectionResultItem[]>([]);
  const [overallJudgment, setOverallJudgment] = useState<"pass" | "fail" | "">("");
  const [memo, setMemo] = useState("");
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 검사 항목 + 기존 결과 로드
  const loadData = useCallback(async () => {
    if (!open) return;
    setLoading(true);
    setError(null);

    try {
      // 검사 기준 조회
      const params = new URLSearchParams();
      if (itemCode) params.set("itemCode", itemCode);
      if (inspectionType) params.set("inspectionType", inspectionType);

      const infoRes = await apiClient.get<{ success: boolean; data: InspectionInfoItem[] }>(
        `/pop/inspection-result/info?${params.toString()}`
      );
      const infoData = infoRes.data?.data || [];
      setInfoItems(infoData);

      // 기존 결과 조회
      let existingMap: Record<string, { measuredValue: string; judgment: "pass" | "fail" | "" }> = {};
      if (referenceId && referenceTable) {
        const resultParams = new URLSearchParams({
          referenceId,
          referenceTable,
        });
        if (screenId) resultParams.set("screenId", screenId);

        const resultRes = await apiClient.get<{
          success: boolean;
          data: Array<{
            inspection_info_id: string;
            measured_value: string;
            judgment: string;
            overall_judgment: string;
            memo: string;
          }>;
        }>(`/pop/inspection-result?${resultParams.toString()}`);

        if (resultRes.data?.data && resultRes.data.data.length > 0) {
          resultRes.data.data.forEach((r) => {
            existingMap[r.inspection_info_id] = {
              measuredValue: r.measured_value || "",
              judgment: (r.judgment === "pass" || r.judgment === "fail") ? r.judgment : "",
            };
          });
          const firstOverall = resultRes.data.data[0]?.overall_judgment;
          if (firstOverall === "pass" || firstOverall === "fail") {
            setOverallJudgment(firstOverall);
          }
          setMemo(resultRes.data.data[0]?.memo || "");
        }
      }

      // 결과 항목 초기화
      const items: InspectionResultItem[] = infoData.map((info) => ({
        inspectionInfoId: info.id,
        inspectionItemName: info.inspection_item_name,
        inspectionStandard: info.inspection_standard,
        passCriteria: info.pass_criteria,
        isRequired: info.is_required,
        measuredValue: existingMap[info.id]?.measuredValue || "",
        judgment: existingMap[info.id]?.judgment || "",
      }));
      setResultItems(items);
    } catch (err: any) {
      setError(err?.message || "데이터 조회 실패");
    } finally {
      setLoading(false);
    }
  }, [open, itemCode, inspectionType, referenceId, referenceTable, screenId]);

  useEffect(() => {
    if (open) loadData();
  }, [open, loadData]);

  // 종합 판정 자동 계산 (필수 항목 모두 합격이면 합격)
  useEffect(() => {
    if (resultItems.length === 0) return;
    const judgedItems = resultItems.filter((i) => i.judgment !== "");
    if (judgedItems.length === 0) {
      setOverallJudgment("");
      return;
    }
    const hasAnyFail = resultItems.some((i) => i.isRequired === "Y" && i.judgment === "fail");
    if (hasAnyFail) {
      setOverallJudgment("fail");
      return;
    }
    const requiredItems = resultItems.filter((i) => i.isRequired === "Y");
    const allRequiredJudged = requiredItems.every((i) => i.judgment !== "");
    if (allRequiredJudged && requiredItems.length > 0) {
      setOverallJudgment("pass");
    }
  }, [resultItems]);

  const updateItem = (index: number, partial: Partial<InspectionResultItem>) => {
    setResultItems((prev) => {
      const next = [...prev];
      next[index] = { ...next[index], ...partial };
      return next;
    });
  };

  const handleSave = async (isCompleted: boolean) => {
    if (!overallJudgment && isCompleted) {
      setError("종합 판정을 선택해주세요.");
      return;
    }
    setSaving(true);
    setError(null);

    try {
      await apiClient.post("/pop/inspection-result", {
        referenceTable: referenceTable || "",
        referenceId: referenceId || "",
        screenId: screenId || "",
        itemCode: itemCode || "",
        itemName: itemName || "",
        inspectionType: inspectionType || "",
        items: resultItems,
        overallJudgment,
        memo,
        isCompleted,
      });

      if (isCompleted && onSaved) {
        onSaved(overallJudgment as "pass" | "fail");
      }
      onOpenChange(false);
    } catch (err: any) {
      setError(err?.message || "저장 실패");
    } finally {
      setSaving(false);
    }
  };

  // 진행률
  const judgedCount = resultItems.filter((i) => i.judgment !== "").length;
  const total = resultItems.length;
  const progress = total > 0 ? Math.round((judgedCount / total) * 100) : 0;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex max-h-[90vh] w-full max-w-lg flex-col gap-0 p-0">
        <DialogHeader className="shrink-0 border-b px-6 py-4">
          <DialogTitle className="flex items-center gap-2 text-base font-bold">
            <ClipboardList className="h-5 w-5 text-primary" />
            검사 입력
          </DialogTitle>
          {(itemCode || itemName) && (
            <p className="mt-1 text-sm text-muted-foreground">
              {itemCode && <span className="font-medium">{itemCode}</span>}
              {itemCode && itemName && " · "}
              {itemName}
            </p>
          )}
        </DialogHeader>

        {/* 본문 */}
        <div className="flex-1 overflow-y-auto px-6 py-4">
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : error ? (
            <div className="flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3">
              <AlertCircle className="h-4 w-4 text-destructive" />
              <p className="text-sm text-destructive">{error}</p>
            </div>
          ) : resultItems.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
              <ClipboardList className="h-10 w-10 text-muted-foreground/40" />
              <p className="text-sm text-muted-foreground">
                {itemCode
                  ? `"${itemCode}"에 등록된 검사 항목이 없습니다.`
                  : "검사 항목이 없습니다."}
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {/* 진행률 표시 */}
              <div className="flex items-center justify-between rounded-md bg-muted/30 px-3 py-2">
                <span className="text-xs text-muted-foreground">
                  {judgedCount}/{total} 항목 판정됨
                </span>
                <div className="flex items-center gap-2">
                  <div className="h-1.5 w-24 overflow-hidden rounded-full bg-muted">
                    <div
                      className={cn(
                        "h-full rounded-full transition-all",
                        progress === 100 ? "bg-green-500" : "bg-primary"
                      )}
                      style={{ width: `${progress}%` }}
                    />
                  </div>
                  <span className="text-xs font-medium">{progress}%</span>
                </div>
              </div>

              {/* 검사 항목 목록 */}
              <div className="space-y-3">
                {resultItems.map((item, index) => (
                  <div
                    key={item.inspectionInfoId}
                    className={cn(
                      "rounded-lg border p-3 transition-colors",
                      item.judgment === "pass" && "border-green-200 bg-green-50",
                      item.judgment === "fail" && "border-red-200 bg-red-50",
                      !item.judgment && "border-border bg-card"
                    )}
                  >
                    {/* 항목 헤더 */}
                    <div className="mb-2 flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <div className="flex items-center gap-1.5">
                          <span className="text-sm font-semibold">{item.inspectionItemName}</span>
                          {item.isRequired === "Y" && (
                            <Badge variant="outline" className="h-4 px-1 py-0 text-[9px] text-destructive border-destructive/50">
                              필수
                            </Badge>
                          )}
                        </div>
                        {item.inspectionStandard && (
                          <p className="mt-0.5 text-xs text-muted-foreground">
                            기준: {item.inspectionStandard}
                          </p>
                        )}
                        {item.passCriteria && (
                          <p className="text-xs text-muted-foreground">
                            합격: {item.passCriteria}
                          </p>
                        )}
                      </div>
                      <JudgmentBadge judgment={item.judgment} />
                    </div>

                    {/* 측정값 입력 */}
                    <div className="mb-2">
                      <Label className="text-[10px] text-muted-foreground">측정값</Label>
                      <Input
                        value={item.measuredValue}
                        onChange={(e) => updateItem(index, { measuredValue: e.target.value })}
                        placeholder="측정값 입력"
                        className="mt-1 h-10 text-sm"
                      />
                    </div>

                    {/* 합불 판정 버튼 */}
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => updateItem(index, { judgment: "pass" })}
                        className={cn(
                          "flex h-11 flex-1 items-center justify-center gap-1.5 rounded-md border-2 text-sm font-semibold transition-colors",
                          item.judgment === "pass"
                            ? "border-green-500 bg-green-500 text-white"
                            : "border-green-200 bg-white text-green-700 hover:bg-green-50"
                        )}
                      >
                        <CheckCircle2 className="h-4 w-4" />
                        합격
                      </button>
                      <button
                        type="button"
                        onClick={() => updateItem(index, { judgment: "fail" })}
                        className={cn(
                          "flex h-11 flex-1 items-center justify-center gap-1.5 rounded-md border-2 text-sm font-semibold transition-colors",
                          item.judgment === "fail"
                            ? "border-red-500 bg-red-500 text-white"
                            : "border-red-200 bg-white text-red-700 hover:bg-red-50"
                        )}
                      >
                        <XCircle className="h-4 w-4" />
                        불합격
                      </button>
                    </div>
                  </div>
                ))}
              </div>

              {/* 종합 판정 */}
              <div className="rounded-lg border-2 border-dashed p-3">
                <Label className="text-sm font-semibold">종합 판정</Label>
                <div className="mt-2 flex gap-2">
                  <button
                    type="button"
                    onClick={() => setOverallJudgment("pass")}
                    className={cn(
                      "flex h-12 flex-1 items-center justify-center gap-2 rounded-md border-2 text-sm font-bold transition-colors",
                      overallJudgment === "pass"
                        ? "border-green-500 bg-green-500 text-white"
                        : "border-green-200 bg-white text-green-700 hover:bg-green-50"
                    )}
                  >
                    <CheckCircle2 className="h-5 w-5" />
                    합격
                  </button>
                  <button
                    type="button"
                    onClick={() => setOverallJudgment("fail")}
                    className={cn(
                      "flex h-12 flex-1 items-center justify-center gap-2 rounded-md border-2 text-sm font-bold transition-colors",
                      overallJudgment === "fail"
                        ? "border-red-500 bg-red-500 text-white"
                        : "border-red-200 bg-white text-red-700 hover:bg-red-50"
                    )}
                  >
                    <XCircle className="h-5 w-5" />
                    불합격
                  </button>
                </div>
              </div>

              {/* 비고 */}
              <div>
                <Label className="text-sm font-medium">비고</Label>
                <Textarea
                  value={memo}
                  onChange={(e) => setMemo(e.target.value)}
                  placeholder="비고 입력 (선택사항)"
                  className="mt-1 min-h-[72px] text-sm"
                />
              </div>

              {error && (
                <div className="flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-2">
                  <AlertCircle className="h-4 w-4 shrink-0 text-destructive" />
                  <p className="text-xs text-destructive">{error}</p>
                </div>
              )}
            </div>
          )}
        </div>

        {/* 하단 버튼 */}
        <DialogFooter className="shrink-0 border-t px-6 py-4">
          <div className="flex w-full gap-2">
            <Button
              variant="outline"
              className="flex-1 h-12 text-sm"
              onClick={() => onOpenChange(false)}
              disabled={saving}
            >
              닫기
            </Button>
            <Button
              variant="outline"
              className="flex-1 h-12 text-sm"
              onClick={() => handleSave(false)}
              disabled={saving || loading || resultItems.length === 0}
            >
              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null}
              임시 저장
            </Button>
            <Button
              className={cn(
                "flex-1 h-12 text-sm font-semibold",
                overallJudgment === "pass" && "bg-green-600 hover:bg-green-700",
                overallJudgment === "fail" && "bg-red-600 hover:bg-red-700"
              )}
              onClick={() => handleSave(true)}
              disabled={saving || loading || resultItems.length === 0 || !overallJudgment}
            >
              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null}
              검사 완료
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
