// OPT-GATE-17 · Empty state — no arrivals
const EmptyStateScreen = ({ t, go }) => {
  const { Btn } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.emptyState; // quiet | firstRun
  const firstRun = state === "firstRun";

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad">
        {/* Header CTAs stay so the gatekeeper can act on walk-ins */}
        <div style={{ display: "flex", gap: 12 }}>
          <Btn variant="primary" size="hero" icon={Ic.QR} style={{ flex: 1 }} onClick={() => go("scan")}>Scan gate pass</Btn>
          <Btn variant="outline" size="hero" icon={Ic.Edit} style={{ flexBasis: 240 }} onClick={() => go("manualEntry")}>Manual entry</Btn>
          <button className="op-chip" style={{ height: 72, padding: "0 18px", borderRadius: "var(--radius-xl)" }}>
            <Ic.Calendar size={18}/>
            <div style={{ textAlign: "left", lineHeight: 1.2 }}>
              <div style={{ fontSize: 11, color: "var(--muted-foreground)", fontWeight: 600 }}>VIEWING</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Today · {FD.TODAY}</div>
            </div>
            <Ic.ChevronDown size={16} style={{ color: "var(--muted-foreground)" }}/>
          </button>
        </div>
      </div>

      <div className="op-empty" style={{ justifyContent: "center" }}>
        <div className="op-empty-art" style={{ width: 120, height: 120, background: "var(--avocado-soft)", color: "var(--avocado-fg)" }}>
          <Ic.Logistics size={56}/>
        </div>
        <div className="op-empty-title" style={{ fontSize: 24 }}>{firstRun ? "Welcome to gate operations" : "No arrivals expected today"}</div>
        <div className="op-empty-desc" style={{ fontSize: 15, maxWidth: 460 }}>
          {firstRun
            ? "Your dashboard will populate as deliveries are scheduled. Use Scan or Manual entry to admit any truck that arrives."
            : "Nothing scheduled for today. Use Manual entry for unexpected arrivals — the list refreshes automatically as slots are booked."}
        </div>
        <div className="op-muted" style={{ fontSize: 12.5, marginTop: 18, display: "inline-flex", alignItems: "center", gap: 7 }}>
          <Ic.Refresh size={14}/> Refreshing every 60s for new arrivals
        </div>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  emptyState: { chrome: "tabs", tab: "Gate", render: (ctx) => <EmptyStateScreen {...ctx}/> },
});