// OPT-QC-15 · Empty state — no QC pending
const QcEmpty = ({ t, go }) => {
  const { Btn } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.empty; // quiet | fresh | long

  return (
    <div className="op-body">
      {/* Scan / Pick CTAs remain available for unscheduled starts */}
      <div className="op-pad" style={{ paddingBottom: 0 }}>
        <div style={{ display: "flex", gap: 12 }}>
          <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("history")}>View history</Btn>
        </div>
      </div>

      <div className="op-empty" style={{ flex: 1 }}>
        <div className="op-empty-art" style={{ width: 120, height: 120, borderRadius: 32, background: "var(--success-soft)", color: "var(--success)" }}>
          <Ic.ClipboardList size={52}/>
          <span style={{ position: "absolute", marginTop: 18, marginLeft: 22 }}><Ic.CheckCircle size={26}/></span>
        </div>
        <div className="op-empty-title" style={{ fontSize: 24 }}>All caught up</div>
        {state === "fresh" && <div className="op-empty-desc" style={{ fontSize: 15, marginTop: 10 }}>Good morning, {QD.INSPECTOR.name.split(" ")[0]}. Today's expected: <b>6 trucks</b>.</div>}
        <div className="op-empty-desc" style={{ fontSize: 15, marginTop: state === "fresh" ? 4 : 10 }}>No trucks waiting for QC right now.</div>
        <div className="op-empty-desc" style={{ fontSize: 14, marginTop: 2, opacity: 0.85 }}>We'll notify you when the next one is ready.</div>
        {state === "long" && (
          <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 14px", borderRadius: 9999, background: "var(--muted)", fontSize: 12.5, color: "var(--muted-foreground)" }}>
            <Ic.Clock size={14}/> No QC activity for over 4 hours
          </div>
        )}
        <div className="op-muted" style={{ marginTop: 22, fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}><Ic.Refresh size={13}/> Auto-refreshing every 30s</div>
      </div>
    </div>
  );
};

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