/* global React, ReactDOM, window */
const { useState: useS, useEffect: useE } = React;

const VIEWS = [
  { id: 'portal',       label: 'Sovereign Gateway',    short: 'Gateway',      Component: () => <PortalView/> },
  { id: 'portfolio',    label: 'Portfolio & Registry', short: 'Portfolio',    Component: () => <PortfolioView/> },
  { id: 'underwriting', label: 'Underwriting Room',    short: 'Underwriting', Component: () => <UnderwritingView/> },
  { id: 'boardroom',    label: 'Boardroom & Audit',    short: 'Boardroom',    Component: () => <BoardroomView/> },
  { id: 'marketplace',  label: 'Secondary Registry',   short: 'Market',       Component: () => <MarketplaceView/> },
  { id: 'glassbox',     label: 'Audit Trail',          short: 'Glass-Box',    Component: () => <GlassboxView/> },
];

const loadStored = () => {
  try { return JSON.parse(localStorage.getItem('argyle') || '{}'); } catch { return {}; }
};
const saveStored = (s) => { try { localStorage.setItem('argyle', JSON.stringify(s)); } catch {} };

const App = () => {
  const stored = loadStored();
  const defaults = window.__ARGYLE_DEFAULTS || {};
  const [view, setView] = useS(stored.view || 'portfolio');
  const [theme, setTheme] = useS(stored.theme || defaults.theme || 'ivory-amber');
  const [nav, setNav]     = useS(stored.nav   || defaults.nav   || 'top');
  const [density, setDensity] = useS(stored.density || defaults.density || 'comfortable');
  const [editMode, setEditMode] = useS(false);

  useE(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-density', density);
  }, [theme, density]);

  useE(() => { saveStored({ view, theme, nav, density }); }, [view, theme, nav, density]);

  // Edit mode host contract
  useE(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persistEdit = (edits) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  const Current = VIEWS.find(v => v.id === view).Component;

  // Top-nav mode (default per user request)
  if (nav === 'top') {
    return (
      <div className="app" data-screen-label={VIEWS.find(v=>v.id===view).label}>
        <header className="topbar">
          <div className="topbar__brand">
            <Logomark />
            <span>Argyle Partners</span>
          </div>
          <div className="topbar__meta">
            Cell suite · <b>Base L2</b> · blk <b>18,440,219</b>
          </div>
          <nav className="topbar__nav" style={{justifyContent:'center'}}>
            {VIEWS.map(v => (
              <button key={v.id} className="navlink"
                      aria-current={view===v.id ? 'page' : undefined}
                      onClick={() => setView(v.id)}>
                <span className="navlink__dot"/><span>{v.label}</span>
              </button>
            ))}
          </nav>
          <div className="topbar__right">
            <button className="btn btn--icon btn--sm" title="Search"><Icon name="search" size={14}/></button>
            <button className="btn btn--icon btn--sm" title="Notifications"><Icon name="bell" size={14}/></button>
            <div className="btn btn--sm" style={{padding:'0 6px 0 10px', gap:8}}>
              <div style={{width:22, height:22, borderRadius:'50%', background:'var(--amber)', color:'white',
                display:'grid', placeItems:'center', fontFamily:'var(--font-display)', fontSize:11, fontWeight:600}}>EV</div>
              <span className="text-sm">e.valdes</span>
              <Icon name="chev" size={12}/>
            </div>
          </div>
        </header>
        <Current/>
        {editMode && <TweaksPanel
          theme={theme} setTheme={(v)=>{setTheme(v); persistEdit({theme:v});}}
          nav={nav}     setNav={(v)=>{setNav(v); persistEdit({nav:v});}}
          density={density} setDensity={(v)=>{setDensity(v); persistEdit({density:v});}} />}
      </div>
    );
  }

  // Sidebar mode
  return (
    <div className={`shell--side ${nav==='side-collapsed'?'collapsed':''}`} data-screen-label={VIEWS.find(v=>v.id===view).label}>
      <aside className="sidebar">
        <div className="topbar__brand"><Logomark/><span>Argyle Partners</span></div>
        <div className="sidebar__group">Platform</div>
        {VIEWS.map(v => (
          <button key={v.id} className="navlink"
                  aria-current={view===v.id ? 'page' : undefined}
                  onClick={()=>setView(v.id)} title={v.label}>
            <span className="navlink__dot"/><span>{v.label}</span>
          </button>
        ))}
        <div className="sidebar__group">Session</div>
        {['Search','Notifications','Profile','Settings'].map(x => (
          <button key={x} className="navlink"><span className="navlink__dot"/><span>{x}</span></button>
        ))}
      </aside>
      <main>
        <Current/>
        {editMode && <TweaksPanel
          theme={theme} setTheme={(v)=>{setTheme(v); persistEdit({theme:v});}}
          nav={nav}     setNav={(v)=>{setNav(v); persistEdit({nav:v});}}
          density={density} setDensity={(v)=>{setDensity(v); persistEdit({density:v});}} />}
      </main>
    </div>
  );
};

const TweaksPanel = ({ theme, setTheme, nav, setNav, density, setDensity }) => (
  <div className="tweaks">
    <div className="tweaks__head">
      <span>Tweaks</span>
      <span className="mono text-sm muted">argyle.os</span>
    </div>
    <div className="tweaks__body">
      <div className="tweaks__row">
        <label>Color theme</label>
        <Segmented value={theme} onChange={setTheme} options={[
          {value:'ivory-amber', label:'Ivory'},
          {value:'sepia-gilt',  label:'Sepia'},
          {value:'navy-dark',   label:'Dark'},
        ]}/>
      </div>
      <div className="tweaks__row">
        <label>Navigation</label>
        <Segmented value={nav} onChange={setNav} options={[
          {value:'top',             label:'Top'},
          {value:'side',            label:'Sidebar'},
          {value:'side-collapsed',  label:'Rail'},
        ]}/>
      </div>
      <div className="tweaks__row">
        <label>Density</label>
        <Segmented value={density} onChange={setDensity} options={[
          {value:'comfortable', label:'Comfortable'},
          {value:'compact',     label:'Compact'},
        ]}/>
      </div>
    </div>
  </div>
);

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