"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, Wrench, 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 InspectionRecord {
  id: string;
  equipment_code: string;
  inspection_item_objid: string;
  inspection_date: string;
  status: string;
  inspector: string;
  remark: string;
  created_date: string;
}

interface InspectionItem {
  id: string;
  equipment_code: string;
  inspection_item: string;
  inspection_cycle: string;
  inspection_content: string;
  inspection_method: string;
  lower_limit: string;
  upper_limit: string;
  unit: string;
}

interface EquipmentInfo {
  id: string;
  equipment_code: string;
  equipment_name: string;
}

const RECORD_TABLE = "equipment_inspection_record";

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

export default function EquipmentInspectionRecordPage() {
  const [records, setRecords] = useState<InspectionRecord[]>([]);
  const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
  const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
  const [categoryMap, setCategoryMap] = useState<Record<string, Record<string, string>>>({});
  const [loading, setLoading] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [filterValues, setFilterValues] = useState<FilterValue[]>([]);

  // ─── 데이터 조회 ────────────────────────────────────────

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const search: Record<string, any> = {};
      filterValues.forEach((f) => {
        if (f.value) search[f.column] = f.value;
      });

      const [recordRes, itemRes, equipRes] = await Promise.all([
        apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
          page,
          size: pageSize,
          autoFilter: true,
          search,
        }),
        apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
          page: 1,
          size: 1000,
          autoFilter: true,
        }).catch(() => ({ data: { data: { data: [] } } })),
        apiClient.post(`/table-management/tables/equipment_mng/data`, {
          page: 1,
          size: 0,
          autoFilter: true,
        }).catch(() => ({ data: { data: { data: [] } } })),
      ]);

      const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
      setRecords(rRows);
      const totalCount = recordRes.data?.data?.total ?? recordRes.data?.total ?? rRows.length;
      setTotal(totalCount);

      const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
      const iMap = new Map<string, InspectionItem>();
      iRows.forEach((i) => iMap.set(i.id, i));
      setInspectionItems(iMap);

      const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
      const eMap = new Map<string, EquipmentInfo>();
      eRows.forEach((e) => {
        eMap.set(e.equipment_code, e);
        eMap.set(e.id, e);
      });
      setEquipments(eMap);

      // 카테고리 코드→라벨 매핑 (점검주기, 점검방법)
      try {
        const catCols = ["inspection_cycle", "inspection_method"];
        const catResults = await Promise.all(
          catCols.map((col) =>
            apiClient.get(`/table-categories/equipment_inspection_item/${col}/values`).catch(() => ({ data: [] })),
          ),
        );
        const cMap: Record<string, Record<string, string>> = {};
        catCols.forEach((col, idx) => {
          const vals: { code: string; label: string }[] = catResults[idx].data?.data ?? catResults[idx].data ?? [];
          cMap[col] = {};
          vals.forEach((v: any) => { cMap[col][v.valueCode || v.code] = v.valueLabel || v.label; });
        });
        setCategoryMap(cMap);
      } catch {
        // 카테고리 조회 실패 무시
      }
    } catch (err) {
      console.error("점검기록 조회 실패:", err);
    } finally {
      setLoading(false);
    }
  }, [filterValues, page, pageSize]);

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

  // ─── 선택된 레코드 ─────────────────────────────────────

  const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
  const selectedItem = useMemo(
    () => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
    [selectedRecord, inspectionItems],
  );

  // ─── 설비명 조회 ───────────────────────────────────────

  const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";

  // ─── 카테고리 코드→라벨 변환 ──────────────────────────

  const resolveCategory = (col: string, code: string) => {
    if (!code) return "-";
    return categoryMap[col]?.[code] || code;
  };

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

  const handleExcel = async () => {
    const data = records.map((r) => ({
      설비코드: r.equipment_code,
      설비명: getEquipName(r.equipment_code),
      점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
      점검일자: fmtDate(r.inspection_date),
      상태: r.status,
      점검자: r.inspector,
      비고: r.remark,
    }));
    await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
  };

  // ─── 날짜/상태 포맷 ────────────────────────────────────

  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;
    }
  };

  const statusBadge = (v: string) => {
    if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
    const lower = v.toLowerCase();
    if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
      return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
    if (["이상", "fail", "불합격", "비정상"].includes(lower))
      return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
    if (["점검중", "진행", "in_progress"].includes(lower))
      return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
    return <Badge variant="outline" className="text-xs">{v}</Badge>;
  };

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

  return (
    <div className="flex h-full flex-col">
      {/* 검색 필터 */}
      <div className="shrink-0">
        <DynamicSearchFilter
          tableName={RECORD_TABLE}
          filterId="equip-inspection-record"
          onFilterChange={(filters) => setFilterValues(filters)}
          dataCount={records.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">
          <Wrench className="h-5 w-5 text-primary" />
          <h2 className="text-base font-bold">점검관리</h2>
          <Badge variant="secondary">{records.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={fetchData} 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={60} minSize={35} className="flex flex-col">
          <div className="flex-1 overflow-auto min-h-0">
            {loading && records.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>
            ) : records.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-[100px]">설비코드</TableHead>
                    <TableHead className="min-w-[120px]">설비명</TableHead>
                    <TableHead className="min-w-[140px]">점검항목</TableHead>
                    <TableHead className="min-w-[100px]">점검일자</TableHead>
                    <TableHead className="min-w-[70px] text-center">상태</TableHead>
                    <TableHead className="min-w-[80px]">점검자</TableHead>
                    <TableHead className="min-w-[150px]">비고</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {records.map((row, idx) => {
                    const item = inspectionItems.get(row.inspection_item_objid);
                    return (
                      <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.equipment_code || "-"}</TableCell>
                        <TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
                        <TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
                        <TableCell className="text-center">{statusBadge(row.status)}</TableCell>
                        <TableCell className="text-sm">{row.inspector || "-"}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</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={40} minSize={25}>
          {!selectedId || !selectedRecord ? (
            <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 overflow-auto">
              {/* 점검 기록 요약 */}
              <div className="px-4 py-3 border-b bg-muted/50 shrink-0">
                <h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
                  <DetailRow label="설비코드" value={selectedRecord.equipment_code} />
                  <DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
                  <DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
                  <DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
                  <DetailRow label="비고" value={selectedRecord.remark || "-"} />
                </div>
              </div>

              {/* 점검 항목 상세 */}
              {selectedItem ? (
                <div className="px-4 py-3">
                  <h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
                    <DetailRow label="점검주기" value={resolveCategory("inspection_cycle", selectedItem.inspection_cycle)} />
                    <DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
                    <DetailRow label="점검방법" value={resolveCategory("inspection_method", selectedItem.inspection_method)} span2 />
                    <DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
                    <DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
                    <DetailRow label="단위" value={selectedItem.unit || "-"} />
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                  <p className="text-sm">점검 항목 정보가 없습니다</p>
                </div>
              )}
            </div>
          )}
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

// ─── 상세 행 ──────────────────────────────────────────────

function DetailRow({
  label,
  value,
  badge,
  span2,
}: {
  label: string;
  value: string;
  badge?: React.ReactNode;
  span2?: boolean;
}) {
  return (
    <div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
      <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
      {badge ? <div className="w-fit">{badge}</div> : <span className="text-xs">{value}</span>}
    </div>
  );
}
