import { Fragment, useMemo, useState } from "react";
import { apiFetch } from '@/utils/api';
import { useQuery } from "@tanstack/react-query";
import {
  Loader2,
  PackageOpen,
  ExternalLink,
  ChevronRight,
  ChevronDown,
} from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { PHASE_CONFIG } from "@/utils/lifecyclePhases";

const getPhaseLabel = (phase: string): string =>
  PHASE_CONFIG[phase]?.label || phase;

const getPhaseColor = (phase: string): string =>
  PHASE_CONFIG[phase]?.color || "#94A3B8";

// Notions = supplier 92; the daily auto-PO workflow runs here by default.
const DEFAULT_SUPPLIER_ID = 92;

type Supplier = {
  supplierId: number;
  vendorName: string;
  lineCount: number;
  poCount: number;
  lastPoDate: string | null;
};

type RepeatOrderRow = {
  pid: number;
  sku: string | null;
  title: string | null;
  brand: string | null;
  vendor: string | null;
  imageUrl: string | null;
  isVisible: boolean | null;
  isReplenishable: boolean | null;
  moq: number | null;

  currentStock: number;
  notionsInvCount: number | null;
  onOrderQty: number;
  sales30d: number | null;
  velocity: number;
  coverDays: number | null;
  replenishmentUnits: number | null;
  toOrderUnits: number | null;
  avgLeadTimeDays: number | null;
  lifecyclePhase: string | null;
  earliestExpectedDate: string | null;

  poLineCount: number;
  poDaysActive: number;
  poTotalUnits: number | null;
  poAvgQty: number;
  poMinQty: number | null;
  poMaxQty: number | null;
  firstPoDate: string | null;
  lastPoDate: string | null;
  poTotalCost: number;
  poOpenLineCount: number;

  recvLineCount: number;
  recvDaysActive: number;
  recvTotalUnits: number;
  lastRecvDate: string | null;

  forecast30d: number;
  forecast60d: number;

  repeatScore: number;
};

type RepeatOrdersResponse = {
  params: {
    supplierId: number;
    windowDays: number;
    minPoCount: number;
    maxAvgQty: number;
  };
  supplierSummary: {
    totalPoLines: number;
    distinctPoIds: number;
    distinctProducts: number;
    distinctDays: number;
    totalUnits: number;
    avgQtyPerLine: number;
  };
  matchSummary: {
    matchCount: number;
    totalSmallPoLines: number;
    totalSmallPoUnits: number;
    totalSales30d: number;
    totalSuggestedUnits: number;
  };
  results: RepeatOrderRow[];
};

type HistoryResponse = {
  pid: number;
  supplierId: number;
  purchaseOrders: {
    poId: string;
    date: string;
    expectedDate: string | null;
    ordered: number;
    costPrice: number;
    status: string;
    notes: string | null;
  }[];
  receivings: {
    receivingId: string;
    receivedDate: string;
    qtyEach: number;
    costEach: number;
    status: string;
  }[];
};

type SortKey =
  | "po_count"
  | "repeat_score"
  | "avg_qty"
  | "sales"
  | "velocity"
  | "cover"
  | "notions"
  | "last_po";

const COLUMN_COUNT = 13;

const fmtNum = (v: number | null | undefined, decimals = 0) => {
  if (v === null || v === undefined || Number.isNaN(Number(v))) return "—";
  return Number(v).toLocaleString(undefined, {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
};

const fmtDate = (v: string | null | undefined) => {
  if (!v) return "—";
  const d = new Date(v);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
};

const fmtDateLong = (v: string | null | undefined) => {
  if (!v) return "—";
  const d = new Date(v);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleDateString(undefined, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
};

const daysSince = (v: string | null | undefined) => {
  if (!v) return null;
  const d = new Date(v);
  if (Number.isNaN(d.getTime())) return null;
  return Math.floor((Date.now() - d.getTime()) / (1000 * 60 * 60 * 24));
};

function ProductHistory({
  pid,
  supplierId,
  windowDays,
}: {
  pid: number;
  supplierId: number;
  windowDays: number;
}) {
  const { data, isFetching, error } = useQuery<HistoryResponse>({
    queryKey: ["repeat-orders-history", pid, supplierId, windowDays],
    queryFn: async () => {
      const params = new URLSearchParams({
        supplierId: String(supplierId),
        windowDays: String(windowDays),
      });
      const res = await apiFetch(
        `/api/repeat-orders/${pid}/history?${params.toString()}`
      );
      if (!res.ok) throw new Error("Failed to load history");
      return res.json();
    },
    staleTime: 60 * 1000,
  });

  if (isFetching && !data) {
    return (
      <div className="py-6 text-center text-muted-foreground text-xs">
        <Loader2 className="mx-auto h-4 w-4 animate-spin" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="py-4 text-center text-destructive text-xs">
        {(error as Error).message}
      </div>
    );
  }

  if (!data) return null;

  return (
    <div className="grid gap-6 p-4 bg-muted/30 md:grid-cols-2">
      <div>
        <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
          Purchase orders ({data.purchaseOrders.length})
        </div>
        {data.purchaseOrders.length === 0 ? (
          <div className="text-xs text-muted-foreground italic">
            No PO lines in window.
          </div>
        ) : (
          <div className="rounded border bg-background">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="h-8 text-xs">Date</TableHead>
                  <TableHead className="h-8 text-xs">PO</TableHead>
                  <TableHead className="h-8 text-xs text-right">Qty</TableHead>
                  <TableHead className="h-8 text-xs text-right">Cost</TableHead>
                  <TableHead className="h-8 text-xs">Status</TableHead>
                  <TableHead className="h-8 text-xs">Expected</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.purchaseOrders.map((po) => (
                  <TableRow key={`${po.poId}-${po.date}`}>
                    <TableCell className="py-1.5 text-xs whitespace-nowrap">
                      {fmtDateLong(po.date)}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs font-mono">
                      {po.poId}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs text-right tabular-nums">
                      {po.ordered}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs text-right tabular-nums">
                      {fmtNum(po.costPrice, 2)}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs">
                      <Badge
                        variant={
                          po.status === "canceled"
                            ? "outline"
                            : po.status === "done"
                            ? "secondary"
                            : "default"
                        }
                        className="text-[10px] px-1.5 py-0 font-normal"
                      >
                        {po.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="py-1.5 text-xs text-muted-foreground">
                      {fmtDate(po.expectedDate)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </div>

      <div>
        <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
          Receivings ({data.receivings.length})
        </div>
        {data.receivings.length === 0 ? (
          <div className="text-xs text-muted-foreground italic">
            No receivings in window.
          </div>
        ) : (
          <div className="rounded border bg-background">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="h-8 text-xs">Date</TableHead>
                  <TableHead className="h-8 text-xs">Recv</TableHead>
                  <TableHead className="h-8 text-xs text-right">Qty</TableHead>
                  <TableHead className="h-8 text-xs text-right">Cost</TableHead>
                  <TableHead className="h-8 text-xs">Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.receivings.map((rc) => (
                  <TableRow key={`${rc.receivingId}-${rc.receivedDate}`}>
                    <TableCell className="py-1.5 text-xs whitespace-nowrap">
                      {fmtDateLong(rc.receivedDate)}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs font-mono">
                      {rc.receivingId}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs text-right tabular-nums">
                      {rc.qtyEach}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs text-right tabular-nums">
                      {fmtNum(rc.costEach, 2)}
                    </TableCell>
                    <TableCell className="py-1.5 text-xs">
                      <Badge
                        variant="secondary"
                        className="text-[10px] px-1.5 py-0 font-normal"
                      >
                        {rc.status}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </div>
    </div>
  );
}

export default function RepeatOrders() {
  const [supplierId, setSupplierId] = useState<number>(DEFAULT_SUPPLIER_ID);
  const [windowDays, setWindowDays] = useState<number>(30);
  const [minPoCount, setMinPoCount] = useState<number>(3);
  const [maxAvgQty, setMaxAvgQty] = useState<number>(10);
  const [sortKey, setSortKey] = useState<SortKey>("po_count");
  const [search, setSearch] = useState<string>("");
  const [expanded, setExpanded] = useState<Set<number>>(new Set());

  const toggleRow = (pid: number) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(pid)) next.delete(pid);
      else next.add(pid);
      return next;
    });
  };

  const { data: suppliersData } = useQuery<{ suppliers: Supplier[] }>({
    queryKey: ["repeat-orders-suppliers"],
    queryFn: async () => {
      const res = await apiFetch(`/api/repeat-orders/suppliers?windowDays=90`);
      if (!res.ok) throw new Error("Failed to load suppliers");
      return res.json();
    },
    staleTime: 5 * 60 * 1000,
  });

  const { data, isFetching, error } = useQuery<RepeatOrdersResponse>({
    queryKey: ["repeat-orders", supplierId, windowDays, minPoCount, maxAvgQty],
    queryFn: async () => {
      const params = new URLSearchParams({
        supplierId: String(supplierId),
        windowDays: String(windowDays),
        minPoCount: String(minPoCount),
        maxAvgQty: String(maxAvgQty),
      });
      const res = await apiFetch(`/api/repeat-orders?${params.toString()}`);
      if (!res.ok) {
        const payload = await res.json().catch(() => ({}));
        throw new Error(payload.error || "Failed to load repeat orders");
      }
      return res.json();
    },
    staleTime: 60 * 1000,
  });

  const sortedResults = useMemo(() => {
    if (!data?.results) return [];

    const filtered = search.trim()
      ? data.results.filter((r) => {
          const q = search.toLowerCase();
          return (
            (r.title || "").toLowerCase().includes(q) ||
            (r.sku || "").toLowerCase().includes(q) ||
            (r.brand || "").toLowerCase().includes(q)
          );
        })
      : data.results;

    const sorted = [...filtered];
    sorted.sort((a, b) => {
      switch (sortKey) {
        case "po_count":
          return (
            b.poLineCount - a.poLineCount ||
            (b.sales30d || 0) - (a.sales30d || 0)
          );
        case "repeat_score":
          return b.repeatScore - a.repeatScore;
        case "avg_qty":
          return a.poAvgQty - b.poAvgQty;
        case "sales":
          return (b.sales30d || 0) - (a.sales30d || 0);
        case "velocity":
          return (b.velocity || 0) - (a.velocity || 0);
        case "cover":
          return (a.coverDays ?? Infinity) - (b.coverDays ?? Infinity);
        case "notions":
          return (b.notionsInvCount ?? 0) - (a.notionsInvCount ?? 0);
        case "last_po":
          return (
            new Date(b.lastPoDate || 0).getTime() -
            new Date(a.lastPoDate || 0).getTime()
          );
        default:
          return 0;
      }
    });
    return sorted;
  }, [data?.results, sortKey, search]);

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-3xl font-bold">Repeat Order Opportunities</h1>

      {/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="grid grid-cols-2 gap-4 md:grid-cols-6">
            <div className="flex flex-col gap-1.5 md:col-span-1">
              <Label htmlFor="supplier" className="h-5 leading-5">
                Supplier
              </Label>
              <Select
                value={String(supplierId)}
                onValueChange={(v) => setSupplierId(Number(v))}
              >
                <SelectTrigger id="supplier" className="h-9">
                  <SelectValue placeholder="Select supplier" />
                </SelectTrigger>
                <SelectContent>
                  {(suppliersData?.suppliers || []).map((s) => (
                    <SelectItem key={s.supplierId} value={String(s.supplierId)}>
                      {s.vendorName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-col gap-1.5">
              <Label htmlFor="window" className="h-5 leading-5">
                Window
              </Label>
              <Select
                value={String(windowDays)}
                onValueChange={(v) => setWindowDays(Number(v))}
              >
                <SelectTrigger id="window" className="h-9">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="7">Last 7 days</SelectItem>
                  <SelectItem value="14">Last 14 days</SelectItem>
                  <SelectItem value="30">Last 30 days</SelectItem>
                  <SelectItem value="60">Last 60 days</SelectItem>
                  <SelectItem value="90">Last 90 days</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-col gap-1.5">
              <Label htmlFor="minPo" className="h-5 leading-5">
                Min POs
              </Label>
              <Input
                id="minPo"
                type="number"
                min={2}
                max={50}
                value={minPoCount}
                onChange={(e) => setMinPoCount(Number(e.target.value) || 3)}
                className="h-9"
              />
            </div>

            <div className="flex flex-col gap-1.5">
              <Label htmlFor="maxAvg" className="h-5 leading-5">
                Max avg qty
              </Label>
              <Input
                id="maxAvg"
                type="number"
                min={1}
                max={1000}
                value={maxAvgQty}
                onChange={(e) => setMaxAvgQty(Number(e.target.value) || 10)}
                className="h-9"
              />
            </div>

            <div className="flex flex-col gap-1.5">
              <Label htmlFor="sort" className="h-5 leading-5">
                Sort by
              </Label>
              <Select
                value={sortKey}
                onValueChange={(v) => setSortKey(v as SortKey)}
              >
                <SelectTrigger id="sort" className="h-9">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="po_count">PO count</SelectItem>
                  <SelectItem value="repeat_score">Repeat score</SelectItem>
                  <SelectItem value="avg_qty">Smallest avg qty</SelectItem>
                  <SelectItem value="sales">30d sales</SelectItem>
                  <SelectItem value="velocity">Velocity</SelectItem>
                  <SelectItem value="cover">Days of cover</SelectItem>
                  <SelectItem value="notions">Notions stock</SelectItem>
                  <SelectItem value="last_po">Most recent PO</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-col gap-1.5">
              <Label htmlFor="search" className="h-5 leading-5">
                Search
              </Label>
              <Input
                id="search"
                placeholder="Title, SKU, brand…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="h-9"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Summary */}
      {data && (
        <div className="grid gap-4 md:grid-cols-4">
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Matching pattern</CardDescription>
              <CardTitle className="text-3xl tabular-nums">
                {fmtNum(data.matchSummary.matchCount)}
              </CardTitle>
            </CardHeader>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Small POs in window</CardDescription>
              <CardTitle className="text-3xl tabular-nums">
                {fmtNum(data.matchSummary.totalSmallPoLines)}
              </CardTitle>
            </CardHeader>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Combined 30d sales</CardDescription>
              <CardTitle className="text-3xl tabular-nums">
                {fmtNum(data.matchSummary.totalSales30d)}
              </CardTitle>
            </CardHeader>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Suggested consolidation</CardDescription>
              <CardTitle className="text-3xl tabular-nums">
                {fmtNum(data.matchSummary.totalSuggestedUnits)}
              </CardTitle>
            </CardHeader>
          </Card>
        </div>
      )}

      {/* Results */}
      <Card>
        <CardContent className="pt-6">
          {isFetching && !data ? (
            <div className="py-16 text-center text-muted-foreground">
              <Loader2 className="mx-auto h-6 w-6 animate-spin" />
            </div>
          ) : error ? (
            <div className="py-10 text-center text-sm text-destructive">
              {(error as Error).message}
            </div>
          ) : !data?.results.length ? (
            <div className="py-12 text-center text-muted-foreground space-y-3">
              <PackageOpen className="mx-auto h-10 w-10" />
              <div className="text-sm">
                No products matched. Try lowering the Min POs threshold or
                widening the window.
              </div>
            </div>
          ) : (
            <div className="rounded-md border overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-8"></TableHead>
                    <TableHead className="min-w-[260px]">Product</TableHead>
                    <TableHead className="text-right">POs</TableHead>
                    <TableHead className="text-right">Avg qty</TableHead>
                    <TableHead className="text-right">Ordered</TableHead>
                    <TableHead className="text-right">Received</TableHead>
                    <TableHead className="text-right">Stock</TableHead>
                    <TableHead className="text-right">Notions</TableHead>
                    <TableHead className="text-right">On order</TableHead>
                    <TableHead className="text-right">Cover</TableHead>
                    <TableHead className="text-right">30d sales</TableHead>
                    <TableHead className="text-right">Forecast 30d</TableHead>
                    <TableHead className="text-right">Suggested</TableHead>
                    <TableHead className="text-right">Last PO</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sortedResults.map((row) => {
                    const stale = daysSince(row.lastPoDate);
                    const urgentCover =
                      row.coverDays !== null && row.coverDays < 7;
                    const smallAvg = row.poAvgQty <= 2;
                    const isExpanded = expanded.has(row.pid);
                    return (
                      <Fragment key={row.pid}>
                        <TableRow
                          className="cursor-pointer hover:bg-muted/40"
                          onClick={() => toggleRow(row.pid)}
                        >
                          <TableCell className="w-8 py-2 align-middle">
                            {isExpanded ? (
                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
                            ) : (
                              <ChevronRight className="h-4 w-4 text-muted-foreground" />
                            )}
                          </TableCell>

                          <TableCell className="py-2 align-middle">
                            <div className="flex items-center gap-3">
                              {row.imageUrl ? (
                                <img
                                  src={row.imageUrl}
                                  alt=""
                                  className="h-10 w-10 rounded object-cover bg-muted shrink-0"
                                  loading="lazy"
                                />
                              ) : (
                                <div className="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0">
                                  <PackageOpen className="h-4 w-4 text-muted-foreground" />
                                </div>
                              )}
                              <div className="min-w-0">
                                <a
                                  href={`https://backend.acherryontop.com/product/${row.pid}`}
                                  target="_blank"
                                  rel="noreferrer"
                                  onClick={(e) => e.stopPropagation()}
                                  className="font-medium text-primary hover:underline flex items-center gap-1 group"
                                >
                                  <span className="truncate max-w-[280px]">
                                    {row.title}
                                  </span>
                                  <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
                                </a>
                                <div className="text-xs text-muted-foreground flex items-center gap-2">
                                  <span>{row.sku}</span>
                                  {row.brand && (
                                    <>
                                      <span>•</span>
                                      <span className="truncate max-w-[140px]">
                                        {row.brand}
                                      </span>
                                    </>
                                  )}
                                  {row.lifecyclePhase && (
                                    <span
                                      className="inline-block px-1.5 py-0.5 rounded text-[10px] text-white"
                                      style={{
                                        backgroundColor: getPhaseColor(
                                          row.lifecyclePhase
                                        ),
                                      }}
                                    >
                                      {getPhaseLabel(row.lifecyclePhase)}
                                    </span>
                                  )}
                                </div>
                              </div>
                            </div>
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right font-medium tabular-nums">
                            {row.poLineCount}
                            {row.poOpenLineCount > 0 && (
                              <div className="text-[10px] text-muted-foreground font-normal">
                                {row.poOpenLineCount} open
                              </div>
                            )}
                          </TableCell>

                          <TableCell
                            className={cn(
                              "py-2 align-middle text-right tabular-nums",
                              smallAvg && "text-amber-600 font-medium"
                            )}
                          >
                            {fmtNum(row.poAvgQty, row.poAvgQty < 10 ? 1 : 0)}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums">
                            {fmtNum(row.poTotalUnits)}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums text-muted-foreground">
                            {fmtNum(row.recvTotalUnits)}
                          </TableCell>

                          <TableCell
                            className={cn(
                              "py-2 align-middle text-right tabular-nums",
                              row.currentStock === 0 && "text-destructive"
                            )}
                          >
                            {fmtNum(row.currentStock)}
                          </TableCell>

                          <TableCell
                            className={cn(
                              "py-2 align-middle text-right tabular-nums",
                              (row.notionsInvCount ?? 0) === 0
                                ? "text-muted-foreground"
                                : (row.notionsInvCount ?? 0) >= 50
                                ? "text-emerald-600 font-medium"
                                : ""
                            )}
                          >
                            {fmtNum(row.notionsInvCount)}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums text-muted-foreground">
                            {fmtNum(row.onOrderQty)}
                          </TableCell>

                          <TableCell
                            className={cn(
                              "py-2 align-middle text-right tabular-nums",
                              urgentCover && "text-destructive font-medium"
                            )}
                          >
                            {row.coverDays !== null
                              ? `${fmtNum(row.coverDays, 1)}d`
                              : "—"}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums">
                            {fmtNum(row.sales30d)}
                            {row.velocity > 0 && (
                              <div className="text-[10px] text-muted-foreground">
                                {fmtNum(row.velocity, 2)}/day
                              </div>
                            )}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums">
                            {fmtNum(row.forecast30d, 0)}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right tabular-nums font-medium">
                            {row.replenishmentUnits &&
                            row.replenishmentUnits > 0 ? (
                              <Badge
                                variant="secondary"
                                className="tabular-nums"
                              >
                                {fmtNum(row.replenishmentUnits)}
                              </Badge>
                            ) : (
                              <span className="text-muted-foreground">—</span>
                            )}
                          </TableCell>

                          <TableCell className="py-2 align-middle text-right text-xs text-muted-foreground whitespace-nowrap">
                            {fmtDate(row.lastPoDate)}
                            {stale !== null && (
                              <div className="text-[10px]">
                                {stale === 0 ? "today" : `${stale}d ago`}
                              </div>
                            )}
                          </TableCell>
                        </TableRow>

                        {isExpanded && (
                          <TableRow className="hover:bg-transparent">
                            <TableCell
                              colSpan={COLUMN_COUNT + 1}
                              className="p-0"
                            >
                              <ProductHistory
                                pid={row.pid}
                                supplierId={supplierId}
                                windowDays={windowDays}
                              />
                            </TableCell>
                          </TableRow>
                        )}
                      </Fragment>
                    );
                  })}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
