/* global React, window */
// Guitar Lab — Lesson: First open chords.
//
// Library of essential open-position chord shapes with a play button on
// each card. The "essential six" plus a few sevenths cover the harmony
// of most beginner songs.

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

  // Plain-English coaching note per chord. Keyed by chord id.
  const TIPS = {
    'E':   'The friendliest first chord. All six strings ring. Keep your thumb behind the neck, fingers arched, and let strings 1, 2 and 6 ring open.',
    'Em':  'Even easier than E — only two fingers. A great chord to start with if E is straining your hand.',
    'A':   'Three fingers stacked at the 2nd fret on strings 4, 3, 2. Don\'t play the low E (the X above string 6).',
    'Am':  'Same shape family as A but with the middle finger moved down one fret. The minor "sad" version of A.',
    'D':   'A small triangle on strings 3, 2 and 1. Don\'t play strings 6 or 5. Watch that high E isn\'t muted by your ring finger.',
    'Dm':  'D minor — same shape as D but the 1st-string finger drops to the 1st fret. Famous as the saddest of all chords.',
    'G':   'Wide shape — your 3rd finger on the low E 3rd fret, 2nd finger on the A 2nd fret, pinky on the high E 3rd fret. All six strings ring.',
    'C':   'Three fingers diagonally across strings 5, 4 and 2. Skip the low E. The high E rings open.',
    'A7':  'A with the ring finger lifted — easier than A and a smoother voicing in 12-bar blues.',
    'D7':  'A bright, "leading" chord. The 1st finger on the 2nd string 1st fret is the giveaway.',
    'E7':  'E with the ring finger removed from string 4 — instantly more bluesy.',
    'G7':  'G with the pinky moved over to the 1st string 1st fret. Old-time, country flavour.',
  };

  const ChordCard = function (props) {
    const c = props.chord;
    const ChordDiagram = window.GuitarLab && window.GuitarLab.ui ? window.GuitarLab.ui.ChordDiagram : null;
    const [playing, setPlaying] = React.useState(false);

    function play() {
      setPlaying(true);
      const midis = window.GuitarLab.theory.chordMidis(c);
      window.GuitarLab.audio.playChord(midis, { durationMs: 1900, strumGapMs: 30 })
        .then(function () { setPlaying(false); })
        .catch(function () { setPlaying(false); });
    }

    return (
      <div style={{
        background: '#fff',
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 14,
        padding: 18,
        display: 'flex',
        gap: 18,
        alignItems: 'flex-start',
      }}>
        {ChordDiagram && <ChordDiagram chord={c} width={150} />}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 6 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: 'oklch(18% 0.03 265)' }}>{c.label}</div>
            <button
              onClick={play}
              disabled={playing}
              style={{
                padding: '8px 14px',
                borderRadius: 999,
                border: '1px solid oklch(35% 0.16 265)',
                background: playing ? 'oklch(95% 0.02 265)' : 'oklch(35% 0.16 265)',
                color: playing ? 'oklch(45% 0.04 265)' : '#fff',
                fontSize: 12,
                fontWeight: 700,
                cursor: playing ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{playing ? 'Strumming…' : '▶ Strum'}</button>
          </div>
          <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.55 }}>{TIPS[c.id] || ''}</div>
        </div>
      </div>
    );
  };

  const LessonOpenChords = function () {
    const chords = window.GuitarLab && window.GuitarLab.theory ? window.GuitarLab.theory.OPEN_CHORDS : [];
    // Group for visual order.
    const major = chords.filter(function (c) { return c.family === 'major'; });
    const minor = chords.filter(function (c) { return c.family === 'minor'; });
    const sevenths = chords.filter(function (c) { return c.family === 'seventh'; });

    function Section(props) {
      return (
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontSize: 13, color: 'oklch(45% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 12 }}>{props.title}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 12 }}>
            {props.chords.map(function (c) { return <ChordCard key={c.id} chord={c} />; })}
          </div>
        </div>
      );
    }

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>First open chords</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 6px', lineHeight: 1.55, maxWidth: 720 }}>
          These are the eight or so shapes that unlock thousands of songs. Learn them in this order — Em and Am first (only two fingers), then E and A, then D and Dm, then G and C. Sevenths come last.
        </p>
        <p style={{ fontSize: 13, color: 'oklch(50% 0.04 265)', margin: '0 0 20px', lineHeight: 1.55, maxWidth: 720 }}>
          Tap <strong>Strum</strong> on any card to hear how it should sound. Match what your guitar produces to the audio — that's the fastest way to know whether you're fretting cleanly.
        </p>

        <Section title="Major chords" chords={major} />
        <Section title="Minor chords" chords={minor} />
        <Section title="Dominant 7 chords" chords={sevenths} />
      </div>
    );
  };

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