// Main App
function App(){
  const [view, setView] = useState('dashboard');
  const [collapsed, setCollapsed] = useState(false);

  const titles = {
    dashboard:'Dashboard',
    cashflow:'Daily Cash Flow',
    decision:'Make Decision',
    general:'General Information',
    selling:'Selling Expenses',
    analytics:'Analytics',
    settings:'Settings',
  };

  // Allow URL hash routing
  useEffect(()=>{
    const fromHash = () => {
      const h = window.location.hash.replace('#','');
      if (h && titles[h]) setView(h);
    };
    fromHash();
    window.addEventListener('hashchange', fromHash);
    return ()=>window.removeEventListener('hashchange', fromHash);
  },[]);

  useEffect(()=>{ window.location.hash = view; }, [view]);

  // Keyboard shortcuts: ⌘K to focus search, G+letter to navigate
  useEffect(()=>{
    let waitingG = false; let timer = null;
    const onKey = (e) => {
      // ⌘K / Ctrl+K
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'){
        e.preventDefault();
        const input = document.querySelector('.search input');
        input && input.focus();
        return;
      }
      // skip if typing
      const tag = (e.target.tagName||'').toLowerCase();
      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
      if (e.key === '?'){ window.toast('Press G then a letter to navigate (D/F/M/G/A/S)', {title:'Shortcut hint'}); return; }
      if (waitingG){
        waitingG = false; clearTimeout(timer);
        const map = { d:'dashboard', f:'cashflow', m:'decision', g:'general', e:'selling', a:'analytics', s:'settings' };
        const v = map[e.key.toLowerCase()];
        if (v){ setView(v); window.toast('→ '+titles[v]); }
        return;
      }
      if (e.key.toLowerCase() === 'g'){
        waitingG = true;
        timer = setTimeout(()=> waitingG = false, 1500);
      }
    };
    window.addEventListener('keydown', onKey);
    return ()=>window.removeEventListener('keydown', onKey);
  },[]);

  const handleNav = (id) => setView(id);

  const Views = {
    dashboard:  <DashboardView onNav={handleNav}/>,
    cashflow:   <DashboardView onNav={handleNav}/>,
    decision:   <MakeDecisionView onNav={handleNav}/>,
    general:    <GeneralInfoView onNav={handleNav}/>,
    selling:    <SellingExpensesView onNav={handleNav}/>,
    analytics:  <AnalyticsView onNav={handleNav}/>,
    settings:   <SettingsView onNav={handleNav}/>,
  };

  return (
    <div className={"app"+(collapsed?' collapsed':'')}>
      <Sidebar active={view} onNav={handleNav} collapsed={collapsed} onToggle={()=>setCollapsed(c=>!c)}/>
      <main>
        <Topbar title={titles[view]} breadcrumb={titles[view]} onToggleSide={()=>setCollapsed(c=>!c)} onNav={handleNav}/>
        {Views[view]}
      </main>
    </div>
  );
}

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