/* ============================================================
   HQ secondary views + HQ shell
   ============================================================ */

function ScheduleView({ state }) {
  const [mode, setMode] = useState("trips");
  return (
    <>
      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
        <div className="seg-mini" style={{ width: 380 }}>
          <button className={mode === "trips" ? "active" : ""} onClick={() => setMode("trips")}>Trips</button>
          <button className={mode === "airport" ? "active" : ""} onClick={() => setMode("airport")}>Airport</button>
          <button className={mode === "roster" ? "active" : ""} onClick={() => setMode("roster")}>Driver roster</button>
        </div>
      </div>
      {mode === "trips" ? <TripsTimeline state={state} /> : mode === "airport" ? <AirportBoard state={state} /> : <RosterView state={state} />}
    </>
  );
}

function TripsTimeline({ state }) {
  const rides = [...state.rides].sort((a, b) => a.time - b.time);
  // group by hour label
  const groups = {};
  rides.forEach((r) => {
    const d = new Date(r.time);
    const key = d.toLocaleTimeString([], { hour: "numeric" });
    (groups[key] = groups[key] || []).push(r);
  });
  return (
    <div className="panel">
      <div className="panel-h"><h3>Today’s schedule</h3><span className="count">{rides.length} runs</span></div>
      <div className="timeline">
        {Object.entries(groups).map(([hr, items]) => (
          <div className="tl-hour" key={hr}>
            <div className="tl-time">{hr}</div>
            <div className="tl-items">
              {items.map((r) => {
                const g = state.guests.find((x) => x.id === r.guestId);
                const d = state.drivers.find((x) => x.id === r.driverId);
                return (
                  <div className={"tl-item s-" + r.status} key={r.id}>
                    <span className="mono faint" style={{ fontSize: 11, width: 48 }}>{fmtTime(r.time)}</span>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div className="tl-route">{locName(Store, r.from)} → {locName(Store, r.to)}{r.flight && <span className="tl-flight"><Icon name="plane" style={{ width: 11, height: 11 }} />{r.flight}</span>}</div>
                      <div className="tl-g">{g ? g.name : (r.guestName || "Guest")} · party {r.party}{d ? " · " + d.name : ""}</div>
                    </div>
                    <Pill tone={RIDE_STATUS[r.status].tone}>{RIDE_STATUS[r.status].label}</Pill>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const BLOCK_ABBR = { "Early": "Early", "AM": "AM", "PM": "PM", "Evening": "Eve" };

function RosterView({ state }) {
  const days = Store.CONF_DAYS;
  const blocks = Store.TIME_BLOCKS;
  const [focus, setFocus] = useState(days[0]);
  const blocksOf = (d, day) => (d.availability && d.availability.byDay && d.availability.byDay[day]) || [];
  const dayCount = (day) => state.drivers.filter((d) => blocksOf(d, day).length > 0).length;
  const focusAvail = state.drivers.filter((d) => blocksOf(d, focus).length > 0);

  return (
    <div className="stack">
      <div className="panel">
        <div className="panel-h">
          <h3>Driver roster</h3>
          <span className="count">{state.drivers.length} drivers</span>
          <div className="spacer" />
          <span className="faint" style={{ fontSize: 11.5 }}>Tap time blocks to set each driver’s availability</span>
        </div>

        <div className="roster">
          <div className="roster-grid roster-head">
            <div className="rg-corner">Driver</div>
            {days.map((day) => (
              <button key={day} className={"rg-dayhead" + (focus === day ? " focus" : "")} onClick={() => setFocus(day)}>
                <span className="rg-dayname">{day}</span>
                <span className="rg-daycount">{dayCount(day)} avail</span>
              </button>
            ))}
          </div>

          {state.drivers.map((d) => {
            const v = state.vehicles.find((x) => x.id === d.vehicleId);
            return (
              <div className="roster-grid roster-row" key={d.id}>
                <div className="rg-driver">
                  <Avatar initials={d.initials} tone={Store.STATUSES[d.status].tone} size={30} />
                  <div style={{ minWidth: 0 }}>
                    <div className="rg-name">{d.name}</div>
                    <div className="rg-veh mono">{v ? v.name : "No vehicle"}</div>
                  </div>
                </div>
                {days.map((day) => {
                  const sel = blocksOf(d, day);
                  return (
                    <div key={day} className={"rg-cell" + (sel.length ? " on" : "") + (focus === day ? " focus" : "")}>
                      <div className="rg-toggles">
                        {blocks.map((b) => (
                          <button key={b} className={"rg-tg" + (sel.includes(b) ? " on" : "")}
                            onClick={() => Store.toggleDriverBlock(d.id, day, b)}
                            title={d.name + " · " + day + " · " + b}>{BLOCK_ABBR[b] || b}</button>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>

      {/* who can drive on the focused day */}
      <div className="panel">
        <div className="panel-h">
          <h3>Available on {focus}</h3>
          <span className="count">{focusAvail.length}</span>
          <div className="spacer" />
          <span className="faint" style={{ fontSize: 11.5 }}>Ready to assign to a vehicle</span>
        </div>
        <div className="roster-avail">
          {focusAvail.length === 0 && <div className="empty">No drivers marked available on {focus}.</div>}
          {focusAvail.map((d) => {
            const v = state.vehicles.find((x) => x.id === d.vehicleId);
            const sel = blocksOf(d, focus);
            return (
              <div className="avail-card" key={d.id}>
                <Avatar initials={d.initials} tone={Store.STATUSES[d.status].tone} size={34} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{d.name}</div>
                  <div className="faint mono" style={{ fontSize: 11 }}>{v ? v.name + " · " + v.plate : "Unassigned"}</div>
                </div>
                <div className="chip-row" style={{ justifyContent: "flex-end" }}>
                  {sel.map((b) => <span key={b} className="pick-chip on sm">{BLOCK_ABBR[b] || b}</span>)}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function FleetView({ state }) {
  return (
    <div className="panel">
      <div className="panel-h"><h3>Fleet & drivers</h3><span className="count">{state.vehicles.length} vehicles</span></div>
      <div style={{ padding: 16 }}>
        <div className="fleet-grid">
          {state.vehicles.map((v) => {
            const d = state.drivers.find((x) => x.vehicleId === v.id);
            const st = d ? Store.STATUSES[d.status] : null;
            const ride = state.rides.find((r) => r.driverId === (d && d.id) && r.status !== "completed");
            return (
              <div className="vcard" key={v.id}>
                <div className="vcard-h">
                  <span className="ride-ic"><Icon name="car2" /></span>
                  <div>
                    <div className="vname">{v.name}</div>
                    <div className="vplate">{v.plate} · {v.type.toUpperCase()}</div>
                  </div>
                  <div className="vmeta">
                    <div className="mono" style={{ fontSize: 12 }}>{v.cap} seats</div>
                    <div className="cap-bar" style={{ width: 70 }}><i style={{ width: Math.min(100, (v.cap / 14) * 100) + "%" }} /></div>
                  </div>
                </div>
                <div className="vrow">
                  <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                    {d ? <Avatar initials={d.initials} tone={st.tone} size={28} /> : null}
                    <span>{d ? d.name : "Unassigned"}</span>
                  </div>
                  {st && <Pill tone={st.tone}>{st.label}</Pill>}
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-dim)", marginTop: 10, display: "flex", alignItems: "center", gap: 6 }}>
                  <Icon name="pin" style={{ width: 13, height: 13, color: "var(--ink-faint)" }} />
                  {d ? locName(Store, d.at) : "—"}
                  {ride && <span className="faint"> · on {locName(Store, ride.from)}→{locName(Store, ride.to)}</span>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function GuestsView({ state }) {
  return (
    <div className="panel">
      <div className="panel-h"><h3>Guests</h3><span className="count">{state.guests.length}</span><div className="spacer" /><span className="faint" style={{ fontSize: 11.5 }}>Hundreds expected across the conference</span></div>
      <div style={{ padding: 8 }}>
        {state.guests.map((g) => {
          const rides = state.rides.filter((r) => r.guestId === g.id);
          return (
            <div key={g.id} style={{ display: "flex", alignItems: "center", gap: 13, padding: "12px 12px", borderBottom: "1px solid var(--line)" }}>
              <Avatar initials={g.name.split(" ").map((w) => w[0]).slice(-2).join("")} tone="blue" size={38} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{g.name}</div>
                <div style={{ fontSize: 12, color: "var(--ink-dim)" }}>{g.org}</div>
              </div>
              <div style={{ textAlign: "right", fontSize: 12 }}>
                <div className="dim" style={{ display: "flex", alignItems: "center", gap: 5, justifyContent: "flex-end" }}>
                  <Icon name="home" style={{ width: 13, height: 13 }} /> {locName(Store, g.hotel)}
                </div>
                <div className="faint mono" style={{ fontSize: 11, marginTop: 3 }}>{rides.length} run{rides.length === 1 ? "" : "s"} · party {g.party}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---- Messages (threads) ---- */
function MessagesView({ state }) {
  const keys = Object.keys(state.threads);
  const [active, setActive] = useState(keys[0]);
  const [txt, setTxt] = useState("");
  const feedRef = useRef(null);
  const thread = state.threads[active];
  useEffect(() => { if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight; }, [active, thread && thread.msgs.length]);

  const nameFor = (th) => {
    if (th.role === "guest") { const g = state.guests.find((x) => x.id === th.with); return g ? g.name : "Guest"; }
    const d = state.drivers.find((x) => x.id === th.with); return d ? d.name : "Driver";
  };
  const send = () => {
    if (!txt.trim()) return;
    Store.sendMessage(active, thread.with, thread.role, "hq", txt.trim());
    setTxt("");
  };
  return (
    <div style={{ height: "calc(100vh - 56px - 110px)" }}>
      <div className="msg-layout">
        <div className="thread-list">
          {keys.map((k) => {
            const th = state.threads[k];
            const last = th.msgs[th.msgs.length - 1];
            const isG = th.role === "guest";
            return (
              <div key={k} className={"thread-item" + (k === active ? " active" : "")} onClick={() => setActive(k)}>
                <Avatar initials={nameFor(th).split(" ").map((w) => w[0]).slice(-2).join("")} tone={isG ? "blue" : "sky"} size={36} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="tname">{nameFor(th)}
                    <span className="thread-tag" style={{ background: "var(--panel-2)", color: isG ? "var(--blue)" : "var(--sky)" }}>{isG ? "GUEST" : "DRIVER"}</span>
                  </div>
                  <div className="tprev">{last ? last.text : ""}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="thread-pane">
          {thread && (
            <>
              <div className="thread-head">
                <Avatar initials={nameFor(thread).split(" ").map((w) => w[0]).slice(-2).join("")} tone={thread.role === "guest" ? "blue" : "sky"} size={34} />
                <div>
                  <div style={{ fontWeight: 600 }}>{nameFor(thread)}</div>
                  <div className="faint" style={{ fontSize: 11.5 }}>{thread.role === "guest" ? "Guest" : "Driver"}</div>
                </div>
                <button className="btn btn-ghost btn-sm" style={{ marginLeft: "auto" }}><Icon name="phone" style={{ width: 14, height: 14 }} /> Call</button>
              </div>
              <div className="chat-feed" ref={feedRef}>
                {thread.msgs.map((m, i) => (
                  <div key={i} className={"bubble " + (m.from === "hq" ? "me" : "them")}>
                    {m.text}<div className="meta">{fmtTime(m.t)}</div>
                  </div>
                ))}
              </div>
              <div className="chat-input">
                <input className="field" placeholder="Message…" value={txt} onChange={(e) => setTxt(e.target.value)} onKeyDown={(e) => e.key === "Enter" && send()} />
                <button className="send" onClick={send}><Icon name="send" style={{ width: 18, height: 18 }} /></button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---- HQ shell ---- */
function HQApp({ state, onOpenSignup }) {
  const [view, setView] = useState("dispatch");
  const nav = [
    { id: "dispatch", icon: "dispatch", label: "Dispatch" },
    { id: "schedule", icon: "schedule", label: "Schedule" },
    { id: "fleet", icon: "fleet", label: "Fleet" },
    { id: "messages", icon: "messages", label: "Messages" },
    { id: "guests", icon: "guests", label: "Guests" },
    { id: "setup", icon: "settings", label: "Setup" },
  ];
  const reqCount = state.rides.filter((r) => r.status === "requested").length;
  const titles = {
    dispatch: ["Dispatch", "Live fleet status, ride queue & assignments"],
    schedule: ["Schedule", "All pickups and drop-offs across the week"],
    fleet: ["Fleet & drivers", `${state.vehicles.length} vehicle${state.vehicles.length === 1 ? "" : "s"} · ${state.drivers.length} driver${state.drivers.length === 1 ? "" : "s"}`],
    messages: ["Messages", "Guest & driver conversations"],
    guests: ["Guests", "Visiting speakers & pastors"],
    setup: ["Setup", "Manage drivers, vehicles & locations"],
  };
  const stats = {
    active: state.drivers.filter((d) => d.status !== "offline").length,
    avail: state.drivers.filter((d) => d.status === "available").length,
    req: reqCount,
  };

  return (
    <div className="hq">
      <div className="hq-rail">
        {nav.map((n) => (
          <button key={n.id} className={"navbtn" + (view === n.id ? " active" : "")} onClick={() => setView(n.id)}>
            <Icon name={n.icon} />
            {n.id === "messages" && reqCount === 0 ? null : null}
            {n.id === "dispatch" && reqCount > 0 && <span className="badge">{reqCount}</span>}
            <span className="railtip">{n.label}</span>
          </button>
        ))}
      </div>
      <div className="hq-main">
        <div className="hq-head">
          <div>
            <h1>{titles[view][0]}</h1>
            <p>{titles[view][1]}</p>
          </div>
          <div className="stats">
            <div className="stat sky"><div className="n">{stats.active}</div><div className="l">Active</div></div>
            <div className="stat good"><div className="n">{stats.avail}</div><div className="l">Available</div></div>
            <div className="stat warn"><div className="n">{stats.req}</div><div className="l">Waiting</div></div>
          </div>
        </div>
        <div className="hq-body">
          {view === "dispatch" && <DispatchView state={state} />}
          {view === "schedule" && <ScheduleView state={state} />}
          {view === "fleet" && <FleetView state={state} />}
          {view === "messages" && <MessagesView state={state} />}
          {view === "guests" && <GuestsView state={state} />}
          {view === "setup" && <SetupView state={state} onOpenSignup={onOpenSignup} />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HQApp, ScheduleView, FleetView, GuestsView, MessagesView });