ERP/frontend/src/pages/Inventory/InventoryPage.tsx

import { useMemo, useState } from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom";
import { Plus, Warehouse as WarehouseIcon, ArrowUpDown, ArrowUp, ArrowDown, X } from "lucide-react";
import { Header, PageLayout } from "../../components/layout/Header";
import { EmptyState } from "../../components/EmptyState";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { useAuthStore } from "../../store/auth";
import { AppSwitcherMenu } from "../../components/AppSwitcherMenu";
import { inventorySubheader } from "./panelMenu";
import { InventoryTopNav } from "./InventoryTopNav";
import { useInventoryData, brandName, catName, materialName, unitName, whName } from "./useInventoryData";
import type { InventoryRow, InventoryTransaction, TransactionType } from "../../lib/types";
import { faNum } from "../../lib/formatters";
import { isoToJalaliStr } from "../../lib/jalali";

// رنگ‌بندی معنایی: سبز زمردی = ورود/افزایش، رز = خروج/کاهش، آبی = خنثی/جابه‌جایی
const TX_META: Record<TransactionType, { label: string; color: string; icon: string }> = {
  PURCHASE: { label: "خرید", color: "#10b981", icon: "🛒" },
  WITHDRAWAL: { label: "برداشت", color: "#e11d48", icon: "➖" },
  RETURN: { label: "برگشت", color: "#10b981", icon: "↩️" },
  TRANSFER_IN: { label: "انتقال (ورودی)", color: "#2563eb", icon: "⬅️" },
  TRANSFER_OUT: { label: "انتقال (خروجی)", color: "#2563eb", icon: "➡️" },
  DAMAGE: { label: "ضایعات", color: "#e11d48", icon: "⚠️" },
  WASTE: { label: "اتلاف", color: "#e11d48", icon: "🗑️" },
  LOSS: { label: "مفقودی", color: "#e11d48", icon: "📦" },
  FOUND: { label: "پیدا شده", color: "#10b981", icon: "🔍" },
  STOCK_COUNT: { label: "شمارش موجودی", color: "#2563eb", icon: "✅" },
};

interface Group {
  key: string;
  whId: string;
  matId: string;
  specs: Record<string, string>;
  unitId: number | null;
  qty: number;
  updatedAt: string;
  recs: InventoryRow[];
  brands: Record<string, number>;
  brandOrder: string[];
}

function specsHash(specs: Record<string, string> | null | undefined): string {
  const s = specs || {};
  const keys = Object.keys(s).filter((k) => s[k] !== "" && s[k] != null).sort();
  if (!keys.length) return "default";
  return keys.map((k) => `${k}=${s[k]}`).join("|");
}

// داشبورد انبار — پورت کامل نسخه‌ی ارسالی (گروه‌بندی + خط زمانی + فیلترها)
export function InventoryPage() {
  const location = useLocation();
  const user = useAuthStore((s) => s.user);
  const { warehouses, inventory, transactions, lookup, loading } = useInventoryData();
  const isAdmin = user?.role === "admin" || user?.role === "procurement_manager";
  const isPM = user?.role === "pm";
  const [params] = useSearchParams();

  const [filters, setFilters] = useState<{ category: string; warehouse: string; material: string; project: string }>({
    category: "",
    warehouse: params.get("warehouse") || "",
    material: "",
    project: "",
  });
  const [sort, setSort] = useState<"asc" | "desc" | "">("");
  const [expandedKey, setExpandedKey] = useState<string | null>(null);
  const [selTx, setSelTx] = useState<string | null>(null);
  const [expBrand, setExpBrand] = useState<string | null>(null);

  const visibleWarehouses = useMemo(() => {
    if (isAdmin && filters.project) return warehouses.filter((w) => w.project_id === filters.project);
    if (isAdmin) return warehouses;
    return warehouses.filter((w) => String(w.project_id) === String(user?.project_id || ""));
  }, [warehouses, isAdmin, filters.project, user?.project_id]);

  const visibleIds = useMemo(() => new Set(visibleWarehouses.map((w) => w.id)), [visibleWarehouses]);

  const groups = useMemo<Group[]>(() => {
    const gmap = new Map<string, Group>();
    const order: string[] = [];
    inventory.forEach((r) => {
      const whId = r.warehouse?.id;
      if (!whId || !visibleIds.has(whId)) return;
      if (filters.category && r.material.category?.id !== filters.category) return;
      if (filters.warehouse && whId !== filters.warehouse) return;
      if (filters.material && !r.material.name.includes(filters.material.trim())) return;
      const gk = `${whId}|${r.material.id}|${specsHash(r.specs)}`;
      let g = gmap.get(gk);
      if (!g) {
        g = {
          key: gk,
          whId,
          matId: r.material.id,
          specs: r.specs || {},
          unitId: r.unit?.id ?? null,
          qty: 0,
          updatedAt: r.updated_at,
          recs: [],
          brands: {},
          brandOrder: [],
        };
        gmap.set(gk, g);
        order.push(gk);
      }
      g.qty += r.quantity_number || 0;
      if (r.updated_at > g.updatedAt) g.updatedAt = r.updated_at;
      g.recs.push(r);
      if (r.brand) {
        if (!(r.brand.id in g.brands)) {
          g.brands[r.brand.id] = 0;
          g.brandOrder.push(r.brand.id);
        }
        g.brands[r.brand.id] += r.quantity_number || 0;
      }
    });
    const out = order.map((k) => gmap.get(k)!);
    if (sort === "asc") out.sort((a, b) => a.qty - b.qty);
    else if (sort === "desc") out.sort((a, b) => b.qty - a.qty);
    else out.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
    return out;
  }, [inventory, visibleIds, filters, sort]);

  const groupTxs = (g: Group) =>
    transactions
      .filter((t) => g.recs.some((r) => r.id === t.inventory_id))
      .slice()
      .sort((a, b) => new Date(a.transaction_date).getTime() - new Date(b.transaction_date).getTime());

  const brandTxs = (g: Group, bid: string) =>
    transactions
      .filter((t) => t.brand?.id === bid && g.recs.some((r) => r.id === t.inventory_id))
      .slice()
      .sort((a, b) => new Date(a.transaction_date).getTime() - new Date(b.transaction_date).getTime());

  const hasFilter = !!(filters.category || filters.warehouse || filters.material || (isAdmin && filters.project));

  if (loading) return <div className="min-h-screen" />;
  if (!user || (!isAdmin && !isPM)) {
    return (
      <div className="min-h-screen">
        <Header title="داشبورد انبار" backTo="/inventory" backLabel="بازگشت به داشبورد" />
        <PageLayout>
          <EmptyState emoji="🔒" text="دسترسی به انبار فقط برای مدیر پروژه یا ادمین است." />
        </PageLayout>
      </div>
    );
  }

  return (
    <div className="min-h-screen">
      <Header
        title="سامانه مدیریت انبار"
        sub={inventorySubheader(user)}
        icon={<WarehouseIcon className="h-4.5 w-4.5" strokeWidth={2} />}
        menu={<AppSwitcherMenu activeModule="warehouse" canSwitchToProcurement={isAdmin} />}
        actions={
          <>
            <InventoryTopNav pathname={location.pathname} variant={isAdmin ? "admin" : "pm"} />
            {isPM && (
              <Button asChild variant="primary">
                <Link to="/inventory/change" className="no-underline">
                  <Plus className="h-4 w-4" />
                  تغییر موجودی
                </Link>
              </Button>
            )}
          </>
        }
      />
      <PageLayout className="flex flex-col gap-4">
        {/* نوار فیلترها و ابزارها */}
        <div className="flex flex-wrap items-end gap-3 rounded-xl border border-line bg-panel p-3.5 shadow-sm">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-medium text-muted">دسته‌بندی</label>
            <select
              className="h-9 min-w-[150px] rounded-md border border-line bg-panel px-2.5 text-xs text-ink transition-all focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
              value={filters.category}
              onChange={(e) => setFilters((f) => ({ ...f, category: e.target.value, material: "" }))}
            >
              <option value="">همه دسته‌بندی‌ها</option>
              {lookup.categories.map((c) => (
                <option key={c.id} value={c.id}>{c.name}</option>
              ))}
            </select>
          </div>

          {isAdmin && (
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-medium text-muted">پروژه</label>
              <select
                className="h-9 min-w-[140px] rounded-md border border-line bg-panel px-2.5 text-xs text-ink transition-all focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
                value={filters.project}
                onChange={(e) => setFilters((f) => ({ ...f, project: e.target.value, warehouse: "", material: "" }))}
              >
                <option value="">همه پروژه‌ها</option>
                {lookup.projects.map((p) => (
                  <option key={p.id} value={p.id}>{p.name}</option>
                ))}
              </select>
            </div>
          )}

          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-medium text-muted">انبار</label>
            <select
              className="h-9 min-w-[140px] rounded-md border border-line bg-panel px-2.5 text-xs text-ink transition-all focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
              value={filters.warehouse}
              onChange={(e) => setFilters((f) => ({ ...f, warehouse: e.target.value, material: "" }))}
            >
              <option value="">همه انبارها</option>
              {visibleWarehouses.map((w) => (
                <option key={w.id} value={w.id}>
                  {w.name}{isAdmin ? ` — ${lookup.projects.find((p) => p.id === w.project_id)?.name || ""}` : ""}
                </option>
              ))}
            </select>
          </div>

          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-medium text-muted">متریال</label>
            <input
              className="h-9 w-48 rounded-md border border-line bg-panel px-3 text-xs text-ink transition-all placeholder:text-muted/70 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
              placeholder="تایپ نام متریال…"
              value={filters.material}
              onChange={(e) => setFilters((f) => ({ ...f, material: e.target.value }))}
            />
          </div>

          <Button
            variant="line"
            onClick={() => setSort((s) => (s === "" ? "asc" : s === "asc" ? "desc" : ""))}
            className="gap-1.5"
          >
            {sort === "asc" ? (
              <>
                <ArrowUp className="h-3.5 w-3.5 text-accent" />
                تعداد: صعودی
              </>
            ) : sort === "desc" ? (
              <>
                <ArrowDown className="h-3.5 w-3.5 text-accent" />
                تعداد: نزولی
              </>
            ) : (
              <>
                <ArrowUpDown className="h-3.5 w-3.5 text-muted" />
                مرتب‌سازی تعداد
              </>
            )}
          </Button>

          {hasFilter && (
            <Button
              variant="danger"
              onClick={() => setFilters({ category: "", warehouse: "", material: "", project: "" })}
              className="gap-1"
            >
              <X className="h-3.5 w-3.5" />
              پاک کردن فیلترها
            </Button>
          )}

          <div className="ms-auto flex items-center gap-2 self-end">
            {filters.warehouse && (
              <Badge variant="offered" className="rounded-md px-2.5 py-1 text-xs">
                🏬 {whName(warehouses, filters.warehouse)}
              </Badge>
            )}
            <Badge variant="outline" className="rounded-md border-line bg-slate-bg px-3 py-1.5 text-xs font-normal text-muted">
              {faNum(groups.length)} قلم کالا
            </Badge>
          </div>
        </div>

        {/* بخش جدول یا وضعیت خالی */}
        {!groups.length ? (
          <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-line bg-panel/40 py-16 px-4 shadow-xs">
            <EmptyState emoji="📋" text="هیچ رکورد موجودی‌ای مطابق فیلترهای انتخابی یافت نشد." />
          </div>
        ) : (
          <div className="overflow-hidden rounded-xl border border-line bg-panel shadow-sm">
            <table className="w-full text-[12.5px]">
              <thead>
                <tr className="border-b border-line bg-slate-bg/50 text-right text-muted font-medium">
                  <th className="w-8 py-2.5" />
                  <th className="py-2.5 pe-3">متریال</th>
                  <th className="py-2.5 pe-3">دسته‌بندی</th>
                  <th className="py-2.5 pe-3">انبار</th>
                  <th className="py-2.5 pe-3">مشخصه فنی</th>
                  <th className="py-2.5 pe-3">تعداد</th>
                  <th className="py-2.5 pe-3">واحد</th>
                  <th className="py-2.5 pe-3">آخرین به‌روزرسانی</th>
                  <th className="w-8 py-2.5" />
                </tr>
              </thead>
              <tbody>
                {groups.map((g) => {
                  const isExp = expandedKey === g.key;
                  const matCat = lookup.materials.find((m) => m.id === g.matId)?.category;
                  return (
                    <GroupRow
                      key={g.key}
                      g={g}
                      isExp={isExp}
                      isAdmin={isAdmin}
                      matName={materialName(lookup.materials, g.matId)}
                      matCatName={matCat ? catName(lookup.categories, matCat.id) : "—"}
                      wh={whName(warehouses, g.whId)}
                      projName={lookup.projects.find((p) => p.id === warehouses.find((w) => w.id === g.whId)?.project_id)?.name || ""}
                      unit={unitName(lookup.units, g.unitId)}
                      onToggle={() => {
                        setExpandedKey(isExp ? null : g.key);
                        setSelTx(null);
                        setExpBrand(null);
                      }}
                      timeline={
                        isExp ? (
                          <Timeline
                            g={g}
                            txs={groupTxs(g)}
                            allTxs={transactions}
                            brandTxs={brandTxs}
                            selTx={selTx}
                            setSelTx={setSelTx}
                            expBrand={expBrand}
                            setExpBrand={setExpBrand}
                            matName={materialName(lookup.materials, g.matId)}
                            unit={unitName(lookup.units, g.unitId)}
                            brandNameFn={(id) => brandName(lookup.brands, id)}
                            whNameFn={(id) => whName(warehouses, id)}
                          />
                        ) : null
                      }
                    />
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        <div className="text-[11px] text-muted">
          ۱۰ نوع تراکنش استاندارد • سبز زمردی = ورود به انبار · رز = خروج/کاهش · آبی = انتقال و شمارش • کلیک روی هر سطر: خط زمانی با «مانده» لحظه‌به‌لحظه و تفکیک برندها
        </div>
      </PageLayout>
    </div>
  );
}

function GroupRow({ g, isExp, isAdmin, matName, matCatName, wh, projName, unit, onToggle, timeline }: {
  g: Group;
  isExp: boolean;
  isAdmin: boolean;
  matName: string;
  matCatName: string;
  wh: string;
  projName: string;
  unit: string;
  onToggle: () => void;
  timeline: React.ReactNode;
}) {
  return (
    <>
      <tr className={`border-b border-line/60 cursor-pointer transition-colors duration-150 ${isExp ? "bg-accent/5" : "hover:bg-slate-bg/60"}`} onClick={onToggle}>
        <td className="py-2.5 text-center text-muted">{isExp ? "▾" : "▸"}</td>
        <td className="py-2.5 pe-3 font-semibold text-ink">{matName}</td>
        <td className="py-2.5 pe-3">{matCatName}</td>
        <td className="py-2.5 pe-3">
          {wh}
          {isAdmin && <small className="block text-muted">{projName}</small>}
        </td>
        <td className="py-2.5 pe-3 text-muted">
          {Object.entries(g.specs || {}).map(([k, v]) => `${k}: ${v}`).join(" · ") || "—"}
        </td>
        <td className="py-2.5 pe-3 font-bold text-ink">{faNum(g.qty)}</td>
        <td className="py-2.5 pe-3">{unit}</td>
        <td className="py-2.5 pe-3 text-muted">{isoToJalaliStr(g.updatedAt)}</td>
        <td className="py-2.5 text-muted">🕘</td>
      </tr>
      {isExp && (
        <tr className="border-b border-line/40 bg-accent-bg/10">
          <td colSpan={9} className="p-3.5">{timeline}</td>
        </tr>
      )}
    </>
  );
}

function Timeline({ g, txs, allTxs, brandTxs, selTx, setSelTx, expBrand, setExpBrand, matName, unit, brandNameFn, whNameFn }: {
  g: Group;
  txs: InventoryTransaction[];
  allTxs: InventoryTransaction[];
  brandTxs: (g: Group, bid: string) => InventoryTransaction[];
  selTx: string | null;
  setSelTx: (id: string | null) => void;
  expBrand: string | null;
  setExpBrand: (id: string | null) => void;
  matName: string;
  unit: string;
  brandNameFn: (id: string | null | undefined) => string;
  whNameFn: (id: string | null | undefined) => string;
}) {
  const track = (list: InventoryTransaction[]) => {
    let bal = 0;
    return list.map((t) => {
      const meta = TX_META[t.transaction_type] || { label: t.transaction_type, color: "#64748b", icon: "•" };
      bal += t.quantity_number || 0;
      const sel = selTx === t.id;
      return (
        <button
          key={t.id}
          type="button"
          onClick={() => setSelTx(sel ? null : t.id)}
          className={`flex min-w-[125px] flex-col gap-1 rounded-md border p-2.5 text-start transition-all duration-150 active:scale-[0.98] ${
            sel ? "border-accent bg-accent/10 shadow-xs" : "border-line bg-panel hover:border-slate-300"
          }`}
          style={{ borderTop: `3px solid ${meta.color}` }}
        >
          <span className="text-[11px] font-bold" style={{ color: meta.color }}>{meta.icon} {meta.label}</span>
          <span className="text-[12px] font-bold" style={{ color: meta.color }}>
            {faNum(Math.abs(t.quantity_number))} {unit}
          </span>
          <span className="text-[10.5px] text-muted">مانده: <b>{faNum(bal)}</b> {unit}</span>
        </button>
      );
    });
  };

  if (!txs.length) return <div className="text-[12px] text-muted">تراکنشی ثبت نشده است.</div>;

  const brandSec = expBrand ? (
    <div className="mt-2.5">
      <div className="mb-1.5 text-[12px] font-semibold">جریان برند: {brandNameFn(expBrand)} ({faNum(brandTxs(g, expBrand).length)} تراکنش)</div>
      <div className="flex gap-2 overflow-x-auto pb-1">{track(brandTxs(g, expBrand))}</div>
    </div>
  ) : null;

  const selDetail = selTx ? (() => {
    const t = allTxs.find((x) => x.id === selTx);
    if (!t) return null;
    const meta = TX_META[t.transaction_type] || { label: t.transaction_type, color: "#64748b", icon: "•" };
    const pairTx = t.transfer_pair_id ? allTxs.find((x) => x.transfer_pair_id === t.transfer_pair_id && x.id !== t.id) : null;
    return (
      <div className="mt-2.5 rounded-md border border-line bg-panel p-2.5 text-[12px] shadow-xs" style={{ borderTop: `3px solid ${meta.color}` }}>
        <b style={{ color: meta.color }}>{meta.label}</b>
        <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-muted">
          <span>تاریخ و ساعت: <b>{isoToJalaliStr(t.transaction_date)}</b></span>
          {t.transaction_type === "TRANSFER_OUT" || t.transaction_type === "TRANSFER_IN" ? (
            <>
              <span>از انبار: <b>{t.transaction_type === "TRANSFER_OUT" ? whNameFn(t.warehouse_id) : whNameFn(pairTx?.warehouse_id)}</b></span>
              <span>به انبار: <b>{t.transaction_type === "TRANSFER_IN" ? whNameFn(t.warehouse_id) : whNameFn(pairTx?.warehouse_id)}</b></span>
            </>
          ) : (
            <span>انبار: <b>{whNameFn(t.warehouse_id)}</b></span>
          )}
          {t.brand?.name && <span>برند: <b>{t.brand.name}</b></span>}
          {t.performed_by && <span>انجام‌دهنده: <b>{t.performed_by}</b></span>}
          {t.note && <span>یادداشت: <b>{t.note}</b></span>}
          {t.transaction_type === "STOCK_COUNT" && t.recorded_qty != null && t.physical_qty != null && (
            <span>
              ثبت‌شده: {faNum(t.recorded_qty)} • شمارش‌شده: {faNum(t.physical_qty)} • اختلاف: {faNum(t.physical_qty - t.recorded_qty)}
            </span>
          )}
        </div>
      </div>
    );
  })() : null;

  return (
    <div>
      <div className="mb-1.5 flex flex-wrap items-center gap-2 text-[12px]">
        <b>خط زمانی — {matName}</b>
        {Object.entries(g.specs || {}).length > 0 && (
          <span className="rounded bg-panel px-2 py-0.5 text-[10.5px] text-muted border border-line">
            {Object.entries(g.specs).map(([k, v]) => `${k}: ${v}`).join(" · ")}
          </span>
        )}
        <span className="rounded bg-panel px-2 py-0.5 text-[10.5px] text-muted border border-line">{faNum(g.brandOrder.length)} برند</span>
      </div>
      <div className="mb-2 flex flex-wrap gap-1.5">
        {g.brandOrder.map((bid) => (
          <button
            key={bid}
            type="button"
            onClick={() => setExpBrand(expBrand === bid ? null : bid)}
            className={`rounded-md border px-2.5 py-1 text-[11.5px] transition-all duration-150 active:scale-[0.98] ${
              expBrand === bid ? "border-accent bg-accent/10 font-semibold text-accent" : "border-line bg-panel hover:bg-slate-bg"
            }`}
          >
            {brandNameFn(bid)}: <b>{faNum(g.brands[bid])}</b> {unit}{expBrand === bid ? " ✕" : ""}
          </button>
        ))}
      </div>
      {brandSec}
      <div className="mb-1.5 mt-2.5 text-[12px] font-semibold">جریان کلی رکورد — ترکیب همه برندها ({faNum(txs.length)} تراکنش)</div>
      <div className="flex gap-2 overflow-x-auto pb-1">{track(txs)}</div>
      {selDetail}
    </div>
  );
}