// Items master page (single screen with detail panel) + Stock Ledger page + Audit log page

function ItemsPage({ selectedItemId = "itm-001" }) {
  const selected = itemById(selectedItemId);
  return (
    <main className="px-8 py-6 space-y-5">
      <BiPageHeader title="Items" subtitle="Master record · imported from your accounting software" actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Item</Button>}/>
      <div className="grid grid-cols-[1fr_420px] gap-5">
      {/* List */}
      <Card className="overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--hairline)]">
          <Icon name="search" size={14} className="text-[var(--ink-3)]"/>
          <input className="flex-1 bg-transparent outline-none text-[13px] placeholder:text-[var(--ink-4)]" placeholder="Search items, SKU, HSN…"/>
          <Pill kind="neutral">{ITEMS.length} items</Pill>
        </div>
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-4 py-2.5">Item</th>
              <th className="type-table-head text-left px-3 py-2.5">SKU</th>
              <th className="type-table-head text-right px-3 py-2.5">GST</th>
              <th className="type-table-head text-right px-3 py-2.5">Cost</th>
              <th className="type-table-head text-right px-3 py-2.5">Selling</th>
              <th className="type-table-head text-right px-4 py-2.5">Reorder</th>
            </tr>
          </thead>
          <tbody>
            {ITEMS.map((it) => (
              <tr key={it.id}
                className={cn("border-b border-[var(--hairline)] last:border-0 cursor-pointer transition-colors",
                  it.id === selectedItemId ? "bg-[var(--accent-1-wash)]" : "hover:bg-[var(--sunken)]")}>
                <td className="px-4 py-2.5">
                  <div className="flex items-center gap-2.5">
                    <div className="w-7 h-7 rounded-md grid place-items-center" style={{ background: "var(--sunken)", color: "var(--ink-3)" }}>
                      <Icon name="package" size={13}/>
                    </div>
                    <div>
                      <div className="text-[13px] font-semibold text-[var(--ink)]">{it.name}</div>
                      <div className="text-[11px] text-[var(--ink-3)]">{it.unit}{it.altUnit ? ` · ${it.altUnit}` : ""}</div>
                    </div>
                  </div>
                </td>
                <td className="px-3 py-2.5 text-[12px] mono text-[var(--ink-2)]">{it.sku}</td>
                <td className="px-3 py-2.5 text-right text-[12.5px] tabular-nums">{it.gst}%</td>
                <td className="px-3 py-2.5 text-right text-[12.5px] tabular-nums text-[var(--ink-2)]">{fmtINR(it.cost)}</td>
                <td className="px-3 py-2.5 text-right text-[12.5px] tabular-nums">{fmtINR(it.price)}</td>
                <td className="px-4 py-2.5 text-right text-[12.5px] tabular-nums text-[var(--ink-3)]">{it.reorder}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      {/* Detail */}
      <Card className="self-start overflow-hidden">
        <div className="px-5 py-4 border-b border-[var(--hairline)]">
          <div className="flex items-start justify-between">
            <div>
              <Pill kind="accent" className="mb-2">{selected.sku}</Pill>
              <h3 className="text-[16px] font-semibold text-[var(--ink)]">{selected.name}</h3>
              <div className="text-[11.5px] text-[var(--ink-3)] mt-0.5">Primary unit: {selected.unit}{selected.altUnit ? ` · 1 ${selected.altUnit.split(" ")[0]} = ${selected.altUnit.match(/\d+/)?.[0]} ${selected.unit}` : ""}</div>
            </div>
            <Button variant="outline" size="sm"><Icon name="pencil" size={12}/>Edit</Button>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-px bg-[var(--hairline)]">
          {[
            { label: "GST Rate", value: `${selected.gst}%` },
            { label: "Cost",     value: fmtINR(selected.cost) },
            { label: "Selling",  value: fmtINR(selected.price) },
            { label: "Margin",   value: `${(((selected.price - selected.cost)/selected.price)*100).toFixed(1)}%` },
            { label: "Reorder Lvl", value: `${selected.reorder} ${selected.unit}` },
            { label: "Reorder Qty", value: `${selected.reorder * 2} ${selected.unit}` },
          ].map((f) => (
            <div key={f.label} className="bg-[var(--surface)] px-4 py-3">
              <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{f.label}</div>
              <div className="text-[14px] font-semibold text-[var(--ink)] tabular-nums mt-0.5">{f.value}</div>
            </div>
          ))}
        </div>

        <div className="px-5 py-4 border-t border-[var(--hairline)]">
          <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium mb-3">Stock by Location</div>
          <div className="space-y-2">
            {STOCK_BEFORE.filter(r => r.itemId === selected.id).map(r => {
              const loc = locById(r.locId);
              return (
                <div key={r.locId} className="flex items-center gap-3">
                  <span className="type-kbd">{loc.code}</span>
                  <span className="text-[12.5px] text-[var(--ink-2)] flex-1">{loc.name}</span>
                  <span className="text-[13px] font-semibold tabular-nums">{r.qty}</span>
                  <span className="text-[11px] text-[var(--ink-3)]">{selected.unit}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="px-5 py-4 border-t border-[var(--hairline)] bg-[var(--canvas)]">
          <div className="flex items-center gap-2 text-[11.5px] text-[var(--ink-3)]">
            <Icon name="info" size={12}/>
            Imported from your accounting software · Last sync 07 May 2026, 09:32
          </div>
        </div>
      </Card>
      </div>
    </main>
  );
}

function StockLedgerPage({ includeNew = false, highlightNew = false, item }) {
  const ledger = includeNew ? [...LEDGER_BEFORE, LEDGER_NEW] : LEDGER_BEFORE;
  const it = item || itemById("itm-001");
  return (
    <main className="px-8 py-6 space-y-5">
      <BiPageHeader title="Stock Ledger" subtitle="Append-only · every movement is recorded"/>
      <Card className="p-5">
        <div className="flex items-center gap-4">
          <div className="w-10 h-10 rounded-md grid place-items-center" style={{ background: "var(--sunken)" }}>
            <Icon name="package" size={18} className="text-[var(--ink-2)]"/>
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-2">
              <h3 className="text-[16px] font-semibold text-[var(--ink)]">{it.name}</h3>
              <Pill kind="accent">{it.sku}</Pill>
            </div>
            <div className="text-[12px] text-[var(--ink-3)] mt-1">Stock ledger · MUM-1 · Mumbai Central Warehouse</div>
          </div>
          <div className="flex items-center gap-2">
            <button className="flex items-center gap-1.5 h-8 px-3 rounded-md border border-[var(--hairline)] text-[12px] text-[var(--ink-2)]">
              <Icon name="calendar" size={12}/>Last 30 days
            </button>
          </div>
        </div>

        <div className="mt-5 grid grid-cols-4 gap-px bg-[var(--hairline)] border border-[var(--hairline)] rounded-lg overflow-hidden">
          {[
            { label: "Opening", value: 0, color: "var(--ink-2)" },
            { label: "Received", value: includeNew ? 720 : 240, color: "var(--positive-text)" },
            { label: "Dispatched", value: 144, color: "var(--info-text)" },
            { label: "On Hand", value: includeNew ? 576 : 96, color: "var(--accent-1-text)" },
          ].map(s => (
            <div key={s.label} className="bg-[var(--surface)] px-4 py-3">
              <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.label}</div>
              <div className="text-[20px] font-semibold tabular-nums mt-0.5" style={{ color: s.color, fontFamily: "var(--font-display)" }}>
                <CountUp value={s.value}/>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <Card className="overflow-hidden" dataId="ledger-table">
        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--hairline)]">
          <div>
            <h3 className="text-[14.5px] font-semibold text-[var(--ink)]">Movements</h3>
            <div className="text-[12px] text-[var(--ink-3)] mt-0.5 flex items-center gap-1.5">
              <Icon name="lock" size={11}/>Append-only · {ledger.length} rows · running balance
            </div>
          </div>
          <Pill kind="positive"><Icon name="check" size={11}/>Reconciled</Pill>
        </div>

        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Ledger ID</th>
              <th className="type-table-head text-left px-3 py-2.5">Date</th>
              <th className="type-table-head text-left px-3 py-2.5">Voucher</th>
              <th className="type-table-head text-left px-3 py-2.5">Type</th>
              <th className="type-table-head text-left px-3 py-2.5">Counterparty</th>
              <th className="type-table-head text-right px-3 py-2.5">Δ Delta</th>
              <th className="type-table-head text-right px-5 py-2.5">Balance</th>
            </tr>
          </thead>
          <tbody>
            {ledger.map((row, i) => {
              const isNew = highlightNew && row.id === LEDGER_NEW.id;
              return (
                <tr key={row.id}
                  data-id={`ledger-row-${row.id}`}
                  className={cn(
                    "border-b border-[var(--hairline)] last:border-0 transition-all",
                    isNew && "bg-[var(--positive-tint)]"
                  )}
                  style={isNew ? { animation: "rowFlash 1.4s ease-out" } : {}}>
                  <td className="px-5 py-3 text-[12.5px] mono text-[var(--ink-3)]">{row.id}</td>
                  <td className="px-3 py-3 text-[13px] text-[var(--ink-2)] tabular-nums">{row.date}</td>
                  <td className="px-3 py-3 text-[13px] mono font-semibold text-[var(--ink)]">{row.voucher}</td>
                  <td className="px-3 py-3">
                    <Pill kind={row.type === "Receipt" ? "positive" : row.type === "Dispatch" ? "info" : "neutral"}>{row.type}</Pill>
                  </td>
                  <td className="px-3 py-3 text-[13px] text-[var(--ink-2)]">{row.party}</td>
                  <td className={cn("px-3 py-3 text-right text-[14px] font-semibold tabular-nums",
                    row.delta > 0 ? "text-[var(--positive-text)]" : "text-[var(--critical-text)]")}>
                    {row.delta > 0 ? "+" : ""}{row.delta}
                  </td>
                  <td className="px-5 py-3 text-right text-[14px] font-semibold tabular-nums text-[var(--ink)]">
                    {row.balance}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

function AuditLogPage({ highlightFirst = false }) {
  return (
    <main className="px-8 py-6 space-y-5">
      <BiPageHeader title="Audit Log" subtitle="Append-only · all mutations across the tenant"/>
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2 h-9 px-3 rounded-md border border-[var(--hairline)] bg-[var(--surface)] text-[12.5px] text-[var(--ink-3)] flex-1 max-w-[300px]">
          <Icon name="search" size={13} className="flex-shrink-0"/>
          <input className="flex-1 bg-transparent outline-none min-w-0" placeholder="Filter by actor, target, action…"/>
        </div>
        <button className="flex items-center gap-2 h-9 px-3 rounded-md border border-[var(--hairline)] bg-[var(--surface)] text-[12.5px] text-[var(--ink-2)] whitespace-nowrap flex-shrink-0">
          <Icon name="filter" size={13}/>All actions
        </button>
        <div className="flex-1"/>
        <Pill kind="neutral" className="whitespace-nowrap flex-shrink-0"><Icon name="lock" size={11}/>Append-only · never pruned</Pill>
      </div>

      <Card className="overflow-hidden" dataId="audit-table">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Timestamp</th>
              <th className="type-table-head text-left px-3 py-2.5">Actor</th>
              <th className="type-table-head text-left px-3 py-2.5">Action</th>
              <th className="type-table-head text-left px-3 py-2.5">Target</th>
              <th className="type-table-head text-left px-3 py-2.5">Origin</th>
              <th className="type-table-head text-left px-5 py-2.5">Details</th>
            </tr>
          </thead>
          <tbody>
            {AUDIT_LOG.map((a, i) => (
              <tr key={i} className={cn(
                "border-b border-[var(--hairline)] last:border-0 transition-all",
                highlightFirst && i === 0 && "bg-[var(--positive-tint)]"
              )}
              style={highlightFirst && i === 0 ? { animation: "rowFlash 1.4s ease-out" } : {}}>
                <td className="px-5 py-3 text-[12px] mono text-[var(--ink-3)] tabular-nums whitespace-nowrap">{a.ts}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    {a.actor !== "system" ? <Avatar initials={a.actor.split(" ").map(p=>p[0]).join("").slice(0,2)} size={22}/> : <div className="w-[22px] h-[22px] rounded-full bg-[var(--sunken)] grid place-items-center flex-shrink-0"><Icon name="cpu" size={11} className="text-[var(--ink-3)]"/></div>}
                    <span className="text-[13px] text-[var(--ink-2)] whitespace-nowrap">{a.actor}</span>
                  </div>
                </td>
                <td className="px-3 py-3 text-[12.5px] mono text-[var(--ink)]">{a.action}</td>
                <td className="px-3 py-3 text-[12.5px] mono font-semibold text-[var(--accent-1-text)]">{a.target}</td>
                <td className="px-3 py-3">
                  <Pill kind={a.origin === "telegram_webapp" ? "info" : "neutral"}>
                    {a.origin === "telegram_webapp" ? <><Icon name="smartphone" size={10}/>mobile</> : <><Icon name="monitor" size={10}/>web</>}
                  </Pill>
                </td>
                <td className="px-5 py-3 text-[12.5px] text-[var(--ink-3)]">{a.meta}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

Object.assign(window, { ItemsPage, StockLedgerPage, AuditLogPage });