// app.jsx — top-level shell. Replaces the DesignCanvas artboard wrapper
// from the prototype with real site navigation between the three views.
//
// View state lives in the URL hash so refreshes (and direct links from
// external sources like X/Instagram) land on the right view.
//   #editorial  → The Monette Ledger (default)
//   #list       → Asset register
//   #map        → Field atlas
// A second hash segment (#map/vanguard) targets a specific property.

const VIEWS = [
  { key: "editorial", label: "Ledger",   Component: () => null /* filled below */ },
  { key: "list",      label: "Register", Component: () => null },
  { key: "map",       label: "Atlas",    Component: () => null },
];

function parseHash() {
  const h = (window.location.hash || "#editorial").replace(/^#/, "");
  const [view, prop] = h.split("/");
  return { view: ["editorial", "list", "map"].includes(view) ? view : "editorial", prop: prop || null };
}

function App() {
  const [{ view, prop }, setRoute] = useState(parseHash());

  useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (nextView, nextProp) => {
    window.location.hash = nextProp ? `${nextView}/${nextProp}` : nextView;
  };

  const ViewComponent =
    view === "list" ? window.ListView :
    view === "map"  ? window.MapView  :
                      window.EditorialView;

  return (
    <>
      <nav className="site-nav">
        <div className="brand">
          <span className="wordmark">The Monette Ledger</span>
          <span className="tag">CCAA · DAY {D.day}</span>
        </div>
        <div className="tabs">
          {VIEWS.map((v) => (
            <button key={v.key} onClick={() => go(v.key)} className={view === v.key ? "on" : ""}>{v.label}</button>
          ))}
        </div>
        <div className="utility">
          <span>APR 21 2026</span>
          <span className="day">● LIVE</span>
          <a href="#map">Submit a tip</a>
        </div>
      </nav>
      <div className="view-wrap">
        <ViewComponent
          key={view /* force remount so useMemo-backed rollups stay fresh per view */}
          forcedSelect={view === "map" ? prop : null}
          onSwitchView={go}
        />
      </div>
    </>
  );
}

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