/* ============================================================
   App shell — URL-routed surfaces, store subscription
     /  or /hq   → HQ Dispatch (desktop; gated at the edge)
     /driver     → Driver app  (gated at the edge)
     /ride        → Guest ride request (public)
     /signup      → Driver sign-up (public)
   The mobile surfaces render full-screen (real phones), not the
   desktop phone-mockup the design prototype used.
   ============================================================ */

function useStoreState() {
  const [state, setState] = useState(Store.get());
  const [, force] = useState(0);
  useEffect(() => {
    const unsub = Store.subscribe((s) => { setState(s); force((n) => n + 1); });
    return unsub;
  }, []);
  return state;
}

function useToast() {
  const [msg, setMsg] = useState(null);
  const tRef = useRef(null);
  const toast = (m) => {
    setMsg(m);
    clearTimeout(tRef.current);
    tRef.current = setTimeout(() => setMsg(null), 2200);
  };
  const node = msg ? (
    <div className="toast"><Icon name="check" /> {msg}</div>
  ) : null;
  return [toast, node];
}

function Clock() {
  const [t, setT] = useState(new Date());
  useEffect(() => { const i = setInterval(() => setT(new Date()), 1000); return () => clearInterval(i); }, []);
  return <span className="clock"><span className="live" /> {t.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}</span>;
}

function MobileShell({ children }) {
  return <div className="app-mobile">{children}</div>;
}

function surfaceForPath() {
  const p = (window.location.pathname || "/").replace(/\/+$/, "") || "/";
  if (p === "/driver") return "driver";
  if (p === "/ride") return "guest";
  if (p === "/signup") return "signup";
  return "hq"; // "/" and "/hq"
}

function App() {
  const surface = surfaceForPath();
  const state = useStoreState();
  const [driverToast, driverToastNode] = useToast();
  const [guestToast, guestToastNode] = useToast();
  const [signupToast, signupToastNode] = useToast();

  if (surface === "guest")
    return <MobileShell><GuestApp state={state} toast={guestToast} />{guestToastNode}</MobileShell>;
  if (surface === "signup")
    return <MobileShell><DriverSignup state={state} toast={signupToast} />{signupToastNode}</MobileShell>;
  if (surface === "driver")
    return <MobileShell><DriverApp state={state} toast={driverToast} />{driverToastNode}</MobileShell>;

  // HQ Dispatch (desktop)
  return (
    <div className="shell">
      <div className="topbar">
        <div className="brand">
          <span className="glyph"><Icon name="dispatch" style={{ width: 18, height: 18 }} /></span>
          <div>Conference Dispatch<small>Equippers Shout · live</small></div>
        </div>
        <div className="spacer" />
        <a className="ghost-btn" href="/ride" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>Guest page ↗</a>
        <a className="ghost-btn" href="/signup" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>Driver sign-up ↗</a>
        <Clock />
        <button className="ghost-btn" onClick={() => Store.reset()} title="Reload latest from the server">Refresh</button>
      </div>
      <div className="stage">
        <HQApp state={state} onOpenSignup={() => window.open("/signup", "_blank")} />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);