/* global React, window */
// Guitar Lab — top-level container.
//
// Two top-level sections:
//   - Lessons (anatomy, tuning, chord-reading, open chords, TAB)
//   - Practice (4 exercises with difficulty pills + session HUD)
//
// Mirrors the practice-lab structure but adds a lessons mode so beginners
// have something to READ before being quizzed.

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

  const LESSONS = [
    { id: 'anatomy',   label: 'Parts of the guitar',  component: 'LessonAnatomy' },
    { id: 'tuning',    label: 'Standard tuning',      component: 'LessonTuning' },
    { id: 'reading',   label: 'Reading chord diagrams', component: 'LessonChordReading' },
    { id: 'chords',    label: 'First open chords',    component: 'LessonOpenChords' },
    { id: 'tab',       label: 'Reading TAB',          component: 'LessonTabReading' },
  ];

  const EXERCISES = [
    { id: 'mixed',       label: 'Mixed' },
    { id: 'open_chord',  label: 'Open chord ID' },
    { id: 'string_name', label: 'String name' },
    { id: 'fret_note',   label: 'Fret note' },
    { id: 'by_ear',      label: 'Tuning by ear' },
  ];

  const DIFFICULTIES = [
    { id: 'beginner',     label: 'Beginner' },
    { id: 'intermediate', label: 'Intermediate' },
    { id: 'advanced',     label: 'Advanced' },
  ];

  const MIXED_POOL = ['open_chord', 'string_name', 'fret_note', 'by_ear'];

  function pickNextExercise(currentExercise, lastInMixed) {
    if (currentExercise !== 'mixed') return currentExercise;
    const pool = MIXED_POOL.filter(function (id) { return id !== lastInMixed; });
    return pool[Math.floor(Math.random() * pool.length)];
  }

  const Pill = function (props) {
    const active = !!props.active;
    return (
      <button
        onClick={props.onClick}
        style={{
          padding: '8px 16px',
          borderRadius: 999,
          border: '1px solid ' + (active ? 'oklch(35% 0.16 265)' : 'oklch(88% 0.02 265)'),
          background: active ? 'oklch(35% 0.16 265)' : '#fff',
          color: active ? '#fff' : 'oklch(28% 0.05 265)',
          fontSize: 13,
          fontWeight: 600,
          cursor: 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          transition: 'all 0.14s',
          whiteSpace: 'nowrap',
        }}
      >{props.children}</button>
    );
  };

  const ModeTab = function (props) {
    const active = !!props.active;
    return (
      <button
        onClick={props.onClick}
        style={{
          padding: '10px 22px',
          borderRadius: 10,
          border: 'none',
          background: active ? 'oklch(35% 0.16 265)' : 'transparent',
          color: active ? '#fff' : 'oklch(35% 0.04 265)',
          fontSize: 13.5,
          fontWeight: 700,
          cursor: 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
        }}
      >{props.children}</button>
    );
  };

  const StatTile = function (props) {
    return (
      <div style={{
        flex: 1,
        minWidth: 110,
        background: '#fff',
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 12,
        padding: '14px 18px',
      }}>
        <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>{props.label}</div>
        <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', lineHeight: 1.1 }}>{props.value}</div>
        {props.sub && <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', marginTop: 4 }}>{props.sub}</div>}
      </div>
    );
  };

  const EnableSoundSplash = function (props) {
    return (
      <div style={{
        background: 'oklch(96% 0.02 80)',
        border: '1px solid oklch(85% 0.07 80)',
        borderRadius: 12,
        padding: '18px 20px',
        marginBottom: 18,
        display: 'flex',
        alignItems: 'center',
        gap: 14,
        flexWrap: 'wrap',
      }}>
        <svg aria-hidden="true" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="oklch(45% 0.13 80)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
          <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
          <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
        </svg>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(22% 0.06 265)', marginBottom: 3 }}>Enable sound</div>
          <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)' }}>Browsers require a click before playing audio. One tap and we’re set.</div>
        </div>
        <button
          onClick={props.onEnable}
          style={{
            padding: '10px 18px',
            borderRadius: 10,
            border: 'none',
            background: 'oklch(35% 0.16 265)',
            color: '#fff',
            fontSize: 13,
            fontWeight: 700,
            cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}
        >Enable sound</button>
      </div>
    );
  };

  const PracticeMode = function (props) {
    const [difficulty, setDifficulty] = React.useState('beginner');
    const [exercise, setExercise] = React.useState('mixed');
    const [activeExercise, setActiveExercise] = React.useState(null);
    const [audioReady, setAudioReady] = React.useState(false);

    const [sessionScore, setSessionScore] = React.useState({ correct: 0, total: 0 });
    const [streak, setStreak] = React.useState(0);
    const [stats, setStats] = React.useState({ totalAttempts: 0, accuracy: 0, bestStreak: 0 });

    const [roundKey, setRoundKey] = React.useState(0);

    React.useEffect(function () {
      setActiveExercise(function (prev) { return pickNextExercise(exercise, prev); });
    }, [exercise, roundKey]);

    React.useEffect(function () {
      const id = setInterval(function () {
        try { setAudioReady(window.GuitarLab.audio.isReady()); } catch (e) {}
      }, 500);
      return function () { clearInterval(id); };
    }, []);

    const refreshStats = React.useCallback(async function () {
      try {
        const s = await window.GuitarLab.db.getLifetimeStats();
        setStats(s);
      } catch (e) {}
    }, []);

    React.useEffect(function () { refreshStats(); }, [refreshStats]);

    const enableSound = React.useCallback(async function () {
      try { await window.GuitarLab.audio.resumeContext(); } catch (e) {}
      try { setAudioReady(window.GuitarLab.audio.isReady()); } catch (e) {}
    }, []);

    const handleAttempt = React.useCallback(async function (attempt) {
      setSessionScore(function (prev) {
        return {
          correct: prev.correct + (attempt.wasCorrect ? 1 : 0),
          total: prev.total + 1,
        };
      });
      setStreak(function (prev) { return attempt.wasCorrect ? prev + 1 : 0; });
      try { await window.GuitarLab.db.recordAttempt(attempt); } catch (e) {}
      refreshStats();
    }, [refreshStats]);

    const handleNext = React.useCallback(function () {
      setRoundKey(function (k) { return k + 1; });
    }, []);

    const handlePickDifficulty = React.useCallback(function (d) {
      setDifficulty(d);
      setSessionScore({ correct: 0, total: 0 });
      setStreak(0);
      setRoundKey(function (k) { return k + 1; });
    }, []);

    const handlePickExercise = React.useCallback(function (e) {
      setExercise(e);
      setSessionScore({ correct: 0, total: 0 });
      setStreak(0);
      setRoundKey(function (k) { return k + 1; });
    }, []);

    const ExerciseComponent = (function () {
      switch (activeExercise) {
        case 'open_chord':  return window.GuitarLab.ui.ExerciseOpenChord;
        case 'string_name': return window.GuitarLab.ui.ExerciseStringName;
        case 'fret_note':   return window.GuitarLab.ui.ExerciseFretNote;
        case 'by_ear':      return window.GuitarLab.ui.ExerciseByEar;
        default:            return null;
      }
    })();

    const showAudioSplash = !audioReady && (
      activeExercise === 'open_chord' || activeExercise === 'by_ear' || activeExercise === 'fret_note'
    );

    return (
      <div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Difficulty</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {DIFFICULTIES.map(function (d) {
                return (
                  <Pill key={d.id} active={difficulty === d.id} onClick={function () { handlePickDifficulty(d.id); }}>{d.label}</Pill>
                );
              })}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Exercise</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {EXERCISES.map(function (e) {
                return (
                  <Pill key={e.id} active={exercise === e.id} onClick={function () { handlePickExercise(e.id); }}>{e.label}</Pill>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
          <StatTile label="This session" value={sessionScore.total === 0 ? '0 / 0' : sessionScore.correct + ' / ' + sessionScore.total} sub={sessionScore.total === 0 ? 'No attempts yet' : Math.round((sessionScore.correct / sessionScore.total) * 100) + '% correct'} />
          <StatTile label="Current streak" value={String(streak)} sub={streak === 0 ? 'Get one right' : 'In a row'} />
        </div>

        {showAudioSplash && <EnableSoundSplash onEnable={enableSound} />}

        <div style={{
          background: '#fff',
          border: '1px solid oklch(92% 0.012 265)',
          borderRadius: 14,
          padding: 22,
          minHeight: 320,
        }}>
          {!ExerciseComponent && (
            <div style={{ padding: 40, textAlign: 'center', color: 'oklch(55% 0.04 265)', fontSize: 13 }}>Loading exercise…</div>
          )}
          {ExerciseComponent && (
            <ExerciseComponent
              key={roundKey + ':' + activeExercise + ':' + difficulty}
              difficulty={difficulty}
              onAttempt={handleAttempt}
              onNext={handleNext}
            />
          )}
        </div>

        <div style={{
          marginTop: 22,
          padding: '14px 18px',
          background: 'oklch(98% 0.005 265)',
          border: '1px solid oklch(92% 0.012 265)',
          borderRadius: 12,
          display: 'flex',
          gap: 22,
          flexWrap: 'wrap',
        }}>
          <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', alignSelf: 'center' }}>Lifetime</div>
          <div><strong style={{ fontWeight: 700 }}>{stats.totalAttempts}</strong> <span style={{ color: 'oklch(55% 0.04 265)', fontSize: 12 }}>attempts</span></div>
          <div><strong style={{ fontWeight: 700 }}>{stats.accuracy}%</strong> <span style={{ color: 'oklch(55% 0.04 265)', fontSize: 12 }}>accuracy</span></div>
          <div><strong style={{ fontWeight: 700 }}>{stats.bestStreak}</strong> <span style={{ color: 'oklch(55% 0.04 265)', fontSize: 12 }}>best streak</span></div>
        </div>
      </div>
    );
  };

  const LessonsMode = function () {
    const [activeLessonId, setActiveLessonId] = React.useState('anatomy');
    const activeLesson = LESSONS.find(function (l) { return l.id === activeLessonId; });
    const LessonComponent = activeLesson && window.GuitarLab.ui[activeLesson.component];

    return (
      <div>
        {/* Horizontal lesson picker — works on both mobile and desktop */}
        <div style={{
          display: 'flex',
          gap: 6,
          flexWrap: 'wrap',
          marginBottom: 16,
          padding: 4,
          background: 'oklch(98% 0.005 265)',
          border: '1px solid oklch(92% 0.012 265)',
          borderRadius: 10,
        }}>
          {LESSONS.map(function (l, i) {
            const active = l.id === activeLessonId;
            return (
              <button
                key={l.id}
                onClick={function () { setActiveLessonId(l.id); }}
                style={{
                  padding: '8px 14px',
                  borderRadius: 8,
                  border: 'none',
                  background: active ? 'oklch(35% 0.16 265)' : 'transparent',
                  color: active ? '#fff' : 'oklch(35% 0.04 265)',
                  fontSize: 13,
                  fontWeight: active ? 700 : 600,
                  cursor: 'pointer',
                  fontFamily: "'Plus Jakarta Sans', sans-serif",
                  whiteSpace: 'nowrap',
                  transition: 'all 0.14s',
                }}
              >
                <span style={{ marginRight: 6, opacity: 0.7 }}>{i + 1}.</span>
                {l.label}
              </button>
            );
          })}
        </div>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 14, padding: 22 }}>
          {LessonComponent ? <LessonComponent /> : (
            <div style={{ padding: 40, textAlign: 'center', color: 'oklch(55% 0.04 265)', fontSize: 13 }}>Loading lesson…</div>
          )}
        </div>
      </div>
    );
  };

  const GuitarLab = function () {
    const [mode, setMode] = React.useState('lessons');

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", maxWidth: 1080, margin: '0 auto', paddingBottom: 80 }}>
        {/* Beta banner */}
        <div style={{
          background: 'oklch(96% 0.04 265)',
          border: '1px solid oklch(85% 0.06 265)',
          color: 'oklch(28% 0.1 265)',
          borderRadius: 12,
          padding: '12px 16px',
          fontSize: 12.5,
          marginBottom: 16,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          flexWrap: 'wrap',
        }}>
          <strong style={{ fontWeight: 700 }}>Beta — admin only.</strong>
          <span style={{ opacity: 0.85 }}>Guitar basics: lessons + practice quizzes. Mic-based pitch detection coming later.</span>
        </div>

        {/* Mode tabs */}
        <div style={{
          display: 'inline-flex',
          gap: 4,
          background: 'oklch(95% 0.01 265)',
          border: '1px solid oklch(90% 0.02 265)',
          borderRadius: 12,
          padding: 4,
          marginBottom: 22,
        }}>
          <ModeTab active={mode === 'lessons'}  onClick={function () { setMode('lessons'); }}>Lessons</ModeTab>
          <ModeTab active={mode === 'practice'} onClick={function () { setMode('practice'); }}>Practice</ModeTab>
        </div>

        {mode === 'lessons' && <LessonsMode />}
        {mode === 'practice' && <PracticeMode />}
      </div>
    );
  };

  window.GuitarLab.ui.GuitarLab = GuitarLab;
})();