/* prototype/views/onboarding.jsx
   LerenOnboardingView — driver.js based tour over the live dashboard.
   Replaces the hand-rolled spotlight implementation.

   Library: driver.js (https://driverjs.com) — MIT, ~10kb, framework-agnostic.
   Loaded via CDN as iife script — exposed at window.driver.js.driver.

   Targets are anchored via DOM IDs (set in polish/shared.jsx,
   polish/leren-components.jsx, polish/leren-dashboard-frames.jsx).
*/

(function () {
  const { useEffect, useState, useRef } = React;

  function LerenOnboardingView({ t, navigate }) {
    const [phase, setPhase] = useState('tour'); // 'tour' | 'done'
    const driverRef = useRef(null);

    useEffect(() => {
      if (phase !== 'tour') return;

      const driverFactory = window.driver && window.driver.js && window.driver.js.driver;
      if (!driverFactory) {
        console.error('[onboarding] driver.js not loaded');
        return;
      }

      // Wait one frame so FrameLerenHub has rendered + IDs are in DOM.
      const raf = requestAnimationFrame(() => {
        const driverObj = driverFactory({
          showProgress: true,
          progressText: '{{current}} / {{total}}',
          nextBtnText: 'Volgende →',
          prevBtnText: '← Terug',
          doneBtnText: 'Begin met leren ✓',
          allowClose: true,
          stagePadding: 6,
          stageRadius: 12,
          smoothScroll: true,
          steps: [
            {
              popover: {
                title: 'Hoi! Ik ben Pulse',
                description: 'Ik help je slim leren. Geen vol kopje stampen — alleen wat je écht moet weten, op het juiste moment.',
                side: 'over',
                align: 'center',
              },
            },
            {
              element: '#vandaag-te-leren',
              popover: {
                title: 'Hier komt je leerstof',
                description: 'Hoofdstukken uit je boek, of eigen materiaal dat je upload. Alles op één plek.',
                side: 'right',
                align: 'start',
              },
            },
            {
              element: '#herhalen-card',
              popover: {
                title: 'Ik plan je herhalingen',
                description: 'Elke dag laat ik je precies de kaarten zien die je dreigt te vergeten. Een paar minuten per dag is genoeg.',
                side: 'left',
                align: 'start',
              },
            },
            {
              popover: {
                title: '📷 Maak je eigen materiaal',
                description: 'Upload een foto van je boek of beschrijf wat je moet kennen — Pulse maakt er flashcards en samenvattingen van. Werkt ook op Free.',
                side: 'over',
                align: 'center',
              },
            },
            {
              popover: {
                title: '🧠 Test jezelf actief',
                description: 'Herhalen is meer dan kaarten flippen. In Test-jezelf-modus geef je antwoorden en krijgt feedback van Pulse.',
                side: 'over',
                align: 'center',
              },
            },
            {
              popover: {
                title: '📊 Hou je voortgang bij',
                description: 'In Beheersing zie je per vak welke onderwerpen je mastered en welke aandacht nodig hebben.',
                side: 'over',
                align: 'center',
              },
            },
            {
              element: '#sidebar-nav-oefenen',
              popover: {
                title: 'En dan? Toepassen',
                description: 'Zodra je een hoofdstuk kent, gaan we naar Oefenen — daar ga je het gebruiken op echte vragen.',
                side: 'right',
                align: 'start',
              },
            },
          ],
          onDestroyed: () => {
            // User completed or skipped the tour — persist flag and show welcome card.
            localStorage.setItem('snapsnel_leren_onboarding_seen', '1');
            setPhase('done');
          },
        });

        driverRef.current = driverObj;
        driverObj.drive();
      });

      return () => {
        cancelAnimationFrame(raf);
        if (driverRef.current) {
          driverRef.current.destroy();
          driverRef.current = null;
        }
      };
    }, [phase]);

    return (
      <React.Fragment>
        {window.FrameLerenHub
          ? <FrameLerenHub t={t} />
          : <div style={{ padding: 60, color: t.fg }}>FrameLerenHub niet beschikbaar.</div>}

        {phase === 'done' && <WelcomeActionCard t={t} navigate={navigate} />}
      </React.Fragment>
    );
  }

  /* ─── WelcomeActionCard ──────────────────────────────────────
     Floating card boven het dashboard — zachte nudge naar de
     eerste actie nadat de tour klaar is.
  */
  function WelcomeActionCard({ t, navigate }) {
    const [dismissed, setDismissed] = useState(false);
    if (dismissed) return null;
    const dark = t.mode === 'dark';
    const blue = pillarColor('leren', dark);
    return (
      <div style={{
        position: 'fixed',
        top: 96,
        left: 'calc(50% + 60px)',
        transform: 'translateX(-50%)',
        zIndex: 200,
        width: 'min(560px, calc(100vw - 80px))',
      }}>
        <div style={{
          position: 'relative',
          background: `color-mix(in oklch, ${blue} 8%, ${t.card})`,
          border: `1px solid color-mix(in oklch, ${blue} 28%, transparent)`,
          borderRadius: 12,
          padding: '18px 20px',
          display: 'flex', alignItems: 'center', gap: 16,
          boxShadow: dark
            ? '0 16px 40px rgba(0,0,0,0.45)'
            : '0 12px 32px rgba(15,23,42,0.12)',
        }}>
          <PulseMascot size={56} mood="happy" />

          <div style={{ flex: 1, minWidth: 0 }}>
            <h3 style={{
              margin: 0, fontFamily: 'Fredoka One', fontSize: 18,
              color: t.fg, lineHeight: 1.2, letterSpacing: '-0.01em', fontWeight: 400,
            }}>Klaar om te beginnen</h3>
            <p style={{
              margin: '4px 0 0', fontSize: 13, color: t.fgDim,
              lineHeight: 1.5, fontWeight: 500,
            }}>
              Voeg je eerste hoofdstuk toe of bekijk de bibliotheek.
            </p>
          </div>

          <BtnPrimary t={t} icon="book-plus"
            onClick={function () {
              localStorage.setItem('snapsnel_leren_onboarding_seen', '1');
              navigate('library');
            }}>
            Hoofdstuk toevoegen
          </BtnPrimary>

          <button title="Sluiten"
            onClick={function () {
              localStorage.setItem('snapsnel_leren_onboarding_seen', '1');
              setDismissed(true);
            }}
            style={{
              position: 'absolute', top: 10, right: 10,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 26, height: 26, borderRadius: 999,
              background: 'transparent', border: 'none',
              color: t.fgMute, cursor: 'pointer',
            }}>
            <PI name="x" size={14} strokeWidth={2.6} />
          </button>
        </div>
      </div>
    );
  }

  window.LerenOnboardingView = LerenOnboardingView;
})();