// OPT-GATE-01 · Gate dashboard
const DashboardScreen = ({ t, go }) => {
  const { Btn, Pill, Kpi, Banner } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.dashboard; // default | quiet | noExpected | loading | offline

  const expected = state === "noExpected" ? [] : FD.EXPECTED;
  const onsite = state === "quiet" ? [] : FD.ONSITE;
  const loading = state === "loading";

  const ExpRow = (e) => {
    const [tone, label] = FD.STATUS_PILL[e.status];
    return (
      <button className="op-row" key={e.id} onClick={() => go("manualEntry")}>
        <span className={`op-row-thumb ${e.dir === "out" ? "soil" : e.product.includes("Fuerte") ? "pulp" : ""}`}>
          {e.dir === "out" ? <Ic.Truck size={19}/> : <Ic.Leaf size={19}/>}
        </span>
        <div className="op-row-body">
          <div className="op-row-title">{e.who}</div>
          <div className="op-row-sub">{e.product} · {FD.KG(e.qty)}</div>
        </div>
        <div className="op-row-meta">
          <div style={{ fontSize: 12.5, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{e.eta}</div>
          <div style={{ marginTop: 4 }}><Pill tone={tone}>{label}</Pill></div>
        </div>
      </button>
    );
  };

  const SiteRow = (s) => {
    const d = FD.dwell(s.elapsedMin);
    return (
      <button className={`op-row ${d.tone === "red" || d.tone === "amber" ? "amber" : ""}`} key={s.id} onClick={() => go("movementLog")}>
        <span className={`op-row-thumb ${s.dir === "out" ? "soil" : ""}`}><Ic.Truck size={19}/></span>
        <div className="op-row-body">
          <div className="op-row-title">{s.plate} · <span className="op-muted" style={{ fontWeight: 500 }}>{s.who}</span></div>
          <div className="op-row-sub"><span className="op-gpn">{s.gpn.replace("GPN-20260516-", "GPN-…")}</span> · {s.stage}</div>
        </div>
        <div className="op-row-meta">
          <span className={`op-dwell ${d.tone}`}><Ic.Clock size={13}/> {d.txt}</span>
          <div className="op-muted" style={{ fontSize: 11.5, marginTop: 3 }}>in {s.entered}</div>
        </div>
      </button>
    );
  };

  const longDwellCount = FD.ONSITE.filter(s => s.elapsedMin >= 240).length;

  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("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>

        {state === "longDwell" || longDwellCount > 0 ? (
          <div style={{ marginBottom: 16 }}>
            <Banner tone="warning" icon={Ic.Clock} title={`${longDwellCount} trucks on site over 4 hours`}
              desc="Review the highlighted rows — long dwell may indicate a bottleneck at QC, warehouse, or loading."/>
          </div>
        ) : null}

        {/* Working area */}
        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1.1fr 0.95fr", gap: 16, alignItems: "start" }}>
          {/* Expected today */}
          <div className="op-card flush">
            <div className="op-card-head"><div><div className="op-card-title">Expected today</div><div className="op-card-sub">{expected.length} scheduled · sorted by ETA</div></div></div>
            <div className="op-list" style={{ maxHeight: 340, 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: "60%" }}/><div className="op-skel" style={{ height: 11, width: "40%", marginTop: 8 }}/></div>)
                : expected.length ? expected.map(ExpRow)
                : <div className="op-empty" style={{ padding: "40px 24px" }}><div className="op-empty-art" style={{ width: 72, height: 72, borderRadius: 20 }}><Ic.Calendar size={30}/></div><div className="op-empty-title" style={{ fontSize: 17 }}>No scheduled arrivals</div><div className="op-empty-desc" style={{ fontSize: 13 }}>Use Manual entry for unexpected walk-ins.</div></div>}
            </div>
          </div>

          {/* Currently on site */}
          <div className="op-card flush">
            <div className="op-card-head">
              <div><div className="op-card-title">Currently on site</div><div className="op-card-sub">{onsite.length} trucks inside</div></div>
              <span className="op-sec-link" onClick={() => go("activeTrucks")}>View all</span>
            </div>
            <div className="op-list" style={{ maxHeight: 340, overflowY: "auto" }}>
              {loading
                ? Array.from({ length: 4 }).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>)
                : onsite.length ? onsite.map(SiteRow)
                : <div className="op-empty" style={{ padding: "40px 24px" }}><div className="op-empty-art" style={{ width: 72, height: 72, borderRadius: 20 }}><Ic.Truck size={30}/></div><div className="op-empty-title" style={{ fontSize: 17 }}>No trucks on site</div><div className="op-empty-desc" style={{ fontSize: 13 }}>Scan a gate pass to admit the first arrival.</div></div>}
            </div>
          </div>

          {/* Stats */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="op-grid-2" style={{ gap: 12 }}>
              <Kpi label="Arrivals" icon={Ic.ArrowDown} value={loading ? "—" : FD.STATS.arrivals}/>
              <Kpi label="Exits" icon={Ic.ArrowUp} value={loading ? "—" : FD.STATS.exits}/>
              <Kpi label="Avg dwell" icon={Ic.Clock} value={loading ? "—" : `${FD.STATS.dwellH}h`} unit={`${FD.STATS.dwellM}m`}/>
              <Kpi label="Mismatches" icon={Ic.Warning} value={loading ? "—" : FD.STATS.mismatches} warn onClick={() => go("exceptions")}/>
            </div>
            {/* Mini gate-events timeline */}
            <div className="op-card flush">
              <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 13.5 }}>Recent gate events</div></div>
              <div style={{ padding: "0 16px 14px" }}>
                {[
                  ["09:14", "Entry", "KDG 104T · Esther Njeri", ""],
                  ["09:02", "Exit", "KDA 332B · completed", "muted"],
                  ["08:55", "Override", "Late arrival · supervisor PIN", "warning"],
                  ["08:34", "Gross weight", "KCB 412G · 16,420 kg", ""],
                ].map(([time, type, sub, tone], i) => (
                  <div key={i} style={{ display: "flex", gap: 11, padding: "8px 0", alignItems: "flex-start" }}>
                    <span style={{ fontSize: 11.5, color: "var(--muted-foreground)", width: 38, flexShrink: 0, fontVariantNumeric: "tabular-nums", paddingTop: 1 }}>{time}</span>
                    <span className={`op-tl-dot ${tone}`} style={{ width: 24, height: 24 }}>
                      {type === "Exit" ? <Ic.ArrowUp size={13}/> : type === "Override" ? <Ic.Warning size={13}/> : type === "Gross weight" ? <Ic.Gauge size={13}/> : <Ic.Truck size={13}/>}
                    </span>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{type}</div>
                      <div className="op-muted" style={{ fontSize: 11.5 }}>{sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

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