/* global React, window */
// Piano Lab — Lesson: Basic triads.
//
// Teaches the seven diatonic triads in C major (I ii iii IV V vi vii°)
// using only white keys, with audible playback and a labelled keyboard.

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

  const LessonTriads = function () {
    const Keyboard = window.PianoLab.ui.Keyboard;
    const playChord = window.PianoLab.audio.playChord;

    const triads = window.PianoLab.theory.TRIADS;
    const [activeTriadId, setActiveTriadId] = React.useState('C');
    const [playing, setPlaying] = React.useState(false);

    const activeTriad = triads.find(function (t) { return t.id === activeTriadId; });
    const midis = activeTriad.intervals.map(function (iv) { return activeTriad.rootMidi + iv; });
    const labels = {};
    midis.forEach(function (m, i) {
      // Label each chord tone with R, 3, or 5 so it's clear which is
      // the root and which is the third / fifth.
      labels[m] = ['R', '3', '5'][i] || '';
    });

    async function play() {
      if (playing) return;
      setPlaying(true);
      await playChord(midis, 1400);
      setPlaying(false);
    }

    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>Triads in C major</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 14px' }}>
          A triad is three notes stacked in thirds. Starting on each of the 7 white keys of C major and stacking only white keys gives you the diatonic triads — the building blocks of every chord progression in the key.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, marginBottom: 14 }}>
          <Keyboard
            loMidi={60}
            hiMidi={83}
            labels={labels}
            highlightMidis={midis}
          />
          <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <button
              onClick={play}
              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 ' + activeTriad.label}</button>
            <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)' }}>R = root, 3 = third, 5 = fifth.</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 14 }}>
          {triads.map(function (t) {
            const active = t.id === activeTriadId;
            return (
              <button
                key={t.id}
                onClick={function () { setActiveTriadId(t.id); }}
                style={{
                  padding: '8px 14px',
                  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: 12.5, fontWeight: 700,
                  cursor: 'pointer',
                  fontFamily: "'Plus Jakarta Sans', sans-serif",
                }}
              >{t.romanInC} — {t.id}</button>
            );
          })}
        </div>

        <div style={{ background: 'oklch(96% 0.04 265)', border: '1px solid oklch(85% 0.06 265)', borderRadius: 10, padding: '14px 16px', fontSize: 13.5, color: 'oklch(25% 0.08 265)', lineHeight: 1.55 }}>
          <strong style={{ fontWeight: 700 }}>The "three big chords" of pop music</strong> are <strong>I, IV, V</strong> — C, F, and G in this key. Add <strong>vi</strong> (A minor) and you can play tens of thousands of songs.
        </div>
      </div>
    );
  };

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