// Tennant AI Suite — root app
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  // Hash-based screen routing so refreshes preserve position
  const initial = () => {
    const m = (window.location.hash || '').match(/#s(\d)/);
    return m ? Math.max(1, Math.min(6, parseInt(m[1], 10))) : 1;
  };
  const [screen, setScreen] = useStateA(initial);
  const [activeNav, setActiveNav] = useStateA('inbox');
  const [navCollapsed, setNavCollapsed] = useStateA(() => {
    try { return localStorage.getItem('tn-nav-collapsed') === '1'; } catch (e) { return false; }
  });

  useEffectA(() => {
    try { localStorage.setItem('tn-nav-collapsed', navCollapsed ? '1' : '0'); } catch (e) {}
  }, [navCollapsed]);

  useEffectA(() => {
    if (window.location.hash !== '#s' + screen) {
      window.history.replaceState(null, '', '#s' + screen);
    }
    // Screen-to-nav default mapping
    const map = { 1: 'inbox', 2: 'inbox', 3: 'inbox', 4: 'knowledge', 5: 'key-accounts', 6: 'reports' };
    setActiveNav(prev => map[screen] || prev);
    // Scroll main back to top on screen change
    const main = document.querySelector('.main-scroll');
    if (main) main.scrollTop = 0;
  }, [screen]);

  // Listen for hash changes (browser back/fwd)
  useEffectA(() => {
    const onHash = () => {
      const m = (window.location.hash || '').match(/#s(\d)/);
      if (m) setScreen(parseInt(m[1], 10));
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (target, navKey) => {
    if (typeof target === 'function') {
      setScreen(prev => target(prev));
    } else {
      setScreen(target);
    }
    if (navKey) setActiveNav(navKey);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <TopNav />
      <div className={'shell' + (navCollapsed ? ' nav-collapsed' : '')}>
        <Sidebar
          activeKey={activeNav}
          onNavigate={navigate}
          collapsed={navCollapsed}
          onToggleCollapsed={() => setNavCollapsed(c => !c)}
        />
        <div className="main-scroll" style={{ minWidth: 0, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
          {screen === 1 && <div className="main"><ScreenDashboard onNavigate={navigate} /></div>}
          {screen === 2 && <ScreenReply onNavigate={navigate} />}
          {screen === 3 && <ScreenParts onNavigate={navigate} />}
          {screen === 4 && <ScreenKnowledge onNavigate={navigate} />}
          {screen === 5 && <ScreenRules onNavigate={navigate} />}
          {screen === 6 && <ScreenReports onNavigate={navigate} />}
        </div>
      </div>
      <DemoNav screen={screen} setScreen={navigate} />
    </div>
  );
}

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