"use client";

import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { apiClient } from "@/lib/api/client";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { useMonitoringSettings } from "@/hooks/useMonitoringSettings";
import { getMonitoringTheme } from "@/lib/monitoringTheme";
import { useTabStore } from "@/stores/tabStore";
import { RefreshCw, Clock, Loader2, Inbox, Search, ClipboardCheck, Settings2 } from "lucide-react";

/* ───── 타입 ───── */
interface ProcessRow {
  id: number;
  wo_id: number;
  process_code: string;
  process_name: string;
  status: string;
  plan_qty: number;
  input_qty: number;
  good_qty: number;
  defect_qty: number;
  started_at: string | null;
  completed_at: string | null;
  worker_name: string;
}

interface InspectionRow {
  no: number;
  inspectionNo: string;
  inspectionType: string;
  itemName: string;
  spec: string;
  inspectionQty: number;
  goodQty: number;
  defectQty: number;
  defectRate: number;
  result: "합격" | "불합격" | "대기";
  inspectorName: string;
  inspectedAt: string;
  remark: string;
}

/* ───── 탭 정의 ───── */
const TABS = [
  { key: "all", label: "전체" },
  { key: "process", label: "공정검사" },
  { key: "incoming", label: "입고검사" },
  { key: "shipping", label: "출하검사" },
] as const;
type TabKey = (typeof TABS)[number]["key"];

/* ───── 유틸 ───── */
const fmt = (n: number) => n.toLocaleString("ko-KR");
const pct = (n: number) => `${n.toFixed(1)}%`;

const badgeVariant = (type: "result" | "type" | "defectRate", value: string | number) => {
  if (type === "result") {
    if (value === "합격") return "bg-emerald-100 text-emerald-700 border-emerald-200";
    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
    return "bg-amber-100 text-amber-700 border-amber-200";
  }
  if (type === "type") {
    if (value === "공정검사") return "bg-purple-100 text-purple-700 border-purple-200";
    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
    return "bg-emerald-100 text-emerald-700 border-emerald-200";
  }
  // defectRate
  const rate = typeof value === "number" ? value : parseFloat(String(value));
  if (rate > 3) return "text-red-600 font-semibold";
  if (rate >= 1) return "text-amber-600 font-semibold";
  return "text-emerald-600";
};

/* ───── 컴포넌트 ───── */
export default function QualityMonitoringPage() {
  const { settings } = useMonitoringSettings("quality");
  const theme = getMonitoringTheme(settings.theme);
  const openTab = useTabStore((s) => s.openTab);
  const tc = settings.tableColumns;

  const [processData, setProcessData] = useState<ProcessRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [currentTime, setCurrentTime] = useState(new Date());
  const [autoRefresh, setAutoRefresh] = useState(settings.autoRefresh);
  const [activeTab, setActiveTab] = useState<TabKey>("all");
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  /* ───── 시계 ───── */
  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  /* ───── 데이터 조회 ───── */
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await apiClient.post("/table-management/tables/work_order_process/data", { autoFilter: true });
      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
      setProcessData(rows);
    } catch (err) {
      console.error("품질점검현황 데이터 조회 실패:", err);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  /* ───── 자동 갱신 ───── */
  useEffect(() => {
    if (autoRefresh) {
      intervalRef.current = setInterval(fetchData, settings.refreshInterval * 1000);
    }
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [autoRefresh, fetchData, settings.refreshInterval]);

  /* ───── 검사 행 변환 ───── */
  const inspectionRows: InspectionRow[] = useMemo(() => {
    const today = new Date().toISOString().slice(0, 10);

    return processData
      .filter((r) => {
        // 금일 데이터만
        const dt = r.completed_at || r.started_at || "";
        return dt.slice(0, 10) === today;
      })
      .map((r, idx) => {
        const inspQty = r.input_qty || r.plan_qty || 0;
        const goodQty = r.good_qty ?? 0;
        const defectQty = r.defect_qty ?? 0;
        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
        const result: InspectionRow["result"] = r.status !== "completed" ? "대기" : defectQty > 0 ? "불합격" : "합격";

        return {
          no: idx + 1,
          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
          inspectionType: "공정검사",
          itemName: r.process_name || "-",
          spec: r.process_code || "-",
          inspectionQty: inspQty,
          goodQty,
          defectQty,
          defectRate,
          result,
          inspectorName: r.worker_name || "-",
          inspectedAt: r.completed_at || r.started_at || "-",
          remark: "",
        };
      });
  }, [processData]);

  /* ───── 탭 필터링 ───── */
  const filteredRows = useMemo(() => {
    if (activeTab === "all" || activeTab === "process") return inspectionRows;
    // 입고/출하는 데이터 없음
    return [];
  }, [activeTab, inspectionRows]);

  /* ───── 요약 통계 ───── */
  const summary = useMemo(() => {
    const total = inspectionRows.length;
    const passed = inspectionRows.filter((r) => r.result === "합격").length;
    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
    const pending = inspectionRows.filter((r) => r.result === "대기").length;
    const passRate = total > 0 ? (passed / total) * 100 : 0;
    return { total, passed, failed, pending, passRate };
  }, [inspectionRows]);

  /* ───── 요약 카드 정의 ───── */
  const summaryCards = [
    {
      label: "금일 검사건수",
      value: fmt(summary.total),
      sub: "건",
      color: "from-slate-500 to-slate-600",
      textColor: "text-white",
    },
    {
      label: "합격",
      value: fmt(summary.passed),
      sub: "건",
      color: "from-emerald-500 to-emerald-600",
      textColor: "text-white",
    },
    {
      label: "불합격",
      value: fmt(summary.failed),
      sub: "건",
      color: "from-red-500 to-red-600",
      textColor: "text-white",
    },
    {
      label: "검사대기",
      value: fmt(summary.pending),
      sub: "건",
      color: "from-amber-500 to-amber-600",
      textColor: "text-white",
    },
    {
      label: "합격률",
      value: pct(summary.passRate),
      sub: "",
      color: "from-purple-500 to-purple-600",
      textColor: "text-white",
    },
  ];

  /* ───── 렌더링 ───── */
  return (
    <div className={cn("flex h-full flex-col", theme.root)} style={theme.cssVars}>
      {/* ── 헤더 ── */}
      <div className={cn("flex items-center justify-between border-b px-6 py-4", theme.header)}>
        <div className="flex items-center gap-3">
          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
          <h1 className={cn("text-xl font-bold", theme.headerText)}>
            품질점검현황 <span className="text-emerald-600">모니터링</span>
          </h1>
        </div>
        <div className="flex items-center gap-4">
          <div className={cn("flex items-center gap-2 text-sm", theme.mutedText)}>
            <Clock className="h-4 w-4" />
            <span className="font-mono">
              {currentTime.toLocaleString("ko-KR", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
                hour12: false,
              })}
            </span>
          </div>
          <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
            <span className="ml-1">새로고침</span>
          </Button>
          <Button
            variant={autoRefresh ? "default" : "outline"}
            size="sm"
            onClick={() => setAutoRefresh((p) => !p)}
            className={cn(autoRefresh && "bg-emerald-600 text-white hover:bg-emerald-700")}
          >
            <Clock className="mr-1 h-4 w-4" />
            자동갱신 {autoRefresh ? "ON" : "OFF"}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => openTab({ type: "admin", title: "모니터링 설정", adminUrl: "/monitoring/settings" })}
            className="gap-1.5"
          >
            <Settings2 className="h-4 w-4" />
            설정
          </Button>
        </div>
      </div>

      {/* ── 본문 ── */}
      <div className="flex-1 space-y-6 overflow-auto p-6">
        {/* 요약 카드 */}
        <div className="grid grid-cols-5 gap-4">
          {summaryCards.map((card) => (
            <div key={card.label} className={cn("rounded-xl bg-gradient-to-br p-5 shadow-md", card.color)}>
              <p className="text-sm font-medium text-white/80">{card.label}</p>
              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
                {card.value}
                {card.sub && <span className="ml-1 text-base font-normal text-white/70">{card.sub}</span>}
              </p>
            </div>
          ))}
        </div>

        {/* 검사유형 탭 */}
        <div className="flex items-center gap-2">
          {TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={cn(
                "rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
                activeTab === tab.key
                  ? "bg-emerald-600 text-white shadow"
                  : "border bg-white text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700",
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* 테이블 영역 */}
        <div className={cn("overflow-hidden rounded-xl border shadow", theme.card, theme.cardBorder)}>
          {/* 입고/출하 준비중 */}
          {activeTab === "incoming" || activeTab === "shipping" ? (
            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
              <Search className="mb-4 h-12 w-12 opacity-40" />
              <p className="text-lg font-medium">준비중</p>
              <p className="mt-1 text-sm">
                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는 아직 지원되지 않습니다.
              </p>
            </div>
          ) : loading && filteredRows.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
              <Loader2 className="mb-4 h-10 w-10 animate-spin" />
              <p>데이터를 불러오는 중...</p>
            </div>
          ) : filteredRows.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
              <Inbox className="mb-4 h-12 w-12 opacity-40" />
              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className={theme.tableHeader}>
                    <TableHead className="w-[50px] text-center">No</TableHead>
                    {tc.inspectionNo && <TableHead className="min-w-[120px]">검사번호</TableHead>}
                    {tc.inspectionType && <TableHead className="min-w-[90px] text-center">검사유형</TableHead>}
                    {tc.itemName && <TableHead className="min-w-[140px]">품목명</TableHead>}
                    {tc.spec && <TableHead className="min-w-[100px]">규격</TableHead>}
                    {tc.inspectionQty && <TableHead className="min-w-[80px] text-right">검사수량</TableHead>}
                    {tc.passFailQty && <TableHead className="min-w-[80px] text-right">합격수량</TableHead>}
                    {tc.passFailQty && <TableHead className="min-w-[80px] text-right">불합격수량</TableHead>}
                    {tc.defectRate && <TableHead className="min-w-[70px] text-right">불량율</TableHead>}
                    {tc.resultBar && <TableHead className="min-w-[160px] text-center">검사결과</TableHead>}
                    {tc.judgment && <TableHead className="min-w-[70px] text-center">판정</TableHead>}
                    {tc.inspector && <TableHead className="min-w-[80px] text-center">검사자</TableHead>}
                    {tc.inspectedAt && <TableHead className="min-w-[150px]">검사일시</TableHead>}
                    {tc.inspectionCriteria && <TableHead className="min-w-[100px]">검사기준</TableHead>}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredRows.map((row) => {
                    const goodPct = row.inspectionQty > 0 ? (row.goodQty / row.inspectionQty) * 100 : 0;
                    const defectPct = row.inspectionQty > 0 ? (row.defectQty / row.inspectionQty) * 100 : 0;

                    return (
                      <TableRow key={row.no} className={theme.tableRowHover}>
                        <TableCell className={cn("text-center text-sm", theme.mutedText)}>{row.no}</TableCell>
                        {tc.inspectionNo && <TableCell className="font-mono text-sm">{row.inspectionNo}</TableCell>}
                        {tc.inspectionType && (
                          <TableCell className="text-center">
                            <Badge
                              variant="outline"
                              className={cn("text-xs", badgeVariant("type", row.inspectionType))}
                            >
                              {row.inspectionType}
                            </Badge>
                          </TableCell>
                        )}
                        {tc.itemName && <TableCell className="text-sm font-medium">{row.itemName}</TableCell>}
                        {tc.spec && <TableCell className={cn("text-sm", theme.mutedText)}>{row.spec}</TableCell>}
                        {tc.inspectionQty && (
                          <TableCell className="text-right text-sm">{fmt(row.inspectionQty)}</TableCell>
                        )}
                        {tc.passFailQty && (
                          <TableCell className="text-right text-sm text-emerald-600">{fmt(row.goodQty)}</TableCell>
                        )}
                        {tc.passFailQty && (
                          <TableCell className="text-right text-sm text-red-600">{fmt(row.defectQty)}</TableCell>
                        )}
                        {tc.defectRate && (
                          <TableCell className={cn("text-right text-sm", badgeVariant("defectRate", row.defectRate))}>
                            {pct(row.defectRate)}
                          </TableCell>
                        )}
                        {tc.resultBar && (
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <div className="flex h-3 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
                                <div
                                  className="h-full bg-emerald-500 transition-all"
                                  style={{ width: `${goodPct}%` }}
                                />
                                <div className="h-full bg-red-500 transition-all" style={{ width: `${defectPct}%` }} />
                              </div>
                              <span className={cn("w-[42px] text-right text-xs whitespace-nowrap", theme.mutedText)}>
                                {pct(goodPct)}
                              </span>
                            </div>
                          </TableCell>
                        )}
                        {tc.judgment && (
                          <TableCell className="text-center">
                            <Badge variant="outline" className={cn("text-xs", badgeVariant("result", row.result))}>
                              {row.result}
                            </Badge>
                          </TableCell>
                        )}
                        {tc.inspector && <TableCell className="text-center text-sm">{row.inspectorName}</TableCell>}
                        {tc.inspectedAt && (
                          <TableCell className={cn("text-sm", theme.mutedText)}>
                            {row.inspectedAt !== "-"
                              ? new Date(row.inspectedAt).toLocaleString("ko-KR", {
                                  month: "2-digit",
                                  day: "2-digit",
                                  hour: "2-digit",
                                  minute: "2-digit",
                                  hour12: false,
                                })
                              : "-"}
                          </TableCell>
                        )}
                        {tc.inspectionCriteria && <TableCell className={cn("text-sm", theme.mutedText)}>-</TableCell>}
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}