const { useState, useEffect, useRef } = React;

function App() {
  const [state, setState] = useState(() => {
    const s = loadState();
    // Fecha de inicio automática: si no hay, se fija hoy (Día 1 = hoy)
    if (!s.startDate) s.startDate = new Date().toISOString().slice(0, 10);
    return s;
  });
  const [savedFlash, setSavedFlash] = useState(false);
  const navReady = useRef(false);
  const isPopping = useRef(false);

  // Auto-save
  useEffect(() => {
    saveState(state);
    setSavedFlash(true);
    const t = setTimeout(() => setSavedFlash(false), 1200);
    return () => clearTimeout(t);
  }, [state]);

  const done = daysCompleted(state);
  const unlocked = done >= TRACK_CONFIG.unlockDay;

  const setScreen = (screen) => setState(s => ({ ...s, view: { ...s.view, screen } }));

  const screen = state.view.screen || 'home';
  useEffect(() => { window.scrollTo(0, 0); if (document.scrollingElement) document.scrollingElement.scrollTop = 0; }, [screen, state.view.day]);

  useEffect(() => {
    if (!window.GymsisNav) return;
    if (!navReady.current) {
      window.GymsisNav.replaceRoot(state.view);
      window.GymsisNav.onPopView((payload) => {
        isPopping.current = true;
        setState(s => ({ ...s, view: payload || { screen: 'home' } }));
      });
      navReady.current = true;
      return;
    }
    if (isPopping.current) { isPopping.current = false; return; }
    window.GymsisNav.push(state.view);
  }, [state.view]);

  return (
    <div className="app">
      <aside className="side">
        <div className="brand">
          <div className="mark">tu primera <em>gymsis</em></div>
          <div className="sub">Seguimiento</div>
        </div>

        <div className="nav-label">Tu camino</div>
        <div className={"nav-item" + (screen === 'home' ? ' active' : '')} onClick={() => setScreen('home')}>
          <span>Portada</span>
        </div>
        <div className={"nav-item" + (screen === 'day' ? ' active' : '')} onClick={() => setState(s => ({ ...s, view: { screen: 'day', day: currentDayNumber(s) } }))}>
          <span className="dot" style={{ background: 'var(--rose-deep)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            <span>Mi día</span>
            <span className="wk">Registrar hoy</span>
          </div>
        </div>
        <div className={"nav-item" + (screen === 'history' ? ' active' : '')} onClick={() => setScreen('history')}>
          <span>Historial</span>
        </div>
        <div className={"nav-item" + (screen === 'journal' ? ' active' : '')} onClick={() => setScreen('journal')}>
          <span>Tu diario</span>
        </div>
        <div className={"nav-item" + (screen === 'ai' ? ' active' : '')} onClick={() => setScreen('ai')}>
          <span>TuGPT</span>
        </div>

        <div className="nav-label">Al final del camino</div>
        <div
          className={"nav-item" + (screen === 'reveal' ? ' active' : '') + (unlocked ? ' unlocked' : ' locked')}
          onClick={() => setScreen(unlocked ? 'reveal' : 'locked')}
        >
          <span>Día 84</span>
          <span className="lock">{unlocked ? '✦ ABIERTO' : 'CERRADO'}</span>
        </div>

        <div style={{ marginTop: 'auto', paddingTop: 30, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'Inter, -apple-system, sans-serif', letterSpacing: '0.1em' }}>
          <div style={{ color: savedFlash ? 'var(--rose-deep)' : 'var(--ink-3)', transition: 'color .2s' }}>
            {savedFlash ? '● GUARDADO' : '○ AUTO-GUARDADO'}
          </div>
          <a href="home.html" style={{ color: 'var(--ink-3)', textDecoration: 'none', display: 'block', marginTop: 8 }}>← Volver a home</a>
        </div>
      </aside>

      <main className="main">
        {screen === 'home' && <HomeScreen state={state} setState={setState} />}
        {screen === 'day' && <DayScreen state={state} setState={setState} />}
        {screen === 'history' && <HistoryScreen state={state} setState={setState} />}
        {screen === 'journal' && <JournalScreen state={state} setState={setState} />}
        {screen === 'ai' && <AIScreen state={state} setState={setState} />}
        {screen === 'locked' && <LockedScreen state={state} />}
        {screen === 'reveal' && unlocked && <RevealScreen state={state} setState={setState} />}
      </main>
    </div>
  );
}

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