/* AI Start Here - app root + routing */

const { useState, useEffect } = React;

// Routes: login, welcome, pre-audit, chatgpt, claude, compare, bonus, post-audit
const ROUTES = [
  { key: 'login' },
  { key: 'welcome' },
  { key: 'pre-audit' },
  { key: 'chatgpt-setup' },
  { key: 'claude-setup' },
  { key: 'compare' },
  { key: 'bonus' },
  { key: 'post-audit' }
];
const PROGRESS_MAP = [0, 5, 15, 32, 52, 70, 85, 100];

function App() {
  const [step, setStep] = useState(() => {
    try { const s = parseInt(localStorage.getItem('ash-step') || '0', 10); return Number.isFinite(s) ? s : 0; } catch { return 0; }
  });
  const [answers, setAnswers] = useState(() => {
    try { return JSON.parse(localStorage.getItem('ash-answers') || '{}'); } catch { return {}; }
  });
  const [postAnswers, setPostAnswers] = useState(() => {
    try { return JSON.parse(localStorage.getItem('ash-post-answers') || '{}'); } catch { return {}; }
  });
  const [completed, setCompleted] = useState(() => {
    try { return new Set(JSON.parse(localStorage.getItem('ash-completed') || '[]')); } catch { return new Set(); }
  });

  useEffect(() => {
    try { localStorage.setItem('ash-step', String(step)); } catch {}
    // Scroll to top whenever the step changes (any page nav)
    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    // Also reset any internal scroll containers (the lesson .step-main is overflow-y: auto)
    document.querySelectorAll('.step-main').forEach(el => { el.scrollTop = 0; });
  }, [step]);
  useEffect(() => { try { localStorage.setItem('ash-answers', JSON.stringify(answers)); } catch {} }, [answers]);
  useEffect(() => { try { localStorage.setItem('ash-post-answers', JSON.stringify(postAnswers)); } catch {} }, [postAnswers]);
  useEffect(() => { try { localStorage.setItem('ash-completed', JSON.stringify([...completed])); } catch {} }, [completed]);

  const progress = PROGRESS_MAP[step] ?? 0;
  const route = ROUTES[step];
  const isComplete = completed.has(step);

  const setComplete = (c) => setCompleted(prev => { const n = new Set(prev); c ? n.add(step) : n.delete(step); return n; });
  const goNext = () => {
    if (route.key === 'post-audit') {
      setStep(0); setAnswers({}); setPostAnswers({}); setCompleted(new Set());
      try { ['ash-step','ash-answers','ash-post-answers','ash-completed','ash-active-02','ash-active-03'].forEach(k => localStorage.removeItem(k)); } catch {}
      return;
    }
    setStep(s => Math.min(ROUTES.length - 1, s + 1));
  };
  const goPrev = () => setStep(s => Math.max(0, s - 1));
  const exit = () => setStep(0);

  const preTotal = Object.keys(answers).length ? Object.values(answers).reduce((a, b) => a + (Number(b) || 0), 0) : null;

  // Map step index → progress-pill key (login is hidden from pills)
  const KEY_MAP = ['login', 'welcome', 'pre-audit', 'chatgpt', 'claude', 'compare', 'bonus', 'post-audit'];
  const currentKey = KEY_MAP[step];

  let page = null;
  switch (route.key) {
    case 'login':    page = <LoginPage onLogin={() => setStep(1)} />; break;
    case 'welcome':  page = <WelcomePage onNext={() => setStep(2)} onExit={exit} />; break;
    case 'pre-audit':
      page = <AuditPage currentKey={currentKey} progress={progress} answers={answers} setAnswers={setAnswers} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} />; break;
    case 'chatgpt-setup':
      page = <SetupLessonPage key="chatgpt" currentKey={currentKey} lesson={CHATGPT_LESSON} progress={progress} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} />; break;
    case 'claude-setup':
      page = <SetupLessonPage key="claude" currentKey={currentKey} lesson={CLAUDE_LESSON} progress={progress} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} />; break;
    case 'compare':
      page = <ComparePage currentKey={currentKey} progress={progress} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} />; break;
    case 'bonus':
      page = <BonusPage currentKey={currentKey} progress={progress} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} />; break;
    case 'post-audit':
      page = <AuditPage currentKey={currentKey} progress={progress} answers={postAnswers} setAnswers={setPostAnswers} onPrev={goPrev} onNext={goNext} onExit={exit} complete={isComplete} setComplete={setComplete} isFinal previousTotal={preTotal} />; break;
  }
  return <>{page}<LegalFooter /></>;
}

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