const { useState: useStateApp, useEffect: useEffectApp } = React;

function SidePanel({ title, onClose, children, width = '480px' }) {
  return (
    <>
      <div className="side-panel-overlay" onClick={onClose} />
      <div className="side-panel" style={{width}}>
        <div className="side-panel-header">
          <div style={{fontSize:18, fontWeight:700, color:'var(--text)'}}>{title}</div>
          <button className="side-panel-close" onClick={onClose}>✕</button>
        </div>
        {children}
      </div>
    </>
  );
}

function DesktopHeader({ screen, navigate, onSignOut, openPanel, demoMode }) {
  const navItems = [
    { id:'dashboard', label:'Home', icon:'🏠' },
    { id:'tax', label:'Tax', icon:'🧾' },
  ];

  return (
    <>
    {localStorage.getItem('fliptaxy_is_demo') === 'true' && (
      <div style={{
        position: 'fixed', top: 60, left: 0, right: 0,
        background: '#1a1a1a', color: 'white',
        padding: '8px 24px', fontSize: 13, fontWeight: 500,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 16, zIndex: 99,
      }}>
        <span>👀 Demo mode — your data is saved temporarily. Sign up to keep it forever.</span>
        <button onClick={() => { localStorage.removeItem('fliptaxy_is_demo'); window.location.reload(); }}
          style={{background:'white', color:'#1a1a1a', border:'none', borderRadius:8, padding:'4px 12px', fontSize:12, fontWeight:700, cursor:'pointer'}}>
          Save my data →
        </button>
      </div>
    )}
    <div className="dashboard-header">
      <div style={{display:'flex', alignItems:'center', gap:32}}>
        <button onClick={() => navigate('dashboard')}
          style={{
            fontSize:26, fontWeight:700, letterSpacing:'-1px', color:'var(--text)', fontFamily:'Inter,sans-serif',
            background: 'none', border: 'none', cursor: 'pointer', padding: 0
          }}>
          flip<span style={{color:'var(--green)'}}>taxy</span>
        </button>
        <div style={{display:'flex', gap:4}}>
          {navItems.map(item => (
            <button key={item.id} onClick={() => navigate(item.id)}
              style={{
                padding:'8px 16px', borderRadius:10, border:'none', cursor:'pointer',
                background: screen === item.id ? 'var(--text)' : 'transparent',
                color: screen === item.id ? 'white' : 'var(--text-muted)',
                fontSize:13, fontWeight:600, fontFamily:'inherit',
                display:'flex', alignItems:'center', gap:6, transition:'all 0.15s',
              }}>
              <span>{item.icon}</span>{item.label}
            </button>
          ))}
        </div>
      </div>
      <div style={{display:'flex', alignItems:'center', gap:12}}>
        <button onClick={() => openPanel('flips')}
          style={{padding:'8px 16px', borderRadius:10, border:'1px solid var(--border)', background:'var(--surface)', cursor:'pointer', fontSize:13, fontWeight:600, fontFamily:'inherit', color:'var(--text)'}}>
          All Flips
        </button>
        <button onClick={() => openPanel('log')}
          style={{padding:'8px 16px', borderRadius:10, border:'none', background:'var(--text)', color:'white', cursor:'pointer', fontSize:13, fontWeight:700, fontFamily:'inherit'}}>
          + Log Flip
        </button>
        <button onClick={onSignOut}
          style={{padding:'8px 16px', borderRadius:10, border:'1px solid var(--border)', background:'var(--surface)', cursor:'pointer', fontSize:13, color:'var(--text-muted)', fontFamily:'inherit'}}>
          Sign out
        </button>
      </div>
    </div>
    </>
  );
}

function App() {
  const [session, setSession] = useStateApp(null);
  const [authLoading, setAuthLoading] = useStateApp(true);
  const [screen, setScreen] = useStateApp('dashboard');
  const [panel, setPanel] = useStateApp(null); // 'log' | 'flips' | 'overhead'
  const { loading: dataLoading, demoMode } = useStore();

  useEffectApp(() => {
    supabaseClient.auth.getSession().then(async ({ data: { session } }) => {
      setSession(session);
      if (session) {
        const { data: { user } } = await supabaseClient.auth.getUser();
        if (user?.is_anonymous) {
          localStorage.setItem('fliptaxy_is_demo', 'true');
        }
      }
      setAuthLoading(false);
    });
    const { data: { subscription } } = supabaseClient.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
    return () => subscription.unsubscribe();
  }, []);

  async function handleSignOut() {
    await supabaseClient.auth.signOut();
    setSession(null);
  }

  function navigate(s) {
    // Panel screens
    if (['log', 'flips', 'overhead'].includes(s)) {
      setPanel(s);
      return;
    }
    setPanel(null);
    setScreen(s);
  }

  function openPanel(s) { setPanel(s); }
  function closePanel() { setPanel(null); }

  if (authLoading) return (
    <div style={{height:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'#f2f2f7',fontFamily:'Inter,sans-serif',flexDirection:'column',gap:12}}>
      <div style={{fontSize:24,fontWeight:700,letterSpacing:'-1px'}}>flip<span style={{color:'#2d7a14'}}>taxy</span></div>
      <div style={{fontSize:13,color:'#aaa'}}>Loading…</div>
    </div>
  );

  if (!session) return <LoginScreen onLogin={setSession} />;

  if (dataLoading) return (
    <div style={{height:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'#f2f2f7',fontFamily:'Inter,sans-serif',flexDirection:'column',gap:12}}>
      <div style={{fontSize:24,fontWeight:700,letterSpacing:'-1px'}}>flip<span style={{color:'#2d7a14'}}>taxy</span></div>
      <div style={{fontSize:13,color:'#aaa'}}>Syncing your flips…</div>
    </div>
  );

  const panelTitles = { log: 'Log a flip', flips: 'All flips', overhead: 'Overhead costs', insights: 'Insights' };
  const panelWidths = { insights: '700px' };

  return (
    <div style={{height:'100vh', overflow:'hidden', background:'var(--bg)'}}>
      <DesktopHeader screen={screen} navigate={navigate} onSignOut={handleSignOut} openPanel={openPanel} demoMode={demoMode} />
      <div style={{paddingTop:60, height:'100vh', overflow:'hidden'}}>
        {screen === 'dashboard' && <DesktopDashboard navigate={navigate} openPanel={openPanel} />}
        {screen === 'tax'       && <div style={{height:'calc(100vh - 64px)', overflowY:'auto'}}><TaxScreen /></div>}
      </div>

      {panel && (
        <SidePanel title={panelTitles[panel]} onClose={closePanel} width={panelWidths[panel] || '480px'}>
          {panel === 'log'      && <LogScreen navigate={(s) => { closePanel(); if (!['log','flips','overhead'].includes(s)) setScreen(s); }} />}
          {panel === 'flips'    && <FlipsScreen navigate={navigate} />}
          {panel === 'overhead' && <OverheadScreen navigate={navigate} />}
          {panel === 'insights' && <InsightsScreen navigate={navigate} />}
        </SidePanel>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(StoreProvider, null,
    React.createElement(App)
  )
);