/* ============================================================
   Oziq AI — root app
   ============================================================ */

function App() {
  const [route, setRoute] = useState(() => location.hash.replace('#', '') || 'overview');
  const [lang, setLang] = useState('uz-latn');

  useEffect(() => {
    const onHash = () => setRoute(location.hash.replace('#', '') || 'overview');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Keyboard shortcuts: g+h, g+m, /
  useEffect(() => {
    let buffer = '';
    let bufferTimer = null;
    const handler = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key === '/') {
        e.preventDefault();
        document.querySelector('.top-search input')?.focus();
        return;
      }
      buffer += e.key.toLowerCase();
      clearTimeout(bufferTimer);
      bufferTimer = setTimeout(() => { buffer = ''; }, 800);
      if (buffer === 'gh') { location.hash = 'overview'; buffer = ''; }
      else if (buffer === 'gm') { location.hash = 'inbox'; buffer = ''; }
      else if (buffer === 'gt') { location.hash = 'topics'; buffer = ''; }
      else if (buffer === 'gf') { location.hash = 'farmers'; buffer = ''; }
      else if (buffer === 'gg') { location.hash = 'geo'; buffer = ''; }
      else if (buffer === 'ga') { location.hash = 'ai'; buffer = ''; }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  const nav = (id) => { location.hash = id; };

  const renderRoute = () => {
    switch (route) {
      case 'overview':     return <ScreenOverview />;
      case 'inbox':        return <ScreenInbox />;
      case 'topics':       return <ScreenTopics />;
      case 'farmers':      return <ScreenFarmers />;
      case 'geo':          return <ScreenGeo />;
      case 'ai':           return <ScreenAI />;
      case 'analysts':     return <ScreenAnalysts />;
      case 'reports':      return <ScreenReports />;
      case 'alerts':       return <ScreenAlerts />;
      case 'trends':       return <ScreenTrends />;
      case 'integrations': return <ScreenIntegrations />;
      case 'settings':     return <ScreenSettings />;
      default: {
        const item = NAV_ITEMS.find(n => n.id === route);
        return (
          <div className="page">
            <div className="page-head">
              <div>
                <div className="page-crumbs"><span>Asosiy</span><span>/</span><span style={{ color: 'var(--ink-2)' }}>{item?.uz || route}</span></div>
                <h1 className="page-title">{item?.uz || route}<span className="ru">{item?.ru}</span></h1>
              </div>
            </div>
            <div className="panel" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--ink)', marginBottom: 8 }}>Bu boʻlim hali tayyor emas</div>
              <div style={{ fontSize: 12 }}>Keyingi iteratsiyada qurib chiqamiz — birinchi bo'lib <strong>Bosh sahifa</strong>ga e'tibor qaratdik.</div>
            </div>
          </div>
        );
      }
    }
  };

  return (
    <div className="app">
      <Sidebar current={route} onNav={nav} />
      <Topbar lang={lang} onLang={setLang} />
      <main className="main">{renderRoute()}</main>
      <StatusBar />
    </div>
  );
}

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