/* global React, window */
// Practice Lab — generic lesson page wrapper.
//
// Renders a consistent layout for any instructional lesson:
//   - Breadcrumb (Chapter title)
//   - Lesson title
//   - Body content (children — supplied by the per-lesson component)
//   - Action bar: Back to chapter / Mark complete / Continue
//
// Each per-lesson component (LessonStaffIntro, LessonBassClef, etc.)
// renders ONLY its body content. This wrapper handles all the chrome
// and progress writing, so adding a new lesson is just two files: the
// body component + a curriculum.js entry.

(function () {
  'use strict';
  window.PracticeLab = window.PracticeLab || {};
  window.PracticeLab.ui = window.PracticeLab.ui || {};

  const PRIMARY     = 'oklch(35% 0.16 265)';
  const PRIMARY_BG  = 'oklch(96% 0.04 265)';
  const PRIMARY_BD  = 'oklch(85% 0.06 265)';
  const TEXT_DARK   = 'oklch(18% 0.03 265)';
  const TEXT_MUTED  = 'oklch(55% 0.04 265)';
  const SURFACE     = '#fff';
  const SURFACE_BD  = 'oklch(92% 0.012 265)';
  const SUCCESS     = 'oklch(48% 0.13 152)';
  const SUCCESS_BG  = 'oklch(96% 0.03 152)';

  const LessonPage = function (props) {
    const completed = !!props.completed;
    const onMarkComplete = props.onMarkComplete || function () {};
    const onBack = props.onBack || function () {};
    const onNext = props.onNext || null;
    const hasNext = !!props.hasNext;
    const [marking, setMarking] = React.useState(false);

    const handleMark = React.useCallback(async function () {
      if (marking || completed) return;
      setMarking(true);
      try { await onMarkComplete(); } finally { setMarking(false); }
    }, [marking, completed, onMarkComplete]);

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", maxWidth: 760, margin: '0 auto', paddingBottom: 32 }}>
        <button
          onClick={onBack}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            background: 'transparent',
            border: 'none',
            color: TEXT_MUTED,
            fontSize: 12.5,
            fontWeight: 600,
            padding: '6px 0',
            marginBottom: 6,
            cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}
        >
          <span aria-hidden="true">←</span>
          <span>Back to chapter</span>
        </button>
        <div style={{ fontSize: 11.5, color: TEXT_MUTED, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4 }}>
          {props.chapterTitle || 'Lesson'}
        </div>
        <h1 style={{ margin: 0, fontSize: 28, fontWeight: 700, color: TEXT_DARK, lineHeight: 1.2 }}>
          {props.title || 'Untitled lesson'}
        </h1>
        {props.intro && (
          <p style={{ marginTop: 10, marginBottom: 0, fontSize: 15, color: TEXT_MUTED, lineHeight: 1.55 }}>
            {props.intro}
          </p>
        )}

        <div style={{
          marginTop: 22,
          background: SURFACE,
          border: '1px solid ' + SURFACE_BD,
          borderRadius: 14,
          padding: 22,
        }}>
          {props.children}
        </div>

        {/* Completion badge */}
        {completed && (
          <div style={{
            marginTop: 18,
            background: SUCCESS_BG,
            border: '1px solid ' + SUCCESS,
            color: SUCCESS,
            borderRadius: 10,
            padding: '10px 14px',
            fontSize: 13,
            fontWeight: 700,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
          }}>
            <span aria-hidden="true">✓</span> Lesson complete
          </div>
        )}

        {/* Action bar */}
        <div style={{
          marginTop: 22,
          display: 'flex',
          gap: 10,
          flexWrap: 'wrap',
          alignItems: 'center',
        }}>
          <button
            onClick={handleMark}
            disabled={completed || marking}
            style={{
              padding: '11px 22px',
              borderRadius: 10,
              border: 'none',
              background: completed ? SURFACE_BD : PRIMARY,
              color: completed ? TEXT_MUTED : '#fff',
              fontSize: 14,
              fontWeight: 700,
              cursor: (completed || marking) ? 'default' : 'pointer',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              opacity: marking ? 0.7 : 1,
            }}
          >{completed ? 'Marked complete' : (marking ? 'Saving…' : 'Mark complete')}</button>
          {onNext && hasNext && (
            <button
              onClick={onNext}
              style={{
                padding: '11px 22px',
                borderRadius: 10,
                border: '1px solid ' + PRIMARY_BD,
                background: PRIMARY_BG,
                color: PRIMARY,
                fontSize: 14,
                fontWeight: 700,
                cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >Continue →</button>
          )}
        </div>
      </div>
    );
  };

  // ── Shared lesson body primitives ──────────────────────────────────
  // These are exposed under window.PracticeLab.ui.LessonBits so any
  // lesson body component can compose them. Keeping them in one place
  // means visual tweaks ripple across every lesson.

  const Section = function (props) {
    return (
      <section style={{ marginBottom: props.last ? 0 : 22 }}>
        {props.heading && (
          <h2 style={{
            margin: '0 0 8px 0',
            fontSize: 17,
            fontWeight: 700,
            color: TEXT_DARK,
            letterSpacing: '-0.01em',
          }}>{props.heading}</h2>
        )}
        <div style={{ fontSize: 14.5, color: 'oklch(28% 0.05 265)', lineHeight: 1.62 }}>
          {props.children}
        </div>
      </section>
    );
  };

  const DemoBox = function (props) {
    return (
      <div style={{
        marginTop: 12,
        background: 'oklch(98% 0.005 265)',
        border: '1px dashed ' + SURFACE_BD,
        borderRadius: 12,
        padding: 16,
      }}>
        {props.label && (
          <div style={{ fontSize: 11, color: TEXT_MUTED, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 10 }}>
            {props.label}
          </div>
        )}
        {props.children}
      </div>
    );
  };

  const PlayButton = function (props) {
    const [playing, setPlaying] = React.useState(false);
    const handle = React.useCallback(async function () {
      if (playing) return;
      setPlaying(true);
      try { await props.onPlay(); } catch (e) {} finally { setPlaying(false); }
    }, [playing, props]);
    return (
      <button
        onClick={handle}
        disabled={playing}
        style={{
          padding: '8px 14px',
          borderRadius: 8,
          border: '1px solid ' + PRIMARY,
          background: playing ? PRIMARY : '#fff',
          color: playing ? '#fff' : PRIMARY,
          fontSize: 13,
          fontWeight: 700,
          cursor: playing ? 'default' : 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
        }}
      >
        <span aria-hidden="true">{playing ? '♪' : '▶'}</span>
        <span>{props.label || 'Play'}</span>
      </button>
    );
  };

  const Mnemonic = function (props) {
    return (
      <div style={{
        marginTop: 8,
        background: 'oklch(96% 0.04 80)',
        border: '1px solid oklch(85% 0.07 80)',
        color: 'oklch(28% 0.1 80)',
        borderRadius: 10,
        padding: '10px 14px',
        fontSize: 13.5,
        lineHeight: 1.5,
      }}>
        <strong style={{ fontWeight: 700, marginRight: 6 }}>{props.label || 'Remember:'}</strong>
        {props.children}
      </div>
    );
  };

  window.PracticeLab.ui.LessonPage = LessonPage;
  window.PracticeLab.ui.LessonBits = {
    Section: Section,
    DemoBox: DemoBox,
    PlayButton: PlayButton,
    Mnemonic: Mnemonic,
    PRIMARY: PRIMARY,
    PRIMARY_BG: PRIMARY_BG,
    PRIMARY_BD: PRIMARY_BD,
    TEXT_DARK: TEXT_DARK,
    TEXT_MUTED: TEXT_MUTED,
    SURFACE: SURFACE,
    SURFACE_BD: SURFACE_BD,
  };
})();