/* polish/leren-onboarding-frames.jsx
   Eerste-keer-onboarding voor de Leren-pijler.
   Dismissible overlay-sequence over het Leren-dashboard.
   5 frames totaal: 4 onboarding-stappen (modal + 3 spotlight-tooltips) +
   afsluit-state (welcome-card, geen overlay).

   Spotlight-techniek: één <div class="spotlight"> met
   `box-shadow: 0 0 0 9999px rgba(ink1,0.60)` creëert een "hole" — alles
   buiten de div wordt gedimd, ook de sidebar. Soft glow via een tweede
   outer ring (box-shadow inset/outset). Spotlight-positie wordt per
   frame als absolute coord opgegeven, gemikt op waar het element in
   FrameLerenHub visueel staat.

   Gebruikt FrameLerenHub als achtergrond — geen mock-dashboard,
   echt the real deal zoals andere views.
*/

const ONBOARDING_INK_OVERLAY = 'rgba(15, 23, 42, 0.60)';      // light mode ink-1 @ 60%
const ONBOARDING_INK_OVERLAY_DARK = 'rgba(2, 6, 23, 0.72)';    // dark mode iets dieper

/* Spotlight-positie per stap, in coords RELATIEF aan de
   FrameLerenHub viewport (sidebar + main, dus full screen).
   Pixels gebaseerd op standaard 1280-breed showcase-frame waarin
   sidebar ~220 wide is en content begint daarna.
   De HeroFrame-wrapper schaalt onze frames; spotlights moeten
   meeschalen — daarom gebruiken we px in dezelfde ruimte als waarin
   FrameLerenHub rendert (zonder transform).
*/
const SPOTLIGHTS = {
  bibliotheek: {
    // "Waar je mee bezig bent"-sectie — 4 vakrijen met "Bekijk hele bibliotheek"
    // link rechtsboven. Sectie zit als 3e blok in main-column.
    top: 360, left: 248, width: 660, height: 230,
    pointer: 'right', // tooltip rechts ervan
  },
  herhalen: {
    // HerhalingenCard — bovenaan right-aside (320px breed).
    top: 124, left: 932, width: 280, height: 180,
    pointer: 'left', // tooltip links ervan
  },
  oefenen: {
    // Sidebar nav-item "Oefenen" — pijler-link, derde item in sidebar
    // (hub / leren-active / oefenen / plannen / chat / ...).
    top: 230, left: 12, width: 200, height: 38,
    pointer: 'right', // tooltip rechts ervan
  },
};

/* ─── Wrapper: dashboard + dim-overlay + skip-link ──────── */
function OnboardingDimWrap({ t, children, showSkip = true }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{ position: 'relative' }}>
      {/* Dashboard erachter */}
      <FrameLerenHub t={t} />

      {/* Full-cover dim-overlay (gebruikt voor stap 1 en stap 5-fallback);
          spotlight-frames overschrijven dit met hun eigen "hole"-overlay. */}
      {children}

      {showSkip && <OnboardingSkipLink t={t} />}
    </div>
  );
}

function OnboardingSkipLink({ t }) {
  return (
    <a href="#" style={{
      position: 'absolute', top: 16, right: 20, zIndex: 50,
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '7px 12px', borderRadius: 999,
      background: 'rgba(255,255,255,0.10)',
      color: 'rgba(255,255,255,0.85)',
      border: '1px solid rgba(255,255,255,0.22)',
      backdropFilter: 'blur(4px)',
      fontSize: 11.5, fontWeight: 700,
      textDecoration: 'none', whiteSpace: 'nowrap',
    }}>
      Skip tour
      <PI name="x" size={11} color="rgba(255,255,255,0.85)" strokeWidth={2.6} />
    </a>
  );
}

/* ─── Voortgangs-dots ─────────────────────────────────────── */
function OnboardingDots({ t, step, total = 4 }) {
  return (
    <div style={{
      display: 'flex', gap: 8, justifyContent: 'center',
      padding: '4px 0',
    }}>
      {Array.from({ length: total }).map((_, i) => {
        const active = i + 1 === step;
        const past = i + 1 < step;
        return (
          <span key={i} style={{
            width: active ? 22 : 8, height: 8,
            borderRadius: 999,
            background: active ? t.primary : (past ? t.fgDim : t.fgMute),
            opacity: active ? 1 : (past ? 0.7 : 0.5),
            transition: 'width 200ms ease',
          }} />
        );
      })}
    </div>
  );
}

/* ─── Spotlight + tooltip ──────────────────────────────────
   Twee-laagse aanpak (geen box-shadow-9999-truc):
   1. Vol-dekkende dim-layer (45%/62% opacity) over hele frame.
   2. Spotlight-OUTLINE als highlight-ring + soft glow rond rect —
      transparante achtergrond, alleen border + outer shadow.
   Effect: dashboard blijft doorschijnend zichtbaar, het element
   binnen de spotlight is even gedimd als de rest, alleen de
   pijler-blauwe outline maakt 'm prominent. */
function Spotlight({ t, rect, children, pointer = 'right' }) {
  const dark = t.mode === 'dark';
  const dim = dark ? 'rgba(2, 6, 23, 0.62)' : 'rgba(15, 23, 42, 0.45)';
  const blue = pillarColor('leren', dark);

  // Tooltip positie: naast de spotlight, met klein driehoekje
  const tipGap = 18;
  let tipStyle = {};
  if (pointer === 'right') {
    tipStyle = { top: rect.top - 8, left: rect.left + rect.width + tipGap };
  } else if (pointer === 'left') {
    tipStyle = { top: rect.top - 8, left: rect.left - 380 - tipGap };
  } else if (pointer === 'bottom') {
    tipStyle = { top: rect.top + rect.height + tipGap, left: rect.left };
  }

  return (
    <>
      {/* 1. Vol-dekkende dim-layer */}
      <div style={{
        position: 'absolute', inset: 0,
        background: dim,
        zIndex: 20,
        pointerEvents: 'none',
      }} />

      {/* 2. Spotlight-outline ring + glow (geen cutout) */}
      <div style={{
        position: 'absolute',
        top: rect.top, left: rect.left,
        width: rect.width, height: rect.height,
        background: 'transparent',
        border: `2px solid ${blue}`,
        borderRadius: 12,
        boxShadow: `
          0 0 0 4px color-mix(in oklch, ${blue} 24%, transparent),
          0 0 24px 4px color-mix(in oklch, ${blue} 35%, transparent),
          0 8px 28px color-mix(in oklch, ${blue} 28%, transparent)
        `,
        pointerEvents: 'none',
        zIndex: 30,
      }} />

      {/* 3. Tooltip */}
      <div style={{
        position: 'absolute',
        ...tipStyle,
        zIndex: 40,
      }}>
        <div style={{ position: 'relative' }}>
          {/* Pointer-driehoekje */}
          <div style={{
            position: 'absolute',
            ...(pointer === 'right' ? { left: -7, top: 28 }
              : pointer === 'left' ? { right: -7, top: 28 }
              : { top: -7, left: 28 }),
            width: 14, height: 14,
            background: t.card,
            border: `1px solid ${t.border}`,
            transform: 'rotate(45deg)',
            ...(pointer === 'right'
              ? { borderRight: 'none', borderTop: 'none' }
              : pointer === 'left'
                ? { borderLeft: 'none', borderBottom: 'none' }
                : { borderRight: 'none', borderBottom: 'none' }),
          }} />
          {children}
        </div>
      </div>
    </>
  );
}

function TooltipCard({ t, mood, title, body, step, totalSteps = 4,
                       backLabel = 'Terug', nextLabel = 'Volgende',
                       isLast = false }) {
  return (
    <div style={{
      width: 360,
      background: t.card,
      border: `1px solid ${t.border}`,
      borderRadius: 12,
      padding: 22,
      boxShadow: t.mode === 'dark'
        ? '0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3)'
        : '0 20px 50px rgba(15,23,42,0.20), 0 4px 12px rgba(15,23,42,0.10)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <PulseMascot size={40} mood={mood} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <h3 style={{
            margin: 0, fontFamily: 'Fredoka One', fontSize: 18,
            color: t.fg, lineHeight: 1.2, letterSpacing: '-0.01em',
          }}>{title}</h3>
        </div>
      </div>

      <p style={{
        margin: 0, fontSize: 13.5, color: t.fgDim,
        lineHeight: 1.55, fontWeight: 500,
      }}>{body}</p>

      <OnboardingDots t={t} step={step} total={totalSteps} />

      <div style={{
        display: 'flex', gap: 8, paddingTop: 4,
      }}>
        <BtnGhost t={t} icon="arrow-left">{backLabel}</BtnGhost>
        <span style={{ flex: 1 }} />
        <BtnPrimary t={t} icon="arrow-right">{nextLabel}</BtnPrimary>
      </div>
    </div>
  );
}

/* ─── FRAME 1 — Welkom-modal ─────────────────────────────── */
function FrameOnboardingWelkom({ t }) {
  const dark = t.mode === 'dark';
  const overlay = dark ? ONBOARDING_INK_OVERLAY_DARK : ONBOARDING_INK_OVERLAY;
  return (
    <OnboardingDimWrap t={t}>
      {/* Volledige dim-overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: overlay,
        zIndex: 20,
      }} />

      {/* Centrale modal */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        zIndex: 30,
      }}>
        <div style={{
          width: 'min(480px, calc(100% - 40px))',
          background: t.card,
          border: `1px solid ${t.border}`,
          borderRadius: 12,
          padding: '32px 30px 28px',
          boxShadow: dark
            ? '0 30px 80px rgba(0,0,0,0.65), 0 8px 16px rgba(0,0,0,0.35)'
            : '0 30px 80px rgba(15,23,42,0.30), 0 8px 16px rgba(15,23,42,0.12)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
          textAlign: 'center',
        }}>
          <PulseMascot size={80} mood="encouraging" />

          <h1 style={{
            margin: 0, fontFamily: 'Fredoka One', fontSize: 26,
            color: t.fg, lineHeight: 1.15, letterSpacing: '-0.01em',
          }}>Hoi! Ik ben Pulse</h1>

          <p style={{
            margin: 0, fontSize: 14, color: t.fgDim,
            lineHeight: 1.6, fontWeight: 500, maxWidth: 380,
          }}>
            Ik help je slim leren. Geen vol kopje stampen — alleen wat je écht moet weten, op het juiste moment.
          </p>

          <OnboardingDots t={t} step={1} total={4} />

          <button style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            width: '100%', padding: '12px 18px', borderRadius: 10,
            background: t.primary, color: dark ? '#0A0F1E' : '#FFFFFF',
            border: 'none', cursor: 'pointer',
            fontFamily: 'Nunito', fontSize: 14, fontWeight: 800,
            letterSpacing: 0.1, whiteSpace: 'nowrap',
            marginTop: 4,
          }}>
            Laat zien
            <PI name="arrow-right" size={14} strokeWidth={2.6} />
          </button>
        </div>
      </div>
    </OnboardingDimWrap>
  );
}

/* ─── FRAME 2 — Spotlight: bibliotheek ───────────────────── */
function FrameOnboardingBibliotheek({ t }) {
  return (
    <OnboardingDimWrap t={t}>
      <Spotlight t={t} rect={SPOTLIGHTS.bibliotheek} pointer="right">
        <TooltipCard t={t}
          mood="curious"
          title="Hier komt je leerstof"
          body="Hoofdstukken uit je boek, of eigen materiaal dat je upload. Alles op één plek."
          step={2}
        />
      </Spotlight>
    </OnboardingDimWrap>
  );
}

/* ─── FRAME 3 — Spotlight: herhalen ──────────────────────── */
function FrameOnboardingHerhalen({ t }) {
  return (
    <OnboardingDimWrap t={t}>
      <Spotlight t={t} rect={SPOTLIGHTS.herhalen} pointer="left">
        <TooltipCard t={t}
          mood="thinking"
          title="Ik plan je herhalingen"
          body="Elke dag laat ik je precies de kaarten zien die je dreigt te vergeten. Een paar minuten per dag is genoeg."
          step={3}
        />
      </Spotlight>
    </OnboardingDimWrap>
  );
}

/* ─── FRAME 4 — Spotlight: naar Oefenen (sidebar nav) ──── */
function FrameOnboardingOefenen({ t }) {
  return (
    <OnboardingDimWrap t={t}>
      <Spotlight t={t} rect={SPOTLIGHTS.oefenen} pointer="right">
        <TooltipCardLast t={t}
          mood="encouraging"
          title="En dan? Toepassen"
          body="Zodra je een hoofdstuk kent, gaan we naar Oefenen — daar ga je het gebruiken op echte vragen."
        />
      </Spotlight>
    </OnboardingDimWrap>
  );
}

/* Laatste tooltip-card: andere primary-CTA-copy. */
function TooltipCardLast({ t, mood, title, body }) {
  return (
    <div style={{
      width: 360,
      background: t.card,
      border: `1px solid ${t.border}`,
      borderRadius: 12,
      padding: 22,
      boxShadow: t.mode === 'dark'
        ? '0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3)'
        : '0 20px 50px rgba(15,23,42,0.20), 0 4px 12px rgba(15,23,42,0.10)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <PulseMascot size={40} mood={mood} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <h3 style={{
            margin: 0, fontFamily: 'Fredoka One', fontSize: 18,
            color: t.fg, lineHeight: 1.2, letterSpacing: '-0.01em',
          }}>{title}</h3>
        </div>
      </div>

      <p style={{
        margin: 0, fontSize: 13.5, color: t.fgDim,
        lineHeight: 1.55, fontWeight: 500,
      }}>{body}</p>

      <OnboardingDots t={t} step={4} total={4} />

      <div style={{
        display: 'flex', gap: 8, paddingTop: 4,
      }}>
        <BtnGhost t={t} icon="arrow-left">Terug</BtnGhost>
        <span style={{ flex: 1 }} />
        <BtnPrimary t={t} icon="check">Begin met leren</BtnPrimary>
      </div>
    </div>
  );
}

/* ─── FRAME 5 — Voltooid + welcome-card ──────────────────── */
function FrameOnboardingKlaar({ t }) {
  return (
    <div style={{ position: 'relative' }}>
      {/* Volledig dashboard, geen overlay */}
      <FrameLerenHub t={t} />

      {/* Welcome-card als floating card, gemikt op positie BOVEN de
          "Vandaag te leren"-sectie van het dashboard. */}
      <div style={{
        position: 'absolute',
        top: 96,
        left: 248,
        right: 372,
        zIndex: 10,
      }}>
        <WelcomeActionCard t={t} />
      </div>
    </div>
  );
}

function WelcomeActionCard({ t }) {
  const dark = t.mode === 'dark';
  const blue = pillarColor('leren', dark);
  return (
    <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 12px 32px rgba(0,0,0,0.4)'
        : '0 12px 32px rgba(15,23,42,0.10)',
    }}>
      <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',
        }}>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">Hoofdstuk toevoegen</BtnPrimary>

      <button title="Sluiten" 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>
  );
}

Object.assign(window, {
  FrameOnboardingWelkom, FrameOnboardingBibliotheek,
  FrameOnboardingHerhalen, FrameOnboardingOefenen,
  FrameOnboardingKlaar,
});