// OPT-QC-01 · QC queue dashboard
const QueueDashboard = ({ t, go }) => {
  const { Btn, Pill, Kpi, Banner } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.queue; // default | longWait | empty | loading | offline
  const loading = state === "loading";

  const queue = state === "empty" ? [] : QD.QUEUE;
  const longWait = QD.QUEUE.filter(q => q.waitMin > 120);

  const QueueRow = (q) => {
    const w = QD.waitTone(q.waitMin);
    return (
      <button className={`op-row ${w.tone === "red" ? "amber" : ""}`} key={q.id} onClick={() => go("entry")}>
        <span className={`op-row-thumb ${q.variety === "Fuerte" ? "pulp" : q.variety === "Pinkerton" ? "soil" : ""}`}><Ic.Leaf size={19}/></span>
        <div className="op-row-body">
          <div className="op-row-title">{q.who} {q.tier !== "—" && <span style={{ fontWeight: 500, color: "var(--muted-foreground)", fontSize: 12 }}>· {q.tier === "new" ? "New" : "Tier " + q.tier}</span>}</div>
          <div className="op-row-sub"><span className="op-gpn">{q.gpn.replace("GPN-20260516-", "…")}</span> · {q.variety} · {QD.KG(q.net)}</div>
        </div>
        <div className="op-row-meta">
          <span className={`op-dwell ${w.tone}`}><Ic.Clock size={13}/> {w.txt}</span>
          <div className="op-muted" style={{ fontSize: 11.5, marginTop: 3 }}>in {q.enteredAt}</div>
        </div>
      </button>
    );
  };

  const InProgRow = (p) => (
    <button className="op-row" key={p.id} onClick={() => go(p.step === "Sampling" ? "sampling" : "dmParam")}>
      <span className="op-row-thumb" style={{ background: "var(--status-in-progress-soft, var(--info-soft))", color: "var(--info)" }}><Ic.ClipboardList size={18}/></span>
      <div className="op-row-body">
        <div className="op-row-title">{p.who}</div>
        <div className="op-row-sub"><span className="op-gpn">{p.gpn.replace("GPN-20260516-", "…")}</span> · {p.variety}</div>
      </div>
      <div className="op-row-meta">
        <Pill tone="in-progress" dot>{p.step}</Pill>
        <div className="op-muted" style={{ fontSize: 11.5, marginTop: 4 }}>from {p.startedAt}</div>
      </div>
    </button>
  );

  const decTone = { approved: "approved", breach: "approved", rejected: "rejected", hold: "pending" };
  const decLabel = { approved: "Approved", breach: "Approved · breach", rejected: "Rejected", hold: "Held" };

  return (
    <div className="op-body">
      <div className="op-pad">
        {/* Hero CTA strip */}
        <div style={{ display: "flex", gap: 12, marginBottom: 18 }}>
          <Btn variant="primary" size="hero" icon={Ic.QR} style={{ flex: 1 }} onClick={() => go("entry")}>Scan GPN to start QC</Btn>
          <Btn variant="outline" size="hero" icon={Ic.ClipboardList} style={{ flexBasis: 240 }} onClick={() => go("entry")}>Pick from queue</Btn>
        </div>

        {(state === "longWait" || longWait.length > 0) && !loading && state !== "empty" && (
          <div style={{ marginBottom: 16 }}>
            <Banner tone="warning" icon={Ic.Clock} title={`${longWait.length} truck${longWait.length > 1 ? "s" : ""} waiting more than 2 hours`}
              desc="Avocado quality degrades in the sun — prioritise the highlighted rows to protect dry matter and reduce rejects."/>
          </div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "1.35fr 0.95fr 0.8fr", gap: 16, alignItems: "start" }}>
          {/* Awaiting QC */}
          <div className="op-card flush">
            <div className="op-card-head"><div><div className="op-card-title">Awaiting QC</div><div className="op-card-sub">{queue.length} trucks · oldest first (FIFO)</div></div></div>
            <div className="op-list" style={{ maxHeight: 386, overflowY: "auto" }}>
              {loading
                ? Array.from({ length: 5 }).map((_, i) => <div key={i} style={{ padding: "14px 16px", borderBottom: "1px solid var(--border)" }}><div className="op-skel" style={{ height: 14, width: "58%" }}/><div className="op-skel" style={{ height: 11, width: "42%", marginTop: 8 }}/></div>)
                : queue.length ? queue.map(QueueRow)
                : <div className="op-empty" style={{ padding: "48px 24px" }}><div className="op-empty-art" style={{ width: 80, height: 80, borderRadius: 22 }}><Ic.CheckCircle size={34} style={{ color: "var(--success)" }}/></div><div className="op-empty-title" style={{ fontSize: 18 }}>All caught up</div><div className="op-empty-desc" style={{ fontSize: 13 }}>No trucks waiting for QC right now. We'll notify you when the next one is ready.</div></div>}
            </div>
          </div>

          {/* In progress */}
          <div className="op-card flush">
            <div className="op-card-head"><div><div className="op-card-title">In progress</div><div className="op-card-sub">{QD.INPROGRESS.length} events you've started</div></div></div>
            <div className="op-list" style={{ maxHeight: 386, overflowY: "auto" }}>
              {loading
                ? Array.from({ length: 2 }).map((_, i) => <div key={i} style={{ padding: "14px 16px", borderBottom: "1px solid var(--border)" }}><div className="op-skel" style={{ height: 14, width: "55%" }}/><div className="op-skel" style={{ height: 11, width: "45%", marginTop: 8 }}/></div>)
                : QD.INPROGRESS.length ? QD.INPROGRESS.map(InProgRow)
                : <div className="op-empty" style={{ padding: "40px 20px" }}><div className="op-empty-art" style={{ width: 64, height: 64, borderRadius: 18 }}><Ic.ClipboardList size={26}/></div><div className="op-empty-title" style={{ fontSize: 16 }}>Nothing in progress</div></div>}
            </div>
          </div>

          {/* Today KPIs */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="op-sec" style={{ margin: "0 2px 2px" }}><span className="op-sec-title">Today</span></div>
            <div className="op-grid-2" style={{ gap: 12 }}>
              <Kpi label="Inspections" icon={Ic.ClipboardList} value={loading ? "—" : QD.KPIS.done} onClick={() => go("history")}/>
              <Kpi label="Pass rate" icon={Ic.CheckCircle} value={loading ? "—" : QD.KPIS.passPct} unit="%"/>
              <Kpi label="Reject rate" icon={Ic.XCircle} value={loading ? "—" : QD.KPIS.rejectPct} unit="%" warn/>
              <Kpi label="Avg time" icon={Ic.Clock} value={loading ? "—" : QD.KPIS.avgMin} unit="min"/>
            </div>
          </div>
        </div>

        {/* Recent decisions feed */}
        {!loading && (
          <div className="op-card flush" style={{ marginTop: 16 }}>
            <div className="op-card-head" style={{ paddingBottom: 10 }}><div className="op-card-title" style={{ fontSize: 14 }}>Recent decisions</div><span className="op-sec-link" onClick={() => go("history")}>View history</span></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--border)" }}>
              {QD.RECENT.slice(0, 6).map((r, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 16px", borderBottom: "1px solid var(--border)", borderRight: (i % 3 !== 2) ? "1px solid var(--border)" : "none" }}>
                  <span className="op-tl-dot" style={{ width: 28, height: 28, background: r.decision === "rejected" ? "var(--status-rejected-soft)" : r.decision === "hold" ? "var(--status-pending-soft)" : "var(--avocado-soft)", color: r.decision === "rejected" ? "var(--status-rejected-fg)" : r.decision === "hold" ? "var(--status-pending-fg)" : "var(--avocado-fg)" }}>
                    {r.decision === "rejected" ? <Ic.X size={14}/> : r.decision === "hold" ? <Ic.Clock size={14}/> : <Ic.Check size={14}/>}
                  </span>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.who}</div>
                    <div className="op-muted" style={{ fontSize: 11 }}>{r.variety} · DM {r.dm}% · {r.time}</div>
                  </div>
                  <Pill tone={decTone[r.decision]}>{decLabel[r.decision]}</Pill>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  queue: { chrome: "tabs", tab: "Queue", render: (ctx) => <QueueDashboard {...ctx}/> },
});