"use client";

import React, { useState, useMemo, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
// Card 제거 — rounded-lg border bg-card 패턴 사용
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Search,
  RotateCcw,
  Package,
  ClipboardList,
  Factory,
  MapPin,
  AlertTriangle,
  CheckCircle2,
  Loader2,
  Inbox,
  Settings2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  getWorkOrders,
  getMaterialStatus,
  getWarehouses,
  type WorkOrder,
  type MaterialData,
  type WarehouseData,
} from "@/lib/api/materialStatus";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { apiClient } from "@/lib/api/client";

const GRID_COLUMNS = [
  { key: "plan_no", label: "계획번호" },
  { key: "item_code", label: "품목코드" },
  { key: "item_name", label: "품목명" },
  { key: "plan_qty", label: "수량" },
  { key: "plan_date", label: "일자" },
  { key: "status", label: "상태" },
];

const formatDate = (date: Date) => {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
};

const FALLBACK_STATUS_MAP: Record<string, string> = {
  planned: "계획",
  in_progress: "진행중",
  completed: "완료",
  pending: "대기",
  cancelled: "취소",
};

const STATUS_STYLE_MAP: Record<string, string> = {
  planned: "bg-secondary text-secondary-foreground border-border",
  pending: "bg-secondary text-secondary-foreground border-border",
  in_progress: "bg-primary/10 text-primary border-primary/20",
  completed: "bg-accent text-accent-foreground border-accent/50",
  cancelled: "bg-muted text-muted-foreground border-border",
};

// 카테고리 라벨 기반으로 스타일 매칭
const LABEL_STYLE_MAP: Record<string, string> = {
  "일반": "bg-secondary text-secondary-foreground border-border",
  "긴급": "bg-destructive/10 text-destructive border-destructive/20",
  "계획": "bg-secondary text-secondary-foreground border-border",
  "대기": "bg-secondary text-secondary-foreground border-border",
  "진행중": "bg-primary/10 text-primary border-primary/20",
  "완료": "bg-accent text-accent-foreground border-accent/50",
  "취소": "bg-muted text-muted-foreground border-border",
};

export default function MaterialStatusPage() {
  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
  const today = new Date();
  const monthAgo = new Date(today);
  monthAgo.setMonth(today.getMonth() - 1);

  const [searchDateFrom, setSearchDateFrom] = useState(formatDate(monthAgo));
  const [searchDateTo, setSearchDateTo] = useState(formatDate(today));
  const [searchItemCode, setSearchItemCode] = useState("");
  const [searchItemName, setSearchItemName] = useState("");

  // 카테고리 코드→라벨 매핑
  const [statusMap, setStatusMap] = useState<Record<string, string>>({});

  useEffect(() => {
    (async () => {
      try {
        const res = await apiClient.get("/table-categories/work_instruction/status/values");
        if (res.data?.success && res.data.data?.length > 0) {
          const map: Record<string, string> = {};
          const flatten = (vals: any[]) => {
            for (const v of vals) {
              map[v.valueCode] = v.valueLabel;
              if (v.children?.length) flatten(v.children);
            }
          };
          flatten(res.data.data);
          setStatusMap(map);
        }
      } catch { /* ignore */ }
    })();
  }, []);

  const getStatusLabel = useCallback((status: string) => {
    return statusMap[status] || FALLBACK_STATUS_MAP[status] || status;
  }, [statusMap]);

  const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
  const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
  const [checkedWoIds, setCheckedWoIds] = useState<string[]>([]);
  const [selectedWoId, setSelectedWoId] = useState<string | null>(null);

  const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
  const [warehouse, setWarehouse] = useState("");
  const [materialSearch, setMaterialSearch] = useState("");
  const [showShortageOnly, setShowShortageOnly] = useState(false);
  const [materials, setMaterials] = useState<MaterialData[]>([]);
  const [materialsLoading, setMaterialsLoading] = useState(false);

  // 창고 목록 초기 로드
  useEffect(() => {
    (async () => {
      const res = await getWarehouses();
      if (res.success && res.data) {
        setWarehouses(res.data);
      }
    })();
  }, []);

  // 작업지시 검색
  const handleSearch = useCallback(async () => {
    setWorkOrdersLoading(true);
    try {
      const res = await getWorkOrders({
        dateFrom: searchDateFrom,
        dateTo: searchDateTo,
        itemCode: searchItemCode || undefined,
        itemName: searchItemName || undefined,
      });
      if (res.success && res.data) {
        setWorkOrders(res.data);
        setCheckedWoIds([]);
        setSelectedWoId(null);
        setMaterials([]);
      }
    } finally {
      setWorkOrdersLoading(false);
    }
  }, [searchDateFrom, searchDateTo, searchItemCode, searchItemName]);

  // 초기 로드
  useEffect(() => {
    handleSearch();
  }, []);

  const isAllChecked =
    workOrders.length > 0 && checkedWoIds.length === workOrders.length;

  const handleCheckAll = useCallback(
    (checked: boolean) => {
      setCheckedWoIds(checked ? workOrders.map((wo) => wo.id) : []);
    },
    [workOrders]
  );

  const handleCheckWo = useCallback((id: string, checked: boolean) => {
    setCheckedWoIds((prev) =>
      checked ? [...prev, id] : prev.filter((i) => i !== id)
    );
  }, []);

  const handleSelectWo = useCallback((id: string) => {
    setSelectedWoId((prev) => (prev === id ? null : id));
  }, []);

  // 선택된 작업지시의 자재 조회
  const handleLoadSelectedMaterials = useCallback(async () => {
    if (checkedWoIds.length === 0) {
      alert("자재를 조회할 작업지시를 선택해주세요.");
      return;
    }

    setMaterialsLoading(true);
    try {
      const res = await getMaterialStatus({
        planIds: checkedWoIds,
        warehouseCode: warehouse || undefined,
      });
      if (res.success && res.data) {
        setMaterials(res.data);
      }
    } finally {
      setMaterialsLoading(false);
    }
  }, [checkedWoIds, warehouse]);

  const handleResetSearch = useCallback(() => {
    const t = new Date();
    const m = new Date(t);
    m.setMonth(t.getMonth() - 1);
    setSearchDateFrom(formatDate(m));
    setSearchDateTo(formatDate(t));
    setSearchItemCode("");
    setSearchItemName("");
    setMaterialSearch("");
    setShowShortageOnly(false);
  }, []);

  const filteredMaterials = useMemo(() => {
    return materials.filter((m) => {
      const searchLower = materialSearch.toLowerCase();
      const matchesSearch =
        !materialSearch ||
        m.code.toLowerCase().includes(searchLower) ||
        m.name.toLowerCase().includes(searchLower);
      const matchesShortage = !showShortageOnly || m.current < m.required;
      return matchesSearch && matchesShortage;
    });
  }, [materials, materialSearch, showShortageOnly]);

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
      {/* 검색 영역 */}
      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
          <div className="flex flex-col gap-1">
            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
            <div className="flex items-center gap-1.5">
              <Input
                type="date"
                className="h-9 w-[140px]"
                value={searchDateFrom}
                onChange={(e) => setSearchDateFrom(e.target.value)}
              />
              <span className="text-muted-foreground/50 text-xs">~</span>
              <Input
                type="date"
                className="h-9 w-[140px]"
                value={searchDateTo}
                onChange={(e) => setSearchDateTo(e.target.value)}
              />
            </div>
          </div>

          <div className="flex flex-col gap-1">
            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
            <Input
              placeholder="품목코드"
              className="h-9 w-[140px]"
              value={searchItemCode}
              onChange={(e) => setSearchItemCode(e.target.value)}
            />
          </div>

          <div className="flex flex-col gap-1">
            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
            <Input
              placeholder="품목명"
              className="h-9 w-[140px]"
              value={searchItemName}
              onChange={(e) => setSearchItemName(e.target.value)}
            />
          </div>

          <div className="flex-1" />

          <div className="flex items-end gap-2">
            <Button
              variant="outline"
              size="sm"
              className="h-9"
              onClick={handleResetSearch}
            >
              <RotateCcw className="mr-1 h-4 w-4" />
              초기화
            </Button>
            <Button
              size="sm"
              className="h-9"
              onClick={handleSearch}
              disabled={workOrdersLoading}
            >
              {workOrdersLoading ? (
                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
              ) : (
                <Search className="mr-1 h-4 w-4" />
              )}
              검색
            </Button>
          </div>
      </div>

      {/* 메인 콘텐츠 (좌우 분할) */}
      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
        <ResizablePanelGroup direction="horizontal">
          {/* 왼쪽: 작업지시 리스트 */}
          <ResizablePanel defaultSize={35} minSize={25}>
            <div className="flex h-full flex-col">
              {/* 패널 헤더 */}
              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
                <div className="flex items-center gap-2">
                  <Checkbox
                    checked={isAllChecked}
                    onCheckedChange={handleCheckAll}
                  />
                  <ClipboardList className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm font-semibold">작업지시 리스트</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
                    {workOrders.length}건
                  </span>
                  <Button
                    size="sm"
                    className="h-8"
                    onClick={handleLoadSelectedMaterials}
                    disabled={materialsLoading}
                  >
                    {materialsLoading ? (
                      <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                    ) : (
                      <Search className="mr-1.5 h-3.5 w-3.5" />
                    )}
                    자재조회
                  </Button>
                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
                    <Settings2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>

              {/* 작업지시 목록 */}
              <div className="flex-1 space-y-2 overflow-auto p-3">
                {workOrdersLoading ? (
                  <div className="flex flex-col items-center justify-center py-12 text-center">
                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                    <p className="text-sm text-muted-foreground">
                      작업지시를 조회하고 있어요...
                    </p>
                  </div>
                ) : workOrders.length === 0 ? (
                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                    <p className="text-sm text-muted-foreground">
                      조회된 작업지시가 없어요
                    </p>
                  </div>
                ) : (
                  ts.groupData(workOrders).map((wo) => {
                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
                    return (
                      <div
                        key={wo.id}
                        className={cn(
                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
                          "hover:border-primary/50 hover:shadow-sm",
                          selectedWoId === wo.id
                            ? "border-primary bg-primary/5 shadow-sm"
                            : "border-border"
                        )}
                        onClick={() => handleSelectWo(wo.id)}
                      >
                        <div
                          className="flex items-start pt-0.5"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <Checkbox
                            checked={checkedWoIds.includes(wo.id)}
                            onCheckedChange={(c) =>
                              handleCheckWo(wo.id, c as boolean)
                            }
                          />
                        </div>
                        <div className="flex flex-1 flex-col gap-1.5">
                          <div className="flex items-center gap-2">
                            {ts.isVisible("plan_no") && (
                              <span className="text-sm font-bold text-primary">
                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
                              </span>
                            )}
                            {ts.isVisible("status") && (
                              <span
                                className={cn(
                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
                                  STATUS_STYLE_MAP[wo.status] || LABEL_STYLE_MAP[getStatusLabel(wo.status)] || "bg-muted text-muted-foreground border-border"
                                )}
                              >
                                {getStatusLabel(wo.status)}
                              </span>
                            )}
                          </div>
                          <div className="flex items-center gap-1.5">
                            {ts.isVisible("item_name") && (
                              <span className="text-sm font-semibold">
                                {wo.item_name}
                              </span>
                            )}
                            {ts.isVisible("item_code") && (
                              <span className="text-xs text-muted-foreground">
                                ({wo.item_code})
                              </span>
                            )}
                          </div>
                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
                            {ts.isVisible("plan_qty") && (
                              <>
                                <span>수량:</span>
                                <span className="font-semibold text-foreground">
                                  {Number(wo.plan_qty).toLocaleString()}개
                                </span>
                              </>
                            )}
                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
                              <span className="mx-1">|</span>
                            )}
                            {ts.isVisible("plan_date") && (
                              <>
                                <span>일자:</span>
                                <span className="font-semibold text-foreground">
                                  {wo.plan_date
                                    ? new Date(wo.plan_date)
                                        .toISOString()
                                        .slice(0, 10)
                                    : "-"}
                                </span>
                              </>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 오른쪽: 원자재 현황 */}
          <ResizablePanel defaultSize={65} minSize={35}>
            <div className="flex h-full flex-col">
              {/* 패널 헤더 */}
              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
                <Factory className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-semibold">원자재 재고 현황</span>
              </div>

              {/* 필터 */}
              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
                <Input
                  placeholder="원자재 검색"
                  className="h-8 min-w-[150px] flex-1 text-xs"
                  value={materialSearch}
                  onChange={(e) => setMaterialSearch(e.target.value)}
                />
                <Select value={warehouse} onValueChange={setWarehouse}>
                  <SelectTrigger className="h-8 w-[180px] text-xs">
                    <SelectValue placeholder="전체 창고" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="__all__">전체 창고</SelectItem>
                    {warehouses.map((wh) => (
                      <SelectItem
                        key={wh.warehouse_code}
                        value={wh.warehouse_code}
                      >
                        {wh.warehouse_name}
                        {wh.warehouse_type
                          ? ` (${wh.warehouse_type})`
                          : ""}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
                  <Checkbox
                    checked={showShortageOnly}
                    onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
                  />
                  <span>부족한 것만 보기</span>
                </label>
                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
                  {filteredMaterials.length}개 품목
                </span>
              </div>

              {/* 원자재 목록 */}
              <div className="flex-1 space-y-2 overflow-auto p-3">
                {materialsLoading ? (
                  <div className="flex flex-col items-center justify-center py-12 text-center">
                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                    <p className="text-sm text-muted-foreground">
                      자재현황을 조회하고 있어요...
                    </p>
                  </div>
                ) : materials.length === 0 ? (
                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                    <p className="text-sm text-muted-foreground">
                      작업지시를 선택하고 자재조회 버튼을 클릭해주세요
                    </p>
                  </div>
                ) : filteredMaterials.length === 0 ? (
                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
                    <Package className="h-10 w-10 text-muted-foreground/30" />
                    <p className="text-sm text-muted-foreground">
                      조회된 원자재가 없어요
                    </p>
                  </div>
                ) : (
                  filteredMaterials.map((material) => {
                    const shortage = material.required - material.current;
                    const isShortage = shortage > 0;
                    const percentage =
                      material.required > 0
                        ? Math.min(
                            (material.current / material.required) * 100,
                            100
                          )
                        : 100;

                    return (
                      <div
                        key={material.code}
                        className={cn(
                          "rounded-lg border p-3 transition-all hover:shadow-sm",
                          isShortage
                            ? "border-destructive/30 bg-destructive/5"
                            : "border-primary/15 bg-primary/5"
                        )}
                      >
                        {/* 메인 정보 라인 */}
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="text-sm font-bold">
                            {material.name}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            ({material.code})
                          </span>
                          <span className="text-xs text-muted-foreground">
                            |
                          </span>
                          <span className="text-xs text-muted-foreground">
                            필요:
                          </span>
                          <span className="text-xs font-semibold text-primary">
                            {material.required.toLocaleString()}
                            {material.unit}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            |
                          </span>
                          <span className="text-xs text-muted-foreground">
                            현재:
                          </span>
                          <span
                            className={cn(
                              "text-xs font-semibold",
                              isShortage
                                ? "text-destructive"
                                : "text-foreground"
                            )}
                          >
                            {material.current.toLocaleString()}
                            {material.unit}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            |
                          </span>
                          <span className="text-xs text-muted-foreground">
                            {isShortage ? "부족:" : "여유:"}
                          </span>
                          <span
                            className={cn(
                              "text-xs font-semibold",
                              isShortage
                                ? "text-destructive"
                                : "text-primary"
                            )}
                          >
                            {Math.abs(shortage).toLocaleString()}
                            {material.unit}
                          </span>
                          <span className="text-xs font-semibold text-muted-foreground">
                            ({percentage.toFixed(0)}%)
                          </span>

                          {isShortage ? (
                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-destructive bg-destructive/10 px-2 py-0.5 text-[11px] font-semibold text-destructive">
                              <AlertTriangle className="h-3 w-3" />
                              부족
                            </span>
                          ) : (
                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
                              <CheckCircle2 className="h-3 w-3" />
                              충분
                            </span>
                          )}
                        </div>

                        {/* 위치별 재고 */}
                        {material.locations.length > 0 && (
                          <div className="mt-2 flex flex-wrap items-center gap-1.5">
                            <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
                            {material.locations.map((loc, idx) => (
                              <span
                                key={idx}
                                className="inline-flex items-center gap-1 rounded bg-muted/40 px-2 py-0.5 text-xs transition-colors hover:bg-muted/60"
                              >
                                <span className="font-semibold font-mono text-primary">
                                  {loc.location || loc.warehouse}
                                </span>
                                <span className="font-semibold">
                                  {loc.qty.toLocaleString()}
                                  {material.unit}
                                </span>
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      <TableSettingsModal
        open={ts.open}
        onOpenChange={ts.setOpen}
        tableName={ts.tableName}
        settingsId={ts.settingsId}
        defaultVisibleKeys={ts.defaultVisibleKeys}
        onSave={ts.applySettings}
      />
    </div>
  );
}