// App root — routing, tweaks, command palette wiring
(function() {
  const { useState, useEffect } = React;

  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "dark",
    "density": "medium",
    "font": "editorial",
    "accent": "amber",
    "mode": "web"
  }/*EDITMODE-END*/;

  const ACCENTS = {
    amber:   { h: 38,  name: 'Amber' },
    cyan:    { h: 210, name: 'Cyan'  },
    lime:    { h: 125, name: 'Lime'  },
    magenta: { h: 340, name: 'Rose'  },
    violet:  { h: 290, name: 'Violet'},
  };

  function App() {
    const initial = (() => {
      try {
        const saved = JSON.parse(localStorage.getItem('bankx.tweaks') || 'null');
        return { ...DEFAULTS, ...(saved || {}) };
      } catch { return { ...DEFAULTS }; }
    })();
    const initialRoute = localStorage.getItem('bankx.route') || 'home-mkt';

    const [route, setRoute] = useState(initialRoute);
    const [cmdkOpen, setCmdk] = useState(false);
    const [tweaks, setTweaks] = useState(initial);
    const [tweakOpen, setTweakOpen] = useState(false);
    const [editMode, setEditMode] = useState(false);

    useEffect(() => {
      document.documentElement.dataset.theme = tweaks.theme;
      document.documentElement.dataset.density = tweaks.density;
      document.documentElement.dataset.font = tweaks.font;
      document.documentElement.style.setProperty('--accent-h', ACCENTS[tweaks.accent].h);
      document.documentElement.style.setProperty('--accent', `oklch(0.78 0.17 ${ACCENTS[tweaks.accent].h})`);
      document.documentElement.style.setProperty('--accent-dim', `oklch(0.62 0.14 ${ACCENTS[tweaks.accent].h})`);
      document.documentElement.style.setProperty('--accent-bg', `oklch(0.78 0.17 ${ACCENTS[tweaks.accent].h} / 0.12)`);
      localStorage.setItem('bankx.tweaks', JSON.stringify(tweaks));
    }, [tweaks]);

    useEffect(() => { localStorage.setItem('bankx.route', route); }, [route]);

    useEffect(() => {
      const onKey = (e) => {
        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setCmdk(v => !v); }
        if ((e.metaKey || e.ctrlKey) && e.key === ',') { e.preventDefault(); setTweakOpen(v => !v); }
      };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, []);

    // Tweaks integration with host
    useEffect(() => {
      const onMsg = (e) => {
        const d = e.data || {};
        if (d.type === '__activate_edit_mode') { setEditMode(true); setTweakOpen(true); }
        if (d.type === '__deactivate_edit_mode') { setEditMode(false); setTweakOpen(false); }
      };
      window.addEventListener('message', onMsg);
      window.parent && window.parent.postMessage({ type: '__edit_mode_available' }, '*');
      return () => window.removeEventListener('message', onMsg);
    }, []);

    const setTweak = (k, v) => {
      setTweaks(t => {
        const n = { ...t, [k]: v };
        window.parent && window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
        return n;
      });
    };

    // data mode = dense reports experience
    useEffect(() => {
      if (tweaks.mode === 'data' && route !== 'reports') setRoute('reports');
    }, [tweaks.mode]);

    const goto = (id) => setRoute(id);

    // Mode swap: web vs terminal vs mobile vs data
    if (tweaks.mode === 'terminal') {
      const TV = window.TerminalView;
      return (
        <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', background: '#050507' }}>
          {TV && <TV />}
          {tweakOpen && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => setTweakOpen(false)} />}
        </div>
      );
    }

    const Dashboard = window.DashboardView;
    const Txns = window.TransactionsView;
    const Budget = window.BudgetView;
    const Reports = window.ReportsView;
    const Rules = window.RulesView;
    const Tax = window.TaxView;
    const Term = window.TerminalView;
    const Api = window.ApiView;
    const Mcp = window.McpView;
    const Landing = window.LandingView;
    const ReportsPages = window.ReportsPages || {};
    const MarketsPages = window.MarketsPages || {};
    let view;
    if (route.startsWith('reports/')) {
      const key = route.slice('reports/'.length);
      const Page = ReportsPages[key];
      view = Page ? <Page goto={goto} /> : (Reports && <Reports goto={goto} />);
    } else if (route.startsWith('markets/') || route === 'markets') {
      const key = route === 'markets' ? 'markets/overview' : route;
      const Page = MarketsPages[key];
      view = Page ? <Page goto={goto} /> : (MarketsPages['markets/overview'] && React.createElement(MarketsPages['markets/overview'], { goto }));
    } else {
      switch (route) {
        case 'home':     view = Dashboard && <Dashboard />; break;
        case 'txns':     view = Txns && <Txns />; break;
        case 'budget':   view = Budget && <Budget />; break;
        case 'reports':  view = ReportsPages['overview'] ? React.createElement(ReportsPages['overview'], { goto }) : (Reports && <Reports goto={goto} />); break;
        case 'rules':    view = Rules && <Rules />; break;
        case 'tax':      view = Tax && <Tax />; break;
        case 'term':     view = Term && <Term />; break;
        case 'api':      view = Api && <Api />; break;
        case 'mcp':      view = Mcp && <Mcp />; break;
        case 'home-mkt': view = Landing && <Landing />; break;
        default:         view = Dashboard && <Dashboard />;
      }
    }
    const ShellTopbar = window.Shell && window.Shell.Topbar;
    const ShellTape = window.Shell && window.Shell.Tape;
    const ShellSidebar = window.Shell && window.Shell.Sidebar;
    const ShellStatus = window.Shell && window.Shell.Statusbar;
    const ShellCmdk = window.Shell && window.Shell.Cmdk;

    if (tweaks.mode === 'mobile') {
      return (
        <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-0)', padding: 20, flexDirection: 'column', gap: 16 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>bankx · iphone 15 pro · 1:1 mock</div>
          <div style={{ width: 390, height: 780, border: '10px solid #1a1a1a', borderRadius: 48, overflow: 'hidden', background: 'var(--bg-0)', boxShadow: '0 40px 80px rgba(0,0,0,0.5)' }}>
            <MobileView goto={goto} route={route} />
          </div>
          {tweakOpen && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => setTweakOpen(false)} />}
        </div>
      );
    }

    return (
      <div className="app">
        {ShellTopbar && <ShellTopbar onCmd={() => setCmdk(true)} />}
        {ShellTape && <ShellTape />}
        {ShellSidebar && <ShellSidebar route={route} goto={goto} />}
        <main className="main">{view}</main>
        {ShellStatus && <ShellStatus />}
        {cmdkOpen && ShellCmdk && <ShellCmdk onClose={() => setCmdk(false)} goto={goto} />}
        {tweakOpen && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => setTweakOpen(false)} />}
        {!tweakOpen && !editMode && <button className="btn" style={{ position: 'fixed', bottom: 34, right: 14, zIndex: 50 }} onClick={() => setTweakOpen(true)}>Tweaks <kbd>⌘,</kbd></button>}
      </div>
    );
  }

  function TweaksPanel({ tweaks, setTweak, onClose }) {
    const Row = ({ label, value, options, cls, render }) => (
      <div className="tweak-row">
        <div className="label">{label}</div>
        <div className={'tweak-opts ' + (cls||'')}>
          {options.map(o => (
            <div key={o.id} className={'tweak-opt ' + (tweaks[value] === o.id ? 'on' : '') + (render ? ' swatch' : '')}
                 style={render ? { '--_c': render(o) } : {}}
                 onClick={() => setTweak(value, o.id)}>{o.label}</div>
          ))}
        </div>
      </div>
    );
    return (
      <div className="tweaks">
        <div className="tweaks-head">
          <span>Tweaks</span>
          <button className="btn" style={{ padding: '2px 6px' }} onClick={onClose}>✕</button>
        </div>
        <div className="tweaks-body">
          <Row label="Mode" value="mode" cls="four" options={[
            { id: 'web', label: 'Web' },
            { id: 'terminal', label: 'Term' },
            { id: 'mobile', label: 'iOS' },
            { id: 'data', label: 'Data' },
          ]} />
          <Row label="Theme" value="theme" options={[
            { id: 'dark', label: 'Dark' },
            { id: 'light', label: 'Light' },
          ]} />
          <Row label="Density" value="density" cls="three" options={[
            { id: 'compact', label: 'Compact' },
            { id: 'medium',  label: 'Medium'  },
            { id: 'comfortable', label: 'Comfy' },
          ]} />
          <Row label="Type pairing" value="font" cls="three" options={[
            { id: 'editorial', label: 'Serif+' },
            { id: 'humanist',  label: 'Sans' },
            { id: 'technical', label: 'Mono' },
          ]} />
          <Row label="Accent" value="accent" cls="four"
            options={Object.entries(ACCENTS).map(([id, v]) => ({ id, label: v.name }))}
            render={o => `oklch(0.78 0.17 ${ACCENTS[o.id].h})`} />
        </div>
      </div>
    );
  }

  // Mobile view (condensed)
  function MobileView({ goto, route }) {
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-0)', color: 'var(--fg-0)', fontFamily: 'var(--font-body, var(--font-sans))' }}>
        <div style={{ padding: '50px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22 }}>bank<em style={{ color: 'var(--accent)' }}>x</em></div>
          <span className="chip live"><span className="dot pulse" />live</span>
        </div>
        <div style={{ padding: '18px 20px 10px' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>Operating · ••0142</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 46, letterSpacing: '-0.02em', lineHeight: 1 }}>$284,013<span style={{ color: 'var(--fg-3)' }}>.42</span></div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--pos)', marginTop: 4 }}>+$12,840 · 30d</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, padding: '4px 20px 14px' }}>
          {['Send','Request','Tag','Close'].map(a => (
            <div key={a} style={{ padding: '10px 0', textAlign: 'center', border: '1px solid var(--line-2)', fontSize: 11, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--fg-1)' }}>{a}</div>
          ))}
        </div>
        <div style={{ flex: 1, overflow: 'auto', borderTop: '1px solid var(--line)' }}>
          {DATA.transactions.slice(0, 10).map(t => (
            <div key={t.id} style={{ padding: '10px 20px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 13 }}>{t.merchant}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{t.ts} · {DATA.categories[t.cat].label.toLowerCase()}</div>
              </div>
              <div className="num" style={{ color: t.amount < 0 ? 'var(--fg-0)' : 'var(--pos)', fontSize: 13 }}>
                {t.amount < 0 ? '−$' : '+$'}{Math.abs(t.amount).toLocaleString('en-US', { minimumFractionDigits: 2 })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--line)', padding: '12px 20px 30px', display: 'flex', justifyContent: 'space-around' }}>
          {['Home','Txns','Budget','Rules','You'].map(x => (
            <div key={x} className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: x === 'Home' ? 'var(--accent)' : 'var(--fg-3)' }}>{x}</div>
          ))}
        </div>
      </div>
    );
  }

  window.App = App;
  // signal ready for bootstrap
  window.__bankxReady = true;
})();