"use client";

/**
 * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
 *
 * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
 * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
 *
 * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
 */

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Package,
  Loader2,
  Download,
  ClipboardEdit,
  History,
  AlertTriangle,
  RefreshCw,
  Search,
  RotateCcw,
  Settings2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { useAuth } from "@/hooks/useAuth";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { toast } from "sonner";
import { exportToExcel } from "@/lib/utils/excelExport";

const STOCK_TABLE = "inventory_stock";

const STOCK_COLUMNS = [
  { key: "item_number", label: "품목코드" },
  { key: "item_name", label: "품명" },
  { key: "warehouse_name", label: "창고" },
  { key: "location_name", label: "위치" },
  { key: "current_qty", label: "현재수량", align: "right" as const },
  { key: "safety_qty", label: "안전재고", align: "right" as const },
  { key: "unit", label: "단위" },
  { key: "status", label: "상태" },
];
const HISTORY_TABLE = "inventory_history";

const getStatusVariant = (
  status: string
): "default" | "secondary" | "outline" | "destructive" => {
  switch (status) {
    case "정상":
      return "default";
    case "부족":
      return "destructive";
    case "과잉":
      return "secondary";
    default:
      return "outline";
  }
};

const getHistoryTypeVariant = (
  type: string
): "default" | "secondary" | "outline" | "destructive" => {
  switch (type) {
    case "입고":
      return "default";
    case "출고":
      return "secondary";
    case "조정":
      return "outline";
    case "이동":
      return "destructive";
    default:
      return "outline";
  }
};

export default function InventoryStatusPage() {
  const { user } = useAuth();
  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);

  // 좌측: 재고 목록
  const [stockItems, setStockItems] = useState<any[]>([]);
  const [stockLoading, setStockLoading] = useState(false);
  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);

  // 검색 상태
  const [searchKeyword, setSearchKeyword] = useState("");
  const [searchStatus, setSearchStatus] = useState("all");

  // 우측: 이동 이력
  const [historyItems, setHistoryItems] = useState<any[]>([]);
  const [historyLoading, setHistoryLoading] = useState(false);

  // 조정 모달
  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
  const [adjustForm, setAdjustForm] = useState<{
    adjust_type: string;
    adjust_qty: string;
    reason: string;
  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
  const [adjustSaving, setAdjustSaving] = useState(false);

  // 카테고리 옵션
  const [categoryOptions, setCategoryOptions] = useState<
    Record<string, { code: string; label: string }[]>
  >({});

  // 카테고리 로드
  useEffect(() => {
    const load = async () => {
      const optMap: Record<string, { code: string; label: string }[]> = {};
      const flatten = (vals: any[]): { code: string; label: string }[] => {
        const result: { code: string; label: string }[] = [];
        for (const v of vals) {
          result.push({ code: v.valueCode, label: v.valueLabel });
          if (v.children?.length) result.push(...flatten(v.children));
        }
        return result;
      };
      for (const col of ["status", "unit"]) {
        try {
          const res = await apiClient.get(
            `/table-categories/${STOCK_TABLE}/${col}/values`
          );
          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
        } catch {
          /* skip */
        }
      }
      setCategoryOptions(optMap);
    };
    load();
  }, []);

  // 재고 목록 조회
  const fetchStock = useCallback(async () => {
    setStockLoading(true);
    try {
      const res = await apiClient.post(
        `/table-management/tables/${STOCK_TABLE}/data`,
        {
          page: 1,
          size: 500,
          autoFilter: true,
          sort: { columnName: "item_number", order: "asc" },
        }
      );
      const raw = res.data?.data?.data || res.data?.data?.rows || [];
      const resolve = (col: string, code: string) => {
        if (!code) return "";
        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
      };
      const data = raw.map((r: any) => ({
        ...r,
        status: resolve("status", r.status),
        unit: resolve("unit", r.unit),
        _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
      }));
      setStockItems(data);
    } catch {
      toast.error("재고 목록을 불러오지 못했어요");
    } finally {
      setStockLoading(false);
    }
  }, [categoryOptions]);

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

  // 클라이언트 사이드 필터링
  const filteredStock = useMemo(() => {
    return stockItems.filter((item) => {
      const kw = searchKeyword.trim().toLowerCase();
      if (
        kw &&
        !item.item_number?.toLowerCase().includes(kw) &&
        !item.item_name?.toLowerCase().includes(kw) &&
        !item.warehouse_name?.toLowerCase().includes(kw)
      )
        return false;
      if (searchStatus !== "all" && item.status !== searchStatus) return false;
      return true;
    });
  }, [stockItems, searchKeyword, searchStatus]);

  // 선택된 재고
  const selectedStock = stockItems.find((s) => s.id === selectedStockId);

  // 이력 조회
  const fetchHistory = useCallback(async () => {
    if (!selectedStock?.item_number) {
      setHistoryItems([]);
      return;
    }
    setHistoryLoading(true);
    try {
      const historyFilters: any[] = [
        {
          columnName: "item_number",
          operator: "equals",
          value: selectedStock.item_number,
        },
      ];
      if (selectedStock.warehouse_code) {
        historyFilters.push({
          columnName: "warehouse_code",
          operator: "equals",
          value: selectedStock.warehouse_code,
        });
      }
      const res = await apiClient.post(
        `/table-management/tables/${HISTORY_TABLE}/data`,
        {
          page: 1,
          size: 500,
          dataFilter: { enabled: true, filters: historyFilters },
          autoFilter: true,
          sort: { columnName: "history_date", order: "desc" },
        }
      );
      const raw = res.data?.data?.data || res.data?.data?.rows || [];
      setHistoryItems(raw);
    } catch {
      toast.error("재고 이력을 불러오지 못했어요");
    } finally {
      setHistoryLoading(false);
    }
  }, [selectedStock?.item_number, selectedStock?.warehouse_code]);

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

  // 재고 조정 저장
  const handleAdjustSave = async () => {
    if (!selectedStock) return;
    const qty = Number(adjustForm.adjust_qty);
    if (!qty || qty <= 0) {
      toast.error("조정 수량을 입력해주세요");
      return;
    }
    if (!adjustForm.reason.trim()) {
      toast.error("조정 사유를 입력해주세요");
      return;
    }
    setAdjustSaving(true);
    try {
      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;

      await apiClient.post(
        `/table-management/tables/${HISTORY_TABLE}/add`,
        {
          id: crypto.randomUUID(),
          item_number: selectedStock.item_number,
          warehouse_code: selectedStock.warehouse_code || "",
          location_code: selectedStock.location_code || "",
          history_type: "조정",
          history_date: new Date().toISOString().slice(0, 10),
          change_qty: changeQty,
          after_qty: afterQty,
          reason: adjustForm.reason.trim(),
          created_by: user?.userId || "",
        }
      );

      await apiClient.put(
        `/table-management/tables/${STOCK_TABLE}/edit`,
        {
          originalData: { id: selectedStock.id },
          updatedData: { current_qty: afterQty },
        }
      );

      toast.success("재고가 조정되었어요");
      setAdjustModalOpen(false);
      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
      fetchStock();
    } catch {
      toast.error("재고 조정에 실패했어요");
    } finally {
      setAdjustSaving(false);
    }
  };

  // 엑셀 내보내기
  const handleExcelExport = () => {
    if (filteredStock.length === 0) {
      toast.error("내보낼 데이터가 없어요");
      return;
    }
    exportToExcel(
      filteredStock.map((r) => ({
        품목코드: r.item_number,
        품명: r.item_name,
        창고: r.warehouse_name,
        위치: r.location_name,
        현재수량: r.current_qty,
        안전재고: r.safety_qty,
        단위: r.unit,
        상태: r.status,
      })),
      "재고현황"
    );
  };

  const statusOptions = categoryOptions["status"] || [];

  return (
    <div className="flex flex-col h-full gap-3 p-3">
      {/* 검색 바 */}
      <div className="shrink-0 flex items-center gap-2 px-1">
        <div className="relative flex-1 max-w-xs">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <Input
            className="pl-8 h-8 text-xs"
            placeholder="품목코드, 품명, 창고 검색"
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
          />
        </div>
        <Select value={searchStatus} onValueChange={setSearchStatus}>
          <SelectTrigger className="h-8 w-[130px] text-xs">
            <SelectValue placeholder="상태 전체" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">상태 전체</SelectItem>
            {statusOptions.map((o) => (
              <SelectItem key={o.code} value={o.label}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button
          variant="ghost"
          size="sm"
          className="h-8 px-2"
          onClick={() => {
            setSearchKeyword("");
            setSearchStatus("all");
          }}
        >
          <RotateCcw className="h-3.5 w-3.5" />
        </Button>
        <div className="ml-auto flex items-center gap-2">
          <span className="text-xs text-muted-foreground">
            {filteredStock.length}건
          </span>
          <Button
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs"
            onClick={handleExcelExport}
          >
            <Download className="h-3.5 w-3.5" />
            엑셀
          </Button>
          <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
            <Settings2 className="h-3.5 w-3.5" />
          </Button>
        </div>
      </div>

      {/* 마스터-디테일 패널 */}
      <ResizablePanelGroup
        direction="horizontal"
        className="flex-1 rounded-lg border bg-card"
      >
        {/* 좌측: 재고 목록 */}
        <ResizablePanel defaultSize={55} minSize={30}>
          <div className="flex flex-col h-full">
            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
              <div className="flex items-center gap-2">
                <span className="text-[13px] font-bold">재고 목록</span>
                <Badge variant="default" className="rounded-full text-[11px]">
                  {filteredStock.length}건
                </Badge>
              </div>
            </div>

            <div className="flex-1 overflow-auto">
              {stockLoading ? (
                <div className="flex items-center justify-center h-32">
                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                </div>
              ) : filteredStock.length === 0 ? (
                <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
                  등록된 재고가 없어요
                </div>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow className="text-[11px]">
                      <TableHead className="w-8 text-center">#</TableHead>
                      {ts.visibleColumns.map((col) => (
                        <TableHead
                          key={col.key}
                          className={cn(col.align === "right" && "text-right")}
                        >
                          {col.label}
                        </TableHead>
                      ))}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredStock.map((item, idx) => (
                      <TableRow
                        key={item.id}
                        className={cn(
                          "cursor-pointer text-xs",
                          selectedStockId === item.id && "bg-primary/10",
                          item._isLow && "bg-destructive/5"
                        )}
                        onClick={() => setSelectedStockId(item.id)}
                      >
                        <TableCell className="text-center text-muted-foreground">
                          {idx + 1}
                        </TableCell>
                        {ts.visibleColumns.map((col) => {
                          if (col.key === "current_qty") {
                            return (
                              <TableCell key={col.key} className="text-right font-mono">
                                <span className={cn(item._isLow && "text-destructive font-bold")}>
                                  {Number(item.current_qty || 0).toLocaleString()}
                                </span>
                                {item._isLow && (
                                  <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
                                )}
                              </TableCell>
                            );
                          }
                          if (col.key === "safety_qty") {
                            return (
                              <TableCell key={col.key} className="text-right font-mono">
                                {Number(item.safety_qty || 0).toLocaleString()}
                              </TableCell>
                            );
                          }
                          if (col.key === "status") {
                            return (
                              <TableCell key={col.key}>
                                <Badge variant={getStatusVariant(item.status)} className="text-[10px]">
                                  {item.status}
                                </Badge>
                              </TableCell>
                            );
                          }
                          return (
                            <TableCell key={col.key} className="truncate max-w-[150px]">
                              {item[col.key] ?? ""}
                            </TableCell>
                          );
                        })}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </div>
          </div>
        </ResizablePanel>

        <ResizableHandle withHandle />

        {/* 우측: 상세 이력 */}
        <ResizablePanel defaultSize={45} minSize={25}>
          <div className="flex flex-col h-full">
            {!selectedStock ? (
              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
                <p className="text-sm font-semibold text-muted-foreground">
                  품목을 선택해주세요
                </p>
                <p className="text-xs text-muted-foreground/70 mt-1">
                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
                </p>
              </div>
            ) : (
              <>
                {/* 패널 헤더 */}
                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
                  <div className="flex items-center gap-2">
                    <History className="h-4 w-4 text-muted-foreground" />
                    <span className="text-[13px] font-bold">
                      {selectedStock.item_name || selectedStock.item_number}
                    </span>
                    <Badge
                      variant="outline"
                      className="rounded-full text-[11px] font-mono"
                    >
                      {selectedStock.item_number}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="flex items-center gap-1.5 text-xs">
                      <span className="text-muted-foreground">현재:</span>
                      <span
                        className={cn(
                          "font-bold font-mono",
                          selectedStock._isLow
                            ? "text-destructive"
                            : "text-foreground"
                        )}
                      >
                        {Number(selectedStock.current_qty || 0).toLocaleString()}
                      </span>
                      {selectedStock._isLow && (
                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
                      )}
                    </div>
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-7 gap-1 text-xs"
                      onClick={() => {
                        setAdjustForm({
                          adjust_type: "증가",
                          adjust_qty: "",
                          reason: "",
                        });
                        setAdjustModalOpen(true);
                      }}
                    >
                      <ClipboardEdit className="h-3.5 w-3.5" />
                      재고 조정
                    </Button>
                  </div>
                </div>

                {/* 재고 요약 카드 */}
                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
                    <span className="text-[10px] text-muted-foreground">현재수량</span>
                    <span className="text-sm font-bold font-mono">
                      {Number(selectedStock.current_qty || 0).toLocaleString()}
                    </span>
                  </div>
                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
                    <span className="text-[10px] text-muted-foreground">안전재고</span>
                    <span className="text-sm font-bold font-mono">
                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
                    </span>
                  </div>
                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
                    <span className="text-[10px] text-muted-foreground">창고</span>
                    <span className="text-sm font-bold truncate max-w-full">
                      {selectedStock.warehouse_name || "-"}
                    </span>
                  </div>
                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
                    <span className="text-[10px] text-muted-foreground">상태</span>
                    <Badge
                      variant={getStatusVariant(selectedStock.status)}
                      className="text-[10px] mt-0.5"
                    >
                      {selectedStock.status || "-"}
                    </Badge>
                  </div>
                </div>

                {/* 이력 서브헤더 */}
                <div className="flex items-center justify-between px-4 py-2 border-b">
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-semibold text-muted-foreground">
                      재고 이동 이력
                    </span>
                    <Badge variant="secondary" className="rounded-full text-[10px]">
                      {historyItems.length}건
                    </Badge>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-7 gap-1 text-xs"
                    onClick={fetchHistory}
                  >
                    <RefreshCw className="h-3 w-3" />
                    새로고침
                  </Button>
                </div>

                {/* 이력 테이블 */}
                <div className="flex-1 overflow-auto">
                  {historyLoading ? (
                    <div className="flex items-center justify-center h-20">
                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                    </div>
                  ) : historyItems.length === 0 ? (
                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
                      재고 이동 이력이 없어요
                    </div>
                  ) : (
                    <Table>
                      <TableHeader>
                        <TableRow className="text-[11px]">
                          <TableHead className="w-8 text-center">#</TableHead>
                          <TableHead className="w-[110px]">일자</TableHead>
                          <TableHead className="w-[80px]">유형</TableHead>
                          <TableHead className="w-[90px] text-right">변동수량</TableHead>
                          <TableHead className="w-[90px] text-right">이후수량</TableHead>
                          <TableHead className="w-[120px]">참조번호</TableHead>
                          <TableHead>사유</TableHead>
                          <TableHead className="w-[80px]">처리자</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {historyItems.map((h, idx) => (
                          <TableRow key={h.id || idx} className="text-xs">
                            <TableCell className="text-center text-muted-foreground">
                              {idx + 1}
                            </TableCell>
                            <TableCell className="font-mono">
                              {h.history_date}
                            </TableCell>
                            <TableCell>
                              <Badge
                                variant={getHistoryTypeVariant(h.history_type)}
                                className="text-[10px]"
                              >
                                {h.history_type}
                              </Badge>
                            </TableCell>
                            <TableCell
                              className={cn(
                                "text-right font-mono",
                                Number(h.change_qty) > 0
                                  ? "text-primary"
                                  : "text-destructive"
                              )}
                            >
                              {Number(h.change_qty) > 0 ? "+" : ""}
                              {Number(h.change_qty || 0).toLocaleString()}
                            </TableCell>
                            <TableCell className="text-right font-mono">
                              {Number(h.after_qty || 0).toLocaleString()}
                            </TableCell>
                            <TableCell className="font-mono truncate max-w-[120px]">
                              {h.reference_no}
                            </TableCell>
                            <TableCell className="truncate max-w-[150px]">
                              {h.reason}
                            </TableCell>
                            <TableCell>{h.created_by}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  )}
                </div>
              </>
            )}
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>

      {/* 테이블 설정 모달 */}
      <TableSettingsModal
        open={ts.open}
        onOpenChange={ts.setOpen}
        tableName={ts.tableName}
        settingsId={ts.settingsId}
        onSave={ts.applySettings}
      />

      {/* 재고 조정 Dialog */}
      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>재고 조정</DialogTitle>
            <DialogDescription>
              {selectedStock
                ? `${selectedStock.item_name || selectedStock.item_number} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
                : ""}
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 py-2">
            <div className="grid gap-1.5">
              <Label className="text-[11px] font-semibold text-muted-foreground">
                조정 유형
              </Label>
              <Select
                value={adjustForm.adjust_type}
                onValueChange={(v) =>
                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="조정 유형 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-1.5">
              <Label className="text-[11px] font-semibold text-muted-foreground">
                조정 수량
              </Label>
              <Input
                type="number"
                min={1}
                placeholder="수량을 입력해주세요"
                value={adjustForm.adjust_qty}
                onChange={(e) =>
                  setAdjustForm((prev) => ({
                    ...prev,
                    adjust_qty: e.target.value,
                  }))
                }
              />
              {adjustForm.adjust_qty && selectedStock && (
                <p className="text-xs text-muted-foreground">
                  조정 후 수량:{" "}
                  <span className="font-mono font-bold">
                    {(
                      Number(selectedStock.current_qty || 0) +
                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
                        Number(adjustForm.adjust_qty || 0)
                    ).toLocaleString()}
                  </span>
                </p>
              )}
            </div>

            <div className="grid gap-1.5">
              <Label className="text-[11px] font-semibold text-muted-foreground">
                조정 사유 *
              </Label>
              <Textarea
                placeholder="조정 사유를 입력해주세요"
                rows={3}
                value={adjustForm.reason}
                onChange={(e) =>
                  setAdjustForm((prev) => ({
                    ...prev,
                    reason: e.target.value,
                  }))
                }
              />
            </div>
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setAdjustModalOpen(false)}
            >
              취소
            </Button>
            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
              {adjustSaving && (
                <Loader2 className="h-4 w-4 animate-spin mr-1" />
              )}
              조정하기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
