// App root — auth gate, page router, tweaks panel, state provider.

const Spinner = () => (
  <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface)' }}>
    <div style={{ width: 32, height: 32, borderRadius: '50%', border: '3px solid var(--line)', borderTopColor: 'var(--ink)', animation: 'spin 0.7s linear infinite' }} />
  </div>
);

const App = () => (
  <AuthProvider>
    <AppRoot />
  </AuthProvider>
);

const AppRoot = () => {
  const { user, authLoading } = useAuth();
  const inviteToken = React.useMemo(() => new URLSearchParams(window.location.search).get('invite'), []);
  const initialTweaks = (() => {
    try {
      return JSON.parse(document.getElementById('initial-tweaks').textContent.replace(/^\/\*EDITMODE-BEGIN\*\//, '').replace(/\/\*EDITMODE-END\*\/$/, ''));
    } catch (e) { return { mode: 'single' }; }
  })();

  const [tweaks, setTweak] = useTweaks(initialTweaks);
  const [page, setPage] = React.useState('dashboard');
  const mode = tweaks.mode || 'single';
  const setMode = (m) => setTweak('mode', m);

  React.useEffect(() => {
    if (mode === 'single' && page === 'household') setPage('dashboard');
  }, [mode, page]);

  if (authLoading) return <Spinner />;
  if (!user) return <AuthScreen inviteToken={inviteToken} />;

  return (
    <StateProvider mode={mode} setMode={setMode}>
      <AppShell page={page} setPage={setPage} mode={mode} setMode={setMode} tweaks={tweaks} setTweak={setTweak} inviteToken={inviteToken}/>
    </StateProvider>
  );
};

const HouseholdAvatars = ({ setPage }) => {
  const { user } = useAuth();
  const { household } = useAppState();

  const initial = (email) => {
    const meta = user?.user_metadata;
    if (email === user?.email) {
      if (meta?.full_name) return meta.full_name[0].toUpperCase();
      if (meta?.name) return meta.name[0].toUpperCase();
    }
    return (email?.[0] || '?').toUpperCase();
  };

  const avatar = (letter, bg, title) => (
    <div title={title} style={{ width:28, height:28, borderRadius:'50%', background:bg, color:'white', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:600, flexShrink:0, cursor:'pointer' }}
      onClick={() => setPage('household')}>
      {letter}
    </div>
  );

  const hasActivePartner = household?.status === 'active' && household?.partner;

  return (
    <div style={{ display:'flex', alignItems:'center', gap:4 }}>
      {avatar(initial(user?.email), 'var(--ink)', user?.email)}
      {hasActivePartner
        ? avatar(initial(household.partner.email), 'var(--mint-deep)', household.partner.email)
        : (
          <div title="Invite a collaborator"
            onClick={() => setPage('household')}
            style={{ width:28, height:28, borderRadius:'50%', border:'1.5px dashed var(--ink-3)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, color:'var(--ink-3)', cursor:'pointer', transition:'border-color 0.15s, color 0.15s' }}
            onMouseOver={e => { e.currentTarget.style.borderColor='var(--ink)'; e.currentTarget.style.color='var(--ink)'; }}
            onMouseOut={e => { e.currentTarget.style.borderColor='var(--ink-3)'; e.currentTarget.style.color='var(--ink-3)'; }}
          >+</div>
        )
      }
    </div>
  );
};

const AppShell = ({ page, setPage, mode, setMode, tweaks, setTweak, inviteToken }) => {
  const { state, clearAll, loadDemo, acceptHousehold } = useAppState();
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
  const [inviteError, setInviteError] = React.useState('');

  // Accept household invite from URL token
  React.useEffect(() => {
    if (!inviteToken) return;
    window.history.replaceState({}, '', window.location.pathname);
    acceptHousehold(inviteToken)
      .then(() => setPage('household'))
      .catch(err => setInviteError(err.message));
  }, [inviteToken]);

  React.useEffect(() => {
    if (!mobileNavOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMobileNavOpen(false); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [mobileNavOpen]);

  return (
    <div className="app">
      <Sidebar page={page} setPage={setPage} mobileOpen={mobileNavOpen} setMobileOpen={setMobileNavOpen}/>
      <div
        className={`sidebar-backdrop ${mobileNavOpen ? 'open' : ''}`}
        onClick={() => setMobileNavOpen(false)}
        aria-hidden="true"
      />
      <main className="main" key={page}>
        <div className="action-row" style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:-12, marginTop:-8, gap:12}}>
          <button
            className="menu-btn"
            onClick={() => setMobileNavOpen(true)}
            aria-label="Open navigation"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="4" y1="7" x2="20" y2="7"/>
              <line x1="4" y1="12" x2="20" y2="12"/>
              <line x1="4" y1="17" x2="20" y2="17"/>
            </svg>
          </button>
          <div className="row" style={{gap:8, marginLeft:'auto'}}>
            <HouseholdAvatars setPage={setPage}/>
            <div className="mode-toggle">
              <button className={mode === 'single' ? 'active' : ''} onClick={() => setMode('single')}>
                <ISpark size={11}/> Just me
              </button>
              <button className={mode === 'household' ? 'active' : ''} onClick={() => setMode('household')}>
                <IUsers size={11}/> Household
              </button>
            </div>
            {state.transactions.length > 0 && (
              <button className="btn btn-ghost btn-sm hide-mobile" onClick={() => {
                if (confirm('Clear all data? This cannot be undone.')) clearAll();
              }}>Clear data</button>
            )}
          </div>
        </div>

        {inviteError && (
          <div style={{ background:'#fff1f0', border:'1px solid #fca5a5', borderRadius:10, padding:'12px 16px', fontSize:13, color:'#b91c1c', marginBottom:16, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            {inviteError}
            <button onClick={() => setInviteError('')} style={{ background:'none', border:'none', cursor:'pointer', color:'#b91c1c', fontSize:16, lineHeight:1 }}>×</button>
          </div>
        )}

        <div className="fade-up">
          {page === 'dashboard'     && <PageDashboard setPage={setPage}/>}
          {page === 'transactions'  && <PageTransactions/>}
          {page === 'debt'          && <PageDebt/>}
          {page === 'savings'       && <PageSavings/>}
          {page === 'insights'      && <PageInsights/>}
          {page === 'categories'    && <PageCategories/>}
          {page === 'household'     && <PageHousehold/>}
          {page === 'calendar'      && <PageCalendar/>}
          {page === 'networth'      && <PageNetWorth/>}
        </div>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mode"/>
        <TweakRadio label="View as" value={mode} onChange={v => setMode(v)} options={['single', 'household']}/>
        <TweakSection label="Demo data"/>
        <TweakButton label="Load demo data" onClick={loadDemo}/>
        <TweakButton label="Clear all" secondary onClick={() => { if (confirm('Clear all?')) clearAll(); }}/>
      </TweaksPanel>
    </div>
  );
};

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