// PickList — fulfillment operator's daily pick queue.

const PICKS = [
  { id: "ON-2026-44219", priority: "high", sku: "KHT-J-5KG", brand: "Khao Hom Thai", qty: 2, dest: "Beijing · 朝阳区 ●●●● 4521", sla: "2h 14m", slaPct: 35, status: "ready" },
  { id: "ON-2026-44218", priority: "high", sku: "KHT-J-5KG", brand: "Khao Hom Thai", qty: 1, dest: "Shanghai · 浦东 ●●●● 8902", sla: "2h 18m", slaPct: 38, status: "ready" },
  { id: "ON-2026-44215", priority: "high", sku: "SIA-LIP-01",brand: "Siam Cosmetic", qty: 3, dest: "Guangzhou · 天河 ●●●● 1147", sla: "2h 22m", slaPct: 42, status: "picking" },
  { id: "ON-2026-44188", priority: "med",  sku: "KHT-B-2KG", brand: "Khao Hom Thai", qty: 1, dest: "Chengdu · 锦江 ●●●● 3398",  sla: "4h 02m", slaPct: 68, status: "ready" },
  { id: "ON-2026-44156", priority: "med",  sku: "BKB-CRM-01",brand: "Bangkok Beauty",qty: 2, dest: "Shenzhen · 南山 ●●●● 6602", sla: "5h 14m", slaPct: 78, status: "ready" },
  { id: "ON-2026-44102", priority: "std",  sku: "RMC-COF-1KG",brand:"Riang Mai Coffee",qty:1, dest: "Hangzhou · 西湖 ●●●● 0019", sla: "8h 38m", slaPct: 92, status: "ready" },
  { id: "ON-2026-44088", priority: "std",  sku: "LAN-TEA-200G",brand:"Lanna Tea",     qty: 4, dest: "Tianjin · 和平 ●●●● 7711",  sla: "9h 02m", slaPct: 95, status: "ready" },
];

function PickList() {
  const [priority, setPriority] = React.useState(null);
  const [selected, setSelected] = React.useState(new Set());
  const rows = PICKS.filter(p => !priority || p.priority === priority);
  const toggle = (id) => setSelected(s => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });

  return (
    <div>
      <div className="page-head">
        <h1>Pick list</h1>
        <span className="count">{rows.length} of {PICKS.length} · Mar 18, 2026 · Yiwu DC</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-printer"></i>Print labels</button>
          <button className="btn secondary"><i className="ti ti-download"></i>Export CSV</button>
          <button className="btn primary"><i className="ti ti-clipboard-check"></i>Start pick session</button>
        </div>
      </div>

      <div className="reveal-gate" style={{
        background: "var(--color-background-info)",
        border: "0.5px solid var(--color-border-info)",
        color: "var(--color-text-on-info)",
        padding: "10px 14px",
        borderRadius: 8, marginBottom: 12,
        display: "flex", alignItems: "center", gap: 10, fontSize: 13
      }}>
        <i className="ti ti-shield-lock" style={{fontSize:18}}></i>
        <div>
          <strong style={{fontWeight:500}}>Shipping addresses masked.</strong>
          <span style={{marginLeft:6}}>Full address decrypts at scan time and writes an `ADDRESS_DECRYPT` audit entry per row.</span>
        </div>
      </div>

      <div className="filter-bar">
        <span className="label-caps">Priority</span>
        <span className={"chip" + (priority===null ? " active":"")} onClick={() => setPriority(null)}>All</span>
        <span className={"chip" + (priority==="high" ? " active":"")} onClick={() => setPriority("high")}>High</span>
        <span className={"chip" + (priority==="med"  ? " active":"")} onClick={() => setPriority("med")}>Medium</span>
        <span className={"chip" + (priority==="std"  ? " active":"")} onClick={() => setPriority("std")}>Standard</span>
      </div>

      {selected.size > 0 && (
        <div className="bulk">
          <strong>{selected.size} selected</strong>
          <span className="spacer"></span>
          <button className="btn secondary sm"><i className="ti ti-printer"></i>Print labels</button>
          <button className="btn primary sm"><i className="ti ti-clipboard-check"></i>Pick now</button>
          <button className="btn tertiary sm" onClick={() => setSelected(new Set())}>Clear</button>
        </div>
      )}

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th style={{width:30}}>
                <input type="checkbox" checked={rows.length > 0 && rows.every(r => selected.has(r.id))} onChange={() => setSelected(selected.size === rows.length ? new Set() : new Set(rows.map(r => r.id)))} />
              </th>
              <th style={{width:90}}>Priority</th>
              <th style={{width:160}}>Order</th>
              <th>SKU · brand</th>
              <th style={{width:60, textAlign:"right"}}>Qty</th>
              <th>Destination (masked)</th>
              <th style={{width:140}}>SLA</th>
              <th style={{width:90}}>Status</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(p => {
              const slaTone = p.slaPct < 40 ? "danger" : p.slaPct < 70 ? "warning" : "success";
              const slaColor = slaTone === "danger" ? "var(--color-text-on-danger)" : slaTone === "warning" ? "var(--color-text-on-warning)" : "var(--color-text-on-success)";
              return (
                <tr key={p.id} className={"pick-row" + (selected.has(p.id) ? " checked" : "")}>
                  <td onClick={() => toggle(p.id)}>
                    <input type="checkbox" checked={selected.has(p.id)} onChange={() => toggle(p.id)} />
                  </td>
                  <td>
                    <span className={"priority " + p.priority}>
                      <i className={"ti " + (p.priority === "high" ? "ti-flame" : p.priority === "med" ? "ti-arrow-up" : "ti-minus")}></i>
                      {p.priority === "high" ? "High" : p.priority === "med" ? "Medium" : "Standard"}
                    </span>
                  </td>
                  <td className="data-mono">{p.id}</td>
                  <td><div className="org-name">{p.sku}</div><div className="org-id" style={{fontFamily:"var(--font-sans)"}}>{p.brand}</div></td>
                  <td className="num">{p.qty}</td>
                  <td className="data-mono" style={{color:"var(--on-surface-variant)"}}>{p.dest}</td>
                  <td>
                    <span className="sla-bar"><span className="fill" style={{width: p.slaPct + "%", background: slaColor}}></span></span>
                    <span className="data-mono" style={{fontSize: 11, marginLeft: 6, color: slaColor}}>{p.sla}</span>
                  </td>
                  <td>
                    {p.status === "ready"   && <span className="pill info">Ready</span>}
                    {p.status === "picking" && <span className="pill warning">Picking</span>}
                  </td>
                  <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.PickList = PickList;