// Opalus — app shell: context, nav, router, tweaks, mount
const { Logo, Avatar } = window.OpalusDesignSystem_1dce4b;
const SH = window.OpalusDesignSystem_1dce4b;

const OpalusCtx = React.createContext(null);
window.useOpalus = () => React.useContext(OpalusCtx);

const NAV = [
  { key: 'dashboard', label: 'Portfolio', Icon: SH.IconlyRegularLightCategory },
  { key: 'browse', label: 'Invest', Icon: SH.IconlyRegularLightGraph },
  { key: 'wallet', label: 'Wallet', Icon: SH.IconlyRegularLightActivity },
  { key: 'documents', label: 'Documents', Icon: SH.IconlyRegularLightPaper },
];

/* ---------------- top nav ---------------- */
function TopNav({ active, go, investor, chrome, onSignOut, locale, setLocale, guest }) {
  const light = chrome === 'light';
  const [menu, setMenu] = useState(false);
  const navActive = ['dashboard', 'browse', 'project', 'invest'].includes(active) && active === 'browse' ? 'browse'
    : active === 'project' || active === 'invest' ? 'browse' : active;
  const fg = light ? 'var(--text-body)' : 'rgba(255,255,255,0.82)';
  const fgActive = light ? 'var(--bronze-700)' : 'var(--bronze-400)';
  // Guests (logged-out public browse, BRD §7.5) see only the project listing; account chrome is
  // replaced by a sign-in action.
  const links = guest ? NAV.filter(({ key }) => key === 'browse') : NAV;
  return (
    <header style={{ background: light ? '#fff' : 'var(--navy-950)', borderBottom: light ? '1px solid var(--border-faint)' : 'none', height: 72, display: 'flex', alignItems: 'center', padding: '0 28px', gap: 36, position: 'sticky', top: 0, zIndex: 20 }}>
      <Logo variant={light ? 'navy' : 'white'} height={32} base="assets/logo" />
      <nav className="opx-topnav-links" style={{ display: 'flex', gap: 28 }}>
        {links.map(({ key, label }) => {
          const on = navActive === key;
          return <button key={key} type="button" onClick={() => go(key)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', fontWeight: on ? 600 : 400, color: on ? fgActive : fg, padding: '8px 0', borderBottom: on ? '2px solid var(--bronze-500)' : '2px solid transparent' }}>{label}</button>;
        })}
      </nav>
      <div className="opx-topnav-meta" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 18 }}>
        {/* EN/FR locale toggle — persists users.preferred_locale (BRD-9.1 multilang) */}
        <div role="group" aria-label="Language" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: fg }}>EUR ·</span>
          {['en', 'fr'].map((lc) => {
            const on = locale === lc;
            return <button key={lc} type="button" onClick={() => setLocale(lc)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 5px', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: on ? 600 : 400, color: on ? fgActive : fg, borderBottom: on ? '2px solid var(--bronze-500)' : '2px solid transparent' }}>{lc.toUpperCase()}</button>;
          })}
        </div>
        {guest && (
          <SH.Button variant="primary" size="sm" onClick={() => go('welcome')}>Sign in</SH.Button>
        )}
        {!guest && (
        <button type="button" onClick={() => go('account', { tab: 'notifications' })} title="Notifications" style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: light ? 'var(--surface-inset)' : 'rgba(255,255,255,0.1)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', border: 'none' }}>
          <SH.IconlyRegularLightNotification style={{ width: 21, height: 21, color: light ? 'var(--navy-700)' : '#fff' }} />
        </button>
        )}
        {!guest && (
        <div style={{ position: 'relative' }}>
          <button type="button" onClick={() => setMenu(!menu)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', display: 'inline-flex' }}>
            <Avatar src={investor.avatar} name={investor.name} size={40} ring />
          </button>
          {menu && (
            <>
              <div onClick={() => setMenu(false)} style={{ position: 'fixed', inset: 0, zIndex: 25 }} />
              <div style={{ position: 'absolute', right: 0, top: 50, zIndex: 26, background: '#fff', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-faint)', minWidth: 200, padding: 6, overflow: 'hidden' }}>
                <div style={{ padding: '8px 12px 10px' }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{investor.name}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>{investor.email}</div>
                </div>
                {[['Settings', 'settings'], ['Notifications', 'notifications'], ['Messages', 'messages'], ['Complaints', 'complaints'], ['Data & privacy', 'data']].map(([label, tab]) => (
                  <button key={tab} type="button" onClick={() => { setMenu(false); go('account', { tab }); }} style={{ display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer', border: 'none', background: 'none', fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-body)', padding: '9px 12px', borderRadius: 6 }}>{label}</button>
                ))}
                <div style={{ height: 1, background: 'var(--border-faint)', margin: '6px 0' }} />
                <button type="button" onClick={() => { setMenu(false); onSignOut(); }} style={{ display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer', border: 'none', background: 'none', fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--danger-600)', padding: '9px 12px', borderRadius: 6 }}>Sign out</button>
              </div>
            </>
          )}
        </div>
        )}
      </div>
    </header>
  );
}

/* ---------------- mobile bottom bar ---------------- */
function BottomBar({ active, go }) {
  const navActive = active === 'project' || active === 'invest' ? 'browse' : active;
  return (
    <div className="opx-bottombar" style={{ position: 'fixed', bottom: 0, left: 0, right: 0, height: 64, background: 'var(--navy-950)', zIndex: 30, alignItems: 'stretch', justifyContent: 'space-around', paddingBottom: 'env(safe-area-inset-bottom)' }}>
      {NAV.map(({ key, label, Icon }) => {
        const on = navActive === key;
        return (
          <button key={key} type="button" onClick={() => go(key)} style={{ flex: 1, background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3, color: on ? 'var(--bronze-400)' : 'rgba(255,255,255,0.7)' }}>
            <Icon style={{ width: 22, height: 22, color: 'currentColor' }} />
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: on ? 600 : 400 }}>{label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ---------------- tweaks ---------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardStyle": "editorial",
  "density": "airy",
  "accent": "bronze",
  "chrome": "navy"
}/*EDITMODE-END*/;

const ACCENTS = {
  bronze: { '--action-primary': '#a76b34', '--action-primary-hover': '#8a5829' },
  navy: { '--action-primary': '#162159', '--action-primary-hover': '#101838' },
};

/* ---------------- app ---------------- */
function App() {
  const [state, setState] = useState(window.opalusLoad);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { window.opalusSave(state); }, [state]);

  const update = (fn) => setState((prev) => { const next = structuredClone(prev); fn(next); return next; });
  const go = (name, params = {}) => update((s) => { s.route = { name, params }; window.scrollTo(0, 0); });
  const signOut = () => { window.opalusReset(); setState(window.opalusLoad()); };
  const setLocale = (lc) => update((s) => { s.locale = lc; });

  const ctx = { state, update, go, t, setTweak };
  const name = state.route.name;
  const chrome = t.chrome;
  const accentVars = ACCENTS[t.accent] || ACCENTS.bronze;
  const fullscreen = ['welcome', 'onboarding', 'verify', 'twofa', 'calculator', 'reset', 'register'].includes(name);

  let Screen = window.DashboardScreen;
  if (name === 'welcome') Screen = window.Welcome;
  else if (name === 'calculator') Screen = window.PublicCalculator;
  else if (name === 'register') Screen = window.PublicRegisterScreen;
  else if (name === 'reset') Screen = window.PasswordResetScreen;
  else if (name === 'onboarding') Screen = window.Onboarding;
  else if (name === 'verify') Screen = window.VerifyEmailScreen;
  else if (name === 'twofa') Screen = window.TwoFAScreen;
  else if (name === 'browse') Screen = window.BrowseScreen;
  else if (name === 'project') Screen = window.ProjectScreen;
  else if (name === 'invest') Screen = window.InvestScreen;
  else if (name === 'reflection') Screen = window.ReflectionScreen;
  else if (name === 'withdrawn') Screen = window.WithdrawnScreen;
  else if (name === 'confirmed') Screen = window.ConfirmedScreen;
  else if (name === 'wallet') Screen = window.WalletScreen;
  else if (name === 'documents') Screen = window.DocumentsScreen;
  else if (name === 'investment') Screen = window.InvestmentDetailScreen;
  else if (name === 'account') Screen = window.AccountScreen;
  else if (name === 'interstitial') Screen = window.InterstitialScreen;

  // Logged-out visitors may browse projects with marketing-level info (BRD §7.5); the chrome
  // swaps account controls for a sign-in action and hides the private-area bottom bar.
  const guest = !state.signedIn;
  return (
    <OpalusCtx.Provider value={ctx}>
      <div data-density={t.density} style={{ ...accentVars, minHeight: '100vh' }}>
        {!fullscreen && <TopNav active={name} go={go} investor={state.investor} chrome={chrome} onSignOut={signOut} locale={state.locale || 'en'} setLocale={setLocale} guest={guest} />}
        <Screen />
        {!fullscreen && !guest && <BottomBar active={name} go={go} />}
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Browse cards" />
        <window.TweakRadio label="Card style" value={t.cardStyle} options={['editorial', 'data']} onChange={(v) => setTweak('cardStyle', v)} />
        <window.TweakSection label="Layout" />
        <window.TweakRadio label="Density" value={t.density} options={['airy', 'compact']} onChange={(v) => setTweak('density', v)} />
        <window.TweakRadio label="Top chrome" value={t.chrome} options={['navy', 'light']} onChange={(v) => setTweak('chrome', v)} />
        <window.TweakSection label="Accent" />
        <window.TweakColor label="Primary action" value={accentVars['--action-primary']} options={['#a76b34', '#162159']} onChange={(v) => setTweak('accent', v === '#162159' ? 'navy' : 'bronze')} />
      </window.TweaksPanel>
    </OpalusCtx.Provider>
  );
}

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