// Main app shell — sidebar nav + screen routing + tweaks panel
const { useState, useEffect, useMemo, useRef } = React;

function App() {
  const [tweaks, setTweak] = useTweaks({
    "lang": "es",
    "theme": "dark",
    "showTweaks": true
  });

  // Apply theme to document root (font + density are fixed: readable + compact)
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-font', 'readable');
  }, [tweaks.theme]);

  const [screen, setScreen] = useState('landing'); // landing | marketplace | detail | portfolio | company | admin
  const [detailId, setDetailId] = useState(null);
  const [confirmState, setConfirmState] = useState(null); // {oppId, amount}

  const lang = tweaks.lang;
  const setLang = (l) => setTweak('lang', l);

  const goDetail = (id) => { setDetailId(id); setScreen('detail'); };
  const goInvest = (oppId, amount) => setConfirmState({ oppId, amount });
  const closeConfirm = (success) => {
    setConfirmState(null);
    if (success) setScreen('portfolio');
  };

  return (
    <I18nProvider lang={lang} setLang={setLang}>
      {screen === 'landing' ? (
        <>
          <Landing onEnter={() => setScreen('marketplace')} />
          <DividisTweaks tweaks={tweaks} setTweak={setTweak} />
        </>
      ) : (
        <div className="app density-compact">
          <Sidebar screen={screen} setScreen={setScreen} backToLanding={() => setScreen('landing')} />
          <div className="app-main">
            <TopBar />
            <div className="app-scroll">
              {screen === 'marketplace' && <Marketplace onSelect={goDetail} />}
              {screen === 'detail' && <OpportunityDetail id={detailId} onBack={() => setScreen('marketplace')} onInvest={goInvest} />}
              {screen === 'portfolio' && <Portfolio onSelect={goDetail} />}
              {screen === 'company' && <CompanyDashboard />}
              {screen === 'admin' && <AdminPanel />}
            </div>
          </div>

          {confirmState && (
            <ConfirmModal
              oppId={confirmState.oppId}
              amount={confirmState.amount}
              onClose={() => closeConfirm(false)}
              onSuccess={() => closeConfirm(true)}
            />
          )}

          <DividisTweaks tweaks={tweaks} setTweak={setTweak} />
        </div>
      )}
    </I18nProvider>
  );
}

function Sidebar({ screen, setScreen, backToLanding }) {
  const { t, lang } = useT();
  const items = [
    { id: 'marketplace', l: t('nav_marketplace'), icon: 'grid' },
    { id: 'portfolio', l: t('nav_portfolio'), icon: 'chart' },
  ];
  const issuerItems = [
    { id: 'company', l: t('nav_company'), icon: 'building' },
  ];
  const adminItems = [
    { id: 'admin', l: t('nav_admin'), icon: 'shield' },
  ];

  return (
    <aside className="sidebar">
      <div className="sb-logo" onClick={backToLanding}>
        <span style={{ color: 'var(--emerald-2)', fontSize: 20 }}>◈</span>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 17, letterSpacing: '-0.01em' }}>
          Dividis<span style={{ color: 'var(--text-3)', margin: '0 3px' }}>·</span><span style={{ fontStyle: 'italic' }}>Capital</span>
        </span>
      </div>

      <div className="sb-section-l">{lang === 'es' ? 'Inversor' : 'Investor'}</div>
      {items.map(i => (
        <button key={i.id} className={`sb-item ${screen === i.id ? 'active' : ''}`} onClick={() => setScreen(i.id)}>
          <Icon name={i.icon} size={15} />
          <span>{i.l}</span>
        </button>
      ))}

      <div className="sb-section-l">{lang === 'es' ? 'Empresa' : 'Company'}</div>
      {issuerItems.map(i => (
        <button key={i.id} className={`sb-item ${screen === i.id ? 'active' : ''}`} onClick={() => setScreen(i.id)}>
          <Icon name={i.icon} size={15} />
          <span>{i.l}</span>
        </button>
      ))}

      <div className="sb-section-l">{lang === 'es' ? 'Plataforma' : 'Platform'}</div>
      {adminItems.map(i => (
        <button key={i.id} className={`sb-item ${screen === i.id ? 'active' : ''}`} onClick={() => setScreen(i.id)}>
          <Icon name={i.icon} size={15} />
          <span>{i.l}</span>
        </button>
      ))}

      <div className="sb-spacer"></div>

      <div className="sb-user">
        <div className="sb-avatar">AC</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Antonio Carvalho</div>
          <div className="num" style={{ fontSize: 10, color: 'var(--text-3)' }}>{lang === 'es' ? 'Verificado' : 'Verified'} · MiFID II</div>
        </div>
      </div>
    </aside>
  );
}

function TopBar() {
  const { t, lang, setLang } = useT();
  return (
    <div className="topbar">
      <div className="search">
        <Icon name="search" size={14} color="var(--text-3)" />
        <input placeholder={lang === 'es' ? 'Buscar emisor, ISIN, sector…' : 'Search issuer, ISIN, sector…'} />
        <span className="kbd">⌘K</span>
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <button className="btn btn-quiet" style={{ padding: '7px 12px', fontSize: 12 }} onClick={() => setLang(lang === 'es' ? 'en' : 'es')}>
          <Icon name="globe" size={12} /> {lang === 'es' ? 'ES' : 'EN'}
        </button>
        <button className="btn btn-quiet" style={{ padding: '7px 11px' }}>
          <Icon name="bell" size={14} />
        </button>
        <div className="balance">
          <span style={{ fontSize: 11, color: 'var(--text-3)' }}>{lang === 'es' ? 'Saldo' : 'Balance'}</span>
          <span className="num" style={{ fontWeight: 500 }}>€12,438.50</span>
        </div>
      </div>
    </div>
  );
}

function DividisTweaks({ tweaks, setTweak }) {
  const { lang } = useT();
  const L = (es, en) => lang === 'es' ? es : en;
  return (
    <TweaksPanel title="Tweaks" defaultOpen={false}>
      <TweakSection title={L('Tema', 'Theme')} subtitle={L('Esquema cromático de la plataforma', 'Platform color scheme')}>
        <TweakRadio
          value={tweaks.theme}
          options={[{ value: 'dark', label: L('Oscuro', 'Dark') }, { value: 'light', label: L('Claro', 'Light') }]}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweakSection>
      <TweakSection title={L('Idioma', 'Language')} subtitle={L('También accesible desde la cabecera.', 'Also available in the top bar.')}>
        <TweakRadio
          value={tweaks.lang}
          options={[{ value: 'es', label: 'Español' }, { value: 'en', label: 'English' }]}
          onChange={(v) => setTweak('lang', v)}
        />
      </TweakSection>

    </TweaksPanel>
  );
}

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