/* global React, window */
// Drums Lab — labelled drum-kit SVG.
//
// Props:
//   - showLabels (bool, default true)
//   - highlightId (string)            — kit piece id to flash, e.g. 'snare'
//   - onPieceClick(id)                — clicking a piece (any state)
//
// Coordinate system is 640×280 viewBox so the kit fits in the same card
// width as the guitar diagram. Pieces are rendered as ellipses + sticks
// + the stool/throne and footpedal so a non-drummer can recognise the
// silhouette.

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

  // Layout: { id, label, cx, cy, rx, ry, fill }, ordered back-to-front
  // so we paint deeper pieces (ride, crash) first and toms / snare on
  // top. Coordinates feel best at the chosen viewBox; if you change the
  // viewBox, eyeball it.
  const PIECES = [
    { id: 'crash',     label: 'Crash',       kind: 'cymbal', cx: 120, cy: 60,  rx: 50, ry: 12 },
    { id: 'hh_closed', label: 'Hi-hat',      kind: 'cymbal', cx: 70,  cy: 110, rx: 38, ry: 9  },
    { id: 'hh_open',   label: 'Hi-hat open', kind: 'cymbal', cx: 70,  cy: 110, rx: 38, ry: 9  },
    { id: 'ride',      label: 'Ride',        kind: 'cymbal', cx: 540, cy: 70,  rx: 58, ry: 14 },
    { id: 'tom_hi',    label: 'High tom',    kind: 'drum',   cx: 240, cy: 130, rx: 36, ry: 22 },
    { id: 'tom_mid',   label: 'Mid tom',     kind: 'drum',   cx: 330, cy: 130, rx: 40, ry: 24 },
    { id: 'tom_floor', label: 'Floor tom',   kind: 'drum',   cx: 470, cy: 175, rx: 48, ry: 30 },
    { id: 'snare',     label: 'Snare',       kind: 'drum',   cx: 170, cy: 175, rx: 44, ry: 28 },
    { id: 'kick',      label: 'Kick',        kind: 'drum',   cx: 300, cy: 215, rx: 72, ry: 44 },
  ];

  function fillFor(kind, isHighlight) {
    if (kind === 'cymbal') {
      return isHighlight ? 'oklch(80% 0.18 80)' : 'oklch(80% 0.06 80)';
    }
    return isHighlight ? 'oklch(75% 0.16 25)' : 'oklch(95% 0.012 60)';
  }

  function strokeFor(kind) {
    return kind === 'cymbal' ? 'oklch(40% 0.05 80)' : 'oklch(35% 0.04 60)';
  }

  const KitDiagram = function (props) {
    const showLabels = props.showLabels !== false;
    const highlightId = props.highlightId || null;
    const onPieceClick = props.onPieceClick || function () {};

    return (
      <div style={{ overflowX: 'auto' }}>
        <svg viewBox="0 0 640 290" width="100%" style={{ maxWidth: 640, height: 'auto', display: 'block', margin: '0 auto' }} aria-label="Labelled drum kit diagram">
          {/* Stool / throne (decorative) */}
          <ellipse cx={300} cy={278} rx={30} ry={6} fill="oklch(35% 0.03 60)" />
          <rect x={295} y={258} width={10} height={18} fill="oklch(35% 0.03 60)" />

          {/* Hardware uprights — thin grey lines so the cymbals look
              like they're mounted to something rather than floating. */}
          <line x1={70} y1={120} x2={70} y2={210} stroke="oklch(55% 0.02 80)" strokeWidth={1.5} />
          <line x1={120} y1={72} x2={120} y2={150} stroke="oklch(55% 0.02 80)" strokeWidth={1.5} />
          <line x1={540} y1={84} x2={540} y2={170} stroke="oklch(55% 0.02 80)" strokeWidth={1.5} />

          {/* Each piece: cymbal = thin ellipse, drum = stocked cylinder (front
              ellipse + back ellipse + side rectangle). */}
          {PIECES.map(function (p) {
            // The two hi-hat entries occupy the same spot — only highlight
            // the one matching the highlightId. Render the cymbal once.
            if (p.id === 'hh_open') return null; // handled by hh_closed below

            const isHighlight = (highlightId === p.id) ||
              (p.id === 'hh_closed' && highlightId === 'hh_open');
            const fill = fillFor(p.kind, isHighlight);
            const stroke = strokeFor(p.kind);

            if (p.kind === 'cymbal') {
              return (
                <g key={p.id} onClick={function () { onPieceClick(p.id); }} style={{ cursor: 'pointer' }}>
                  <ellipse
                    cx={p.cx} cy={p.cy} rx={p.rx} ry={p.ry}
                    fill={fill} stroke={stroke} strokeWidth={1.2}
                    style={{ transition: 'fill 0.18s' }}
                  />
                  {/* Subtle inner ellipse for that cymbal shimmer look. */}
                  <ellipse cx={p.cx} cy={p.cy} rx={p.rx * 0.6} ry={p.ry * 0.6} fill="none" stroke={stroke} strokeWidth={0.6} opacity={0.6} />
                </g>
              );
            }

            // Drum cylinder
            return (
              <g key={p.id} onClick={function () { onPieceClick(p.id); }} style={{ cursor: 'pointer' }}>
                <rect
                  x={p.cx - p.rx} y={p.cy - p.ry / 2}
                  width={p.rx * 2} height={p.ry}
                  fill={fill} stroke={stroke} strokeWidth={1.2}
                  style={{ transition: 'fill 0.18s' }}
                />
                <ellipse cx={p.cx} cy={p.cy + p.ry / 2} rx={p.rx} ry={p.ry / 2.4} fill={fill} stroke={stroke} strokeWidth={1.2} />
                <ellipse cx={p.cx} cy={p.cy - p.ry / 2} rx={p.rx} ry={p.ry / 2.4} fill={isHighlight ? 'oklch(90% 0.18 25)' : '#fff'} stroke={stroke} strokeWidth={1.2} />
              </g>
            );
          })}

          {/* Kick pedal (decorative) */}
          <rect x={290} y={262} width={26} height={6} fill="oklch(35% 0.03 60)" />

          {/* Drum sticks (decorative) */}
          <line x1={400} y1={155} x2={460} y2={120} stroke="oklch(60% 0.06 60)" strokeWidth={3} strokeLinecap="round" />
          <line x1={410} y1={165} x2={470} y2={130} stroke="oklch(60% 0.06 60)" strokeWidth={3} strokeLinecap="round" />

          {/* Labels with leader lines — drawn last so they sit on top. */}
          {showLabels && (
            <g fontFamily="'Plus Jakarta Sans', sans-serif" fontSize="11" fill="oklch(20% 0.04 265)">
              <line x1={120} y1={50} x2={120} y2={30} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={120} y={22} textAnchor="middle">Crash</text>

              <line x1={70} y1={102} x2={30} y2={102} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={26} y={105} textAnchor="end">Hi-hat</text>

              <line x1={540} y1={60} x2={540} y2={30} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={540} y={22} textAnchor="middle">Ride</text>

              <line x1={240} y1={112} x2={240} y2={84} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={240} y={76} textAnchor="middle">High tom</text>

              <line x1={330} y1={112} x2={330} y2={64} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={330} y={56} textAnchor="middle">Mid tom</text>

              <line x1={470} y1={155} x2={520} y2={155} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={526} y={158} textAnchor="start">Floor tom</text>

              <line x1={170} y1={155} x2={170} y2={130} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={170} y={124} textAnchor="middle">Snare</text>

              <line x1={300} y1={195} x2={300} y2={250} stroke="oklch(40% 0.04 265)" strokeWidth={0.7} />
              <text x={300} y={282} textAnchor="middle">Kick (bass drum)</text>
            </g>
          )}
        </svg>
      </div>
    );
  };

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