/* global React, window */
// Guitar Lab — Lesson: Standard tuning.
//
// Walks through standard tuning E A D G B E and lets the user click a
// string to hear its open pitch. Useful for ear training and as a sanity
// check that audio is working.

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

  const StringRow = function (props) {
    const s = props.string;
    const [playing, setPlaying] = React.useState(false);

    function play() {
      setPlaying(true);
      window.GuitarLab.audio.playNote(s.midi, 1500)
        .then(function () { setPlaying(false); })
        .catch(function () { setPlaying(false); });
    }

    return (
      <button
        onClick={play}
        disabled={playing}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 16,
          width: '100%',
          textAlign: 'left',
          padding: '14px 18px',
          background: playing ? 'oklch(94% 0.04 265)' : '#fff',
          border: '1px solid oklch(92% 0.012 265)',
          borderRadius: 12,
          cursor: playing ? 'wait' : 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          transition: 'background 0.14s',
        }}
      >
        <div style={{
          width: 44, height: 44,
          background: 'oklch(35% 0.16 265)', color: '#fff',
          borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, fontWeight: 700,
        }}>{s.name}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: 'oklch(18% 0.03 265)' }}>{s.label}</div>
          <div style={{ fontSize: 12.5, color: 'oklch(50% 0.04 265)', marginTop: 2 }}>
            String {s.string} · MIDI {s.midi} · Click to hear it
          </div>
        </div>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="oklch(35% 0.16 265)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <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>
      </button>
    );
  };

  const LessonTuning = function () {
    const tuning = window.GuitarLab && window.GuitarLab.theory ? window.GuitarLab.theory.STANDARD_TUNING : [];
    // Render high-to-low (string 1 at the top of the list) since that's
    // how most students visualise their own guitar when they look at it
    // — but keep the underlying data unchanged.
    const list = tuning.slice().reverse();

    function playAll() {
      const midis = tuning.map(function (s) { return s.midi; });
      window.GuitarLab.audio.playSequence(midis, { noteMs: 800, gapMs: 100 });
    }

    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' }}>Standard tuning</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          A guitar in standard tuning has six strings tuned, from thickest (lowest pitch) to thinnest (highest pitch), to <strong>E&nbsp;A&nbsp;D&nbsp;G&nbsp;B&nbsp;E</strong>. People remember it with phrases like <em>Eddie Ate Dynamite, Good-Bye Eddie.</em>
        </p>

        <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: 13,
          marginBottom: 18,
          lineHeight: 1.5,
        }}>
          The two E strings are <strong>two octaves apart</strong> — same letter, very different pitch. Strings get thinner and higher-pitched as you go from string 6 (low E) to string 1 (high E).
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
          {list.map(function (s) { return <StringRow key={'sr-' + s.string} string={s} />; })}
        </div>

        <button
          onClick={playAll}
          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",
          }}
        >Play all 6 strings (low → high)</button>

        <div style={{ marginTop: 24, padding: 18, background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 8 }}>How to tune your guitar</div>
          <ol style={{ paddingLeft: 18, margin: 0, fontSize: 13.5, color: 'oklch(35% 0.04 265)', lineHeight: 1.6 }}>
            <li>Pick the string. It should ring out clearly — no buzzing or fretted notes.</li>
            <li>Turn the tuning peg slowly while picking, listening for the pitch.</li>
            <li>Compare to a reference (this page, a tuner app, or another tuned instrument).</li>
            <li>If the string sounds too low, tighten the peg (turn it so the string winds tighter). Too high, loosen it.</li>
            <li>Tune UP to the note, never down — strings stay in tune better when the last move was a tightening one.</li>
          </ol>
        </div>
      </div>
    );
  };

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