/* ============================================================
   HQ — Shuttle routes
   Continuous loop mode for peak pushes (e.g. the 9am session).
   One origin ↔ Venue per shuttle; several vans can run it.
   ============================================================ */

function shuttleVans(state, shuttleId) {
  return state.drivers.filter((d) => d.shuttleId === shuttleId);
}

function ShuttleCard({ state, shuttle, onAddVan }) {
  const vans = shuttleVans(state, shuttle.id);
  const laps = vans.reduce((s, d) => s + (d.shuttleLaps || 0), 0);
  const lastFlip = vans.reduce((m, d) => Math.max(m, d.shuttleLastFlip || 0), 0);
  return (
    <div className="sh-card">
      <div className="sh-card-h">
        <div className="sh-route">
          <span className="sh-loc">{locName(Store, shuttle.origin)}</span>
          <span className="sh-loop"><Icon name="refresh" /></span>
          <span className="sh-loc">{locName(Store, "venue")}</span>
        </div>
        <button className="sh-end" onClick={() => { if (confirm("End this shuttle? Vans return to the available pool.")) Store.endShuttle(shuttle.id); }}>End</button>
      </div>

      <div className="sh-stats">
        <div className="sh-stat"><span className="sh-n">{vans.length}</span><span className="sh-l">vans</span></div>
        <div className="sh-stat"><span className="sh-n">{laps}</span><span className="sh-l">runs to venue</span></div>
        <div className="sh-stat"><span className="sh-n">{lastFlip ? relTime(lastFlip).replace(" ago", "") : "—"}</span><span className="sh-l">last turn</span></div>
      </div>

      <div className="sh-vans">
        {vans.map((d) => {
          const v = state.vehicles.find((x) => x.id === d.vehicleId);
          const heading = d.shuttleDir === "to_venue" ? "→ Venue" : "→ " + locName(Store, shuttle.origin);
          return (
            <div className="sh-van" key={d.id} title={d.name + " · " + heading}>
              <VehicleBadge vehicle={v} tone="violet" size={30} />
              <div className="sh-van-meta">
                <span className="sh-van-name">{v ? v.name : d.name}</span>
                <span className={"sh-van-dir " + (d.shuttleDir === "to_venue" ? "to-venue" : "to-origin")}>{heading} · {d.shuttleLaps || 0} runs</span>
              </div>
              <button className="sh-van-x" title="Remove from shuttle" onClick={() => Store.removeVanFromShuttle(d.id)}>✕</button>
            </div>
          );
        })}
        {vans.length === 0 && <div className="sh-empty">No vans yet — add one.</div>}
      </div>

      <button className="sh-addvan" onClick={() => onAddVan(shuttle)}><Icon name="plus" style={{ width: 15, height: 15 }} /> Add van</button>
    </div>
  );
}

/* pick an available van for a shuttle */
function ShuttleVanPicker({ state, shuttle, onClose }) {
  const pool = state.drivers
    .map((d) => ({ d, v: state.vehicles.find((v) => v.id === d.vehicleId) }))
    .filter((x) => x.v && !x.d.shuttleId)
    .sort((a, b) => (a.d.status === "offline" ? 1 : 0) - (b.d.status === "offline" ? 1 : 0));
  const add = (driverId) => { Store.addVanToShuttle(driverId, shuttle.id); onClose(); };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>Add van to {locName(Store, shuttle.origin)} shuttle</h3><div className="x" onClick={onClose}>✕</div></div>
        <div className="modal-b">
          <label className="lbl">Tap a van to put it on the loop</label>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 4 }}>
            {pool.map(({ d, v }) => {
              const st = Store.STATUSES[d.status];
              return (
                <button key={d.id} className="assign-opt" onClick={() => add(d.id)}>
                  <VehicleBadge vehicle={v} tone={st.tone} />
                  <div style={{ textAlign: "left", minWidth: 0 }}>
                    <div style={{ fontWeight: 600 }}>{v.name} <span className="faint" style={{ fontWeight: 500 }}>· {d.name}</span></div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-dim)" }}>{v.cap} seats · {v.plate}</div>
                  </div>
                  <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
                    <Pill tone={st.tone}>{st.label}</Pill>
                    <span className="assign-go"><Icon name="arrow" style={{ width: 16, height: 16 }} /></span>
                  </div>
                </button>
              );
            })}
            {pool.length === 0 && <div className="empty">Every van is already on a shuttle.</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* start a new custom shuttle */
function ShuttleStartModal({ state, onClose }) {
  const hotels = state.locations.filter((l) => l.kind === "hotel" || l.kind === "other");
  const active = new Set(state.shuttles.map((s) => s.origin));
  const start = (origin) => { const id = Store.startShuttle(origin); onClose(id); };
  return (
    <div className="modal-scrim" onClick={() => onClose()}>
      <div className="modal" style={{ width: "min(460px,92%)" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>Start a shuttle</h3><div className="x" onClick={() => onClose()}>✕</div></div>
        <div className="modal-b">
          <label className="lbl">Loop between the venue and…</label>
          <div className="loc-tiles" style={{ marginTop: 6 }}>
            {hotels.map((l) => (
              <button key={l.id} className="loc-tile" disabled={active.has(l.id)} style={{ opacity: active.has(l.id) ? 0.4 : 1 }}
                onClick={() => start(l.id)}>
                <Icon name="home" /><span>{l.name}{active.has(l.id) ? " · running" : ""}</span>
              </button>
            ))}
          </div>
          <div className="faint" style={{ fontSize: 12, marginTop: 12 }}>You’ll add vans next. Each van just flips “heading to venue / heading back” — no per-guest assignment.</div>
        </div>
      </div>
    </div>
  );
}

function ShuttleStrip({ state }) {
  const [picker, setPicker] = useState(null);   // shuttle obj for van picker
  const [starting, setStarting] = useState(false);
  const shuttles = state.shuttles || [];
  const onShift = state.drivers.filter((d) => d.vehicleId && d.status !== "offline" && !d.shuttleId).length;

  if (shuttles.length === 0) {
    return (
      <div className="sh-launch">
        <div className="sh-launch-l">
          <span className="sh-launch-ic"><Icon name="refresh" /></span>
          <div>
            <div className="sh-launch-title">Shuttle routes</div>
            <div className="sh-launch-sub">Run vans in a continuous loop during a push — guests just head to their lobby.</div>
          </div>
        </div>
        <div className="sh-launch-actions">
          <button className="btn btn-ghost btn-sm" onClick={() => Store.startShuttlePreset("evening")}>Evening Return</button>
          <button className="btn btn-primary btn-sm" onClick={() => Store.startShuttlePreset("morning")}><Icon name="refresh" style={{ width: 15, height: 15 }} /> Morning Venue Push</button>
          <button className="btn btn-ghost btn-sm" onClick={() => setStarting(true)}><Icon name="plus" style={{ width: 15, height: 15 }} /> Custom</button>
        </div>
        {starting && <ShuttleStartModal state={state} onClose={(id) => { setStarting(false); if (id) setPicker(state.shuttles.find((s) => s.id === id) || { id }); }} />}
        {picker && <ShuttleVanPicker state={state} shuttle={picker} onClose={() => setPicker(null)} />}
      </div>
    );
  }

  return (
    <div className="sh-strip">
      <div className="sh-strip-head">
        <span className="sh-strip-title"><Icon name="refresh" style={{ width: 16, height: 16 }} /> Shuttles running <span className="count">{shuttles.length}</span></span>
        <div className="spacer" />
        <button className="btn btn-ghost btn-sm" onClick={() => setStarting(true)}><Icon name="plus" style={{ width: 14, height: 14 }} /> Start shuttle</button>
        <button className="btn btn-ghost btn-sm" style={{ color: "var(--rose)" }} onClick={() => { if (confirm("End all shuttles? All vans return to the pool.")) shuttles.slice().forEach((s) => Store.endShuttle(s.id)); }}>End all</button>
      </div>
      <div className="sh-cards">
        {shuttles.map((s) => <ShuttleCard key={s.id} state={state} shuttle={s} onAddVan={setPicker} />)}
      </div>
      {onShift > 0 && <div className="sh-hint">{onShift} on-shift van{onShift === 1 ? "" : "s"} not on a shuttle.</div>}
      {starting && <ShuttleStartModal state={state} onClose={(id) => { setStarting(false); if (id) setPicker(state.shuttles.find((x) => x.id === id) || { id }); }} />}
      {picker && <ShuttleVanPicker state={state} shuttle={picker} onClose={() => setPicker(null)} />}
    </div>
  );
}

Object.assign(window, { ShuttleStrip });