/* global React, window */
// Piano Lab — Lesson: C major scale.
//
// Walks through the 8 notes of C major (C D E F G A B C) with audible
// playback, labelled on the keyboard, and a suggested R.H. fingering
// (1 2 3 1 2 3 4 5 — thumb tucks under after E).

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

  const LessonCMajor = function () {
    const Keyboard = window.PianoLab.ui.Keyboard;
    const playScale = window.PianoLab.audio.playScale;
    const playNote = window.PianoLab.audio.playNote;

    const [playing, setPlaying] = React.useState(false);
    const scaleMidis = window.PianoLab.theory.cMajorScaleMidis(4);
    const fingerings = ['1', '2', '3', '1', '2', '3', '4', '5'];

    // Always label all 8 scale notes with their letter on the keyboard.
    const labels = {};
    scaleMidis.forEach(function (m) {
      labels[m] = window.PianoLab.theory.midiToName(m).letter;
    });

    async function playUp() {
      if (playing) return;
      setPlaying(true);
      await playScale(scaleMidis, { noteMs: 340, gapMs: 40 });
      setPlaying(false);
    }
    async function playDown() {
      if (playing) return;
      setPlaying(true);
      await playScale(scaleMidis.slice().reverse(), { noteMs: 340, gapMs: 40 });
      setPlaying(false);
    }

    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>C major scale</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 14px' }}>
          C major is the easiest scale on the piano — it uses only the 7 white keys. Eight notes in a row: <strong>C D E F G A B C</strong>.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, marginBottom: 14 }}>
          <Keyboard
            loMidi={60}
            hiMidi={72}
            labels={labels}
            highlightMidis={scaleMidis}
            onKey={function (m) { playNote(m, 600); }}
          />
          <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
            <button
              onClick={playUp}
              disabled={playing}
              style={{
                padding: '10px 18px',
                borderRadius: 10,
                border: 'none',
                background: playing ? 'oklch(80% 0.03 265)' : 'oklch(35% 0.16 265)',
                color: '#fff', fontSize: 13, fontWeight: 700,
                cursor: playing ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{playing ? 'Playing…' : 'Play ascending'}</button>
            <button
              onClick={playDown}
              disabled={playing}
              style={{
                padding: '10px 16px',
                borderRadius: 10,
                border: '1px solid oklch(35% 0.16 265)',
                background: '#fff',
                color: 'oklch(28% 0.05 265)',
                fontSize: 13, fontWeight: 600,
                cursor: playing ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >Play descending</button>
          </div>
        </div>

        <div style={{ background: 'oklch(98% 0.005 265)', border: '1px solid oklch(92% 0.012 265)', borderRadius: 10, padding: 14, marginBottom: 14 }}>
          <div style={{ fontSize: 11, color: 'oklch(45% 0.13 80)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Right-hand fingering</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 6, fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            {scaleMidis.map(function (m, i) {
              return (
                <div key={i} style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'oklch(20% 0.04 265)' }}>{window.PianoLab.theory.midiToName(m).letter}</div>
                  <div style={{ display: 'inline-block', marginTop: 4, width: 26, height: 26, lineHeight: '26px', textAlign: 'center', borderRadius: '50%', background: 'oklch(60% 0.16 80)', color: '#fff', fontSize: 13, fontWeight: 700 }}>{fingerings[i]}</div>
                </div>
              );
            })}
          </div>
          <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', marginTop: 10, lineHeight: 1.55 }}>
            Pattern: <strong>1 2 3</strong> on C D E, then tuck the thumb under to play F as <strong>1</strong>, continuing <strong>2 3 4 5</strong> on G A B C. The thumb tuck is the move that lets you play scales smoothly without lifting the hand.
          </div>
        </div>
      </div>
    );
  };

  window.PianoLab.ui.LessonCMajor = LessonCMajor;
})();