"use client";

import { useCallback, useEffect, useState } from "react";
import { RefreshCcw, Warehouse, Download, LayoutGrid, Columns3 } from "lucide-react";
import { downloadXlsx } from "@/lib/xlsx-export";

interface Wh { OBJID: string; WH_CODE: string; WH_NAME: string }
interface ItemRow {
  ITEM_OBJID: string; ITEM_CODE: string; ITEM_NAME: string;
  STOCK: Record<string, number>;       // wh_code → 현재고
  AVAILABLE: Record<string, number>;   // wh_code → 여유분(현재고 - 진행중)
  TOTAL_STOCK: number;
  TOTAL_PENDING: number;
}

const fmt = (n: number) => Number(n || 0).toLocaleString("ko-KR");

// 이번 주 월요일 → 오늘
function weekRange() {
  const today = new Date();
  const day = today.getDay(); // 0=일
  const mondayOffset = day === 0 ? -6 : 1 - day;
  const monday = new Date(today);
  monday.setDate(today.getDate() + mondayOffset);
  const iso = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
  return [iso(monday), iso(today)];
}

export default function WhStockStatusPage() {
  const [[dateFrom, dateTo], setRange] = useState(weekRange());
  const [warehouses, setWarehouses] = useState<Wh[]>([]);
  const [items, setItems] = useState<ItemRow[]>([]);
  const [loading, setLoading] = useState(false);
  // 보기 모드: by-wh = 헤더가 창고(가로로 김) / by-item = 헤더가 품목(오른쪽으로 길게)
  const [viewMode, setViewMode] = useState<"by-wh" | "by-item">("by-item");

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/m/admin/wh-stock-status", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ dateFrom, dateTo }),
      });
      const j = await res.json();
      setWarehouses(j.WAREHOUSES ?? []);
      setItems(j.ITEMS ?? []);
    } finally { setLoading(false); }
  }, [dateFrom, dateTo]);

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

  const onExport = () => {
    if (items.length === 0) return;
    const cols = [
      { header: "품목", key: "ITEM_NAME" },
      { header: "분류", key: "KIND" },
      ...warehouses.map((w) => ({ header: w.WH_NAME, key: w.WH_CODE })),
    ];
    type Row = Record<string, string | number>;
    const data: Row[] = [];
    for (const it of items) {
      const stockRow: Row = { ITEM_NAME: it.ITEM_NAME, KIND: "발주수량(현재고)" };
      const availRow: Row = { ITEM_NAME: it.ITEM_NAME, KIND: "여유분" };
      for (const w of warehouses) {
        stockRow[w.WH_CODE] = Number(it.STOCK[w.WH_CODE] ?? 0);
        availRow[w.WH_CODE] = Number(it.AVAILABLE[w.WH_CODE] ?? 0);
      }
      data.push(stockRow, availRow);
    }
    downloadXlsx(`창고별재고_${dateFrom}_${dateTo}`, data, cols);
  };

  return (
    <div className="space-y-4">
      <div className="flex items-end justify-between flex-wrap gap-2">
        <div>
          <h1 className="text-xl font-bold flex items-center gap-2">
            <Warehouse size={20} className="text-emerald-700" />
            창고별 재고 현황
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            기간 내 발주(출고요청/완료/계산서/입금) 수량과 현재고를 창고별로 나란히. <b>발주수량</b> = 현재 보유 재고, <b>여유분</b> = 현재고 − 기간 내 발주된 출고 예정 수량 (해당 창고 기준).
          </p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          {/* 보기 모드 토글 */}
          <div className="inline-flex rounded border border-slate-300 overflow-hidden">
            <button onClick={() => setViewMode("by-wh")}
              className={`h-9 px-3 text-xs font-semibold inline-flex items-center gap-1 ${viewMode === "by-wh" ? "bg-emerald-700 text-white" : "bg-white text-slate-600 hover:bg-slate-50"}`}>
              <Columns3 size={14} /> 창고 가로
            </button>
            <button onClick={() => setViewMode("by-item")}
              className={`h-9 px-3 text-xs font-semibold inline-flex items-center gap-1 border-l border-slate-300 ${viewMode === "by-item" ? "bg-emerald-700 text-white" : "bg-white text-slate-600 hover:bg-slate-50"}`}>
              <LayoutGrid size={14} /> 품목 가로
            </button>
          </div>
          <input type="date" value={dateFrom} onChange={(e) => setRange([e.target.value, dateTo])}
            className="h-9 px-3 rounded border border-slate-300 text-sm" />
          <span className="text-slate-400">~</span>
          <input type="date" value={dateTo} onChange={(e) => setRange([dateFrom, e.target.value])}
            className="h-9 px-3 rounded border border-slate-300 text-sm" />
          <button onClick={() => setRange(weekRange())}
            className="h-9 px-3 rounded border border-slate-300 bg-white text-slate-700 text-xs font-semibold">금주</button>
          <button onClick={load} disabled={loading}
            className="h-9 px-3 rounded bg-slate-800 text-white text-sm font-bold inline-flex items-center gap-1 hover:bg-slate-900 disabled:opacity-50">
            <RefreshCcw size={14} /> 조회
          </button>
          <button onClick={onExport} disabled={items.length === 0}
            className="h-9 px-3 rounded bg-emerald-700 text-white text-sm font-bold inline-flex items-center gap-1 hover:bg-emerald-800 disabled:opacity-40">
            <Download size={14} /> 엑셀
          </button>
        </div>
      </div>

      <div className="bg-white border border-slate-200 rounded-xl overflow-x-auto">
        {viewMode === "by-wh" ? (
          /* 보기 1: 헤더=창고(가로), 행=품목 */
          <table className="w-full text-sm border-collapse">
            <thead className="bg-slate-50 text-slate-600 sticky top-0">
              <tr>
                <th className="text-left px-3 py-2 border-b border-slate-200 min-w-[160px]">품목</th>
                <th className="text-center px-3 py-2 border-b border-slate-200 min-w-[100px]">분류</th>
                {warehouses.map((w) => (
                  <th key={w.WH_CODE} className="text-right px-3 py-2 border-b border-slate-200 min-w-[88px]">
                    {w.WH_NAME}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="tabular-nums">
              {items.length === 0 ? (
                <tr><td colSpan={2 + warehouses.length} className="text-center py-12 text-slate-400">
                  {loading ? "조회 중..." : "데이터가 없습니다."}
                </td></tr>
              ) : items.flatMap((it) => [
                <tr key={`${it.ITEM_OBJID}-stock`} className="border-t border-slate-100 hover:bg-slate-50/60">
                  <td className="px-3 py-2 align-top font-semibold" rowSpan={2}>
                    {it.ITEM_NAME}
                    <div className="text-[10px] text-slate-400 font-mono">{it.ITEM_CODE}</div>
                  </td>
                  <td className="px-3 py-1.5 text-center text-[11px] text-slate-700 bg-slate-50/70">발주수량</td>
                  {warehouses.map((w) => {
                    const v = Number(it.STOCK[w.WH_CODE] ?? 0);
                    return (
                      <td key={w.WH_CODE} className={`px-3 py-1.5 text-right ${v === 0 ? "text-slate-300" : "text-slate-800"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
                <tr key={`${it.ITEM_OBJID}-avail`} className="border-b border-slate-100">
                  <td className="px-3 py-1.5 text-center text-[11px] text-emerald-700 bg-emerald-50/40 font-semibold">여유분</td>
                  {warehouses.map((w) => {
                    const v = Number(it.AVAILABLE[w.WH_CODE] ?? 0);
                    const negative = v < 0;
                    return (
                      <td key={w.WH_CODE} className={`px-3 py-1.5 text-right ${negative ? "text-rose-600 font-bold" : v === 0 ? "text-slate-300" : "text-emerald-700 font-semibold"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
              ])}
            </tbody>
          </table>
        ) : (
          /* 보기 2: 헤더=품목(가로), 행=창고 7줄 — 전치 */
          <table className="text-sm border-collapse">
            <thead className="bg-slate-50 text-slate-600 sticky top-0">
              <tr>
                <th className="text-left px-3 py-2 border-b border-slate-200 sticky left-0 bg-slate-50 z-10 min-w-[120px]">창고</th>
                <th className="text-center px-3 py-2 border-b border-slate-200 sticky left-[120px] bg-slate-50 z-10 min-w-[90px]">분류</th>
                {items.map((it) => (
                  <th key={it.ITEM_OBJID} className="text-right px-3 py-2 border-b border-slate-200 min-w-[100px] whitespace-nowrap">
                    <div>{it.ITEM_NAME}</div>
                    <div className="text-[10px] text-slate-400 font-mono font-normal">{it.ITEM_CODE}</div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="tabular-nums">
              {items.length === 0 || warehouses.length === 0 ? (
                <tr><td colSpan={2 + items.length} className="text-center py-12 text-slate-400">
                  {loading ? "조회 중..." : "데이터가 없습니다."}
                </td></tr>
              ) : [
                /* 전체 합계 — 모든 창고의 발주수량/여유분 합 (상단 강조 행) */
                <tr key="__total-stock" className="bg-emerald-50/70 border-y-2 border-emerald-300 font-bold">
                  <td className="px-3 py-2 align-top sticky left-0 bg-emerald-50/70" rowSpan={2}>
                    <div className="text-emerald-800">전체 합계</div>
                    <div className="text-[10px] text-emerald-600 font-normal">모든 창고</div>
                  </td>
                  <td className="px-3 py-1.5 text-center text-[11px] text-slate-700 bg-slate-100 sticky left-[120px]">발주수량</td>
                  {items.map((it) => {
                    const v = warehouses.reduce((acc, w) => acc + Number(it.STOCK[w.WH_CODE] ?? 0), 0);
                    return (
                      <td key={it.ITEM_OBJID} className={`px-3 py-1.5 text-right ${v === 0 ? "text-slate-300" : "text-slate-900"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
                <tr key="__total-avail" className="bg-emerald-50/70 border-b-2 border-emerald-300 font-bold">
                  <td className="px-3 py-1.5 text-center text-[11px] text-emerald-700 bg-emerald-100/60 sticky left-[120px]">여유분</td>
                  {items.map((it) => {
                    const v = warehouses.reduce((acc, w) => acc + Number(it.AVAILABLE[w.WH_CODE] ?? 0), 0);
                    const negative = v < 0;
                    return (
                      <td key={it.ITEM_OBJID} className={`px-3 py-1.5 text-right ${negative ? "text-rose-600" : v === 0 ? "text-slate-300" : "text-emerald-700"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
                /* 창고별 7줄 */
                ...warehouses.flatMap((w) => [
                <tr key={`${w.WH_CODE}-stock`} className="border-t border-slate-100 hover:bg-slate-50/60">
                  <td className="px-3 py-2 align-top font-semibold sticky left-0 bg-white" rowSpan={2}>
                    {w.WH_NAME}
                    <div className="text-[10px] text-slate-400 font-mono">{w.WH_CODE}</div>
                  </td>
                  <td className="px-3 py-1.5 text-center text-[11px] text-slate-700 bg-slate-50/70 sticky left-[120px]">발주수량</td>
                  {items.map((it) => {
                    const v = Number(it.STOCK[w.WH_CODE] ?? 0);
                    return (
                      <td key={it.ITEM_OBJID} className={`px-3 py-1.5 text-right ${v === 0 ? "text-slate-300" : "text-slate-800"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
                <tr key={`${w.WH_CODE}-avail`} className="border-b border-slate-100">
                  <td className="px-3 py-1.5 text-center text-[11px] text-emerald-700 bg-emerald-50/40 font-semibold sticky left-[120px]">여유분</td>
                  {items.map((it) => {
                    const v = Number(it.AVAILABLE[w.WH_CODE] ?? 0);
                    const negative = v < 0;
                    return (
                      <td key={it.ITEM_OBJID} className={`px-3 py-1.5 text-right ${negative ? "text-rose-600 font-bold" : v === 0 ? "text-slate-300" : "text-emerald-700 font-semibold"}`}>
                        {v === 0 ? "-" : fmt(v)}
                      </td>
                    );
                  })}
                </tr>,
                ]),
              ]}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}
