// App shell: browser chrome + sidebar + variant viewport + Tweaks wiring

const ACCENTS = {
  ajna:    { a: '#6EE7B7', b: '#60A5FA' },
  sunrise: { a: '#FDE68A', b: '#F472B6' },
  ember:   { a: '#FCA5A5', b: '#F59E0B' },
  violet:  { a: '#C4B5FD', b: '#818CF8' },
  mono:    { a: '#D1D5DB', b: '#6B7280' },
};

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "calm",
  "theme": "dark",
  "accent": "ajna",
  "greeting": "on",
  "name": "",
  "device": "desktop"
}/*EDITMODE-END*/;

function applyAccent(key) {
  const a = ACCENTS[key] || ACCENTS.ajna;
  document.documentElement.style.setProperty('--accent-a', a.a);
  document.documentElement.style.setProperty('--accent-b', a.b);
}

function applyTheme(t) {
  let mode = t;
  if (t === 'auto') {
    mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  document.body.setAttribute('data-theme', mode);
}

function App() {
  const [state, setState] = React.useState(() => {
    if (window.__AJNA_EMBED) return { ...DEFAULTS, device: 'desktop', variant: 'calm' };
    try {
      const saved = localStorage.getItem('ajna-ntp-state');
      if (saved) return { ...DEFAULTS, ...JSON.parse(saved) };
    } catch(e) {}
    return { ...DEFAULTS };
  });
  // Desktop first-run — show until the user finishes or skips it.
  const [showFre, setShowFre] = React.useState(() => {
    if (window.__AJNA_EMBED) return false;
    try { return localStorage.getItem('ajna-desktop-fre-done') !== '1'; } catch { return true; }
  });
  const finishFre = () => {
    try { localStorage.setItem('ajna-desktop-fre-done', '1'); } catch {}
    setShowFre(false);
  };
  // Page-action overlays (Find / Zoom / Page info / Clear / Reader / Voice /
  // Permission prompt / Privacy review). Stacked above the content.
  const [overlay, setOverlay] = React.useState(null);
  const [zoom, setZoom] = React.useState(100);
  const [sidebarPinned, setSidebarPinned] = React.useState(false);

  // ⌘J / Ctrl+J to toggle AI
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
        e.preventDefault();
        updateState({ variant: 'ai' });
      }
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        setSidebarPinned(p => !p);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Persist to localStorage
  React.useEffect(() => {
    if (!window.__AJNA_EMBED) localStorage.setItem('ajna-ntp-state', JSON.stringify(state));
    applyAccent(state.accent);
    applyTheme(state.theme);
    // Expose a global theme setter so in-app (mobile/iPad) appearance controls
    // can flip the real theme, not just a local visual.
    window.__ajnaSetTheme = (t) => updateState({ theme: t });
    window.__ajnaGetTheme = () => state.theme;
  }, [state]);

  // Bind Tweaks UI
  React.useEffect(() => {
    // seg-variant
    bindSeg('seg-variant', 'data-v', state.variant, v => updateState({ variant: v }));
    bindSeg('seg-theme', 'data-t', state.theme, v => updateState({ theme: v }));
    bindSeg('seg-greeting', 'data-g', state.greeting, v => updateState({ greeting: v }));
    bindSeg('seg-device', 'data-d', state.device, v => updateState({ device: v }));
    // swatches
    document.querySelectorAll('#swatches .swatch').forEach(el => {
      const k = el.getAttribute('data-a');
      el.classList.toggle('active', state.accent === k);
      el.onclick = () => updateState({ accent: k });
    });
    // name input
    const nameIn = document.getElementById('input-name');
    if (nameIn && nameIn.value !== state.name) nameIn.value = state.name;
    if (nameIn) nameIn.oninput = e => updateState({ name: e.target.value });
  }, [state]);

  function updateState(patch) {
    setState(s => ({ ...s, ...patch }));
    // Tell host to persist via EDITMODE block
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch(e) {}
  }

  // Edit-mode protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') {
        document.getElementById('tweaks').classList.add('visible');
      } else if (e.data.type === '__deactivate_edit_mode') {
        document.getElementById('tweaks').classList.remove('visible');
      }
    };
    window.addEventListener('message', onMsg);
    // Announce availability
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const Variant = {
    calm: VariantCalm,
    editorial: VariantEditorial,
    minimal: VariantMinimal,
    settings: VariantSettings,
    ai:         () => <AIPage sidebarPinned={sidebarPinned} onToggleSidebar={() => setSidebarPinned(p => !p)}/>,
    messages:   () => <MessagesPage onStartCall={() => updateState({ variant: 'calls' })}/>,
    history:    () => <DScreenHistory onClearData={() => setOverlay('clear')}/>,
    bookmarks:  DScreenBookmarks,
    downloads:  DScreenDownloads,
    'recently-closed': DScreenRecentlyClosed,
    'reading-list': () => <DScreenReadingList onOpenReader={() => setOverlay('reader')}/>,
    passwords:  DScreenPasswords,
    permissions: DScreenSitePermissions,
    calls:      DScreenCalls,
    help:       DScreenHelp,
    credits:    DScreenCredits,
    'sad-tab':  () => <DSadTab onClose={() => updateState({ variant: 'calm' })}/>,
  }[state.variant] || VariantCalm;

  if (state.device === 'mobile') {
    return (
      <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }} data-screen-label="Mobile">
        <MobileApp/>
      </div>
    );
  }

  if (state.device === 'tablet') {
    return (
      <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }} data-screen-label="iPad">
        <TabletApp/>
      </div>
    );
  }

  return (
    <div style={{
      width: '100vw', height: '100vh',
      background: 'radial-gradient(900px 600px at 12% -8%, color-mix(in oklch, var(--accent-a) 14%, transparent), transparent 60%), radial-gradient(1100px 700px at 105% 30%, color-mix(in oklch, var(--accent-b) 12%, transparent), transparent 65%), var(--canvas)',
      display: 'flex', flexDirection: 'column', position: 'relative',
    }} data-screen-label={`NTP — ${state.variant}`}>
      <div style={{ flex: 1, display: 'flex', minHeight: 0, padding: '10px', gap: 8 }}>
        <Sidebar
          forceExpanded={sidebarPinned}
          activeVariant={state.variant}
          onMenuAction={(id) => {
            if (['find','zoom','page-info','clear','reader','voice','privacy-review','permission-prompt','sad-tab'].includes(id)) {
              if (id === 'sad-tab') updateState({ variant: 'sad-tab' });
              else setOverlay(id);
            } else if (id === 'new-private') {
              updateState({ variant: 'calm' });
            } else {
              updateState({ variant: id });
            }
          }}
          onOpenSettings={() => updateState({ variant: 'settings' })}
          onOpenAllTabs={() => updateState({ variant: 'calm' })}
          onNavigate={(v) => updateState({ variant: v })}
        />
        {/* Floating content stage — the web content lifts off the ambient canvas */}
        <main style={{
          flex: 1, minWidth: 0, position: 'relative',
          background: 'var(--stage)',
          borderRadius: 14,
          border: '1px solid var(--border-soft)',
          boxShadow: 'var(--lift)',
          overflow: 'hidden',
        }}>
          <Variant greeting={state.greeting} name={state.name}/>
        </main>
      </div>

      {/* Page-action overlays */}
      {overlay === 'find'       && <DFindInPage onClose={() => setOverlay(null)}/>}
      {overlay === 'zoom'       && <DZoom value={zoom} onChange={setZoom} onClose={() => setOverlay(null)}/>}
      {overlay === 'page-info'  && <DPageInfo onClose={() => setOverlay(null)}/>}
      {overlay === 'clear'      && <DClearData onClose={() => setOverlay(null)}/>}
      {overlay === 'reader'     && <DReader onClose={() => setOverlay(null)}/>}
      {overlay === 'voice'      && <DVoiceSearch onClose={() => setOverlay(null)} onCommit={() => setOverlay(null)}/>}
      {overlay === 'privacy-review' && <DPrivacyReview onClose={() => setOverlay(null)}/>}
      {overlay === 'permission-prompt' && <DPermissionPrompt onResolve={() => setOverlay(null)}/>}

      {showFre && <DesktopFirstRun onComplete={finishFre}/>}
    </div>
  );
}

function bindSeg(id, attr, value, onChange) {
  const el = document.getElementById(id);
  if (!el) return;
  el.querySelectorAll('button').forEach(btn => {
    const v = btn.getAttribute(attr);
    btn.classList.toggle('active', v === value);
    btn.onclick = () => onChange(v);
  });
}

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