/* global React, window */
// Piano Lab — Exercise: Chord-quality identification by ear.
//
// Plays a triad simultaneously and asks the user to pick the quality
// (Major / Minor / Diminished / Augmented / Sus4). Reuses
// PianoLab.theory.randomChord which mirrors the practice-lab shape.

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

  const ExerciseChordId = function (props) {
    const Keyboard = window.PianoLab.ui.Keyboard;
    const difficulty = props.difficulty || 'beginner';
    const onAttempt = props.onAttempt || function () {};
    const onNext = props.onNext || function () {};

    const [prompt, setPrompt] = React.useState(null);
    const [choices, setChoices] = React.useState([]);
    const [picked, setPicked] = React.useState(null);
    const [playing, setPlaying] = React.useState(false);
    const submittedRef = React.useRef(false);

    React.useEffect(function () {
      const p = window.PianoLab.theory.randomChord(difficulty);
      const count = difficulty === 'advanced' ? 5 : 4;
      const c = window.PianoLab.theory.choicesFor(p.correct, p.pool, count);
      setPrompt(p);
      setChoices(c);
      setPicked(null);
      submittedRef.current = false;
      const id = setTimeout(function () { play(p); }, 350);
      return function () { clearTimeout(id); };
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [difficulty]);

    function play(p) {
      const data = p || prompt;
      if (!data) return;
      setPlaying(true);
      window.PianoLab.audio
        .playChord(data.midis, 1500)
        .then(function () { setPlaying(false); })
        .catch(function () { setPlaying(false); });
    }

    function handlePick(choice) {
      if (picked || !prompt || submittedRef.current) return;
      submittedRef.current = true;
      setPicked(choice);
      const wasCorrect = choice.id === prompt.correct.id;
      onAttempt({
        exerciseType: 'chord_id',
        difficulty: difficulty,
        prompt: {
          root_midi: prompt.rootMidi,
          chord_intervals: prompt.correct.intervals,
        },
        userAnswer: choice.id,
        correctAnswer: prompt.correct.id,
        wasCorrect: wasCorrect,
      });
    }

    if (!prompt) return null;

    return (
      <div>
        <div style={{ fontSize: 14, color: 'oklch(45% 0.04 265)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>Chord by ear</div>
        <div style={{ fontSize: 18, color: 'oklch(20% 0.04 265)', fontWeight: 600, marginBottom: 18 }}>What chord quality is this?</div>

        <div style={{ display: 'flex', gap: 10, marginBottom: 18, flexWrap: 'wrap' }}>
          <button
            onClick={function () { play(); }}
            disabled={playing}
            style={{
              padding: '10px 18px', borderRadius: 10,
              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: 13, fontWeight: 700,
              cursor: playing ? 'wait' : 'pointer',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}
          >{playing ? 'Playing…' : 'Replay chord'}</button>
        </div>

        {/* Reveal the chord visually after the user picks. */}
        {picked && (
          <div style={{ marginBottom: 18 }}>
            <Keyboard
              loMidi={60}
              hiMidi={(function () {
                // hiMidi must (a) cover every note in the chord and
                // (b) land on a white key (Keyboard layout requires
                // the upper bound to be a white key). An augmented
                // chord rooted on F4 reaches MIDI 73 (C#5), which a
                // fixed hiMidi=72 (C5) would silently clip out of the
                // reveal — including the chord-tone label.
                var hi = 72;
                prompt.midis.forEach(function (m) { if (m > hi) hi = m; });
                while (window.PianoLab.theory.midiToName(hi).isBlack) hi += 1;
                return hi;
              })()}
              highlightMidis={prompt.midis}
              labels={(function () {
                const lbl = {};
                prompt.midis.forEach(function (m, i) { lbl[m] = ['R', '3', '5', '7'][i] || ''; });
                return lbl;
              })()}
              disabled={true}
            />
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10, marginBottom: 20 }}>
          {choices.map(function (c) {
            const isPicked = picked && picked.id === c.id;
            const isCorrect = c.id === prompt.correct.id;
            let bg = '#fff';
            let border = 'oklch(88% 0.02 265)';
            let color = 'oklch(20% 0.04 265)';
            if (picked) {
              if (isCorrect) { bg = 'oklch(94% 0.07 145)'; border = 'oklch(60% 0.16 145)'; color = 'oklch(28% 0.14 145)'; }
              else if (isPicked) { bg = 'oklch(95% 0.07 25)'; border = 'oklch(60% 0.18 25)'; color = 'oklch(32% 0.16 25)'; }
              else { bg = 'oklch(98% 0.005 265)'; color = 'oklch(55% 0.04 265)'; }
            }
            return (
              <button
                key={c.id}
                onClick={function () { handlePick(c); }}
                disabled={!!picked}
                style={{
                  padding: '14px 16px', borderRadius: 10,
                  border: '1px solid ' + border,
                  background: bg, color: color,
                  fontSize: 14, fontWeight: 600,
                  cursor: picked ? 'default' : 'pointer',
                  fontFamily: "'Plus Jakarta Sans', sans-serif",
                  minHeight: 50, textAlign: 'left',
                  transition: 'all 0.14s',
                }}
              >{c.label}</button>
            );
          })}
        </div>

        {picked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            {picked.id === prompt.correct.id ? (
              <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(35% 0.16 145)' }}>Correct — that was a {prompt.correct.label} chord.</div>
            ) : (
              <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(38% 0.18 25)' }}>Not quite — the answer was {prompt.correct.label}.</div>
            )}
            <button
              onClick={onNext}
              style={{
                marginLeft: 'auto',
                padding: '10px 22px', borderRadius: 10, border: 'none',
                background: 'oklch(35% 0.16 265)', color: '#fff',
                fontSize: 13, fontWeight: 700, cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >Next</button>
          </div>
        )}
      </div>
    );
  };

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