/** The cross-tab desk — one measure by two dimensions, totals at both edges. */
import { useMemo, useState } from "react";
import { Text } from "@lotics/ui/text";
import { colors } from "@lotics/ui/colors";
import { Avatar } from "@lotics/ui/avatar";
import { Status } from "@lotics/ui/status";
import { Box } from "@lotics/ui/box";
import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
import { Divider } from "@lotics/ui/divider";
import { Drawer, DrawerScrollArea } from "@lotics/ui/drawer";
import { RegionState } from "@lotics/ui/region_state";
import { MetricStrip } from "@lotics/ui/metric_strip";
import { Chip } from "@lotics/ui/chip";
import { Matrix, MatrixGrid, MatrixHeader, MatrixLegend, MatrixTotals } from "@lotics/ui/matrix";
import { type MatrixCellRef } from "@lotics/ui/matrix_totals";
import { RowFocusEntry } from "@lotics/ui/row_focus_entry";
import { PressableRow } from "@lotics/ui/pressable_row";
import { ScrollArea } from "@lotics/ui/scroll_area";
import { Stack } from "@lotics/ui/stack";

// ─────────────────────────────────────────────────────────────────────────────
// Template, Pivot — one dimension crossed against another, then drill.
// The Matrix is the hero: warehouse × category, the number IN each cell and a
// heat wash behind it so the concentration reads at a glance, row/column/grand
// totals down the edges. Pressing a cell is a door — the register below filters
// to exactly that intersection; a row there opens the item drawer. The pattern
// for "how does X distribute across Y, and what's behind each bucket?".
// ─────────────────────────────────────────────────────────────────────────────

const WAREHOUSES = [
  { key: "chi", label: "Chicago" },
  { key: "dal", label: "Dallas" },
  { key: "nwk", label: "Newark" },
  { key: "reno", label: "Reno" },
  { key: "atl", label: "Atlanta" },
] as const;

const CATEGORIES = [
  { key: "apparel", label: "Apparel" },
  { key: "home", label: "Home" },
  { key: "elec", label: "Electronics" },
  { key: "outdoor", label: "Outdoor" },
] as const;

type WarehouseKey = (typeof WAREHOUSES)[number]["key"];
type CategoryKey = (typeof CATEGORIES)[number]["key"];

interface Sku {
  code: string;
  name: string;
  warehouse: WarehouseKey;
  category: CategoryKey;
  units: number;
  status: "in_stock" | "low" | "backorder";
}

// Deterministic mock catalogue — integer hashing, stable across reloads.
function hash(i: number, salt: number): number {
  let x = (i + 1) * 2654435761 + salt * 40503;
  x = ((x >>> 16) ^ x) * 0x45d9f3b;
  x = ((x >>> 16) ^ x) * 0x45d9f3b;
  return (x >>> 16) % 1000;
}

const NAMES = ["Cotton tee", "Wool throw", "USB hub", "Trail flask", "Rain shell", "Desk lamp", "Sport sock", "Cast pan", "Earbuds", "Tent peg", "Linen shirt", "Throw pillow"];

const SKUS: Sku[] = (() => {
  const out: Sku[] = [];
  // A deliberate concentration in Newark, Electronics so a hot cell has a story.
  for (let i = 0; i < 64; i++) {
    const wRoll = hash(i, 1) % 100;
    const warehouse: WarehouseKey =
      wRoll < 18 ? "chi" : wRoll < 36 ? "dal" : wRoll < 66 ? "nwk" : wRoll < 84 ? "reno" : "atl";
    const cRoll = hash(i, 2) % 100;
    const category: CategoryKey =
      warehouse === "nwk" && cRoll < 55 ? "elec" : cRoll < 30 ? "apparel" : cRoll < 55 ? "home" : cRoll < 78 ? "elec" : "outdoor";
    const units = hash(i, 3) % 40;
    out.push({
      code: `SKU-${String(1000 + i)}`,
      name: NAMES[hash(i, 4) % NAMES.length],
      warehouse,
      category,
      units,
      status: units === 0 ? "backorder" : units < 6 ? "low" : "in_stock",
    });
  }
  return out;
})();

const whOf = (k: WarehouseKey) => WAREHOUSES.find((w) => w.key === k)!;
const catOf = (k: CategoryKey) => CATEGORIES.find((c) => c.key === k)!;

const STATUS: Record<Sku["status"], { label: string; color: "emerald" | "amber" | "red" }> = {
  in_stock: { label: "In stock", color: "emerald" },
  low: { label: "Low", color: "amber" },
  backorder: { label: "Backorder", color: "red" },
};

const count = (n: number) => n.toLocaleString("en-US");

function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <Stack direction="row" align="center" gap="none" style={{ gap: 12, minHeight: 28 }}>
      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
      {children}
    </Stack>
  );
}

export function TplPivot() {
  const [cell, setCell] = useState<MatrixCellRef | null>(null);
  const [openIdx, setOpenIdx] = useState<number | null>(null);

  // Cell value = how many SKUs sit at that warehouse × category.
  const counts = useMemo(() => {
    const m = new Map<string, number>();
    for (const s of SKUS) m.set(`${s.warehouse}|${s.category}`, (m.get(`${s.warehouse}|${s.category}`) ?? 0) + 1);
    return m;
  }, []);
  const value = (w: string, c: string) => counts.get(`${w}|${c}`) ?? 0;

  // The drill register follows the pressed cell; no cell = the whole catalogue.
  const items = useMemo(
    () => (cell ? SKUS.filter((s) => s.warehouse === cell.row && s.category === cell.col) : SKUS),
    [cell],
  );
  const open = openIdx !== null ? items[openIdx] : null;

  const totalUnits = SKUS.reduce((s, x) => s + x.units, 0);
  const lowOrOut = SKUS.filter((s) => s.status !== "in_stock").length;

  return (
    <ScrollArea style={{ flex: 1, background: colors.white }}>
      <Box padding={24}>
        <Stack gap={16} style={{ width: "100%", maxWidth: 960, alignSelf: "center" }}>
          <Stack gap="none" style={{ gap: 2 }}>
            <Text size="xxl" weight="semibold">Stock distribution</Text>
            <Text size="sm" color="muted">Where each category sits across the network — press a cell to list what's behind it</Text>
          </Stack>

          <MetricStrip
            items={[
              { label: "SKUs", value: SKUS.length, format: "number" },
              { label: "Units on hand", value: totalUnits, format: "number" },
              { label: "Low or backorder", value: lowOrOut, format: "number", tone: lowOrOut > 0 ? "warning" : "default", caption: "need attention" },
              { label: "Warehouses", value: WAREHOUSES.length, format: "number" },
            ]}
          />

          <Card padding="none">
            <CardHeader>
              <CardHeaderTitle info="Number of SKUs at each warehouse × category; the wash deepens with the count. Press a cell to filter the list below to that intersection.">
                SKUs by warehouse × category
              </CardHeaderTitle>
            </CardHeader>
            <Box style={{ paddingInline: 16, paddingBlock: 16 }}>
              <Matrix
                // A row is a SUBJECT, so it carries the same identity mark a
                // warehouse wears anywhere else in the app — square, because a
                // facility is an organization and not a person. The mark is drawn
                // inside `rowLabelWidth`, so nothing else in the grid moves.
                rows={WAREHOUSES.map((w) => ({
                  key: w.key,
                  label: w.label,
                  leading: <Avatar subject="organization" size="sm" name={w.label} />,
                }))}
                cols={CATEGORIES.map((c) => ({ key: c.key, label: c.label }))}
                value={value}
                selected={cell}
                onSelectCell={(c) => { setCell(c); setOpenIdx(null); }}
                heatColor="indigo"
                formatValue={count}
              >
                <MatrixHeader corner="Warehouse \ Category" totalLabel="Total" />
                <MatrixGrid display="both" />
                <MatrixTotals label="Total" />
                <MatrixLegend lessLabel="Fewer" moreLabel="More" />
              </Matrix>
            </Box>
          </Card>

          <Card padding="none">
            <CardHeader>
              <CardHeaderTitle info="Items behind the selected cell. Press a row to open it.">
                Items
              </CardHeaderTitle>
              {cell ? (
                <Chip onDismiss={() => { setCell(null); setOpenIdx(null); }} dismissTooltip="Clear cell">
                  <Text size="xs" weight="medium" color="muted">{`${whOf(cell.row as WarehouseKey).label}, ${catOf(cell.col as CategoryKey).label}`}</Text>
                </Chip>
              ) : null}
            </CardHeader>

            <Stack direction="row" align="center" gap="none" style={{ gap: 12, paddingInline: 16, paddingBlock: 10 }}>
              <Text size="xs" color="muted" style={{ width: 96 }}>Code</Text>
              <Text size="xs" color="muted" style={{ flex: 1 }}>Item</Text>
              <Text size="xs" color="muted" align="right" style={{ width: 64 }}>Units</Text>
              <Text size="xs" color="muted" style={{ width: 96 }}>Status</Text>
            </Stack>
            <Divider />

            {items.length === 0 ? (
              <Box style={{ paddingInline: 16, paddingBlock: 16 }}>
                <RegionState state="empty" message="No items in this cell" detail="Press another cell or clear the filter" />
              </Box>
            ) : (
              items.slice(0, 10).map((s, i) => (
                <Box key={s.code}>
                  {i > 0 ? <Divider /> : null}
                  <PressableRow onPress={() => setOpenIdx(i)} selected={openIdx === i} style={{ minHeight: 44 }}>
                    <RowFocusEntry onPress={() => setOpenIdx(i)} accessibilityLabel={`Open ${s.code}`} />
                    <Text size="sm" weight="medium" style={{ width: 96 }} lines={1}>{s.code}</Text>
                    <Text size="sm" style={{ flex: 1 }} lines={1}>{s.name}</Text>
                    <Text size="sm" align="right" style={{ width: 64 }}>{count(s.units)}</Text>
                    <Box style={{ width: 96, flexShrink: 0 }}>
                      <Status variant="dot" label={STATUS[s.status].label} color={STATUS[s.status].color} />
                    </Box>
                  </PressableRow>
                </Box>
              ))
            )}

            <CardFooter>
              <Text size="xs" color="muted" style={{ flex: 1 }}>
                {items.length > 10 ? `Showing 10 of ${count(items.length)}` : `${count(items.length)} item${items.length === 1 ? "" : "s"}`}
              </Text>
            </CardFooter>
          </Card>
        </Stack>

        {/* The overlay is RENDERED and its `open` toggles — a `{cond ? <Drawer/> : null}` is the
            one shape an overlay may not take. Only the BODY is conditional. */}
        <Drawer
          open={open !== null}
          onOpenChange={(o) => !o && setOpenIdx(null)}
          title={open?.code}
          width={420}
          onPrev={openIdx !== null && openIdx > 0 ? () => setOpenIdx(openIdx - 1) : undefined}
          onNext={openIdx !== null && openIdx < Math.min(items.length, 10) - 1 ? () => setOpenIdx(openIdx + 1) : undefined}
          position={openIdx !== null ? { index: openIdx + 1, total: Math.min(items.length, 10) } : undefined}
        >
          {open !== null ? (
            <DrawerScrollArea key={open.code}>
              <Stack gap="none" style={{ gap: 12 }}>
                <Status variant="dot" label={STATUS[open.status].label} color={STATUS[open.status].color} />
                <Stack gap="none" style={{ gap: 6, paddingTop: 4 }}>
                  <KVRow label="Item"><Text size="sm">{open.name}</Text></KVRow>
                  <Divider />
                  <KVRow label="Warehouse"><Text size="sm">{whOf(open.warehouse).label}</Text></KVRow>
                  <Divider />
                  <KVRow label="Category"><Text size="sm">{catOf(open.category).label}</Text></KVRow>
                  <Divider />
                  <KVRow label="Units on hand"><Text size="sm">{count(open.units)}</Text></KVRow>
                </Stack>
              </Stack>
            </DrawerScrollArea>
          ) : null}
        </Drawer>
      </Box>
    </ScrollArea>
  );
}