"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from "lucide-react";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { exportToExcel } from "@/lib/utils/excelExport";

// ─── 타입 ─────────────────────────────────────────────────

interface InspectionMng {
  id: string;
  inspection_number: string;
  item_code: string;
  item_name: string;
  inspection_type: string;
  total_qty: number;
  good_qty: number;
  bad_qty: number;
  overall_judgment: string;
  inspector: string;
  inspection_date: string;
  is_completed: string;
  defect_description: string;
  memo: string;
  supplier_name: string;
  supplier_code: string;
  created_date: string;
}

interface InspectionDetail {
  id: string;
  master_id: string;
  inspection_item_name: string;
  inspection_standard: string;
  pass_criteria: string;
  measured_value: string;
  judgment: string;
  is_required: string;
  memo: string;
  item_code: string;
  item_name: string;
  inspection_type: string;
}

const MASTER_TABLE = "inspection_result_mng";
const DETAIL_TABLE = "inspection_result";

// ─── 메인 컴포넌트 ───────────────────────────────────────

export default function InspectionResultPage() {
  const [masterData, setMasterData] = useState<InspectionMng[]>([]);
  const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
  const [loading, setLoading] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(50);
  const [total, setTotal] = useState(0);

  const fetchMaster = useCallback(async () => {
    setLoading(true);
    try {
      const search: Record<string, any> = {};
      filterValues.forEach((f) => { if (f.value) search[f.column] = f.value; });
      const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
        page, size: pageSize, autoFilter: true, search,
      });
      const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
      const t = res.data?.data?.total ?? res.data?.data?.totalCount ?? rows.length;
      setMasterData(rows); setTotal(t);
    } catch (err) { console.error("검사결과 조회 실패:", err); }
    finally { setLoading(false); }
  }, [filterValues, page, pageSize]);

  useEffect(() => { fetchMaster(); }, [fetchMaster]);
  useEffect(() => { setPage(1); }, [filterValues]);
  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  // ─── 디테일 데이터 조회 ─────────────────────────────────

  const fetchDetail = useCallback(async (masterId: string) => {
    setDetailLoading(true);
    try {
      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
        page: 1,
        size: 0,
        autoFilter: true,
        search: { master_id: masterId },
      });
      const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
      setDetailData(rows);
    } catch (err) {
      console.error("검사상세 조회 실패:", err);
      setDetailData([]);
    } finally {
      setDetailLoading(false);
    }
  }, []);

  useEffect(() => {
    if (selectedId) fetchDetail(selectedId);
    else setDetailData([]);
  }, [selectedId, fetchDetail]);

  // ─── 선택된 마스터 ──────────────────────────────────────

  const selectedMaster = useMemo(
    () => masterData.find((m) => m.id === selectedId),
    [masterData, selectedId],
  );

  // ─── 엑셀 다운로드 ─────────────────────────────────────

  const handleExcel = async () => {
    await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
  };

  // ─── 판정 배지 ──────────────────────────────────────────

  const judgmentBadge = (v: string) => {
    if (!v) return null;
    const lower = v.toLowerCase();
    if (["합격", "pass", "적합"].includes(lower))
      return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
    if (["불합격", "fail", "부적합"].includes(lower))
      return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
    return <Badge variant="outline">{v}</Badge>;
  };

  // ─── 날짜 포맷 ──────────────────────────────────────────

  const fmtDate = (d: string) => {
    if (!d) return "-";
    try {
      return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
    } catch {
      return d;
    }
  };

  // ─── 렌더링 ─────────────────────────────────────────────

  return (
    <div className="flex h-full flex-col">
      {/* 검색 필터 */}
      <div className="shrink-0">
        <DynamicSearchFilter
          tableName={MASTER_TABLE}
          filterId="inspection-result-mng"
          onFilterChange={(filters) => {
            setFilterValues(filters);
          }}
          dataCount={masterData.length}
        />
      </div>

      {/* 헤더 */}
      <div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
        <div className="flex items-center gap-2">
          <ClipboardCheck className="h-5 w-5 text-primary" />
          <h2 className="text-base font-bold">검사관리</h2>
          <Badge variant="secondary">{masterData.length}건</Badge>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={handleExcel}>
            <Download className="h-4 w-4 mr-1" />
            엑셀 다운로드
          </Button>
          <Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
            <RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
            새로고침
          </Button>
        </div>
      </div>

      {/* 분할 패널 */}
      <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
        {/* 좌측: 마스터 테이블 */}
        <ResizablePanel defaultSize={55} minSize={30} className="flex flex-col">
          <div className="flex-1 overflow-auto min-h-0">
            {loading && masterData.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
                <Loader2 className="h-8 w-8 animate-spin mb-3" />
                <span className="text-sm">데이터를 불러오는 중...</span>
              </div>
            ) : masterData.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
                <Inbox className="h-10 w-10 mb-3" />
                <span className="text-sm">검사 데이터가 없습니다</span>
              </div>
            ) : (
              <Table noWrapper className="min-w-max">
                <TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
                  <TableRow className="hover:bg-muted">
                    <TableHead className="w-10 text-center">#</TableHead>
                    <TableHead className="min-w-[120px]">검사번호</TableHead>
                    <TableHead className="min-w-[80px]">검사유형</TableHead>
                    <TableHead className="min-w-[120px]">품목코드</TableHead>
                    <TableHead className="min-w-[140px]">품목명</TableHead>
                    <TableHead className="min-w-[80px] text-right">검사수량</TableHead>
                    <TableHead className="min-w-[80px] text-right">양품</TableHead>
                    <TableHead className="min-w-[80px] text-right">불량</TableHead>
                    <TableHead className="min-w-[70px] text-center">판정</TableHead>
                    <TableHead className="min-w-[80px]">검사자</TableHead>
                    <TableHead className="min-w-[100px]">검사일자</TableHead>
                    <TableHead className="min-w-[80px] text-center">완료</TableHead>
                    <TableHead className="min-w-[120px]">거래처</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {masterData.map((row, idx) => (
                    <TableRow
                      key={row.id}
                      className={cn(
                        "cursor-pointer",
                        selectedId === row.id && "bg-primary/5",
                      )}
                      onClick={() => setSelectedId(row.id)}
                    >
                      <TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
                      <TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
                      <TableCell>
                        <Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
                      </TableCell>
                      <TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
                      <TableCell className="text-sm">{row.item_name || "-"}</TableCell>
                      <TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
                      <TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
                      <TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
                      <TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
                      <TableCell className="text-sm">{row.inspector || "-"}</TableCell>
                      <TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
                      <TableCell className="text-center">
                        {row.is_completed === "Y" ? (
                          <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
                        ) : (
                          <Badge variant="outline" className="text-xs">진행중</Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
          <div className="shrink-0 flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground">
            <span>전체 <span className="font-medium text-foreground">{total.toLocaleString()}</span>건</span>
            <div className="flex items-center gap-1">
              <button onClick={() => setPage(1)} disabled={page <= 1 || loading} className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"><ChevronsLeft className="h-3.5 w-3.5" /></button>
              <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1 || loading} className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"><ChevronLeft className="h-3.5 w-3.5" /></button>
              <span className="px-2">{page} / {totalPages}</span>
              <button onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages || loading} className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"><ChevronRight className="h-3.5 w-3.5" /></button>
              <button onClick={() => setPage(totalPages)} disabled={page >= totalPages || loading} className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"><ChevronsRight className="h-3.5 w-3.5" /></button>
            </div>
            <div className="flex items-center gap-1.5">
              <span>표시</span>
              <select value={pageSize} onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1); }} className="h-7 rounded border px-1 text-xs">
                <option value={20}>20</option><option value={50}>50</option><option value={100}>100</option><option value={200}>200</option>
              </select>
            </div>
          </div>
        </ResizablePanel>

        <ResizableHandle withHandle />

        {/* 우측: 디테일 */}
        <ResizablePanel defaultSize={45} minSize={25}>
          {!selectedId ? (
            <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
              <Inbox className="w-10 h-10 text-muted-foreground/40" />
              <p className="text-sm">좌측에서 검사를 선택해주세요</p>
            </div>
          ) : (
            <div className="flex flex-col h-full">
              {/* 상세 헤더 */}
              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
                <div className="flex items-center gap-2">
                  <h3 className="text-[13px] font-bold">검사 상세</h3>
                  {selectedMaster && (
                    <Badge variant="outline" className="text-xs">
                      {selectedMaster.inspection_number}
                    </Badge>
                  )}
                </div>
                {selectedMaster && (
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <span>{selectedMaster.item_name}</span>
                    <span>·</span>
                    {judgmentBadge(selectedMaster.overall_judgment)}
                  </div>
                )}
              </div>

              {/* 상세 테이블 */}
              <div className="flex-1 overflow-auto">
                {detailLoading ? (
                  <div className="flex items-center justify-center py-16 text-muted-foreground">
                    <Loader2 className="h-6 w-6 animate-spin" />
                  </div>
                ) : detailData.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
                    <Inbox className="h-8 w-8 mb-2 opacity-40" />
                    <p className="text-sm">검사 항목이 없습니다</p>
                  </div>
                ) : (
                  <Table noWrapper>
                    <TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
                      <TableRow className="hover:bg-muted">
                        <TableHead className="w-10 text-center">#</TableHead>
                        <TableHead className="min-w-[90px]">검사유형</TableHead>
                        <TableHead className="min-w-[140px]">검사항목</TableHead>
                        <TableHead className="min-w-[120px]">검사기준</TableHead>
                        <TableHead className="min-w-[100px]">합격기준</TableHead>
                        <TableHead className="min-w-[90px]">측정값</TableHead>
                        <TableHead className="min-w-[70px] text-center">판정</TableHead>
                        <TableHead className="min-w-[60px] text-center">필수</TableHead>
                        <TableHead className="min-w-[120px]">비고</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {detailData.map((d, idx) => (
                        <TableRow key={d.id}>
                          <TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
                          <TableCell className="text-sm">
                            {d.inspection_type ? (
                              <Badge variant="outline" className="text-xs">{d.inspection_type}</Badge>
                            ) : "-"}
                          </TableCell>
                          <TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
                          <TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
                          <TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
                          <TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
                          <TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
                          <TableCell className="text-center">
                            {d.is_required === "Y" ? (
                              <Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
                            ) : (
                              <span className="text-xs text-muted-foreground">-</span>
                            )}
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </div>
            </div>
          )}
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}
