/* ============================================================
   Driver mobile app — simplified for low-tech drivers
   Big buttons, one clear action at a time.
   ============================================================ */

function MobileChat({ state, threadKey, withId, role, fromTag, canned, onSend }) {
  const [txt, setTxt] = useState("");
  const feedRef = useRef(null);
  const thread = state.threads[threadKey] || { msgs: [] };
  useEffect(() => { if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight; }, [thread.msgs.length]);
  const send = (t) => {
    const v = (t || txt).trim();
    if (!v) return;
    Store.sendMessage(threadKey, withId, role, fromTag, v);
    setTxt("");
    onSend && onSend(v);
  };
  return (
    <div className="chat-wrap">
      <div className="chat-feed" ref={feedRef}>
        {thread.msgs.length === 0 && <div className="empty">No messages yet.</div>}
        {thread.msgs.map((m, i) => (
          <div key={i} className={"bubble " + (m.from === fromTag ? "me" : "them")}>
            {m.text}<div className="meta">{m.from === "hq" ? "HQ · " : ""}{fmtTime(m.t)}</div>
          </div>
        ))}
      </div>
      {canned && <div className="canned">{canned.map((c) => <button key={c} onClick={() => send(c)}>{c}</button>)}</div>}
      <div className="chat-input">
        <input className="field" placeholder="Message HQ…" 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>
  );
}

const ACTIVE_RUN = ["enroute", "atpickup", "onboard", "arrived", "returning"];

function vanStatusOf(driver, hasRide) {
  if (driver.status === "offline") return { label: "Resting", tone: "slate" };
  if (hasRide || ACTIVE_RUN.includes(driver.status)) return { label: "Assigned", tone: "amber" };
  return { label: "Available", tone: "green" };
}

/* ---- Full-screen push alert from HQ ---- */
function PushAlert({ push, onAck }) {
  return (
    <div className="push-overlay" onClick={onAck}>
      <div className="push-card" onClick={(e) => e.stopPropagation()}>
        <div className="push-bell"><Icon name="bell" /></div>
        <div className="push-label">Alert from HQ</div>
        <div className="push-text">{push.text}</div>
        <button className="push-ack" onClick={onAck}><Icon name="check" style={{ width: 22, height: 22 }} /> Got it</button>
      </div>
    </div>
  );
}

function DriverApp({ state, toast }) {
  const [tab, setTab] = useState("today");
  const [ackedPush, setAckedPush] = useState(() => { try { return localStorage.getItem("driverAckPush") || ""; } catch (e) { return ""; } });
  const [driverId, setDriverIdRaw] = useState(() => { try { return localStorage.getItem("cd_driverId") || ""; } catch (e) { return ""; } });
  const setDriverId = (id) => { setDriverIdRaw(id); try { localStorage.setItem("cd_driverId", id); } catch (e) {} };

  // who am I — chosen driver, else first on the roster
  const driver = state.drivers.find((d) => d.id === driverId) || state.drivers[0];
  if (!driver) {
    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="mobile-body"><div className="empty" style={{ padding: 28 }}>{state.drivers === undefined || !Store.isLoaded ? "Connecting…" : "No drivers yet — add them in HQ → Setup."}</div></div>
      </>
    );
  }
  const vehicle = state.vehicles.find((v) => v.id === driver.vehicleId);
  const ride = state.rides.find((r) => r.driverId === driver.id && r.status !== "completed");
  const van = vanStatusOf(driver, !!ride);

  const push = state.activePush;
  const showPush = push && push.id !== ackedPush;
  const ackPush = () => { setAckedPush(push.id); try { localStorage.setItem("driverAckPush", push.id); } catch (e) {} };

  const StatusBar = () => (
    <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>
  );

  return (
    <>
      <StatusBar />
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 14px", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" }}>
        <span className="faint" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".04em" }}>Driver</span>
        <select className="field" style={{ flex: 1, padding: "6px 8px", fontSize: 13 }} value={driver.id} onChange={(e) => setDriverId(e.target.value)}>
          {state.drivers.map((d) => {
            const v = state.vehicles.find((x) => x.id === d.vehicleId);
            return <option key={d.id} value={d.id}>{d.name}{v ? " · " + v.name : ""}</option>;
          })}
        </select>
      </div>
      <div className="mobile-body">
        {tab === "today" && (
          <DriverRun state={state} driver={driver} vehicle={vehicle} ride={ride} van={van} toast={toast} />
        )}
        {tab === "roster" && (
          <DriverRoster state={state} driver={driver} toast={toast} />
        )}
        {tab === "chat" && (
          <div style={{ height: "100%" }}>
            <div className="thread-head"><Avatar initials="HQ" tone="sky" size={34} /><div><div style={{ fontWeight: 600 }}>Dispatch HQ</div><div className="faint" style={{ fontSize: 11.5 }}>Base station</div></div></div>
            <div style={{ height: "calc(100% - 63px)" }}>
              <MobileChat state={state} threadKey={"t_" + driver.id} withId={driver.id} role="driver" fromTag="driver"
                canned={["On my way", "At the pickup", "Running 10 min late", "Guest not here"]} onSend={() => toast("Sent to HQ")} />
            </div>
          </div>
        )}
      </div>
      <div className="mobile-tabbar">
        {[["today", "home", "My Run"], ["roster", "schedule", "My Roster"], ["chat", "chat", "HQ Chat"]].map(([id, ic, lb]) => (
          <button key={id} className={tab === id ? "active" : ""} onClick={() => setTab(id)}><Icon name={ic} />{lb}</button>
        ))}
      </div>
      {showPush && <PushAlert push={push} onAck={ackPush} />}
    </>
  );
}

/* ====================== Shuttle loop (driver) ====================== */
function ShuttleRun({ state, driver, vehicle, toast }) {
  const sh = (state.shuttles || []).find((s) => s.id === driver.shuttleId);
  if (!sh) return <div className="m-sec"><div className="free-card"><div className="free-title">Shuttle ended</div><div className="free-sub">HQ has taken you off the loop.</div></div></div>;
  const origin = locName(Store, sh.origin);
  const toVenue = driver.shuttleDir === "to_venue";
  const dest = toVenue ? locName(Store, "venue") : origin;
  const laps = driver.shuttleLaps || 0;

  const arrive = () => {
    Store.shuttleArrive(driver.id);
    toast(toVenue ? "Arrived at venue — turn around" : "Back at " + origin + " — load up");
  };

  return (
    <div className="fade-in">
      <div className="driver-hero">
        <Avatar initials={driver.initials} tone="violet" size={50} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="dh-hi">Hi, {driver.name.split(" ")[0]}</div>
          <div className="dh-van">{vehicle ? vehicle.name : "No vehicle"} · shuttle</div>
        </div>
        <div className="van-badge tone-violet"><span className="pdot" />Shuttle</div>
      </div>

      <div className="m-sec" style={{ paddingTop: 4 }}>
        <div className="sl-banner">
          <span className="sl-loc">{origin}</span>
          <span className="sl-loop"><Icon name="refresh" /></span>
          <span className="sl-loc">{locName(Store, "venue")}</span>
        </div>
        <div className="sl-sub">Keep looping until HQ stands you down. Just tap when you arrive.</div>

        <div className={"sl-now " + (toVenue ? "to-venue" : "to-origin")}>
          <span className="sl-now-cap">YOU’RE HEADING TO</span>
          <span className="sl-now-dest">{dest}</span>
        </div>

        <button className="sl-arrive" onClick={arrive}>
          <Icon name="check" style={{ width: 26, height: 26 }} />
          <span>I’ve arrived at {dest}</span>
          <small>{toVenue ? "Drop off, then head back" : "Load up, then head to venue"}</small>
        </button>

        <div className="sl-laps">
          <Icon name="car2" style={{ width: 16, height: 16, color: "var(--violet)" }} />
          <span><b>{laps}</b> run{laps === 1 ? "" : "s"} to the venue so far</span>
        </div>
      </div>

      {state.broadcasts.length > 0 && (
        <div className="m-sec">
          <div className="m-sec-h">From HQ</div>
          <div className="m-card" style={{ borderColor: state.broadcasts[0].push ? "rgba(183,131,31,0.4)" : "var(--line)" }}>
            <div style={{ display: "flex", gap: 11 }}>
              <Icon name="bell" style={{ width: 18, height: 18, color: "var(--amber)", flex: "none", marginTop: 1 }} />
              <div><div style={{ fontSize: 14, lineHeight: 1.4 }}>{state.broadcasts[0].text}</div>
                <div className="mono faint" style={{ fontSize: 11, marginTop: 5 }}>{fmtTime(state.broadcasts[0].t)}</div></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ====================== My Run (home) ====================== */
function DriverRun({ state, driver, vehicle, ride, van, toast }) {
  if (driver.shuttleId) {
    return <ShuttleRun state={state} driver={driver} vehicle={vehicle} toast={toast} />;
  }
  const guest = ride && state.guests.find((x) => x.id === ride.guestId);
  // current phase derived from driver status
  const phase = driver.status === "enroute" ? "going"
    : driver.status === "atpickup" ? "waiting"
    : driver.status === "onboard" ? "coming" : "none";

  const goingTo = ride ? locName(Store, ride.from) : "";
  const dropTo = ride ? locName(Store, ride.to) : "";

  const setPhase = {
    going: () => { Store.setRideStatus(ride.id, "enroute"); Store.setDriverStatus(driver.id, "enroute", ride.from); toast("HQ sees: Going there"); },
    waiting: () => { Store.setDriverStatus(driver.id, "atpickup", ride.from); toast("HQ sees: Waiting"); },
    coming: () => { Store.setRideStatus(ride.id, "enroute"); Store.setDriverStatus(driver.id, "onboard", ride.to); toast("HQ sees: Coming back"); },
  };
  const finish = () => { Store.setRideStatus(ride.id, "completed"); Store.setDriverStatus(driver.id, "available", ride.to); toast("Trip finished — nice work!"); };

  return (
    <div className="fade-in">
      {/* header */}
      <div className="driver-hero">
        <Avatar initials={driver.initials} tone={van.tone} size={50} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="dh-hi">Hi, {driver.name.split(" ")[0]}</div>
          <div className="dh-van">{vehicle ? vehicle.name : "No vehicle"} · {vehicle ? vehicle.cap + " seats" : ""}</div>
        </div>
        <div className={"van-badge tone-" + van.tone}><span className="pdot" />{van.label}</div>
      </div>

      {ride ? (
        <div className="m-sec" style={{ paddingTop: 4 }}>
          {/* route banner */}
          <div className="run-route">
            <div className="rr-end">
              <span className="rr-cap">PICK UP AT</span>
              <span className="rr-loc">{goingTo}</span>
            </div>
            <div className="rr-arrow"><Icon name="arrow" /></div>
            <div className="rr-end">
              <span className="rr-cap">DROP AT</span>
              <span className="rr-loc">{dropTo}</span>
            </div>
          </div>
          <div className="run-guest">
            <Icon name="user" style={{ width: 16, height: 16 }} />
            {guest ? guest.name : (ride.manual ? "Off-system job" : "Guest")} · party {ride.party}{ride.flight ? " · " + ride.flight : ""}
          </div>
          {ride.note && <div className="run-note">“{ride.note}”</div>}

          {/* the three big phase buttons */}
          <div className="run-steps">
            <BigStep n="1" active={phase === "going"} done={phase === "waiting" || phase === "coming"}
              icon="car2" label="Going there" sub={"Driving to " + goingTo} onClick={setPhase.going} />
            <BigStep n="2" active={phase === "waiting"} done={phase === "coming"}
              icon="clock" label="Waiting" sub={"Stopped at " + goingTo} onClick={setPhase.waiting} />
            <BigStep n="3" active={phase === "coming"} done={false}
              icon="arrow" label="Coming back" sub={"Taking guest to " + dropTo} onClick={setPhase.coming} />
          </div>

          <button className="run-finish" onClick={finish}>
            <Icon name="check" style={{ width: 24, height: 24 }} /> Finished this trip
          </button>
        </div>
      ) : (
        /* no active job — set van status */
        <div className="m-sec" style={{ paddingTop: 4 }}>
          <div className="free-card">
            <div className="free-emoji"><Icon name="check" /></div>
            <div className="free-title">No job right now</div>
            <div className="free-sub">Tell HQ if you’re ready or taking a break.</div>
          </div>
          <div className="van-toggle">
            <button className={"vt-btn vt-avail" + (driver.status !== "offline" ? " on" : "")}
              onClick={() => { Store.setDriverStatus(driver.id, "available", driver.at); toast("HQ sees: Available"); }}>
              <Icon name="check" style={{ width: 26, height: 26 }} />
              <span>I’m Available</span>
              <small>Ready for the next job</small>
            </button>
            <button className={"vt-btn vt-rest" + (driver.status === "offline" ? " on" : "")}
              onClick={() => { Store.setDriverStatus(driver.id, "offline", driver.at); toast("HQ sees: Resting"); }}>
              <Icon name="clock" style={{ width: 26, height: 26 }} />
              <span>I’m Resting</span>
              <small>On a break</small>
            </button>
          </div>
        </div>
      )}

      {/* From HQ */}
      {state.broadcasts.length > 0 && (
        <div className="m-sec">
          <div className="m-sec-h">From HQ</div>
          <div className="m-card" style={{ borderColor: state.broadcasts[0].push ? "rgba(251,191,36,0.4)" : "var(--line)" }}>
            <div style={{ display: "flex", gap: 11 }}>
              <Icon name="bell" style={{ width: 18, height: 18, color: "var(--amber)", flex: "none", marginTop: 1 }} />
              <div><div style={{ fontSize: 14, lineHeight: 1.4 }}>{state.broadcasts[0].text}</div>
                <div className="mono faint" style={{ fontSize: 11, marginTop: 5 }}>{fmtTime(state.broadcasts[0].t)}</div></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function BigStep({ n, active, done, icon, label, sub, onClick }) {
  return (
    <button className={"run-step" + (active ? " active" : "") + (done ? " done" : "")} onClick={onClick}>
      <span className="rs-num">{done ? <Icon name="check" style={{ width: 20, height: 20 }} /> : n}</span>
      <span className="rs-ic"><Icon name={icon} /></span>
      <span className="rs-txt">
        <span className="rs-label">{label}</span>
        <span className="rs-sub">{sub}</span>
      </span>
      {active && <span className="rs-live">NOW</span>}
    </button>
  );
}

/* ====================== My Roster (driver availability) ====================== */
function DriverRoster({ state, driver, toast }) {
  const days = Store.CONF_DAYS;
  const blocks = Store.TIME_BLOCKS;
  const abbr = { Early: "Early", AM: "AM", PM: "PM", Evening: "Eve" };
  const byDay = (driver.availability && driver.availability.byDay) || {};
  const totalDays = days.filter((d) => (byDay[d] || []).length > 0).length;

  return (
    <div className="fade-in">
      <div className="m-head" style={{ paddingTop: 16 }}>
        <h2>My roster</h2>
        <div className="sub">Tap the times you can drive each day. HQ uses this to assign you to a vehicle.</div>
      </div>

      <div className="m-sec" style={{ paddingTop: 2 }}>
        <div className="dr-summary">
          <Icon name="schedule" style={{ width: 16, height: 16, color: "var(--sky)" }} />
          {totalDays > 0
            ? <span>You’re available on <b>{totalDays}</b> day{totalDays === 1 ? "" : "s"} this conference.</span>
            : <span>You haven’t set any availability yet.</span>}
        </div>

        {days.map((day) => {
          const sel = byDay[day] || [];
          return (
            <div key={day} className={"dr-day" + (sel.length ? " on" : "")}>
              <div className="dr-day-top">
                <span className="dr-dayname">{day}</span>
                {sel.length > 0
                  ? <span className="dr-daytag">Available</span>
                  : <span className="dr-daytag off">Off</span>}
              </div>
              <div className="dr-blocks">
                {blocks.map((b) => (
                  <button key={b} className={"dr-block" + (sel.includes(b) ? " on" : "")}
                    onClick={() => { Store.toggleDriverBlock(driver.id, day, b); }}>
                    {abbr[b] || b}
                  </button>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { DriverApp, MobileChat });