/* ============================================================
   Leader view (mobile, read-only) — /tevita
   A lean, at-a-glance timeline of the day's runs: who's in what
   van, what's allocated, plus session markers, shuttle pushes,
   and anything still waiting to be allocated. Search filters
   across the whole conference (van, name, flight, route, crew).
   ============================================================ */

const SARAH_PHONE = "02109109276";

function TevitaApp({ state }) {
  const days = Store.CONF_DAYS || [];
  const dates = Store.CONF_DATES || [];
  const today = todayStart();
  const labelMs = (d) => { const iso = dates[days.indexOf(d)]; return iso ? new Date(iso + "T00:00:00").getTime() : null; };
  const dayLabelOf = (t) => days.find((d) => labelMs(d) === startOfDay(t)) || null;
  const todayLabel = days.find((d) => labelMs(d) === today);
  const [day, setDay] = useState(todayLabel || days[0]);
  const [search, setSearch] = useState("");
  const q = search.trim().toLowerCase();
  const searching = q.length > 0;
  const iso = dates[days.indexOf(day)];
  const dayMs = labelMs(day);
  const shiftOf = (t) => (new Date(t).getHours() < 14 ? "AM" : "PM");
  const sched = Store.SCHEDULE || [];

  const nameOf = (id) => { const p = state.drivers.find((x) => x.id === id); return p ? p.name : null; };
  const vanName = (id) => (state.vehicles.find((v) => v.id === id) || {}).name || "Van";
  const guestOf = (r) => r.guestName || (state.guests.find((g) => g.id === r.guestId) || {}).name || (r.manual ? "Off-system job" : "Guest");
  const crewOf = (r) => {
    if (!r.vehicleId) return "no van yet";
    const dl = dayLabelOf(r.time), sh = shiftOf(r.time);
    const d = nameOf(Store.driverFor(r.vehicleId, dl, sh));
    const h = nameOf(Store.hostFor(r.vehicleId, dl, sh));
    return d ? (h ? d + " + " + h : d) : (h ? h + " (host)" : "no crew yet");
  };
  const haystack = (r) => [
    guestOf(r), r.vehicleId ? vanName(r.vehicleId) : "", crewOf(r),
    locName(Store, r.from), locCode(Store, r.from), locName(Store, r.to), locCode(Store, r.to),
    r.flight || "", dayLabelOf(r.time) || "",
  ].join(" ").toLowerCase();

  const RunLine = ({ r, showDay }) => (
    <div className={"tv-run s-" + r.status + (r.vehicleId ? "" : " pending")}>
      <span className="tv-time mono">{showDay && <span className="tv-dayp">{dayLabelOf(r.time)}</span>}{fmtTime(r.time)}</span>
      <div className="tv-body">
        <div className="tv-route">{locCode(Store, r.from)} <span className="ar">→</span> {locCode(Store, r.to)}{r.flight ? <span className="tv-flight">{r.flight}</span> : null}</div>
        <div className="tv-guest">{guestOf(r)} · {r.party} pax</div>
        <div className="tv-van"><Icon name="car2" style={{ width: 13, height: 13 }} /> {r.vehicleId ? vanName(r.vehicleId) + " · " + crewOf(r) : "To allocate"}</div>
      </div>
    </div>
  );

  // ---- search mode: flat, whole-conference ----
  let body;
  if (searching) {
    const hits = state.rides.filter((r) => haystack(r).includes(q)).sort((a, b) => a.time - b.time);
    body = (
      <>
        <div className="tv-summary">{hits.length} match{hits.length === 1 ? "" : "es"} for “{search.trim()}”</div>
        {hits.length === 0
          ? <div className="empty" style={{ padding: 26 }}>No runs match “{search.trim()}”.</div>
          : hits.map((r) => <RunLine key={r.id} r={r} showDay />)}
      </>
    );
  } else {
    // ---- day mode: timeline + to-allocate ----
    const dayRides = state.rides.filter((r) => dayMs != null && startOfDay(r.time) === dayMs);
    const allocated = dayRides.filter((r) => r.vehicleId).sort((a, b) => a.time - b.time);
    const unallocated = dayRides.filter((r) => !r.vehicleId && r.status !== "completed").sort((a, b) => a.time - b.time);
    const items = [];
    allocated.forEach((r) => items.push({ k: "run", t: r.time, r }));
    sched.filter((s) => s.date === iso).forEach((s) => {
      if (s.kind === "shuttle") items.push({ k: "shuttle", t: s.start, s });
      else if (s.session != null) items.push({ k: "session", t: s.start, s });
    });
    items.sort((a, b) => a.t - b.t);
    body = (
      <>
        <div className="tv-summary">{allocated.length} run{allocated.length === 1 ? "" : "s"} allocated{unallocated.length ? ` · ${unallocated.length} to allocate` : ""}</div>
        {items.length === 0
          ? <div className="empty" style={{ padding: 26 }}>Nothing scheduled for {day}.</div>
          : items.map((it, i) => {
            if (it.k === "run") return <RunLine key={i} r={it.r} />;
            if (it.k === "session") return (
              <div className="tv-marker session" key={i}><span className="tv-time mono">{fmtTime(it.t)}</span><div className="tv-body"><Icon name="star" style={{ width: 14, height: 14 }} /> {it.s.title}</div></div>
            );
            const toVenue = it.s.dir !== "to_hotels";
            return (
              <div className="tv-marker shuttle" key={i}><span className="tv-time mono">{it.s.after ? "after" : fmtTime(it.t)}</span><div className="tv-body"><Icon name="refresh" style={{ width: 13, height: 13 }} /> {toVenue ? "Shuttle → venue" : "Shuttle → hotels"} · Session {it.s.session}</div></div>
            );
          })}
        {unallocated.length > 0 && (
          <div className="tv-unalloc">
            <div className="tv-unalloc-h"><Icon name="clock" style={{ width: 14, height: 14 }} /> To allocate · {unallocated.length}</div>
            {unallocated.map((r) => <RunLine key={r.id} r={r} />)}
          </div>
        )}
      </>
    );
  }

  return (
    <>
      <div className="statusbar">
        <span>{new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</span>
        <div className="icons mono" style={{ fontSize: 11 }}><span>◗</span><span>5G</span><span>87%</span></div>
      </div>
      <div className="g-brand">
        <span className="g-brand-mark"><Icon name="globe" style={{ width: 18, height: 18 }} /></span>
        <div><div className="g-brand-name">Transport board</div><div className="g-brand-sub">SHOUT · leader view</div></div>
        <a className="call-hq" style={{ marginLeft: "auto" }} href={"tel:" + SARAH_PHONE} title="Call Sarah"><Icon name="phone" style={{ width: 15, height: 15 }} /> Sarah</a>
      </div>

      <div className="tv-searchbar">
        <Icon name="search" style={{ width: 15, height: 15, color: "var(--ink-faint)", flex: "none" }} />
        <input className="tv-search" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search van, name, flight…" />
        {searching && <button className="tv-search-x" onClick={() => setSearch("")} title="Clear">✕</button>}
      </div>

      {!searching && (
        <div className="crew-days" style={{ padding: "6px 12px 6px" }}>
          {days.map((d) => {
            const ms = labelMs(d);
            return <button key={d} className={"crew-day" + (day === d ? " on" : "") + (ms != null && ms < today ? " past" : "")} onClick={() => setDay(d)}>{d}{ms === today ? " · Today" : ""}</button>;
          })}
        </div>
      )}

      <div className="mobile-body">{body}</div>
    </>
  );
}

Object.assign(window, { TevitaApp });