/* global React, window */
// Guitar Lab — SVG chord diagram renderer.
//
// Renders a vertical chord box: 6 strings (low E on the LEFT, high E on
// the RIGHT — the perspective you see when you look down at your own
// guitar while playing) with N visible frets (default 5) and finger
// dots / open / muted markers above and inside the diagram.
//
// Props:
//   - chord:      OPEN_CHORDS entry (the only required prop)
//   - width:      pixel width (default 180)
//   - showFingers: if true, render finger numbers inside each dot
//   - showLabel:  if true, render the chord label below the diagram
//
// Exposed as window.GuitarLab.ui.ChordDiagram.

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

  const ChordDiagram = function (props) {
    const chord = props.chord;
    const width = props.width || 180;
    const showFingers = props.showFingers !== false; // default true
    const showLabel = props.showLabel !== false;     // default true

    if (!chord || !chord.frets) {
      return <div style={{ color: 'oklch(55% 0.04 265)', fontSize: 12 }}>No chord.</div>;
    }

    // Establish the fret window — we show frets startFret..startFret+4.
    // For most beginner chords startFret = 1 (so fret 1 is on top, just
    // below the nut). For barre chords up the neck we'd shift it up but
    // we don't ship any of those in v1.
    const maxFret = Math.max.apply(null, chord.frets.filter(function (f) { return f > 0; }).concat([0]));
    const startFret = maxFret > 4 ? maxFret - 3 : 1;
    const numFrets = 5;

    const padTop = 28;     // room above for X / O markers
    const padBottom = showLabel ? 22 : 6;
    const padLeft = 14;
    const padRight = 14;
    const stringSpacing = (width - padLeft - padRight) / 5; // 6 strings, 5 gaps
    const fretSpacing = stringSpacing * 1.05;
    const height = padTop + padBottom + numFrets * fretSpacing + 8;

    function stringX(stringIndex) {
      // stringIndex 0 = low E (LEFT), 5 = high E (RIGHT).
      return padLeft + stringIndex * stringSpacing;
    }
    function fretY(fretInWindow) {
      // fretInWindow 0 = nut (or the top fret line if startFret > 1)
      return padTop + fretInWindow * fretSpacing;
    }

    return (
      <div style={{ display: 'inline-block', textAlign: 'center', fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        <svg
          width={width}
          height={height}
          viewBox={'0 0 ' + width + ' ' + height}
          style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
          role="img"
          aria-label={chord.label + ' chord diagram'}
        >
          {/* Nut (only when starting at fret 1) — drawn as a thick line at top */}
          {startFret === 1 && (
            <rect x={padLeft - 1} y={padTop - 5} width={stringSpacing * 5 + 2} height={5} fill="oklch(20% 0.02 80)" />
          )}

          {/* Fret-position label on the left (when not starting at fret 1) */}
          {startFret > 1 && (
            <text x={padLeft - 6} y={padTop + 14} textAnchor="end" fontSize="11" fontWeight="600" fill="oklch(45% 0.04 265)">{startFret}fr</text>
          )}

          {/* Strings (vertical lines) */}
          {[0, 1, 2, 3, 4, 5].map(function (i) {
            return (
              <line
                key={'cd-s-' + i}
                x1={stringX(i)}
                y1={padTop}
                x2={stringX(i)}
                y2={padTop + numFrets * fretSpacing}
                stroke="oklch(45% 0.02 265)"
                strokeWidth={1.1}
              />
            );
          })}

          {/* Fret lines (horizontal) */}
          {[0, 1, 2, 3, 4, 5].map(function (i) {
            // first line (i=0) only when no nut is drawn
            if (i === 0 && startFret === 1) return null;
            return (
              <line
                key={'cd-f-' + i}
                x1={padLeft}
                y1={padTop + i * fretSpacing}
                x2={padLeft + stringSpacing * 5}
                y2={padTop + i * fretSpacing}
                stroke="oklch(45% 0.02 265)"
                strokeWidth={1.1}
              />
            );
          })}

          {/* X / O markers above the nut, and finger dots inside */}
          {chord.frets.map(function (fret, i) {
            var x = stringX(i);
            if (fret === -1) {
              return (
                <text key={'cd-x-' + i} x={x} y={padTop - 9} textAnchor="middle" fontSize="14" fontWeight="700" fill="oklch(38% 0.18 25)">×</text>
              );
            }
            if (fret === 0) {
              return (
                <circle key={'cd-o-' + i} cx={x} cy={padTop - 11} r={5} fill="none" stroke="oklch(20% 0.02 265)" strokeWidth={1.4} />
              );
            }
            var winFret = fret - (startFret - 1);
            var cy = padTop + winFret * fretSpacing - fretSpacing / 2;
            var finger = chord.fingers && chord.fingers[i];
            return (
              <g key={'cd-d-' + i}>
                <circle cx={x} cy={cy} r={9.5} fill="oklch(28% 0.05 265)" />
                {showFingers && finger > 0 && (
                  <text x={x} y={cy + 3.5} textAnchor="middle" fontSize="11" fontWeight="700" fill="#fff">{finger}</text>
                )}
              </g>
            );
          })}

          {/* Chord label below */}
          {showLabel && (
            <text x={width / 2} y={height - 6} textAnchor="middle" fontSize="14" fontWeight="700" fill="oklch(22% 0.04 265)">{chord.short}</text>
          )}
        </svg>
      </div>
    );
  };

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