/* GEO-AGRO.AI · Showcase shell
   Presents the product like a real app (not the raw design canvas):
   - Desktop portal with a WORKING sidebar (window.__GA_NAV)
   - Optional mobile view in an iPhone frame
   - A slim top bar to switch Desktop ⇄ Mobile and the mock alert state
   Self-scales the fixed-size screens to fit any viewport. */

const GA_DESKTOP = [
  { id: "overview",     comp: "DesktopOverview" },
  { id: "heatmap",      comp: "DesktopHeatmap" },
  { id: "ledger",       comp: "DesktopLedger" },
  { id: "underwriting", comp: "DesktopUnderwriting" },
  { id: "fleet",        comp: "DesktopFleet" }
];
const GA_MOBILE = [
  { id: "map",      comp: "MobileMap",      label: "Map" },
  { id: "command",  comp: "MobileCommand",  label: "Command" },
  { id: "alert",    comp: "MobileAlert",    label: "Alert" },
  { id: "chat",     comp: "MobileChat",     label: "AI" },
  { id: "passport", comp: "MobilePassport", label: "Soil" }
];

function Stage({ w, h, children }) {
  const wrapRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const el = wrapRef.current; if (!el) return;
    const fit = () => {
      const aw = el.clientWidth, ah = el.clientHeight;
      setScale(Math.min(aw / w, ah / h));
    };
    fit();
    let ro = null;
    if ("ResizeObserver" in window) { ro = new ResizeObserver(fit); ro.observe(el); }
    window.addEventListener("resize", fit);
    return () => { ro && ro.disconnect(); window.removeEventListener("resize", fit); };
  }, [w, h]);
  return (
    <div ref={wrapRef} style={{ position: "absolute", inset: 0, display: "flex",
      alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
      <div style={{ width: w, height: h, transform: `scale(${scale})`, transformOrigin: "center center", flex: "0 0 auto" }}>
        {children}
      </div>
    </div>
  );
}

function ShowcaseApp() {
  const [mode, setMode] = React.useState("desktop");      // desktop | mobile
  const [dScreen, setDScreen] = React.useState("overview");
  const [mScreen, setMScreen] = React.useState("command");
  const [alertState, setAlertState] = React.useState("frost");
  const live = true;
  const lang = "en";

  // wire the desktop sidebar clicks
  React.useEffect(() => { window.__GA_NAV = (id) => setDScreen(id); return () => { delete window.__GA_NAV; }; }, []);

  const ctx = { lang, alertState, live, t: (window.I18N[lang] || window.I18N.en) };

  const dItem = GA_DESKTOP.find((x) => x.id === dScreen) || GA_DESKTOP[0];
  const mItem = GA_MOBILE.find((x) => x.id === mScreen) || GA_MOBILE[0];
  const DComp = window[dItem.comp];
  const MComp = window[mItem.comp];

  const segBtn = (on) => ({
    border: "none", cursor: "pointer", fontFamily: "var(--f-body)", fontSize: 12.5, fontWeight: 600,
    padding: "7px 14px", borderRadius: 8, transition: ".15s",
    background: on ? "var(--yellow)" : "transparent", color: on ? "#1A1A0A" : "var(--ink-2)"
  });
  const chip = (on) => ({
    border: "1px solid " + (on ? "var(--yellow)" : "var(--line-2)"), cursor: "pointer",
    fontFamily: "var(--f-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".04em",
    padding: "5px 11px", borderRadius: 99, textTransform: "uppercase", transition: ".15s",
    background: on ? "rgba(255,214,10,0.12)" : "transparent", color: on ? "var(--yellow)" : "var(--ink-3)"
  });

  return (
    <GACtx.Provider value={ctx}>
      <div style={{ position: "fixed", inset: 0, display: "flex", flexDirection: "column",
        background: "var(--bg-0)", fontFamily: "var(--f-body)" }}>

        {/* top bar */}
        <div style={{ flex: "0 0 auto", height: 56, display: "flex", alignItems: "center",
          gap: 16, padding: "0 18px", background: "var(--bg-1)", borderBottom: "1px solid var(--line-2)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <BrandMark size={22} />
            <span className="ga-disp" style={{ fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>
              GEO-AGRO<span style={{ color: "var(--yellow)" }}>.AI</span>
            </span>
          </div>

          <div style={{ display: "flex", gap: 4, background: "var(--bg-2)", borderRadius: 10, padding: 3 }}>
            <button style={segBtn(mode === "desktop")} onClick={() => setMode("desktop")}>Desktop portal</button>
            <button style={segBtn(mode === "mobile")} onClick={() => setMode("mobile")}>Field app</button>
          </div>

          <div style={{ flex: 1 }} />

          {/* alert-state mock control */}
          <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--ink-4)",
            letterSpacing: ".1em", textTransform: "uppercase" }}>Scenario</span>
          <div style={{ display: "flex", gap: 6 }}>
            {["calm", "frost", "drought"].map((s) => (
              <button key={s} style={chip(alertState === s)} onClick={() => setAlertState(s)}>{s}</button>
            ))}
          </div>

          {mode === "mobile" && (
            <div style={{ display: "flex", gap: 6, marginLeft: 12 }}>
              {GA_MOBILE.map((m) => (
                <button key={m.id} style={chip(mScreen === m.id)} onClick={() => setMScreen(m.id)}>{m.label}</button>
              ))}
            </div>
          )}
        </div>

        {/* stage */}
        <div style={{ flex: 1, position: "relative",
          background: "radial-gradient(120% 130% at 50% -10%, rgba(255,214,10,0.05), transparent 60%), var(--bg-0)" }}>
          {mode === "desktop"
            ? <Stage w={1280} h={820} key="d">{DComp ? <DComp /> : null}</Stage>
            : <Stage w={402} h={874} key="m">{MComp ? <MComp /> : null}</Stage>}
        </div>
      </div>
    </GACtx.Provider>
  );
}

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