// ─── Mini fretboard scale diagram ─────────────────────────────────────────────
// Shows a 6-string × 5-fret window of scale tones.
// Root notes → purple fill. Scale tones → dark grey fill.
// Strings: top = s6 (low E), bottom = s1 (high e).
// Window starts at the root fret on string 6.

const OPEN_PITCHES = [4, 9, 2, 7, 11, 4]  // E A D G B e  (s6 … s1)
const FRETS = 5

export default function RiffDiagram({ rootPc, scaleIntervals = [0, 3, 5, 7, 10] }) {
  if (rootPc === undefined || rootPc === null) return null

  // Fret window starts where the root lands on s6 (low E)
  const startFret = (rootPc - OPEN_PITCHES[0] + 12) % 12

  // Which pitch classes are in the scale?
  const scaleSet = new Set(scaleIntervals.map(i => (rootPc + i) % 12))

  // Collect dots: { s (0=s6…5=s1), f (0-4 within window), isRoot }
  const dots = []
  for (let s = 0; s < 6; s++) {
    for (let f = 0; f < FRETS; f++) {
      const pc = (OPEN_PITCHES[s] + startFret + f) % 12
      if (scaleSet.has(pc)) {
        dots.push({ s, f, isRoot: pc === rootPc })
      }
    }
  }

  // SVG layout
  const W = 152, H = 70
  const mL = 6, mT = 14, mR = 6, mB = 4
  const innerW = W - mL - mR   // 140
  const innerH = H - mT - mB   // 52

  const cellW = innerW / FRETS         // 28
  const strGap = innerH / 5           // gap between 6 strings (5 gaps)

  const sx = (f) => mL + f * cellW        // left edge of fret cell
  const cx = (f) => mL + (f + 0.5) * cellW  // centre of fret cell
  const sy = (s) => mT + s * strGap         // y of string s

  return (
    <svg width={W} height={H} className="shrink-0 overflow-visible">
      {/* Fret separators (vertical lines) */}
      {Array.from({ length: FRETS + 1 }, (_, f) => (
        <line key={f}
          x1={sx(f)} y1={mT - 2}
          x2={sx(f)} y2={H - mB}
          stroke={f === 0 ? '#555' : '#2a2a2a'}
          strokeWidth={f === 0 ? 2 : 1}
        />
      ))}

      {/* String lines (horizontal) */}
      {Array.from({ length: 6 }, (_, s) => (
        <line key={s}
          x1={mL} y1={sy(s)}
          x2={W - mR} y2={sy(s)}
          stroke="#3a3a3a"
          strokeWidth={s === 0 ? 1.5 : 1}
        />
      ))}

      {/* Fret numbers above */}
      {Array.from({ length: FRETS }, (_, f) => (
        <text key={f}
          x={cx(f)} y={9}
          textAnchor="middle" fontSize={8}
          fill={f === 0 && startFret > 0 ? '#a855f7' : '#555'}
          fontWeight={f === 0 && startFret > 0 ? 'bold' : 'normal'}>
          {startFret + f === 0 ? 'O' : startFret + f}
        </text>
      ))}

      {/* Scale dots */}
      {dots.map((d, i) => (
        <circle key={i}
          cx={cx(d.f)} cy={sy(d.s)}
          r={4.5}
          fill={d.isRoot ? '#a855f7' : '#3d3d3d'}
          stroke={d.isRoot ? '#c084fc' : '#606060'}
          strokeWidth={1}
        />
      ))}

      {/* Root labels */}
      {dots.filter(d => d.isRoot).map((d, i) => (
        <text key={i}
          x={cx(d.f)} y={sy(d.s) + 3.5}
          textAnchor="middle" fontSize={6}
          fill="white" fontWeight="bold">
          R
        </text>
      ))}
    </svg>
  )
}