/* global React, window */
// Drums Lab — Lesson: Counting, beats, subdivisions.
//
// Read-only lesson page. Explains how drummers count a bar, what
// "subdivisions" mean (quarter / eighth / sixteenth), and walks through
// the most common time signatures. Each example has a Play button that
// triggers an audible click + hi-hat pattern.

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

  // Helper: build a one-bar beat with only the hi-hat lane populated.
  function hhOnly(steps, bpm) {
    var lane = [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0];
    for (var i = 0; i < steps.length; i++) lane[steps[i]] = 1;
    return {
      id: 'demo',
      label: 'demo',
      bpm: bpm,
      lanes: { kick: [], snare: [], hh: lane, crash: [], tom: [] },
    };
  }

  const Card = function (props) {
    return (
      <div style={{
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 12,
        padding: 16,
        background: '#fff',
        marginBottom: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, gap: 10, flexWrap: 'wrap' }}>
          <strong style={{ fontWeight: 700, fontSize: 14.5, color: 'oklch(20% 0.04 265)' }}>{props.title}</strong>
          {props.onPlay && (
            <button onClick={props.onPlay} style={{
              padding: '7px 14px',
              borderRadius: 999,
              border: '1px solid oklch(35% 0.16 265)',
              background: 'oklch(35% 0.16 265)',
              color: '#fff',
              fontSize: 12,
              fontWeight: 700,
              cursor: 'pointer',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}>▶ Play</button>
          )}
        </div>
        <div style={{ fontSize: 13, color: 'oklch(40% 0.04 265)', lineHeight: 1.5, marginBottom: props.children ? 10 : 0 }}>{props.blurb}</div>
        {props.children}
      </div>
    );
  };

  const LessonCounting = function () {
    function playPattern(steps, bpm) {
      window.DrumsLab.audio.playBeat(hhOnly(steps, bpm), { bars: 1, bpm: bpm }).catch(function () {});
    }

    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' }}>Counting and subdivisions</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          Every drummer counts inside their head while they play. The count tells you WHERE you are in the bar — and which subdivisions are landing on which beat.
        </p>

        <Card
          title="Quarter notes — 1, 2, 3, 4"
          blurb='Four even beats per bar. Say "one, two, three, four" out loud at a steady tempo. Each number is a quarter note. This is the heartbeat of a 4/4 bar.'
          onPlay={function () { playPattern([0, 4, 8, 12], 96); }}
        />

        <Card
          title="Eighth notes — 1 & 2 & 3 & 4 &"
          blurb='Split each quarter in half. Count "one and two and three and four and" — twice as many notes per bar. Most pop / rock hi-hat patterns are straight eighth notes.'
          onPlay={function () { playPattern([0, 2, 4, 6, 8, 10, 12, 14], 96); }}
        />

        <Card
          title="Sixteenth notes — 1 e & a 2 e & a"
          blurb='Split each eighth in half again. Four notes per beat — count "one-e-and-a, two-e-and-a, three-e-and-a, four-e-and-a." Funk and hi-hat sizzle patterns live at this subdivision.'
          onPlay={function () { playPattern([0,1,2,3, 4,5,6,7, 8,9,10,11, 12,13,14,15], 92); }}
        />

        <div style={{ marginTop: 8, marginBottom: 8 }}>
          <h3 style={{ fontSize: 17, fontWeight: 700, color: 'oklch(20% 0.04 265)', margin: '12px 0 6px' }}>Common time signatures</h3>
          <p style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', margin: '0 0 10px', lineHeight: 1.5 }}>
            The top number is HOW MANY beats per bar. The bottom number is WHAT KIND of note gets the count (4 = quarter, 8 = eighth).
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
          {window.DrumsLab.theory.TIME_SIGNATURES.map(function (ts) {
            return (
              <div key={ts.id} style={{
                border: '1px solid oklch(92% 0.012 265)',
                borderRadius: 12,
                padding: 14,
                background: 'oklch(98% 0.005 265)',
              }}>
                <div style={{ fontSize: 24, fontWeight: 800, color: 'oklch(28% 0.1 265)', marginBottom: 4, lineHeight: 1 }}>{ts.label}</div>
                <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>{ts.blurb}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  window.DrumsLab.ui.LessonCounting = LessonCounting;
})();