/* ════════════════════════════════════════════════════════════════
   Leren prototype — thin state router + theme + nav
   ════════════════════════════════════════════════════════════════
   Each view module exposes a single React component on window:
     window.LerenDashboardView, window.LerenChapterView,
     window.LerenReviewView, window.LerenLibraryView,
     window.LerenOnboardingView, window.LerenOefenenStubView,
     window.LerenPlannenStubView
   Loaded by Leren - prototype.html as separate <script> tags.
*/

const { useState, useEffect } = React;

/* ───────────── MOCK DATA ───────────── */

const MOCK_USER = {
  name: 'sam_bakker',
  level: 7, xp: 73, xpMax: 272,
  streak: 12, snaps: 1240,
};

const MOCK_CHAPTERS = [
  { id: 'bio-h3',  subject: 'biologie',     chapter: 'H3 — Cellen en celdeling',          source: 'Biologie voor jou · havo-3',     mins: 28, progress: 35, masteryLevel: 2, fromPlannen: true, toetsContext: 'toets vrijdag', title: 'Cellen en celdeling' },
  { id: 'gs-h7',   subject: 'geschiedenis', chapter: 'H7 — De Verlichting',                source: 'Geschiedeniswerkplaats · H7',     mins: 35, progress: 18, masteryLevel: 1,                                                                  title: 'De Verlichting' },
  { id: 'wis-h4',  subject: 'wiskunde',     chapter: 'H4 — Kwadratische functies',         source: 'Getal & Ruimte · H4',             mins: 15, progress: 82, masteryLevel: 3,                                                                  title: 'Kwadratische functies' },
  { id: 'en-u5',   subject: 'engels',       chapter: 'U5 — Past Perfect & narrative tenses', source: 'Stepping Stones · U5',           mins: 18, progress: 60, masteryLevel: 2,                                                                  title: 'Past Perfect & narrative tenses' },
];

const MOCK_REVIEW_CARDS = [
  { id: 'c1', subject: 'biologie', chapter: 'H3', front: 'Wat is mitose?',                         back: 'Een vorm van celdeling waarbij uit één moedercel twee identieke dochtercellen ontstaan.' },
  { id: 'c2', subject: 'biologie', chapter: 'H3', front: 'Wat is meiose?',                         back: 'Een speciale vorm van celdeling die geslachtscellen produceert; halveert het aantal chromosomen.' },
  { id: 'c3', subject: 'biologie', chapter: 'H2', front: 'Wat is osmose?',                         back: 'Diffusie van water door een semipermeabel membraan, van lage naar hoge opgeloste-stof-concentratie.' },
  { id: 'c4', subject: 'wiskunde', chapter: 'H4', front: 'Wat is een asymptoot?',                   back: 'Een lijn die de grafiek van een functie nadert, maar niet raakt of snijdt.' },
  { id: 'c5', subject: 'engels',   chapter: 'U5', front: 'Past perfect: vorm',                       back: 'had + voltooid deelwoord — bv. "had eaten", "had walked"' },
];

/* ───────────── ROUTE HELPERS ───────────── */

function viewBreadcrumb(view) {
  switch (view.name) {
    case 'dashboard':   return ['Leren', 'Dashboard'];
    case 'chapter':     return ['Leren', 'Hoofdstuk'];
    case 'review':      return ['Leren', 'Herhaalsessie'];
    case 'library':     return ['Leren', 'Bibliotheek'];
    case 'mastery':     return ['Leren', 'Beheersing'];
    case 'ai-creator':  return ['Leren', 'AI Content'];
    case 'onboarding':  return ['Onboarding'];
    case 'oefenen':     return ['Oefenen'];
    case 'plannen':     return ['Plannen'];
    default: return ['Leren'];
  }
}

function viewRoute(view) {
  switch (view.name) {
    case 'dashboard':  return '/leren';
    case 'chapter':    return `/leren/hoofdstuk/${view.chapterId || 'bio-h3'}`;
    case 'review':     return '/leren/herhaling';
    case 'library':    return '/leren/bibliotheek';
    case 'mastery':    return '/leren/beheersing';
    case 'ai-creator': return '/leren/ai-content';
    case 'streaks':    return '/leren/streaks';
    case 'onboarding': return '/leren/onboarding';
    case 'oefenen':    return '/oefenen';
    case 'plannen':    return '/plannen';
    default: return '/';
  }
}

/* ───────────── APP ───────────── */

/* ───────────── PLAN TIERS + AI CREDITS ─────────────
   plan: 'free' | 'premium' | 'premium-plus'
   creditsLeft: aantal AI-creatie-credits resterend deze maand
   creditsMax:  cap per maand (5 / 30 / 50)
*/
const PLAN_LIMITS = {
  'free':         { max: 5,  features: ['ai-create', 'rag-chat', 'recall'] },
  'premium':      { max: 30, features: ['ai-create', 'rag-chat', 'recall', 'mastery-history'] },
  'premium-plus': { max: 50, features: ['ai-create', 'rag-chat', 'recall', 'mastery-history', 'feynman'] },
};

function App() {
  const [theme, setTheme] = useState('dark');
  const [view, setView] = useState({ name: 'dashboard' });
  const [history, setHistory] = useState([]);
  const [chapterState, setChapterState] = useState('normal');
  const [libraryMode, setLibraryMode] = useState('list');
  const [plan, setPlan] = useState('premium');
  const [creditsLeft, setCreditsLeft] = useState(22);

  const t = theme === 'dark' ? TK_DARK : TK_LIGHT;

  useEffect(() => {
    document.body.className = theme === 'dark' ? 'is-dark' : 'is-light';
    document.documentElement.classList.toggle('is-dark', theme === 'dark');
  }, [theme]);

  useEffect(() => {
    if (window.lucide && window.lucide.createIcons) window.lucide.createIcons();
  }, [view, theme]);

  // Auto-fire onboarding on first visit
  useEffect(() => {
    if (!localStorage.getItem('snapsnel_leren_onboarding_seen')) {
      setView({ name: 'onboarding' });
    }
  }, []);

  function navigate(next) {
    setHistory(h => [...h, view]);
    setView(typeof next === 'string' ? { name: next } : next);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  function back() {
    setHistory(h => {
      if (h.length === 0) return h;
      const prev = h[h.length - 1];
      setView(prev);
      return h.slice(0, -1);
    });
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  const planLimits = PLAN_LIMITS[plan] || PLAN_LIMITS['free'];
  const creditsMax = planLimits.max;
  const planFeatures = planLimits.features;
  function hasFeature(feat) { return planFeatures.includes(feat); }
  function consumeCredit(n = 1) { setCreditsLeft(c => Math.max(0, c - n)); }

  const ctx = {
    t, theme, navigate, back,
    user: MOCK_USER, chapters: MOCK_CHAPTERS, reviewCards: MOCK_REVIEW_CARDS,
    chapterState, setChapterState,
    libraryMode, setLibraryMode,
    plan, setPlan, creditsLeft, creditsMax, hasFeature, consumeCredit,
  };

  return (
    <>
      {/* Prototype header (dev affordance, not part of the app) */}
      <div className="proto-header">
        <span className="brand">Snap<span className="accent">Snel</span></span>
        <span className="pillar">Leren · prototype</span>
        <span className="route">{viewRoute(view)}</span>
        {history.length > 0 && (
          <button className="back-btn" onClick={back}>← Terug</button>
        )}
        {/* nav shortcuts */}
        <div style={{ display: 'flex', gap: 6 }}>
          {['dashboard','chapter','review','library','mastery','ai-creator','streaks','oefenen','plannen','onboarding'].map(name => (
            <button key={name} className="back-btn"
              onClick={() => navigate(name === 'chapter' ? { name, chapterId: 'bio-h3' } : name)}
              style={{ background: view.name === name ? '#1E293B' : 'transparent' }}>
              {name}
            </button>
          ))}
        </div>
        {/* plan switcher (dev-affordance) */}
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          <span style={{ fontSize: 10, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5 }}>Plan</span>
          {['free', 'premium', 'premium-plus'].map(p => (
            <button key={p} className="back-btn"
              onClick={() => { setPlan(p); setCreditsLeft(PLAN_LIMITS[p].max - 3); }}
              style={{ background: plan === p ? '#1E293B' : 'transparent' }}>
              {p}
            </button>
          ))}
        </div>
        {/* view-context controls */}
        {view.name === 'chapter' && (
          <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span style={{ fontSize: 10, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5 }}>State</span>
            {['normal', 'nieuw', 'voltooid'].map(s => (
              <button key={s} className="back-btn"
                onClick={() => setChapterState(s)}
                style={{ background: chapterState === s ? '#1E293B' : 'transparent' }}>
                {s}
              </button>
            ))}
          </div>
        )}
        {view.name === 'library' && (
          <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span style={{ fontSize: 10, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5 }}>Mode</span>
            {['list', 'upload', 'empty'].map(m => (
              <button key={m} className="back-btn"
                onClick={() => setLibraryMode(m)}
                style={{ background: libraryMode === m ? '#1E293B' : 'transparent' }}>
                {m}
              </button>
            ))}
          </div>
        )}
        <div className="divider" />
        <div className="theme-toggle">
          <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
            {theme === 'light' ? '🌙 Dark' : '☀️ Light'}
          </button>
        </div>
        <button className="back-btn" onClick={() => {
          localStorage.removeItem('snapsnel_leren_onboarding_seen');
          navigate('onboarding');
        }}>Replay tour</button>
      </div>

      {renderView(view, ctx)}
    </>
  );
}

function renderView(view, ctx) {
  switch (view.name) {
    case 'dashboard':  return <window.LerenDashboardView {...ctx} view={view} />;
    case 'chapter':    return <window.LerenChapterView {...ctx} view={view} chapterState={ctx.chapterState} />;
    case 'review':     return <window.LerenReviewView {...ctx} view={view} />;
    case 'library':    return <window.LerenLibraryView {...ctx} view={view} libraryMode={ctx.libraryMode} />;
    case 'onboarding':  return <window.LerenOnboardingView {...ctx} view={view} />;
    case 'oefenen':     return <window.LerenOefenenStubView {...ctx} view={view} />;
    case 'plannen':     return <window.LerenPlannenStubView {...ctx} view={view} />;
    case 'mastery':     return <window.LerenMasteryView {...ctx} view={view} />;
    case 'ai-creator':  return <window.LerenAICreatorView {...ctx} view={view} />;
    case 'streaks':     return <window.LerenStreaksView {...ctx} view={view} />;
    default:
      return (
        <div style={{ padding: 60, color: '#F1F5F9' }}>
          Unknown view: <code>{view.name}</code>
        </div>
      );
  }
}

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