const { useState: useS, useEffect: useE } = React;

function readDefaults() {
  try {
    const raw = document.getElementById('tweak-defaults').textContent;
    const json = raw.replace(/\/\*EDITMODE-BEGIN\*\//, '').replace(/\/\*EDITMODE-END\*\//, '').trim();
    return JSON.parse(json);
  } catch(e) { return { heroVariant:'A', accent:'pink', dark:false }; }
}

function App() {
  const d = readDefaults();
  const [route, setRoute] = useS(() => localStorage.getItem('holai-route') || 'home');
  const [heroVariant, setHeroVariant] = useS(d.heroVariant || 'A');
  const [accent, setAccent] = useS(d.accent || 'pink');
  const [dark, setDark] = useS(!!d.dark);
  const [editMode, setEditMode] = useS(false);

  useE(() => { localStorage.setItem('holai-route', route); window.scrollTo(0,0); }, [route]);
  useE(() => {
    document.documentElement.dataset.accent = accent;
    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
  }, [accent, dark]);

  const go = (r) => setRoute(r);

  useE(() => {
    function onMsg(e) {
      const m = e.data || {};
      if (m.type === '__activate_edit_mode') setEditMode(true);
      if (m.type === '__deactivate_edit_mode') setEditMode(false);
    }
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setKey = (k, v) => {
    if (k === 'heroVariant') setHeroVariant(v);
    if (k === 'accent') setAccent(v);
    if (k === 'dark') setDark(v);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  const showNav = ['home'].includes(route);

  return (
    <div className="app">
      {showNav && <Nav go={go}/>}
      {route === 'home'      && <Landing go={go} variant={heroVariant}/>}
      {route === 'login'     && <AuthShell mode="login" go={go}/>}
      {route === 'signup'    && <AuthShell mode="signup" go={go}/>}
      {route === 'dashboard' && <Dashboard go={go}/>}
      {route === 'policies'  && <Dashboard go={go}/>}
      {route === 'score'     && <ScorePage go={go}/>}
      {route === 'chat'      && <ChatPage go={go}/>}
      {route === 'cotizar'   && <CotizadorPage go={go}/>}
      {route === 'cmf'       && <CMFPage go={go}/>}
      {route === 'mercado'   && <MercadoPage go={go}/>}

      {route !== 'home' && (
        <div className="float-nav" style={{position:'fixed', bottom: 20, left:'50%', transform:'translateX(-50%)', background:'var(--ink)', color:'var(--bg)', borderRadius: 999, padding: 6, display:'flex', gap: 2, zIndex: 40, boxShadow:'0 30px 60px -20px rgba(0,0,0,0.3)'}}>
          {[{k:'home',l:'Landing'},{k:'login',l:'Login'},{k:'dashboard',l:'Panel'},{k:'chat',l:'IA'},{k:'cotizar',l:'Cotizar'},{k:'score',l:'Score'},{k:'cmf',l:'CMF'},{k:'mercado',l:'Mercado'}].map(x=>(
            <button key={x.k} onClick={()=>go(x.k)} style={{padding:'10px 16px', borderRadius: 999, border: 0, cursor:'pointer', background: route===x.k?'var(--accent)':'transparent', color: route===x.k?'#fff':'var(--bg)', fontSize: 12, fontFamily:'inherit', fontWeight: 600}}>{x.l}</button>
          ))}
        </div>
      )}

      <div className={`tweak-panel ${editMode ? 'open' : ''}`}>
        <h4>Tweaks · Holai</h4>
        <div className="tweak-row">
          <label>Hero variant</label>
          <div className="tweak-btns">{['A','B','C'].map(v => <button key={v} className={`tweak-btn ${heroVariant===v?'active':''}`} onClick={()=>setKey('heroVariant', v)}>{v}</button>)}</div>
        </div>
        <div className="tweak-row">
          <label>Color de acento</label>
          <div className="tweak-btns">
            {[{k:'pink',c:'#FF0083'},{k:'coral',c:'#FF5A64'},{k:'violet',c:'#6C5CE7'},{k:'mint',c:'#00C896'}].map(x=>(
              <button key={x.k} className={`tweak-btn ${accent===x.k?'active':''}`} onClick={()=>setKey('accent', x.k)}>
                <span style={{display:'inline-block', width: 10, height: 10, borderRadius:'50%', background: x.c, marginRight: 6, verticalAlign:'middle'}}/>{x.k}
              </button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Modo</label>
          <div className="tweak-btns">
            <button className={`tweak-btn ${!dark?'active':''}`} onClick={()=>setKey('dark', false)}>Claro</button>
            <button className={`tweak-btn ${dark?'active':''}`} onClick={()=>setKey('dark', true)}>Oscuro</button>
          </div>
        </div>
        <div className="tweak-row">
          <label>Ir a</label>
          <div className="tweak-btns" style={{flexWrap:'wrap'}}>
            {['home','login','dashboard','chat','cotizar','score'].map(r => <button key={r} className={`tweak-btn ${route===r?'active':''}`} onClick={()=>go(r)}>{r}</button>)}
          </div>
        </div>
      </div>
    </div>
  );
}

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