// ATLAS Accounts Email Agent — app.jsx

function App() {
  const [view,      setView]      = useState('summary');
  const [appState,  setAppState]  = useState(null);
  const [settings,  setSettings]  = useState(null);
  const [scanning,  setScanning]  = useState(false);
  const [toasts,    setToasts]    = useState([]);
  const [lastScan,  setLastScan]  = useState(null);

  const pushToast = (msg) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, msg }]);
  };
  const removeToast = (id) => setToasts(t => t.filter(x => x.id !== id));

  const loadState = useCallback(async () => {
    try {
      const s = await api.get('/api/state');
      setAppState(s);
      setLastScan(s.lastScan);
    } catch(e) { console.error('State load error:', e); }
  }, []);

  const loadSettings = useCallback(async () => {
    try {
      const s = await api.get('/api/settings');
      setSettings(s);
    } catch(e) { console.error('Settings load error:', e); }
  }, []);

  useEffect(() => {
    loadState();
    loadSettings();
    const id = setInterval(loadState, 20000);
    return () => clearInterval(id);
  }, []);

  const handleScan = async () => {
    if (scanning) return;
    setScanning(true);
    pushToast('Scan started…');
    try {
      const result = await api.post('/api/scan', {});
      pushToast(`Scan complete — ${result.processed} processed, ${result.queued} queued`);
      await loadState();
    } catch(e) {
      pushToast('Scan failed: ' + e.message);
    }
    setScanning(false);
  };

  const queueCount   = appState?.queue?.length || 0;
  const overdueCount = (appState?.paymentLog||[]).filter(p =>
    p.status !== 'Paid' && p.dueDate && new Date(p.dueDate) < new Date()
  ).length;

  const nav = [
    { key:'summary',   label:'Summary',         icon: <Icons.chart style={{width:16,height:16}}/> },
    { key:'queue',     label:'Review Queue',     icon: <Icons.inbox style={{width:16,height:16}}/>,  count: queueCount,   urgent: queueCount > 0 },
    { key:'processed', label:'Processed',        icon: <Icons.check style={{width:16,height:16}}/> },
    { key:'payments',  label:'Urgent Payments',  icon: <Icons.money style={{width:16,height:16}}/>,  count: overdueCount, urgent: overdueCount > 0 },
    { key:'settings',  label:'Settings',         icon: <Icons.settings style={{width:16,height:16}}/> },
  ];

  const mins = lastScan ? Math.round((Date.now() - new Date(lastScan)) / 60000) : null;

  return (
    <div className="app-shell">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="brand-icon">A</div>
          <div>
            <div className="brand-name">Accounts Agent</div>
            <div className="brand-sub">accounts@eliteroads.com.au</div>
          </div>
        </div>

        <nav className="sidebar-nav">
          {nav.map(n => (
            <button key={n.key}
              className={`nav-item ${view === n.key ? 'active' : ''}`}
              onClick={() => setView(n.key)}>
              <span className="nav-icon">{n.icon}</span>
              <span className="nav-label">{n.label}</span>
              {n.count > 0 && (
                <span className={`nav-badge ${n.urgent ? 'urgent' : ''}`}>{n.count}</span>
              )}
            </button>
          ))}
        </nav>

        <div className="sidebar-foot">
          <div className="user-chip">
            <div className="user-avatar">M</div>
            <div>
              <div style={{fontWeight:600,fontSize:12,color:'#fff'}}>Mindy</div>
              <div style={{fontSize:11,color:'rgba(255,255,255,.5)'}}>Accountant</div>
            </div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div className="main-wrap">
        {/* Topbar */}
        <header className="topbar">
          <h1 className="topbar-title">
            {nav.find(n=>n.key===view)?.label || 'Summary'}
          </h1>
          <div className="topbar-spacer"/>
          <div className="scan-status">
            <span className={`scan-dot ${scanning ? 'scanning' : ''}`}/>
            {scanning
              ? <span>Scanning…</span>
              : <>
                  <span style={{color:'#1d4ed8',fontWeight:600}}>● Mock Mode</span>
                  {mins !== null && <span style={{color:'#6b7280',fontFamily:'var(--mono)',fontSize:11}}>· last scan {mins}m ago</span>}
                </>
            }
          </div>
          <button className="btn-scan" onClick={handleScan} disabled={scanning}>
            {scanning ? <Icons.spin style={{width:14,height:14}}/> : <Icons.refresh style={{width:14,height:14}}/>}
            {scanning ? 'Scanning…' : 'Scan Now'}
          </button>
        </header>

        {/* View */}
        <main className="main-content">
          {!appState ? (
            <div className="loading-state">
              <Icons.spin style={{width:28,height:28,color:'#9ca3af'}}/>
              <p>Loading…</p>
            </div>
          ) : (
            <>
              {view === 'summary'   && <SummaryView state={appState} onScan={handleScan} scanning={scanning}/>}
              {view === 'queue'     && <ReviewQueueView queue={appState.queue||[]} onRefresh={loadState} pushToast={pushToast}/>}
              {view === 'processed' && <ProcessedView processed={appState.processed||[]} onRefresh={loadState} pushToast={pushToast}/>}
              {view === 'payments'  && <UrgentPaymentsView paymentLog={appState.paymentLog||[]} onRefresh={loadState} pushToast={pushToast}/>}
              {view === 'settings'  && <SettingsView settings={settings} onRefresh={loadSettings} pushToast={pushToast}/>}
            </>
          )}
        </main>
      </div>

      <ToastHost toasts={toasts} remove={removeToast}/>
    </div>
  );
}

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