// App shell — internal routing via state + ⌘K + tweaks
const STORAGE_KEY = 'velyx:route';

const App = () => {
  const [route, setRoute] = React.useState(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEY);
      if (saved) return JSON.parse(saved);
    } catch (e) {}
    return { name: 'inicio' };
  });
  const [playbookId, setPlaybookId] = React.useState(null);
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [dockOpen, setDockOpen] = React.useState(() => {
    try {
      const v = localStorage.getItem(DOCK_STATE_KEY);
      return v === null ? true : v === '1';
    } catch(e) { return true; }
  });
  React.useEffect(() => {
    try { localStorage.setItem(DOCK_STATE_KEY, dockOpen ? '1' : '0'); } catch(e){}
  }, [dockOpen]);

  // Tweaks state
  const [tweaks, setTweaks] = React.useState(window.TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);
  const setTweak = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch (e) {}
  };

  // Edit mode protocol
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply accent whenever it changes
  React.useEffect(() => { window.applyAccent(tweaks.accent); }, [tweaks.accent]);

  const go = (r) => {
    setRoute(r);
    if (r.name !== 'playbooks') setPlaybookId(null);
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(r)); } catch(e) {}
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // ⌘K shortcut
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setCmdOpen(o => !o);
      }
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
        e.preventDefault();
        setDockOpen(o => !o);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const user = VELYX.user;
  const isNewUser = tweaks.userState === 'new';

  let Screen;
  switch (route.name) {
    case 'inicio':     Screen = <ScreenInicio go={go} user={user} isNewUser={isNewUser}/>; break;
    case 'trilhas':    Screen = <ScreenTrilhas go={go}/>; break;
    case 'trilha':     Screen = <ScreenTrilha id={route.id} go={go}/>; break;
    case 'modulo':     Screen = <ScreenModulo trilhaId={route.trilha} moduloId={route.modulo} go={go}/>; break;
    case 'playbooks':  Screen = <ScreenPlaybooks go={go} openId={playbookId} setOpenId={setPlaybookId}/>; break;
    case 'feed':       Screen = <ScreenFeed go={go}/>; break;
    case 'post':       Screen = <ScreenPost idx={route.idx||0} go={go}/>; break;
    case 'biblioteca': Screen = <ScreenBiblioteca/>; break;
    case 'cert':       Screen = <ScreenCert/>; break;
    case 'perfil':     Screen = <ScreenPerfil user={user}/>; break;
    default:           Screen = <ScreenInicio go={go} user={user} isNewUser={isNewUser}/>;
  }

  return (
    <div className="flex min-h-screen bg-bg">
      <Sidebar route={route} go={go} user={user} openCmd={() => setCmdOpen(true)}/>
      <main key={route.name + (route.id||'') + (route.modulo||'') + (route.idx||'') + (playbookId||'') + (isNewUser?'-d0':'')}
            className="flex-1 min-w-0 slide-in">
        {Screen}
      </main>
      <CompanionDock route={route} go={go} open={dockOpen} setOpen={setDockOpen}/>
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} go={go}/>
      <TweaksPanel tweaks={tweaks} setTweak={setTweak} visible={tweaksVisible}/>
    </div>
  );
};

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