"use client";

import React, { useEffect, useState, useMemo, useCallback } from "react";
import {
  Loader2, Play, Pause, CheckCircle2, AlertCircle, Timer, Package,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { dataApi } from "@/lib/api/data";
import { apiClient } from "@/lib/api/client";
import { usePopEvent } from "@/hooks/pop/usePopEvent";
import { useAuth } from "@/hooks/useAuth";
import type { PopWorkDetailConfig } from "../types";
import type { TimelineProcessStep } from "../types";

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

type RowData = Record<string, unknown>;

interface WorkResultRow {
  id: string;
  work_order_process_id: string;
  source_work_item_id: string;
  source_detail_id: string;
  work_phase: string;
  item_title: string;
  item_sort_order: string;
  detail_type: string;
  detail_label: string;
  detail_sort_order: string;
  spec_value: string | null;
  lower_limit: string | null;
  upper_limit: string | null;
  input_type: string | null;
  result_value: string | null;
  status: string;
  is_passed: string | null;
  recorded_by: string | null;
  recorded_at: string | null;
}

interface WorkGroup {
  phase: string;
  title: string;
  itemId: string;
  sortOrder: number;
  total: number;
  completed: number;
}

type WorkPhase = "PRE" | "IN" | "POST";
const PHASE_ORDER: Record<string, number> = { PRE: 1, IN: 2, POST: 3 };

interface ProcessTimerData {
  started_at: string | null;
  paused_at: string | null;
  total_paused_time: string | null;
  status: string;
  good_qty: string | null;
  defect_qty: string | null;
}

// ========================================
// Props
// ========================================

interface PopWorkDetailComponentProps {
  config?: PopWorkDetailConfig;
  screenId?: string;
  componentId?: string;
  currentRowSpan?: number;
  currentColSpan?: number;
}

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

export function PopWorkDetailComponent({
  config,
  screenId,
  componentId,
}: PopWorkDetailComponentProps) {
  const { getSharedData } = usePopEvent(screenId || "default");
  const { user } = useAuth();

  const cfg: PopWorkDetailConfig = {
    showTimer: config?.showTimer ?? true,
    showQuantityInput: config?.showQuantityInput ?? true,
    phaseLabels: config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" },
  };

  // parentRow에서 현재 공정 정보 추출
  const parentRow = getSharedData<RowData>("parentRow");
  const processFlow = parentRow?.__processFlow__ as TimelineProcessStep[] | undefined;
  const currentProcess = processFlow?.find((p) => p.isCurrent);
  const workOrderProcessId = currentProcess?.processId
    ? String(currentProcess.processId)
    : undefined;
  const processName = currentProcess?.processName ?? "공정 상세";

  // ========================================
  // 상태
  // ========================================

  const [allResults, setAllResults] = useState<WorkResultRow[]>([]);
  const [processData, setProcessData] = useState<ProcessTimerData | null>(null);
  const [loading, setLoading] = useState(true);
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
  const [tick, setTick] = useState(Date.now());
  const [savingIds, setSavingIds] = useState<Set<string>>(new Set());

  // 수량 입력 로컬 상태
  const [goodQty, setGoodQty] = useState("");
  const [defectQty, setDefectQty] = useState("");

  // ========================================
  // D-FE1: 데이터 로드
  // ========================================

  const fetchData = useCallback(async () => {
    if (!workOrderProcessId) {
      setLoading(false);
      return;
    }

    try {
      setLoading(true);

      const [resultRes, processRes] = await Promise.all([
        dataApi.getTableData("process_work_result", {
          size: 500,
          filters: { work_order_process_id: workOrderProcessId },
        }),
        dataApi.getTableData("work_order_process", {
          size: 1,
          filters: { id: workOrderProcessId },
        }),
      ]);

      setAllResults((resultRes.data ?? []) as unknown as WorkResultRow[]);

      const proc = (processRes.data?.[0] ?? null) as ProcessTimerData | null;
      setProcessData(proc);
      if (proc) {
        setGoodQty(proc.good_qty ?? "");
        setDefectQty(proc.defect_qty ?? "");
      }
    } catch {
      toast.error("데이터를 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  }, [workOrderProcessId]);

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

  // ========================================
  // D-FE2: 좌측 사이드바 - 작업항목 그룹핑
  // ========================================

  const groups = useMemo<WorkGroup[]>(() => {
    const map = new Map<string, WorkGroup>();
    for (const row of allResults) {
      const key = row.source_work_item_id;
      if (!map.has(key)) {
        map.set(key, {
          phase: row.work_phase,
          title: row.item_title,
          itemId: key,
          sortOrder: parseInt(row.item_sort_order || "0", 10),
          total: 0,
          completed: 0,
        });
      }
      const g = map.get(key)!;
      g.total++;
      if (row.status === "completed") g.completed++;
    }
    return Array.from(map.values()).sort(
      (a, b) =>
        (PHASE_ORDER[a.phase] ?? 9) - (PHASE_ORDER[b.phase] ?? 9) ||
        a.sortOrder - b.sortOrder
    );
  }, [allResults]);

  // phase별로 그룹핑
  const groupsByPhase = useMemo(() => {
    const result: Record<string, WorkGroup[]> = {};
    for (const g of groups) {
      if (!result[g.phase]) result[g.phase] = [];
      result[g.phase].push(g);
    }
    return result;
  }, [groups]);

  // 첫 그룹 자동 선택
  useEffect(() => {
    if (groups.length > 0 && !selectedGroupId) {
      setSelectedGroupId(groups[0].itemId);
    }
  }, [groups, selectedGroupId]);

  // ========================================
  // D-FE3: 우측 체크리스트
  // ========================================

  const currentItems = useMemo(
    () =>
      allResults
        .filter((r) => r.source_work_item_id === selectedGroupId)
        .sort((a, b) => parseInt(a.detail_sort_order || "0", 10) - parseInt(b.detail_sort_order || "0", 10)),
    [allResults, selectedGroupId]
  );

  const saveResultValue = useCallback(
    async (
      rowId: string,
      resultValue: string,
      isPassed: string | null,
      newStatus: string
    ) => {
      setSavingIds((prev) => new Set(prev).add(rowId));
      try {
        await apiClient.post("/pop/execute-action", {
          tasks: [
            { type: "data-update", targetTable: "process_work_result", targetColumn: "result_value", value: resultValue, items: [{ id: rowId }] },
            { type: "data-update", targetTable: "process_work_result", targetColumn: "status", value: newStatus, items: [{ id: rowId }] },
            ...(isPassed !== null
              ? [{ type: "data-update", targetTable: "process_work_result", targetColumn: "is_passed", value: isPassed, items: [{ id: rowId }] }]
              : []),
            { type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_by", value: user?.userId ?? "", items: [{ id: rowId }] },
            { type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_at", value: new Date().toISOString(), items: [{ id: rowId }] },
          ],
          data: { items: [{ id: rowId }], fieldValues: {} },
        });

        setAllResults((prev) =>
          prev.map((r) =>
            r.id === rowId
              ? {
                  ...r,
                  result_value: resultValue,
                  status: newStatus,
                  is_passed: isPassed,
                  recorded_by: user?.userId ?? null,
                  recorded_at: new Date().toISOString(),
                }
              : r
          )
        );
      } catch {
        toast.error("저장에 실패했습니다.");
      } finally {
        setSavingIds((prev) => {
          const next = new Set(prev);
          next.delete(rowId);
          return next;
        });
      }
    },
    [user?.userId]
  );

  // ========================================
  // D-FE4: 타이머
  // ========================================

  useEffect(() => {
    if (!cfg.showTimer || !processData?.started_at) return;
    const id = setInterval(() => setTick(Date.now()), 1000);
    return () => clearInterval(id);
  }, [cfg.showTimer, processData?.started_at]);

  const elapsedMs = useMemo(() => {
    if (!processData?.started_at) return 0;
    const now = tick;
    const totalMs = now - new Date(processData.started_at).getTime();
    const pausedSec = parseInt(processData.total_paused_time || "0", 10);
    const currentPauseMs = processData.paused_at
      ? now - new Date(processData.paused_at).getTime()
      : 0;
    return Math.max(0, totalMs - pausedSec * 1000 - currentPauseMs);
  }, [processData?.started_at, processData?.paused_at, processData?.total_paused_time, tick]);

  const formattedTime = useMemo(() => {
    const totalSec = Math.floor(elapsedMs / 1000);
    const h = String(Math.floor(totalSec / 3600)).padStart(2, "0");
    const m = String(Math.floor((totalSec % 3600) / 60)).padStart(2, "0");
    const s = String(totalSec % 60).padStart(2, "0");
    return `${h}:${m}:${s}`;
  }, [elapsedMs]);

  const isPaused = !!processData?.paused_at;
  const isStarted = !!processData?.started_at;

  const handleTimerAction = useCallback(
    async (action: "start" | "pause" | "resume") => {
      if (!workOrderProcessId) return;
      try {
        await apiClient.post("/api/pop/production/timer", {
          workOrderProcessId,
          action,
        });
        // 타이머 상태 새로고침
        const res = await dataApi.getTableData("work_order_process", {
          size: 1,
          filters: { id: workOrderProcessId },
        });
        const proc = (res.data?.[0] ?? null) as ProcessTimerData | null;
        if (proc) setProcessData(proc);
      } catch {
        toast.error("타이머 제어에 실패했습니다.");
      }
    },
    [workOrderProcessId]
  );

  // ========================================
  // D-FE5: 수량 등록 + 완료
  // ========================================

  const handleQuantityRegister = useCallback(async () => {
    if (!workOrderProcessId) return;
    try {
      await apiClient.post("/pop/execute-action", {
        tasks: [
          { type: "data-update", targetTable: "work_order_process", targetColumn: "good_qty", value: goodQty || "0", items: [{ id: workOrderProcessId }] },
          { type: "data-update", targetTable: "work_order_process", targetColumn: "defect_qty", value: defectQty || "0", items: [{ id: workOrderProcessId }] },
        ],
        data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
      });
      toast.success("수량이 등록되었습니다.");
    } catch {
      toast.error("수량 등록에 실패했습니다.");
    }
  }, [workOrderProcessId, goodQty, defectQty]);

  const handleProcessComplete = useCallback(async () => {
    if (!workOrderProcessId) return;
    try {
      await apiClient.post("/pop/execute-action", {
        tasks: [
          { type: "data-update", targetTable: "work_order_process", targetColumn: "status", value: "completed", items: [{ id: workOrderProcessId }] },
          { type: "data-update", targetTable: "work_order_process", targetColumn: "completed_at", value: new Date().toISOString(), items: [{ id: workOrderProcessId }] },
        ],
        data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
      });
      toast.success("공정이 완료되었습니다.");
      setProcessData((prev) =>
        prev ? { ...prev, status: "completed" } : prev
      );
    } catch {
      toast.error("공정 완료 처리에 실패했습니다.");
    }
  }, [workOrderProcessId]);

  // ========================================
  // 안전 장치
  // ========================================

  if (!parentRow) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        <AlertCircle className="mr-2 h-4 w-4" />
        카드를 선택해주세요
      </div>
    );
  }

  if (!workOrderProcessId) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        <AlertCircle className="mr-2 h-4 w-4" />
        공정 정보를 찾을 수 없습니다
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    );
  }

  if (allResults.length === 0) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        <AlertCircle className="mr-2 h-4 w-4" />
        작업기준이 등록되지 않았습니다
      </div>
    );
  }

  const isProcessCompleted = processData?.status === "completed";

  // ========================================
  // 렌더링
  // ========================================

  return (
    <div className="flex h-full flex-col">
      {/* 헤더 */}
      <div className="flex items-center justify-between border-b px-3 py-2">
        <h3 className="text-sm font-semibold">{processName}</h3>
        {cfg.showTimer && (
          <div className="flex items-center gap-2">
            <Timer className="h-4 w-4 text-muted-foreground" />
            <span className="font-mono text-sm font-medium tabular-nums">
              {formattedTime}
            </span>
            {!isProcessCompleted && (
              <>
                {!isStarted && (
                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("start")}>
                    <Play className="mr-1 h-3 w-3" />
                    시작
                  </Button>
                )}
                {isStarted && !isPaused && (
                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("pause")}>
                    <Pause className="mr-1 h-3 w-3" />
                    정지
                  </Button>
                )}
                {isStarted && isPaused && (
                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("resume")}>
                    <Play className="mr-1 h-3 w-3" />
                    재개
                  </Button>
                )}
              </>
            )}
          </div>
        )}
      </div>

      {/* 본문: 좌측 사이드바 + 우측 체크리스트 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 좌측 사이드바 */}
        <div className="w-40 shrink-0 overflow-y-auto border-r bg-muted/30">
          {(["PRE", "IN", "POST"] as WorkPhase[]).map((phase) => {
            const phaseGroups = groupsByPhase[phase];
            if (!phaseGroups || phaseGroups.length === 0) return null;
            return (
              <div key={phase}>
                <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase text-muted-foreground">
                  {cfg.phaseLabels[phase] ?? phase}
                </div>
                {phaseGroups.map((g) => (
                  <button
                    key={g.itemId}
                    className={cn(
                      "flex w-full flex-col px-3 py-1.5 text-left transition-colors",
                      selectedGroupId === g.itemId
                        ? "bg-primary/10 text-primary"
                        : "hover:bg-muted/60"
                    )}
                    onClick={() => setSelectedGroupId(g.itemId)}
                  >
                    <span className="text-xs font-medium leading-tight">
                      {g.title}
                    </span>
                    <span className="text-[10px] text-muted-foreground">
                      {g.completed}/{g.total} 완료
                    </span>
                  </button>
                ))}
              </div>
            );
          })}
        </div>

        {/* 우측 체크리스트 */}
        <div className="flex-1 overflow-y-auto p-3">
          {selectedGroupId && (
            <div className="space-y-2">
              {currentItems.map((item) => (
                <ChecklistItem
                  key={item.id}
                  item={item}
                  saving={savingIds.has(item.id)}
                  disabled={isProcessCompleted}
                  onSave={saveResultValue}
                />
              ))}
            </div>
          )}
        </div>
      </div>

      {/* 하단: 수량 입력 + 완료 */}
      {cfg.showQuantityInput && (
        <div className="flex items-center gap-2 border-t px-3 py-2">
          <Package className="h-4 w-4 shrink-0 text-muted-foreground" />
          <div className="flex items-center gap-1">
            <span className="text-xs text-muted-foreground">양품</span>
            <Input
              type="number"
              className="h-7 w-20 text-xs"
              value={goodQty}
              onChange={(e) => setGoodQty(e.target.value)}
              disabled={isProcessCompleted}
            />
          </div>
          <div className="flex items-center gap-1">
            <span className="text-xs text-muted-foreground">불량</span>
            <Input
              type="number"
              className="h-7 w-20 text-xs"
              value={defectQty}
              onChange={(e) => setDefectQty(e.target.value)}
              disabled={isProcessCompleted}
            />
          </div>
          <Button
            size="sm"
            variant="outline"
            className="h-7 text-xs"
            onClick={handleQuantityRegister}
            disabled={isProcessCompleted}
          >
            수량 등록
          </Button>
          <div className="flex-1" />
          {!isProcessCompleted && (
            <Button
              size="sm"
              variant="default"
              className="h-7 text-xs"
              onClick={handleProcessComplete}
            >
              <CheckCircle2 className="mr-1 h-3 w-3" />
              공정 완료
            </Button>
          )}
          {isProcessCompleted && (
            <Badge variant="outline" className="text-xs text-green-600">
              완료됨
            </Badge>
          )}
        </div>
      )}
    </div>
  );
}

// ========================================
// 체크리스트 개별 항목
// ========================================

interface ChecklistItemProps {
  item: WorkResultRow;
  saving: boolean;
  disabled: boolean;
  onSave: (
    rowId: string,
    resultValue: string,
    isPassed: string | null,
    newStatus: string
  ) => void;
}

function ChecklistItem({ item, saving, disabled, onSave }: ChecklistItemProps) {
  const isSaving = saving;
  const isDisabled = disabled || isSaving;

  switch (item.detail_type) {
    case "check":
      return <CheckItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
    case "inspect":
      return <InspectItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
    case "input":
      return <InputItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
    case "procedure":
      return <ProcedureItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
    case "material":
      return <MaterialItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
    default:
      return (
        <div className="rounded border p-2 text-xs text-muted-foreground">
          알 수 없는 유형: {item.detail_type}
        </div>
      );
  }
}

// ===== check: 체크박스 =====

function CheckItem({
  item,
  disabled,
  saving,
  onSave,
}: {
  item: WorkResultRow;
  disabled: boolean;
  saving: boolean;
  onSave: ChecklistItemProps["onSave"];
}) {
  const checked = item.result_value === "Y";
  return (
    <div
      className={cn(
        "flex items-center gap-2 rounded border px-3 py-2",
        item.status === "completed" && "bg-green-50 border-green-200"
      )}
    >
      <Checkbox
        checked={checked}
        disabled={disabled}
        onCheckedChange={(v) => {
          const val = v ? "Y" : "N";
          onSave(item.id, val, v ? "Y" : "N", v ? "completed" : "pending");
        }}
      />
      <span className="flex-1 text-xs">{item.detail_label}</span>
      {saving && <Loader2 className="h-3 w-3 animate-spin" />}
      {item.status === "completed" && !saving && (
        <Badge variant="outline" className="text-[10px] text-green-600">
          완료
        </Badge>
      )}
    </div>
  );
}

// ===== inspect: 측정값 입력 (범위 판정) =====

function InspectItem({
  item,
  disabled,
  saving,
  onSave,
}: {
  item: WorkResultRow;
  disabled: boolean;
  saving: boolean;
  onSave: ChecklistItemProps["onSave"];
}) {
  const [inputVal, setInputVal] = useState(item.result_value ?? "");
  const lower = parseFloat(item.lower_limit ?? "");
  const upper = parseFloat(item.upper_limit ?? "");
  const hasRange = !isNaN(lower) && !isNaN(upper);

  const handleBlur = () => {
    if (!inputVal || disabled) return;
    const numVal = parseFloat(inputVal);
    let passed: string | null = null;
    if (hasRange) {
      passed = numVal >= lower && numVal <= upper ? "Y" : "N";
    }
    onSave(item.id, inputVal, passed, "completed");
  };

  const isPassed = item.is_passed;

  return (
    <div
      className={cn(
        "rounded border px-3 py-2",
        isPassed === "Y" && "bg-green-50 border-green-200",
        isPassed === "N" && "bg-red-50 border-red-200"
      )}
    >
      <div className="mb-1 flex items-center justify-between">
        <span className="text-xs font-medium">{item.detail_label}</span>
        {hasRange && (
          <span className="text-[10px] text-muted-foreground">
            기준: {item.lower_limit} ~ {item.upper_limit}
            {item.spec_value ? ` (표준: ${item.spec_value})` : ""}
          </span>
        )}
      </div>
      <div className="flex items-center gap-2">
        <Input
          type="number"
          className="h-7 w-28 text-xs"
          value={inputVal}
          onChange={(e) => setInputVal(e.target.value)}
          onBlur={handleBlur}
          disabled={disabled}
          placeholder="측정값 입력"
        />
        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
        {isPassed === "Y" && !saving && (
          <Badge variant="outline" className="text-[10px] text-green-600">합격</Badge>
        )}
        {isPassed === "N" && !saving && (
          <Badge variant="outline" className="text-[10px] text-red-600">불합격</Badge>
        )}
      </div>
    </div>
  );
}

// ===== input: 자유 입력 =====

function InputItem({
  item,
  disabled,
  saving,
  onSave,
}: {
  item: WorkResultRow;
  disabled: boolean;
  saving: boolean;
  onSave: ChecklistItemProps["onSave"];
}) {
  const [inputVal, setInputVal] = useState(item.result_value ?? "");
  const inputType = item.input_type === "number" ? "number" : "text";

  const handleBlur = () => {
    if (!inputVal || disabled) return;
    onSave(item.id, inputVal, null, "completed");
  };

  return (
    <div
      className={cn(
        "rounded border px-3 py-2",
        item.status === "completed" && "bg-green-50 border-green-200"
      )}
    >
      <div className="mb-1 text-xs font-medium">{item.detail_label}</div>
      <div className="flex items-center gap-2">
        <Input
          type={inputType}
          className="h-7 flex-1 text-xs"
          value={inputVal}
          onChange={(e) => setInputVal(e.target.value)}
          onBlur={handleBlur}
          disabled={disabled}
          placeholder="값 입력"
        />
        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
      </div>
    </div>
  );
}

// ===== procedure: 절차 확인 (읽기 전용 + 체크) =====

function ProcedureItem({
  item,
  disabled,
  saving,
  onSave,
}: {
  item: WorkResultRow;
  disabled: boolean;
  saving: boolean;
  onSave: ChecklistItemProps["onSave"];
}) {
  const checked = item.result_value === "Y";
  return (
    <div
      className={cn(
        "rounded border px-3 py-2",
        item.status === "completed" && "bg-green-50 border-green-200"
      )}
    >
      <div className="mb-1 text-xs text-muted-foreground">
        {item.spec_value || item.detail_label}
      </div>
      <div className="flex items-center gap-2">
        <Checkbox
          checked={checked}
          disabled={disabled}
          onCheckedChange={(v) => {
            onSave(item.id, v ? "Y" : "N", null, v ? "completed" : "pending");
          }}
        />
        <span className="text-xs">확인</span>
        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
      </div>
    </div>
  );
}

// ===== material: 자재/LOT 입력 =====

function MaterialItem({
  item,
  disabled,
  saving,
  onSave,
}: {
  item: WorkResultRow;
  disabled: boolean;
  saving: boolean;
  onSave: ChecklistItemProps["onSave"];
}) {
  const [inputVal, setInputVal] = useState(item.result_value ?? "");

  const handleBlur = () => {
    if (!inputVal || disabled) return;
    onSave(item.id, inputVal, null, "completed");
  };

  return (
    <div
      className={cn(
        "rounded border px-3 py-2",
        item.status === "completed" && "bg-green-50 border-green-200"
      )}
    >
      <div className="mb-1 text-xs font-medium">{item.detail_label}</div>
      <div className="flex items-center gap-2">
        <Input
          className="h-7 flex-1 text-xs"
          value={inputVal}
          onChange={(e) => setInputVal(e.target.value)}
          onBlur={handleBlur}
          disabled={disabled}
          placeholder="LOT 번호 입력"
        />
        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
      </div>
    </div>
  );
}