/**
 * Showcase · case6 — 代理店ハンディ (Agency Handy, mobile)
 *
 * The Acme consolidation-warehouse handheld app (390×844, gloves-on, scan-heavy),
 * rebuilt ENTIRELY from real @godxjp/ui primitives — the reference-design "Handy Agency"
 * design recreated as a skeleton (intent + look), not a transcription of its prototype DOM.
 *
 * Composition map (Handy prototype block → @godxjp/ui primitive):
 *   phone shell ................. composed frame (status bar / header / scroll / sticky bar / tabbar)
 *   header text-action .......... Button(ghost, size=sm) — iOS "Chọn" select-mode entry
 *   filter chips ................ ToggleGroup(type=single) — 32px count pills
 *   outbound segmented .......... ToggleGroup(type=single) — Chờ niêm phong / Chờ bàn giao / Đã bàn giao
 *   list-card recipe ............ Card + composed 3-line row + Badge(tone) + select-mode Checkbox
 *   status badge (1:1) .......... Badge tone — attention/info/muted/success/warning, color-locked
 *   select-mode bar ............. primary-soft toolbar strip (count + actions) above tabbar
 *   big scan Button ............. sticky-actions primary "Quét / Tìm mã" (flex-2, dominant)
 *   ItemLookupSheet ............. Sheet(side=bottom) — viewfinder placeholder + manual mono input
 *   package-picker Sheet ........ Sheet(side=bottom) — list of PKG rows + create-new row
 *   ItemFormModal Sheet ......... Sheet(side=bottom) — barcode + qty + radio-row "Đích đến"
 *   detail rows ................. Descriptions + Descriptions.Item(mono) — item detail
 *   confirm Dialog .............. AlertDialog — Seal / Handoff (verb confirm, not "OK")
 *   toast ....................... Toaster + toast.success — "Đã bàn giao … · 16:24"
 *   four list states ............ Loading(Skeleton) · Empty(EmptyState) · Error(Alert) · populated
 *
 * DNA applied: comfortable 44px touch density, mono codes (RC-/JAN/PKG-/A-03-02),
 * fixed color signaling (attention 朱 = Chưa phân loại + fixable errors, info 群青 = open,
 * muted = in-package/draft, success 若竹 = sealed, warning 山吹 = delivered), tabular-nums,
 * scan-first (primary action widest), bottom-sheet-driven, vi-first quiet copy, no emoji.
 */
import * as React from "react";
import {
  Boxes,
  Check,
  Inbox,
  Package,
  PackagePlus,
  Plus,
  RefreshCw,
  ScanLine,
  Search,
  Truck,
  X,
} from "lucide-react";

import { Button, Heading, Text } from "@godxjp/ui/general";
import { Flex, MobileShell, ResponsiveGrid } from "@godxjp/ui/layout";
import {
  Badge,
  type BadgeProps,
  Card,
  CardContent,
  Descriptions,
  EmptyState,
} from "@godxjp/ui/data-display";
import { Checkbox, Input, RadioGroup, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
import {
  AlertDialog,
  Alert,
  AlertTitle,
  AlertDescription,
  Sheet,
  SheetBody,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  Skeleton,
  Toaster,
  toast,
} from "@godxjp/ui/feedback";

type BadgeTone = NonNullable<BadgeProps["tone"]>;

// ── Status vocabulary — 1:1 color-locked (Handy §6b: "same word in different colors is a bug") ──
type ItemStatus = "unsorted" | "shelf" | "packed";
const ITEM_STATUS: Record<ItemStatus, { label: string; tone: BadgeTone }> = {
  unsorted: { label: "Chưa phân loại", tone: "destructive" }, // 朱 attention via destructive-adjacent? -> use warning? see note
  shelf: { label: "Trên giá hàng", tone: "info" }, //  群青 open
  packed: { label: "Trong kiện", tone: "muted" }, // draft / in-package
};

// Attention (朱) is the fixable-but-needs-action signal. Badge tones expose
// success/warning/destructive/info/muted/neutral — there is no dedicated "attention"
// tone, so non-destructive "Chưa phân loại" maps to warning (山吹), reserving
// destructive (茜) for the irreversible logout confirm only. (see gapNotes)
ITEM_STATUS.unsorted.tone = "warning";

type PackingStatus = "active" | "open" | "draft" | "sealed" | "delivered";
const PACKING_STATUS: Record<PackingStatus, { label: string; tone: BadgeTone }> = {
  active: { label: "Đang làm", tone: "info" },
  open: { label: "Đang mở", tone: "info" },
  draft: { label: "Nháp", tone: "muted" },
  sealed: { label: "Đã niêm phong", tone: "success" },
  delivered: { label: "Đã bàn giao", tone: "muted" },
};

// ── Mock data ───────────────────────────────────────────────────────────────

interface HandyItem {
  id: string;
  name: string;
  rc: string;
  jan: string;
  status: ItemStatus;
  qty: number;
  receivedAt: string;
}

const ITEMS: HandyItem[] = [
  {
    id: "1",
    name: "Sữa rửa mặt Hada Labo",
    rc: "RC-204881",
    jan: "4987241135219",
    status: "unsorted",
    qty: 3,
    receivedAt: "14:02",
  },
  {
    id: "2",
    name: "Kem chống nắng Anessa",
    rc: "RC-204882",
    jan: "4909978141004",
    status: "shelf",
    qty: 1,
    receivedAt: "13:48",
  },
  {
    id: "3",
    name: "Vitamin DHC B-Complex",
    rc: "RC-204879",
    jan: "4511413404164",
    status: "shelf",
    qty: 2,
    receivedAt: "13:31",
  },
  {
    id: "4",
    name: "Bàn chải Ora2 Me",
    rc: "RC-204875",
    jan: "4903301242697",
    status: "packed",
    qty: 4,
    receivedAt: "11:20",
  },
];

interface Packing {
  id: string;
  code: string;
  customer: string;
  city: string;
  items: number;
  status: PackingStatus;
  slot?: string;
}

const PACKINGS: Packing[] = [
  {
    id: "p1",
    code: "PKG-000041",
    customer: "Bùi Hà",
    city: "Hà Nội",
    items: 8,
    status: "active",
    slot: "A-03-02",
  },
  { id: "p2", code: "PKG-000040", customer: "Lê Minh", city: "TP.HCM", items: 5, status: "open" },
  {
    id: "p3",
    code: "PKG-000038",
    customer: "Trần Linh",
    city: "Đà Nẵng",
    items: 12,
    status: "draft",
  },
];

const OUTBOUND: Packing[] = [
  {
    id: "o1",
    code: "PKG-000037",
    customer: "Phạm An",
    city: "Hà Nội",
    items: 9,
    status: "sealed",
    slot: "B-01-04",
  },
  {
    id: "o2",
    code: "PKG-000036",
    customer: "Vũ Nga",
    city: "TP.HCM",
    items: 6,
    status: "sealed",
    slot: "B-02-01",
  },
];

const TABS = [
  { id: "inbound", label: "Nhập kho", icon: Inbox },
  { id: "packing", label: "Đóng gói", icon: Package },
  { id: "outbound", label: "Xuất kho", icon: Truck },
] as const;

const FILTERS = [
  { id: "all", label: "Tất cả", count: 42 },
  { id: "unsorted", label: "Chưa phân loại", count: 9 },
  { id: "shelf", label: "Trên giá hàng", count: 33 },
] as const;

// ── Small composed parts ─────────────────────────────────────────────────────

function MonoCode({ children }: { children: React.ReactNode }) {
  return (
    <Text size="xs" mono tone="muted" tabular>
      {children}
    </Text>
  );
}

/** The Handy list-card recipe: full-tap row, name + mono codes + badge/meta. */
function ItemListCard({
  item,
  selectMode,
  selected,
  onToggle,
}: {
  item: HandyItem;
  selectMode: boolean;
  selected: boolean;
  onToggle: () => void;
}) {
  const st = ITEM_STATUS[item.status];
  return (
    <Card
      density="tight"
      className={
        "rounded-xl transition-colors " +
        (selected
          ? "border-primary bg-[color-mix(in_oklch,var(--primary)_8%,transparent)]"
          : "hover:border-primary")
      }
    >
      <CardContent solo>
        <Flex align="start" gap="md">
          <Flex direction="col" gap="xs">
            {selectMode ? (
              <Checkbox
                checked={selected}
                onCheckedChange={onToggle}
                aria-label={`選択 ${item.name}`}
                className="size-5"
              />
            ) : null}
            <Flex direction="col" gap="sm" className="min-w-0 flex-1">
              <Text as="div" size="sm" weight="bold" truncate>
                {item.name}
              </Text>
              <Flex wrap align="center" gap="sm">
                <MonoCode>{item.rc}</MonoCode>
                <MonoCode>JAN {item.jan}</MonoCode>
              </Flex>
              <Flex align="center" justify="between" gap="sm">
                <Badge tone={st.tone} variant="outline" className="rounded-full">
                  {st.label}
                </Badge>
                <Text size="xs" tone="muted" tabular className="shrink-0">
                  ×{item.qty} · {item.receivedAt}
                </Text>
              </Flex>
            </Flex>
          </Flex>
        </Flex>
      </CardContent>
    </Card>
  );
}

function PackingListCard({ packing, onTap }: { packing: Packing; onTap?: () => void }) {
  const st = PACKING_STATUS[packing.status];
  return (
    <Card
      density="tight"
      role={onTap ? "button" : undefined}
      tabIndex={onTap ? 0 : undefined}
      onClick={onTap}
      className={
        "rounded-xl transition-colors " + (onTap ? "hover:border-primary cursor-pointer" : "")
      }
    >
      <CardContent solo>
        <Flex direction="col" gap="xs">
          <Flex align="center" justify="between" gap="sm">
            <Text as="code" size="sm" weight="bold" tabular>
              {packing.code}
            </Text>
            <Badge tone={st.tone} variant="outline" className="rounded-full">
              {st.label}
            </Badge>
          </Flex>
          <Flex align="center" justify="between" gap="sm">
            <Text size="xs" tone="muted" truncate>
              {packing.customer} · {packing.city}
            </Text>
            <Text size="xs" tone="muted" tabular className="shrink-0">
              ×{packing.items}
              {packing.slot ? ` · ${packing.slot}` : ""}
            </Text>
          </Flex>
        </Flex>
      </CardContent>
    </Card>
  );
}

/** Three uppercase muted section header + right-aligned mono count. */
function SectionHeader({ children, count }: { children: React.ReactNode; count?: number }) {
  return (
    <Flex align="center" justify="between">
      <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
        {children}
      </Text>
      {count != null ? (
        <Text size="2xs" mono tone="muted" tabular>
          {count}
        </Text>
      ) : null}
    </Flex>
  );
}

// ── Phone shell ──────────────────────────────────────────────────────────────

/**
 * This file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
 * `ui-card-inset-x h-9` status row, an `h-14 border-b` header, a `flex-1 overflow-y-auto` body, a
 * `shrink-0 border-t` action strip and a `ResponsiveGrid` tab bar. It reproduced the look and
 * neither behaviour that matters on a device — the document still scrolled, and nothing padded out
 * of `env(safe-area-inset-*)`. All five bands are now `MobileShell` slots.
 */

function StatusBar() {
  return (
    <>
      <Text size="sm" weight="medium" tabular>
        9:41
      </Text>
      <Text size="sm" weight="medium" tabular tone="muted">
        Acme Handy
      </Text>
    </>
  );
}

function TabBar({ active, onChange }: { active: string; onChange: (id: string) => void }) {
  // The tab bar's own tiling — equal width, no seam, no gutter — is the `tabBar` slot's contract,
  // so there is no grid and no column count here any more.
  return (
    <>
      {TABS.map((t) => {
        const isActive = t.id === active;
        const Icon = t.icon;
        return (
          <Button
            key={t.id}
            variant="ghost"
            onClick={() => onChange(t.id)}
            aria-current={isActive ? "page" : undefined}
            className={
              "text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] h-full flex-col rounded-none font-medium " +
              (isActive ? "text-primary" : "text-muted-foreground")
            }
          >
            <Icon className="size-5" aria-hidden="true" strokeWidth={1.5} />
            <span className="whitespace-nowrap">{t.label}</span>
          </Button>
        );
      })}
    </>
  );
}

// ── Sheets ───────────────────────────────────────────────────────────────────

function ItemLookupSheet({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const [code, setCode] = React.useState("");
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" className="rounded-t-2xl">
        <SheetHeader>
          <SheetTitle>Quét hoặc nhập mã</SheetTitle>
        </SheetHeader>
        <SheetBody>
          <Flex direction="col" gap="md">
            {/* Viewfinder placeholder — a Card surface, not a hand-rolled illustration */}
            <Card variant="muted" className="border-2 border-dashed">
              <CardContent solo>
                <Flex direction="col" align="center" gap="sm" className="h-40 justify-center">
                  <ScanLine
                    className="size-7 text-[color:var(--attention,var(--warning))]"
                    aria-hidden="true"
                    strokeWidth={1.5}
                  />
                  <Text size="sm" tone="muted">
                    Đưa mã vạch vào khung
                  </Text>
                </Flex>
              </CardContent>
            </Card>
            <Flex direction="col" gap="sm">
              <Text size="sm" weight="medium">
                Hoặc nhập mã thủ công
              </Text>
              <Flex gap="sm">
                <Input
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
                  placeholder="RC- / PKG- / JAN"
                  className="font-mono"
                  inputMode="text"
                  autoComplete="off"
                />
                <Button
                  onClick={() => {
                    onOpenChange(false);
                    setCode("");
                    toast.success("Đã tìm thấy RC-204881 · Sữa rửa mặt Hada Labo");
                  }}
                  disabled={code.trim() === ""}
                >
                  <Search aria-hidden="true" />
                  Tìm
                </Button>
              </Flex>
            </Flex>
          </Flex>
        </SheetBody>
        <SheetFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Đóng
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

function PackagePickerSheet({
  open,
  onOpenChange,
  count,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  count: number;
}) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" className="rounded-t-2xl">
        <SheetHeader>
          <SheetTitle>Gán vào kiện</SheetTitle>
        </SheetHeader>
        <SheetBody>
          <Flex direction="col" gap="sm">
            <SectionHeader count={PACKINGS.length}>Kiện đang mở</SectionHeader>
            {PACKINGS.map((p) => (
              <PackingListCard
                key={p.id}
                packing={p}
                onTap={() => {
                  onOpenChange(false);
                  toast.success(`Đã gán ${count} item vào ${p.code}`);
                }}
              />
            ))}
            <Button
              variant="outline"
              onClick={() => {
                onOpenChange(false);
                toast.success(`Đã tạo kiện mới với ${count} item`);
              }}
              className="text-primary hover:border-primary h-11 w-full border-2 border-dashed"
            >
              <PackagePlus aria-hidden="true" strokeWidth={1.5} />
              Tạo kiện mới với {count} item này
            </Button>
          </Flex>
        </SheetBody>
        <SheetFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Huỷ
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

const DESTINATIONS = [
  { id: "unsorted", label: "Chưa phân loại", hint: "Để xử lý sau" },
  { id: "shelf", label: "Giá hàng", hint: "Lên kệ lưu trữ" },
  { id: "open", label: "Kiện đang mở", hint: "Gói cùng đơn hiện tại" },
  { id: "new", label: "Tạo kiện mới", hint: "Mở kiện mới cho item" },
] as const;

function ItemFormSheet({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const [dest, setDest] = React.useState<string>("unsorted");
  const [qty, setQty] = React.useState("1");
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" className="max-h-[calc(80vh)] rounded-t-2xl">
        <SheetHeader>
          <SheetTitle>Thêm hàng mới</SheetTitle>
        </SheetHeader>
        <SheetBody>
          <Flex direction="col" gap="md">
            <Flex direction="col" gap="xs">
              <Text size="sm" weight="medium">
                Mã vạch
              </Text>
              <Input defaultValue="JAN 4987241135219" readOnly className="font-mono" />
            </Flex>
            <Flex direction="col" gap="xs">
              <Text size="sm" weight="medium">
                Tên hàng (tùy chọn)
              </Text>
              <Input placeholder="Nhập tên hàng" autoComplete="off" />
            </Flex>
            <Flex direction="col" gap="xs">
              <Text size="sm" weight="medium">
                Số lượng
              </Text>
              <Input
                type="number"
                value={qty}
                min={1}
                onChange={(e) => setQty(e.target.value)}
                className="w-24 tabular-nums"
              />
            </Flex>
            <Flex direction="col" gap="sm">
              <Text size="sm" weight="medium">
                Đích đến
              </Text>
              <RadioGroup
                id="handy-dest"
                value={dest}
                onValueChange={setDest}
                orientation="vertical"
                options={DESTINATIONS.map((d) => ({
                  value: d.id,
                  label: d.label,
                  description: d.hint,
                }))}
              />
            </Flex>
          </Flex>
        </SheetBody>
        <SheetFooter className="flex-row">
          <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
            Huỷ
          </Button>
          <Button
            className="flex-[2]"
            onClick={() => {
              onOpenChange(false);
              toast.success("Đã lưu hàng mới");
            }}
          >
            Lưu
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

// ── Tab bodies ───────────────────────────────────────────────────────────────

type ListState = "ready" | "loading" | "empty" | "error";

/**
 * The SCROLL REGION of the inbound screen — and nothing else. The sticky bar and the tab bar are
 * `MobileShell` bands now, so this component no longer owns a scroll box, a `flex-1`, or a border.
 */
function InboundTab({
  state,
  onRetry,
  selectMode,
  selected,
  setSelected,
  onScan,
}: {
  state: ListState;
  onRetry: () => void;
  selectMode: boolean;
  selected: Set<string>;
  setSelected: React.Dispatch<React.SetStateAction<Set<string>>>;
  onScan: () => void;
}) {
  const [filter, setFilter] = React.useState<string>("all");

  const visible = ITEMS.filter((i) =>
    filter === "all"
      ? true
      : filter === "unsorted"
        ? i.status === "unsorted"
        : i.status === "shelf",
  );

  return (
    <Flex direction="col" gap="md">
      {/* Filter chips — horizontal scroll, count pills */}
      <ToggleGroup
        type="single"
        value={filter}
        onValueChange={(v) => {
          if (v) setFilter(v);
        }}
        className="w-full overflow-x-auto"
      >
        <Flex justify="start" gap="sm">
          {FILTERS.map((f) => (
            <ToggleGroupItem
              key={f.id}
              value={f.id}
              className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 shrink-0 rounded-full whitespace-nowrap"
              // The library's OWN counter pill, not a `Text` at 70% opacity (gh#643). The
              // hand-rolled one measured 2.15:1 on the selected chip's --primary fill, because
              // `opacity-70` blends whatever ink it inherits back towards the fill underneath it —
              // `tone="inherit"` cannot help with that. `.ui-toggle[data-state="on"]
              // .ui-toggle-count` inverts instead (--primary on --primary-foreground, 6.32:1) and
              // folds the number into the accessible name.
              count={f.count}
            >
              {f.label}
            </ToggleGroupItem>
          ))}
        </Flex>
      </ToggleGroup>

      {state === "loading" ? (
        <Flex direction="col" gap="md" aria-busy="true">
          {Array.from({ length: 3 }).map((_, i) => (
            <Card key={i} density="tight" className="rounded-xl">
              <CardContent solo>
                <Flex direction="col" gap="md">
                  <Skeleton className="h-4 w-3/5" />
                  <Skeleton className="h-3 w-2/5" />
                  <Skeleton className="h-5 w-24 rounded-full" />
                </Flex>
              </CardContent>
            </Card>
          ))}
        </Flex>
      ) : state === "error" ? (
        <Alert tone="warning">
          <AlertTitle>Không tải được danh sách</AlertTitle>
          <AlertDescription>
            <Flex direction="col" align="start" gap="sm">
              Kiểm tra kết nối rồi thử lại.
              <Button variant="outline" size="sm" onClick={onRetry}>
                <RefreshCw aria-hidden="true" />
                Thử lại
              </Button>
            </Flex>
          </AlertDescription>
        </Alert>
      ) : state === "empty" || visible.length === 0 ? (
        <EmptyState
          icon={Boxes}
          title="Chưa có hàng trong mục này"
          description="Quét mã để nhập hàng mới vào kho."
          action={
            <Button size="sm" onClick={onScan}>
              <ScanLine aria-hidden="true" />
              Quét / Tìm mã
            </Button>
          }
        />
      ) : (
        <Flex direction="col" gap="md">
          {visible.map((item) => (
            <ItemListCard
              key={item.id}
              item={item}
              selectMode={selectMode}
              selected={selected.has(item.id)}
              onToggle={() =>
                setSelected((prev) => {
                  const next = new Set(prev);
                  if (next.has(item.id)) next.delete(item.id);
                  else next.add(item.id);
                  return next;
                })
              }
            />
          ))}
        </Flex>
      )}
    </Flex>
  );
}

/**
 * The inbound screen's `actions` band: the scan-first pair at rest, the contextual pair in select
 * mode. It lives OUTSIDE the scroll region, so it needs no `position: sticky` and no bottom padding
 * on the list to clear it, and `MobileShell` gives it the home-indicator inset when no tab bar
 * follows.
 */
function InboundActions({
  selectMode,
  selected,
  onExitSelect,
  onScan,
  onAdd,
  onAssign,
}: {
  selectMode: boolean;
  selected: Set<string>;
  onExitSelect: () => void;
  onScan: () => void;
  onAdd: () => void;
  onAssign: () => void;
}) {
  if (!selectMode) {
    return (
      <>
        <Button className="flex-[2]" onClick={onScan}>
          <ScanLine aria-hidden="true" />
          Quét / Tìm mã
        </Button>
        <Button variant="outline" className="flex-1" onClick={onAdd}>
          <Plus aria-hidden="true" />
          Thêm hàng
        </Button>
      </>
    );
  }
  return (
    <Flex direction="col" gap="sm" className="w-full">
      <Flex align="center" justify="between">
        <Text size="sm" tabular>
          <Text as="span" weight="bold">
            {selected.size}
          </Text>{" "}
          item đã chọn
        </Text>
        <Button variant="ghost" size="sm" onClick={onExitSelect}>
          Xong
        </Button>
      </Flex>
      <Flex gap="sm">
        <Button className="flex-[2]" disabled={selected.size === 0} onClick={onAssign}>
          <Package aria-hidden="true" />
          Gán vào kiện…
        </Button>
        <Button variant="outline" className="flex-1" disabled={selected.size === 0}>
          Kiện mới
        </Button>
      </Flex>
    </Flex>
  );
}

function PackingTab() {
  const active = PACKINGS.find((p) => p.status === "active");
  const others = PACKINGS.filter((p) => p.status !== "active");
  return (
    <Flex direction="col" gap="md">
      {active ? (
        <Card
          density="tight"
          accent="primary"
          className="border-primary bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
        >
          <CardContent solo>
            <Flex direction="col" gap="xs">
              <Flex align="center" justify="between">
                <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
                  Kiện đang làm
                </Text>
                <Badge tone="info" variant="outline" className="rounded-full">
                  {PACKING_STATUS.active.label}
                </Badge>
              </Flex>
              <Text as="div" size="lg" weight="bold" mono tabular>
                {active.code}
              </Text>
              <Text size="xs" tone="muted" tabular as="div">
                {active.customer} · {active.city} · ×{active.items} · {active.slot}
              </Text>
            </Flex>
          </CardContent>
        </Card>
      ) : null}

      <SectionHeader count={others.length}>Kiện đang mở</SectionHeader>
      <Flex direction="col" gap="md">
        {others.map((p) => (
          <PackingListCard key={p.id} packing={p} onTap={() => undefined} />
        ))}
      </Flex>
    </Flex>
  );
}

function PackingActions({ onScan }: { onScan: () => void }) {
  return (
    <Flex direction="col" gap="sm" className="w-full">
      <Button onClick={onScan}>
        <ScanLine aria-hidden="true" />
        Quét item vào kiện
      </Button>
      <Button variant="outline">
        <Plus aria-hidden="true" />
        Tạo kiện trống
      </Button>
    </Flex>
  );
}

/**
 * `seg` is lifted to the page: the segmented control lives in the scroll region while the verb it
 * selects lives in the `actions` band, and the two are different MobileShell slots.
 */
function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void }) {
  return (
    <Flex direction="col" gap="md">
      {/* Segmented — outbound status */}
      <ToggleGroup
        type="single"
        value={seg}
        onValueChange={(v) => {
          if (v) setSeg(v);
        }}
        className="bg-secondary/60 w-full rounded-xl"
      >
        <ResponsiveGrid columns={3} gap="xs">
          <ToggleGroupItem
            value="seal"
            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
          >
            Chờ niêm phong
          </ToggleGroupItem>
          <ToggleGroupItem
            value="handoff"
            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
          >
            Chờ bàn giao
          </ToggleGroupItem>
          <ToggleGroupItem
            value="done"
            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
          >
            Đã bàn giao
          </ToggleGroupItem>
        </ResponsiveGrid>
      </ToggleGroup>

      <SectionHeader count={OUTBOUND.length}>
        {seg === "seal"
          ? "Sẵn sàng niêm phong"
          : seg === "handoff"
            ? "Chờ bàn giao"
            : "Đã bàn giao"}
      </SectionHeader>
      <Flex direction="col" gap="md">
        {OUTBOUND.map((p) => (
          <Card key={p.id} density="tight" className="rounded-xl">
            <CardContent solo>
              <Flex direction="col" gap="md">
                <Flex align="center" justify="between" gap="sm">
                  <Text as="code" size="sm" weight="bold" tabular>
                    {p.code}
                  </Text>
                  <Badge tone="success" variant="outline" className="rounded-full">
                    Sẵn sàng niêm phong
                  </Badge>
                </Flex>
                <Flex align="center" justify="between" gap="sm">
                  <Text size="xs" tone="muted" tabular truncate>
                    {p.customer} · {p.city}
                  </Text>
                  <Text size="xs" tone="muted" tabular className="shrink-0">
                    ×{p.items} · {p.slot}
                  </Text>
                </Flex>
                <div>
                  <Descriptions columns={1}>
                    <Descriptions.Item label="Vị trí" mono>
                      {p.slot}
                    </Descriptions.Item>
                    <Descriptions.Item label="Số kiện" mono>
                      ×{p.items}
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </Flex>
            </CardContent>
          </Card>
        ))}
      </Flex>
    </Flex>
  );
}

function OutboundActions({
  seg,
  onSeal,
  onHandoff,
}: {
  seg: string;
  onSeal: () => void;
  onHandoff: () => void;
}) {
  return seg === "handoff" ? (
    <Button className="flex-1" onClick={onHandoff}>
      <Truck aria-hidden="true" />
      Xác nhận bàn giao
    </Button>
  ) : (
    <Button className="flex-1" onClick={onSeal}>
      <Check aria-hidden="true" />
      Quét mã kiện · Niêm phong
    </Button>
  );
}

// ── Root ─────────────────────────────────────────────────────────────────────

export default function AgencyHandyShowcase() {
  const [tab, setTab] = React.useState<string>("inbound");
  const [listState, setListState] = React.useState<ListState>("ready");

  const [selectMode, setSelectMode] = React.useState(false);
  const [selected, setSelected] = React.useState<Set<string>>(new Set());
  const [seg, setSeg] = React.useState<string>("seal");

  const [lookupOpen, setLookupOpen] = React.useState(false);
  const [formOpen, setFormOpen] = React.useState(false);
  const [pickerOpen, setPickerOpen] = React.useState(false);

  const [sealOpen, setSealOpen] = React.useState(false);
  const [handoffOpen, setHandoffOpen] = React.useState(false);

  const headerTitle = tab === "inbound" ? "Nhập kho" : tab === "packing" ? "Đóng gói" : "Xuất kho";

  const exitSelect = () => {
    setSelectMode(false);
    setSelected(new Set());
  };

  // SELECT MODE REPLACES THE APP BAR — it does not stack a second strip under it. That is the
  // platform pattern on both iOS and Android, and it is what the `header` slot is for: one bar to
  // read at a time. This file once rendered the title bar AND a contextual strip, because
  // there was no bar to swap.
  const header = selectMode ? (
    <Flex align="center" justify="between" gap="xs" className="w-full">
      <Button variant="ghost" size="icon-sm" aria-label="Thoát chế độ chọn" onClick={exitSelect}>
        <X className="size-4" aria-hidden="true" strokeWidth={1.5} />
      </Button>
      <Text size="sm" mono tabular>
        {selected.size} đã chọn
      </Text>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => setSelected(new Set(ITEMS.map((i) => i.id)))}
      >
        Chọn tất cả
      </Button>
    </Flex>
  ) : (
    <Flex align="center" justify="between" gap="xs" className="w-full">
      <Heading level={3} as="h1" className="whitespace-nowrap">
        {headerTitle}
      </Heading>
      <Flex align="center" gap="xs">
        {tab === "inbound" ? (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setSelectMode(true);
              setSelected(new Set());
            }}
          >
            <Check aria-hidden="true" />
            Chọn
          </Button>
        ) : null}
        {/* State switcher — exposes the 4 list states at rest (showcase affordance) */}
        {tab === "inbound" ? (
          <ToggleGroup
            type="single"
            value={listState}
            onValueChange={(v) => {
              if (v) setListState(v as ListState);
            }}
            aria-label="List state (showcase)"
          >
            <Flex gap="xs">
              {(["ready", "loading", "empty", "error"] as const).map((s) => (
                <ToggleGroupItem
                  key={s}
                  value={s}
                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] size-7 rounded-md uppercase"
                  title={s}
                >
                  {s[0]}
                </ToggleGroupItem>
              ))}
            </Flex>
          </ToggleGroup>
        ) : null}
      </Flex>
    </Flex>
  );

  const actions =
    tab === "inbound" ? (
      <InboundActions
        selectMode={selectMode}
        selected={selected}
        onExitSelect={exitSelect}
        onScan={() => setLookupOpen(true)}
        onAdd={() => setFormOpen(true)}
        onAssign={() => setPickerOpen(true)}
      />
    ) : tab === "packing" ? (
      <PackingActions onScan={() => setLookupOpen(true)} />
    ) : (
      <OutboundActions
        seg={seg}
        onSeal={() => setSealOpen(true)}
        onHandoff={() => setHandoffOpen(true)}
      />
    );

  return (
    <>
      <Toaster />
      {/* The whole phone is ONE primitive now: five bands, no Card frame, no hand-rolled scroll box,
       * no `min-h-screen` wrapper. The shell is the document's only scroll container and every band
       * pads itself out of the device safe areas. */}
      <MobileShell
        statusBar={<StatusBar />}
        header={header}
        actions={actions}
        tabBar={
          <TabBar
            active={tab}
            onChange={(id) => {
              setTab(id);
              exitSelect();
            }}
          />
        }
      >
        {tab === "inbound" ? (
          <InboundTab
            state={listState}
            onRetry={() => setListState("ready")}
            selectMode={selectMode}
            selected={selected}
            setSelected={setSelected}
            onScan={() => setLookupOpen(true)}
          />
        ) : tab === "packing" ? (
          <PackingTab />
        ) : (
          <OutboundTab seg={seg} setSeg={setSeg} />
        )}
      </MobileShell>

      {/* Sheets */}
      <ItemLookupSheet open={lookupOpen} onOpenChange={setLookupOpen} />
      <ItemFormSheet open={formOpen} onOpenChange={setFormOpen} />
      <PackagePickerSheet open={pickerOpen} onOpenChange={setPickerOpen} count={selected.size} />

      {/* Confirm dialogs — verb confirm, surface summary; forward step = primary */}
      <AlertDialog
        open={sealOpen}
        onOpenChange={setSealOpen}
        title="Niêm phong kiện?"
        description="PKG-000037 · 9 item · vị trí B-01-04. Sau khi niêm phong không thể thêm item."
        confirmLabel="Niêm phong"
        cancelLabel="Huỷ"
        onConfirm={() => {
          toast.success("Đã niêm phong PKG-000037 · 16:24");
        }}
      />
      <AlertDialog
        open={handoffOpen}
        onOpenChange={setHandoffOpen}
        title="Xác nhận bàn giao?"
        description="PKG-000037 lên xe giao. Thao tác này có thể hoàn tác trong 10 phút."
        confirmLabel="Xác nhận"
        cancelLabel="Huỷ"
        onConfirm={() => {
          toast.success("Đã bàn giao PKG-000037 · 16:24");
        }}
      />
    </>
  );
}