/* =========================================================
   NETRA AI — App shell (sidebar + topbar + router + tweaks)
   ========================================================= */

const NAV = [
  { section: "Operations", items: [
    { id: "live",     label: "Live Cameras",  icon: "live",     ct: 12 },
    { id: "alerts",   label: "Alerts",        icon: "alert",    ct: 8, ctCrit: true },
    { id: "incident", label: "Incidents",     icon: "incident" },
  ]},
  { section: "Intelligence", items: [
    { id: "rules",     label: "Rules & AI",   icon: "rules",   ct: 7 },
    { id: "sitemap",   label: "Site Map",     icon: "map" },
    { id: "analytics", label: "Analytics",    icon: "chart" },
  ]},
  { section: "Estate", items: [
    { id: "devices",  label: "Devices",      icon: "devices",  ct: 47 },
    { id: "access",   label: "Access",       icon: "users" },
    { id: "settings", label: "Settings",     icon: "settings" },
  ]},
];

const CRUMB = {
  live:     ["OPERATIONS", "Live Cameras"],
  alerts:   ["OPERATIONS", "Alerts"],
  incident: ["OPERATIONS", "Incident · INC-4471"],
  rules:    ["INTELLIGENCE", "Rules & AI"],
  sitemap:  ["INTELLIGENCE", "Site Map"],
  analytics:["INTELLIGENCE", "Analytics"],
  devices:  ["ESTATE", "Devices"],
  access:   ["ESTATE", "Access"],
  settings: ["ESTATE", "Settings"],
};

const App = () => {
  const [booting, setBooting] = React.useState(true);
  const [page, setPage] = React.useState("live");

  // tweakable defaults — picked up by host for persistence
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "iris",
    "density": "regular",
    "devanagari": true,
    "motion": true
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-density", t.density);
  }, [t.density]);

  // accent override
  React.useEffect(() => {
    const map = {
      iris:    ["#4dd6ff", "#f0a73a"],
      saffron: ["#f0a73a", "#4dd6ff"],
      jade:    ["#5ce0a8", "#4dd6ff"],
      violet:  ["#a98cff", "#f0a73a"],
    };
    const [a, b] = map[t.accent] || map.iris;
    document.documentElement.style.setProperty("--iris", a);
    document.documentElement.style.setProperty("--iris-glow", a + "55");
    document.documentElement.style.setProperty("--saffron", b);
  }, [t.accent]);

  const screens = {
    live:      <ScreenLive go={setPage} />,
    alerts:    <ScreenAlerts go={setPage} />,
    incident:  <ScreenIncident go={setPage} />,
    rules:     <ScreenRules />,
    sitemap:   <ScreenSiteMap go={setPage} />,
    analytics: <ScreenAnalytics />,
    devices:   <ScreenDevices />,
    access:    <ScreenAccess />,
    settings:  <ScreenSettings />,
  };

  const [crumb1, crumb2] = CRUMB[page] || ["", ""];

  return (
    <>
      {booting && <Splash onDone={() => setBooting(false)} />}
      <div className="app">
        {/* sidebar */}
        <aside className="sidebar">
          <div className="brand">
            <IrisMark size={32} animated={t.motion !== false} />
            <div className="wm">
              <b>Netra<span style={{color: "var(--iris)"}}> AI</span></b>
              {t.devanagari !== false && <em>नेत्र · the eye</em>}
            </div>
          </div>

          {NAV.map(s => (
            <div key={s.section} className="nav-section">
              <h6>{s.section}</h6>
              {s.items.map(it => (
                <div key={it.id} className={`nav-item ${page===it.id?"active":""}`} onClick={()=>setPage(it.id)}>
                  <Icon name={it.icon} size={16} className="ico" />
                  <span className="lbl">{it.label}</span>
                  {it.ct != null && <span className={`ct ${it.ctCrit ? "crit" : ""}`}>{it.ct}</span>}
                </div>
              ))}
            </div>
          ))}

          <div className="side-foot">
            <span className="pill"><span className="d" /> All systems</span>
            <span className="v" style={{marginLeft: "auto"}}>v 4.12.0</span>
          </div>
        </aside>

        {/* topbar */}
        <header className="topbar">
          <div className="crumb">{crumb1} <span style={{margin: "0 6px", color: "var(--ink-3)"}}>/</span> <b>{crumb2}</b></div>
          <div style={{flex: 1}} />
          <div className="search">
            <Icon name="search" size={14} />
            <span style={{flex:1}}>Search cameras, people, incidents…</span>
            <kbd>⌘ K</kbd>
          </div>
          <div className="live"><span className="dot" />Live</div>
          <button className="ic-btn" title="Alerts">
            <Icon name="bell" size={16} />
            <span className="badge">3</span>
          </button>
          <div className="me">
            <span className="av">VM</span>
            <span className="nm">Vivaan Mehta<small>SOC ADMIN</small></span>
          </div>
        </header>

        {/* main */}
        <main className="main" key={page}>
          {screens[page]}
        </main>
      </div>

      {/* Tweaks panel — only when host activates it */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakRadio
            label="Palette"
            value={t.accent}
            options={[
              {value: "iris",    label: "Iris"},
              {value: "saffron", label: "Saffron"},
              {value: "jade",    label: "Jade"},
              {value: "violet",  label: "Violet"},
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="UI density"
            value={t.density}
            options={["compact","regular","cozy"]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="Visual">
          <TweakToggle label="Animation"          value={!!t.motion}     onChange={(v) => setTweak("motion", v)} />
          <TweakToggle label="Devanagari accents" value={!!t.devanagari} onChange={(v) => setTweak("devanagari", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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