const { useState, useEffect, useMemo } = React;

/* ── Accent palette map ─────────────────────────────────────────── */
const ACCENT_MAP = {
  '#C9A800': {
    dark:  { '--gold':'#C9A800','--gold-d':'#A88E00','--gold-bg':'rgba(201,168,0,0.07)','--gold-bg-h':'rgba(201,168,0,0.13)','--border':'rgba(201,168,0,0.10)','--border-h':'rgba(201,168,0,0.24)' },
    light: { '--gold':'#8A6400','--gold-d':'#6E5000','--gold-bg':'rgba(138,100,0,0.07)','--gold-bg-h':'rgba(138,100,0,0.12)','--border':'rgba(0,0,0,0.07)','--border-h':'rgba(154,114,0,0.28)' },
  },
  '#C07840': {
    dark:  { '--gold':'#C07840','--gold-d':'#A0622A','--gold-bg':'rgba(192,120,64,0.08)','--gold-bg-h':'rgba(192,120,64,0.15)','--border':'rgba(192,120,64,0.12)','--border-h':'rgba(192,120,64,0.30)' },
    light: { '--gold':'#944A18','--gold-d':'#7A3800','--gold-bg':'rgba(148,74,24,0.07)','--gold-bg-h':'rgba(148,74,24,0.12)','--border':'rgba(0,0,0,0.07)','--border-h':'rgba(148,74,24,0.30)' },
  },
  '#5E9E78': {
    dark:  { '--gold':'#5E9E78','--gold-d':'#4A8060','--gold-bg':'rgba(94,158,120,0.08)','--gold-bg-h':'rgba(94,158,120,0.15)','--border':'rgba(94,158,120,0.12)','--border-h':'rgba(94,158,120,0.30)' },
    light: { '--gold':'#2E6B48','--gold-d':'#1E5038','--gold-bg':'rgba(46,107,72,0.07)','--gold-bg-h':'rgba(46,107,72,0.12)','--border':'rgba(0,0,0,0.07)','--border-h':'rgba(46,107,72,0.30)' },
  },
  '#7B8FCC': {
    dark:  { '--gold':'#7B8FCC','--gold-d':'#5E72B4','--gold-bg':'rgba(123,143,204,0.08)','--gold-bg-h':'rgba(123,143,204,0.15)','--border':'rgba(123,143,204,0.12)','--border-h':'rgba(123,143,204,0.30)' },
    light: { '--gold':'#3D52A8','--gold-d':'#2A3E94','--gold-bg':'rgba(61,82,168,0.07)','--gold-bg-h':'rgba(61,82,168,0.12)','--border':'rgba(0,0,0,0.07)','--border-h':'rgba(61,82,168,0.30)' },
  },
};

const FONT_MAP = {
  modern:    "'DM Sans'",
  editorial: "'Cormorant Garamond'",
  technical: "'Space Grotesk'",
};

/* ── Helpers ────────────────────────────────────────────────────── */
const getInitialCompleted = () => {
  try {
    const s = localStorage.getItem('dc_completed');
    if (s) return new Set(JSON.parse(s));
  } catch {}
  return new Set(['1-1', '1-2', '1-3', '1-4', '2-1', '2-2']);
};

/* Normaliza o objeto de usuário do Supabase para o formato da app */
const normalizeUser = (sbUser) => {
  if (!sbUser) return null;
  return {
    email: sbUser.email,
    name:  sbUser.user_metadata?.name || sbUser.email.split('@')[0],
  };
};

/* ── App ────────────────────────────────────────────────────────── */
const App = () => {
  const [theme, setTheme]   = useState(() => localStorage.getItem('dc_theme') || 'dark');
  const [user, setUser]     = useState(null);
  const [loading, setLoading] = useState(true);
  const [screen, setScreen] = useState('dashboard');
  const [completed, setCompleted] = useState(getInitialCompleted);
  const [lesson, setLesson]   = useState(() => {
    const init = getInitialCompleted();
    return COURSE.allLessons.find(l => !init.has(l.id)) || COURSE.allLessons[0];
  });

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  /* ── Sessão Supabase ─────────────────────────────────────────── */
  useEffect(() => {
    /* Verifica se já existe sessão ativa (ex: recarregou a página) */
    _supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(normalizeUser(session?.user ?? null));
      setLoading(false);
    });

    /* Escuta mudanças de auth: login, logout, expiração */
    const { data: { subscription } } = _supabase.auth.onAuthStateChange((_event, session) => {
      setUser(normalizeUser(session?.user ?? null));
      setLoading(false);
    });

    return () => subscription.unsubscribe();
  }, []);

  const handleLogin  = (normalizedUser) => { setUser(normalizedUser); setScreen('dashboard'); };
  const handleLogout = () => { _supabase.auth.signOut(); setScreen('dashboard'); };

  const userCtx = useMemo(
    () => ({ user, logout: handleLogout }),
    [user]
  );

  /* Theme sync */
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', theme);
    document.body.classList.add('theme-transition');
    const id = setTimeout(() => document.body.classList.remove('theme-transition'), 400);
    localStorage.setItem('dc_theme', theme);
    return () => clearTimeout(id);
  }, [theme]);

  /* Accent sync */
  useEffect(() => {
    const palette = ACCENT_MAP[t.accent];
    if (!palette) return;
    const vars = palette[theme] || palette.dark;
    const root = document.documentElement;
    Object.entries(vars).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [t.accent, theme]);

  /* Font sync */
  useEffect(() => {
    const f = FONT_MAP[t.typeVoice] || FONT_MAP.modern;
    document.documentElement.style.setProperty('--font-ui', f);
  }, [t.typeVoice]);

  /* Completed sync */
  useEffect(() => {
    localStorage.setItem('dc_completed', JSON.stringify([...completed]));
  }, [completed]);

  const toggleTheme    = () => setTheme(th => th === 'dark' ? 'light' : 'dark');
  const toggleComplete = id => setCompleted(prev => {
    const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s;
  });
  const enterLesson  = l => { setLesson(l); setScreen('player'); };
  const selectLesson = l => setLesson(l);

  const themeCtx  = useMemo(() => ({ theme, toggleTheme }), [theme]);
  const tweaksCtx = useMemo(() => ({
    cardShape: t.cardShape,
    accent:    t.accent,
    typeVoice: t.typeVoice,
  }), [t.cardShape, t.accent, t.typeVoice]);

  /* Aguarda Supabase verificar a sessão antes de renderizar */
  if (loading) return (
    <ThemeCtx.Provider value={themeCtx}>
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
        <style>{`@keyframes _appSpin { to { transform: rotate(360deg); } }`}</style>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: 34, height: 34, borderRadius: '50%', margin: '0 auto 12px',
            border: '3px solid var(--border)', borderTopColor: 'var(--gold)',
            animation: '_appSpin 0.75s linear infinite',
          }}/>
          <p style={{ fontSize: 13, color: 'var(--text2)' }}>Carregando…</p>
        </div>
      </div>
    </ThemeCtx.Provider>
  );

  return (
    <ThemeCtx.Provider value={themeCtx}>
      <UserCtx.Provider value={userCtx}>
        <TweaksCtx.Provider value={tweaksCtx}>
          {!user ? (
            <LoginScreen onLogin={handleLogin}/>
          ) : (
            <div style={{ minHeight: '100vh', background: 'var(--bg)' }}>
              {screen !== 'player' && (
                <Nav
                  screen={screen}
                  onBack={() => setScreen('dashboard')}
                  completedCount={completed.size}
                  totalLessons={COURSE.totalLessons}
                />
              )}

              {screen === 'dashboard' && (
                <Dashboard
                  completedLessons={completed}
                  onEnterLesson={enterLesson}
                  onViewCertificate={() => setScreen('certificate')}
                />
              )}
              {screen === 'player' && (
                <Player
                  lesson={lesson}
                  completedLessons={completed}
                  onToggleComplete={toggleComplete}
                  onSelectLesson={selectLesson}
                  onViewCertificate={() => setScreen('certificate')}
                  onBack={() => setScreen('dashboard')}
                />
              )}
              {screen === 'certificate' && (
                <Certificate
                  completedLessons={completed}
                  onBack={() => setScreen('dashboard')}
                />
              )}
            </div>
          )}

        {/* ── TWEAKS PANEL ── */}
        <TweaksPanel title="Tweaks">

          <TweakSection label="Card shape" />
          <TweakRadio
            label="Layout"
            value={t.cardShape}
            options={[
              { value: 'poster', label: 'Poster' },
              { value: 'cover',  label: 'Cover'  },
              { value: 'wide',   label: 'Wide'   },
            ]}
            onChange={v => setTweak('cardShape', v)}
          />

          <TweakSection label="Accent" />
          <TweakColor
            label="Palette"
            value={t.accent}
            options={['#C9A800', '#C07840', '#5E9E78', '#7B8FCC']}
            onChange={v => setTweak('accent', v)}
          />

          <TweakSection label="Type voice" />
          <TweakRadio
            label="Font"
            value={t.typeVoice}
            options={[
              { value: 'modern',    label: 'Modern'   },
              { value: 'editorial', label: 'Editorial'},
              { value: 'technical', label: 'Technical'},
            ]}
            onChange={v => setTweak('typeVoice', v)}
          />

          </TweaksPanel>
        </TweaksCtx.Provider>
      </UserCtx.Provider>
    </ThemeCtx.Provider>
  );
};

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