import { getScale, getChordTones, NOTES } from '../lib/theory'

// ─── SVG Piano — 2 octaves (C3–B4) ───────────────────────────────────────────
const KEY_W   = 30
const KEY_H   = 80
const BLACK_W = 18
const BLACK_H = 50
const PIANO_W = 14 * KEY_W

const WHITE_OCT = [0, 2, 4, 5, 7, 9, 11]  // pitch classes per octave
const BLACK_OCT = [
  { pc: 1, wi: 0 }, { pc: 3, wi: 1 }, { pc: 6, wi: 3 },
  { pc: 8, wi: 4 }, { pc: 10, wi: 5 },
]
const WHITE_LABELS = ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4']

function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false }) {
  const max = Math.max(...values, 0.01)
  const wKeys = []
  const bKeys = []
  for (let oct = 0; oct < 2; oct++) {
    WHITE_OCT.forEach((pc, wi) => wKeys.push({ pc, wi: oct * 7 + wi }))
    BLACK_OCT.forEach(({ pc, wi }) => bKeys.push({ pc, wi: oct * 7 + wi }))
  }
  const svgH = keyH + 6 + (showPct ? 16 : 0)

  return (
    <svg viewBox={`0 0 ${PIANO_W} ${svgH}`} width="100%" style={{ display: 'block' }}>
      {/* White keys */}
      {wKeys.map(({ pc, wi }) => {
        const energy  = values[pc] / max
        const inChord = chordNotes?.has(pc)
        const inKey   = keyNotes?.has(pc)
        const x = wi * KEY_W
        const fillColor = inChord
          ? `rgba(167,139,250,${0.12 + energy * 0.88})`
          : inKey
          ? `rgba(251,191,36,${0.1 + energy * 0.7})`
          : `rgba(180,180,190,${0.05 + energy * 0.2})`
        const pct = showPct ? Math.round(values[pc] * 100) : 0

        return (
          <g key={`w${wi}`}>
            <rect x={x+1} y={3} width={KEY_W-2} height={keyH}
              rx={3} fill="rgb(20,20,26)" stroke="rgba(255,255,255,0.08)" strokeWidth={1} />
            {energy > (inChord || inKey ? 0.12 : 0.35) && (
              <rect
                x={x+1} y={3 + keyH * (1 - Math.min(energy, 1) * 0.85)}
                width={KEY_W-2} height={keyH * Math.min(energy, 1) * 0.85}
                rx={2} fill={fillColor} />
            )}
            <text x={x + KEY_W/2} y={keyH - 4} textAnchor="middle" fontSize={8}
              fill={inKey || inChord ? 'rgba(200,200,210,0.9)' : 'rgba(90,90,100,0.8)'}>
              {WHITE_LABELS[wi]}
            </text>
            {showPct && pct > 0 && (
              <text x={x + KEY_W/2} y={keyH + 14} textAnchor="middle" fontSize={8}
                fill={inKey ? 'rgb(251,191,36)' : 'rgba(100,100,110,0.8)'}>
                {pct}%
              </text>
            )}
          </g>
        )
      })}

      {/* Black keys */}
      {bKeys.map(({ pc, wi }, i) => {
        const energy  = values[pc] / max
        const inChord = chordNotes?.has(pc)
        const inKey   = keyNotes?.has(pc)
        const x = wi * KEY_W + KEY_W - BLACK_W / 2
        const fillColor = inChord
          ? 'rgba(139,92,246,0.9)'
          : inKey
          ? 'rgba(180,130,0,0.85)'
          : 'rgba(70,70,80,0.75)'
        const pct = showPct ? Math.round(values[pc] * 100) : 0

        return (
          <g key={`b${i}`}>
            {/* Base */}
            <rect x={x} y={3} width={BLACK_W} height={BLACK_H}
              rx={2} fill="rgb(14,14,18)" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
            {/* Partial fill from bottom — same mechanic as white keys */}
            {energy > (inChord || inKey ? 0.05 : 0.35) && (
              <rect
                x={x} y={3 + BLACK_H * (1 - Math.min(energy, 1) * 0.9)}
                width={BLACK_W} height={BLACK_H * Math.min(energy, 1) * 0.9}
                rx={1} fill={fillColor} />
            )}
            {/* % label near top of key (inside) */}
            {showPct && pct > 0 && (
              <text x={x + BLACK_W/2} y={3 + 10} textAnchor="middle" fontSize={7}
                fill={inKey || inChord ? 'rgba(220,220,230,0.9)' : 'rgba(110,110,120,0.7)'}>
                {pct}%
              </text>
            )}
            {/* Note name near bottom of key */}
            <text x={x + BLACK_W/2} y={3 + BLACK_H - 5} textAnchor="middle" fontSize={7}
              fill={inKey || inChord ? 'rgba(210,210,220,0.85)' : 'rgba(110,110,120,0.6)'}>
              {NOTES[pc]}
            </text>
          </g>
        )
      })}
    </svg>
  )
}

// ─── Mini fretboard — guitar mode chroma view ─────────────────────────────────
const STRINGS = [
  { label: 'e', root: 4 },
  { label: 'B', root: 11 },
  { label: 'G', root: 7 },
  { label: 'D', root: 2 },
  { label: 'A', root: 9 },
  { label: 'E', root: 4 },
]
const MF_NUT_X  = 22
const MF_OPEN_X = 10
const MF_FRET_W = 28
const MF_STR_H  = 16
const MF_PAD_T  = 16
const MF_PAD_B  = 8
const MF_FRETS  = 13  // frets 0–12
const MF_DOT_R  = 6
const MF_W = MF_NUT_X + (MF_FRETS - 1) * MF_FRET_W + 10
const MF_H = MF_PAD_T + 5 * MF_STR_H + MF_PAD_B

const mfFretX   = f  => MF_NUT_X + (f - 0.5) * MF_FRET_W
const mfStringY = si => MF_PAD_T + si * MF_STR_H

function MiniFretboard({ values, keyNotes, chordNotes }) {
  const max = Math.max(...values, 0.01)

  return (
    <svg viewBox={`0 0 ${MF_W} ${MF_H}`} width="100%" style={{ display: 'block' }}>
      {/* Board background */}
      <rect x={MF_NUT_X} y={MF_PAD_T - 5}
        width={MF_W - MF_NUT_X - 6} height={5 * MF_STR_H + 10}
        fill="#1a120b" rx={2} />

      {/* Fret position dots */}
      {[3, 5, 7, 9].map(f => (
        <circle key={f} cx={mfFretX(f)} cy={MF_PAD_T + 2.5 * MF_STR_H} r={3} fill="#3a2a1a" />
      ))}
      <circle cx={mfFretX(12)} cy={MF_PAD_T + 1.5 * MF_STR_H} r={3} fill="#3a2a1a" />
      <circle cx={mfFretX(12)} cy={MF_PAD_T + 3.5 * MF_STR_H} r={3} fill="#3a2a1a" />

      {/* Fret lines */}
      {Array.from({ length: MF_FRETS - 1 }, (_, i) => i + 1).map(f => (
        <line key={f}
          x1={MF_NUT_X + f * MF_FRET_W} y1={MF_PAD_T - 5}
          x2={MF_NUT_X + f * MF_FRET_W} y2={MF_PAD_T + 5 * MF_STR_H + 5}
          stroke="#4a3a2a" strokeWidth={1} />
      ))}

      {/* Nut */}
      <line x1={MF_NUT_X} y1={MF_PAD_T - 5} x2={MF_NUT_X} y2={MF_PAD_T + 5 * MF_STR_H + 5}
        stroke="#c0b090" strokeWidth={3} />

      {/* Strings */}
      {STRINGS.map((_, si) => (
        <line key={si}
          x1={MF_OPEN_X - MF_DOT_R - 2} y1={mfStringY(si)}
          x2={MF_W - 6} y2={mfStringY(si)}
          stroke="#9ca3af"
          strokeWidth={si < 2 ? 0.8 : si < 4 ? 1.2 : 1.8} />
      ))}

      {/* Fret numbers */}
      {[3, 5, 7, 9, 12].map(f => (
        <text key={f} x={mfFretX(f)} y={MF_PAD_T - 5}
          textAnchor="middle" fontSize={8} fill="#6b7280">{f}</text>
      ))}

      {/* String labels */}
      {STRINGS.map((s, si) => (
        <text key={si} x={5} y={mfStringY(si) + 3.5}
          textAnchor="middle" fontSize={9} fill="#6b7280">{s.label}</text>
      ))}

      {/* Note dots — colored by energy */}
      {STRINGS.flatMap((str, si) =>
        Array.from({ length: MF_FRETS }, (_, fi) => {
          const pc      = (str.root + fi) % 12
          const energy  = values[pc] / max
          const inChord = chordNotes?.has(pc)
          const inKey   = keyNotes?.has(pc)
          if (!inChord && !inKey && energy < 0.35) return null
          if ((inChord || inKey) && energy < 0.08) return null

          const cx = fi === 0 ? MF_OPEN_X : mfFretX(fi)
          const cy = mfStringY(si)

          let fill, textFill
          if (inChord) {
            fill = `rgba(168,85,247,${0.3 + energy * 0.7})`
            textFill = '#fff'
          } else if (inKey) {
            fill = `rgba(245,158,11,${0.2 + energy * 0.75})`
            textFill = 'rgba(0,0,0,0.85)'
          } else {
            fill = `rgba(100,100,120,${energy * 0.7})`
            textFill = 'rgba(180,180,190,0.7)'
          }

          return (
            <g key={`${si}-${fi}`}>
              {energy > 0.3 && (inChord || inKey) && (
                <circle cx={cx} cy={cy} r={MF_DOT_R + 4}
                  fill={inChord ? 'rgba(168,85,247,0.25)' : 'rgba(245,158,11,0.2)'}
                  style={{ filter: 'blur(4px)' }} />
              )}
              <circle cx={cx} cy={cy} r={MF_DOT_R} fill={fill} />
              <text x={cx} y={cy + 3.5} textAnchor="middle" fontSize={7} fontWeight="600" fill={textFill}>
                {NOTES[pc]}
              </text>
            </g>
          )
        })
      )}
    </svg>
  )
}

// ─── Oscilloscope strip ───────────────────────────────────────────────────────
const OSC_W = 600
const OSC_H = 110

function Oscilloscope({ waveform }) {
  const { wave, rms, detectedFreq, detectedNote } = waveform || {}
  const silent = !rms || rms < 0.005

  let path = '', sinePath = ''
  if (wave?.length) {
    const mid     = OSC_H / 2
    const waveAmp = Math.max(...wave.map(Math.abs), 0.001)
    const gain    = Math.min((OSC_H * 0.44) / waveAmp, OSC_H * 0.44)

    // Zero-crossing trigger: find first upward zero cross in first half → stable display
    const lo = Math.floor(wave.length / 4)
    const hi = Math.floor(wave.length / 2)
    let offset = lo
    for (let i = lo; i < hi - 1; i++) {
      if (wave[i] <= 0 && wave[i + 1] > 0) { offset = i; break }
    }
    const drawLen = Math.min(wave.length - offset, Math.floor(wave.length * 0.85))
    const step    = OSC_W / drawLen

    path = Array.from({ length: drawLen }, (_, i) => {
      const v = wave[offset + i]
      return `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${(mid - v * gain).toFixed(1)}`
    }).join(' ')

    // Sine overlay at the detected fundamental, phase-matched to trigger offset
    if (detectedFreq) {

      const effectiveSR = 44100 / 8
      const sineAmp = Math.min(waveAmp * gain * 0.55, OSC_H * 0.38)
      sinePath = Array.from({ length: 300 }, (_, i) => {
        const t     = i / 299
        const x     = (t * OSC_W).toFixed(1)
        const phase = ((offset + t * drawLen) / effectiveSR) * detectedFreq * Math.PI * 2
        const y     = (mid - Math.sin(phase) * sineAmp).toFixed(1)
        return `${i === 0 ? 'M' : 'L'}${x},${y}`
      }).join(' ')
    }
  }

  const lineColor = detectedFreq
    ? 'rgba(168,85,247,0.9)'
    : silent ? 'rgba(50,50,60,0.8)' : 'rgba(100,200,140,0.75)'

  return (
    <div>
      <div className="flex items-center justify-between mb-1">
        <p className="text-xs text-gray-600 uppercase tracking-widest">Oscilloscope — raw mic input</p>
        <div className="flex items-center gap-3">
          {detectedFreq && detectedNote && (
            <>
              <span className="text-xs font-bold text-accent">{detectedNote}</span>
              <span className="text-xs text-gray-500 tabular-nums">{detectedFreq.toFixed(1)} Hz</span>
              <span className="text-xs text-gray-600 tabular-nums">{(1000 / detectedFreq).toFixed(2)} ms / cycle</span>
            </>
          )}
          {!detectedFreq && !silent && <span className="text-xs text-gray-600">signal — no clear pitch</span>}
          {silent && <span className="text-xs text-gray-700">silence</span>}
          <span className="text-xs text-gray-700 tabular-nums">rms {rms ? (rms * 100).toFixed(1) : '0.0'}%</span>
        </div>
      </div>
      <svg viewBox={`0 0 ${OSC_W} ${OSC_H}`} width="100%" style={{ display: 'block' }}
        className="rounded-lg bg-surface border border-border">
        {/* Zero line */}
        <line x1={0} y1={OSC_H / 2} x2={OSC_W} y2={OSC_H / 2}
          stroke="rgba(255,255,255,0.05)" strokeWidth={0.5} />
        {/* Fill body — close path to the centre line for a filled silhouette */}
        {path && (
          <path
            d={`${path} L${OSC_W},${OSC_H / 2} L0,${OSC_H / 2} Z`}
            fill={detectedFreq
              ? 'rgba(168,85,247,0.08)'
              : silent ? 'none' : 'rgba(90,190,130,0.07)'}
          />
        )}
        {/* Waveform line */}
        {path && <path d={path} fill="none" stroke={lineColor} strokeWidth={0.9}
          strokeLinejoin="round" strokeLinecap="round" />}
        {/* Sine overlay */}
        {sinePath && <path d={sinePath} fill="none"
          stroke="rgba(168,85,247,0.28)" strokeWidth={0.9}
          strokeLinejoin="round" strokeDasharray="5 4" />}
      </svg>
    </div>
  )
}

// ─── Frequency spectrum ───────────────────────────────────────────────────────
const SPEC_H   = 130
const SPEC_F_MIN = 40
const SPEC_F_MAX = 4000
const SPEC_LOG   = Math.log(SPEC_F_MAX / SPEC_F_MIN)

// Map a frequency in Hz to an x pixel position (log scale)
function specX(f, w) {
  if (f <= SPEC_F_MIN) return 0
  if (f >= SPEC_F_MAX) return w
  return w * Math.log(f / SPEC_F_MIN) / SPEC_LOG
}

const SPEC_GRID = [
  { label: 'E2', freq: 82.4  },
  { label: 'C3', freq: 130.8 },
  { label: 'E3', freq: 164.8 },
  { label: 'A3', freq: 220   },
  { label: 'C4', freq: 261.6 },
  { label: 'E4', freq: 329.6 },
  { label: 'A4', freq: 440   },
  { label: 'C5', freq: 523.3 },
  { label: 'C6', freq: 1046.5},
  { label: 'C7', freq: 2093  },
]

function SpectrumPanel({ spectrum, detectedFreq }) {
  const W = OSC_W
  let fillPath = '', strokePath = ''

  if (spectrum?.length) {
    const n    = spectrum.length
    const pts  = Array.from({ length: n }, (_, i) => {
      const x = ((i / (n - 1)) * W).toFixed(1)
      const y = (SPEC_H * (1 - spectrum[i])).toFixed(1)
      return `${i === 0 ? 'M' : 'L'}${x},${y}`
    }).join(' ')
    strokePath = pts
    fillPath   = pts + ` L${W},${SPEC_H} L0,${SPEC_H} Z`
  }

  return (
    <div>
      <p className="text-xs text-gray-600 uppercase tracking-widest mb-1">
        Frequency spectrum — 40 Hz → 4 kHz (log scale)
      </p>
      <svg viewBox={`0 0 ${W} ${SPEC_H}`} width="100%" style={{ display: 'block' }}
        className="rounded-lg bg-surface border border-border">

        {/* Note grid lines */}
        {SPEC_GRID.map(({ label, freq }) => {
          const x = specX(freq, W).toFixed(1)
          return (
            <g key={label}>
              <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
                stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
              <text x={x} y={SPEC_H - 3} textAnchor="middle" fontSize={7.5}
                fill="rgba(80,80,95,0.9)">{label}</text>
            </g>
          )
        })}

        {/* Spectrum fill + stroke */}
        {fillPath && (
          <>
            <path d={fillPath} fill="rgba(80,180,130,0.13)" />
            <path d={strokePath} fill="none" stroke="rgba(90,200,145,0.55)" strokeWidth={0.8} />
          </>
        )}

        {/* Fundamental frequency */}
        {detectedFreq && (() => {
          const x = specX(detectedFreq, W).toFixed(1)
          return (
            <g>
              <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
                stroke="rgba(168,85,247,0.9)" strokeWidth={1.2} />
              <text x={x} y={11} textAnchor="middle" fontSize={8} fontWeight="700"
                fill="rgba(168,85,247,0.95)">f</text>
            </g>
          )
        })()}

        {/* Harmonics 2f–5f */}
        {detectedFreq && [2, 3, 4, 5].map(h => {
          const hf = detectedFreq * h
          if (hf > SPEC_F_MAX) return null
          const x   = specX(hf, W).toFixed(1)
          const op  = (0.5 - (h - 2) * 0.1).toFixed(2)
          return (
            <g key={h}>
              <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
                stroke={`rgba(168,85,247,${op})`} strokeWidth={0.7} strokeDasharray="3 4" />
              <text x={x} y={11} textAnchor="middle" fontSize={7.5}
                fill={`rgba(168,85,247,${op})`}>{h}f</text>
            </g>
          )
        })}
      </svg>
    </div>
  )
}

// ─── Main component ───────────────────────────────────────────────────────────
export default function DebugView({ chroma, chordCandidates, noteAnalysis, waveform, keyInfo, currentChord, instrument = 'guitar' }) {
  const keyPCs   = new Set(keyInfo ? getScale(keyInfo.root, keyInfo.mode).map(n => NOTES.indexOf(n)) : [])
  const chordPCs = new Set(currentChord ? getChordTones(currentChord).map(n => NOTES.indexOf(n)) : [])

  const chromaArr    = chroma       ? [...chroma]            : new Array(12).fill(0)
  const histFreq     = noteAnalysis ? noteAnalysis.freq       : new Array(12).fill(0)
  const topKeys      = noteAnalysis ? noteAnalysis.topKeys    : []
  const totalNotes   = noteAnalysis?.total      ?? 0
  const sessionSecs  = noteAnalysis?.sessionSecs ?? 0
  const sessionLabel = sessionSecs >= 60
    ? `${Math.floor(sessionSecs / 60)}m ${sessionSecs % 60}s`
    : `${sessionSecs}s`
  const topScore    = chordCandidates[0]?.score ?? 1
  const topKeyScore = topKeys[0]?.score ?? 1

  return (
    <div className="bg-panel border border-border rounded-2xl p-4 flex flex-col gap-4">
      <p className="text-xs text-gray-500 uppercase tracking-widest shrink-0">Behind the Scenes</p>

      {/* ── Live chroma visualization (instrument-synced) ── */}
      <div>
        <p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Live chroma — what the engine hears right now</p>
        {instrument === 'guitar'
          ? <MiniFretboard values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} />
          : <PianoSVG values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} keyH={90} />
        }
      </div>

      {/* ── Bottom three columns ── */}
      <div className="grid grid-cols-[2fr_1.5fr_1fr] gap-5">

        {/* Col 1: Chord candidates */}
        <div>
          <p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Chord candidates</p>
          <div className="flex flex-col gap-1">
            {chordCandidates.length === 0 && (
              <p className="text-gray-700 text-xs">No signal detected</p>
            )}
            {chordCandidates.map((c, i) => (
              <div
                key={c.name}
                className={`flex items-center gap-2 px-2 py-1.5 rounded-lg ${
                  i === 0 ? 'bg-accent/10 border border-accent/25' : 'border border-transparent'
                }`}
              >
                <span className="text-xs text-gray-600 w-3 shrink-0">{i + 1}</span>
                <span className={`text-sm font-bold w-14 shrink-0 ${i === 0 ? 'text-white' : 'text-gray-400'}`}>
                  {c.name}
                </span>
                <div className="flex-1 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full transition-all duration-300 ${i === 0 ? 'bg-accent' : 'bg-gray-600'}`}
                    style={{ width: `${(c.score / topScore) * 100}%` }}
                  />
                </div>
                <span className="text-xs text-gray-500 w-8 text-right tabular-nums">{c.score.toFixed(2)}</span>
                <div className="flex gap-1 w-14 justify-end">
                  {c.diatonic  && <span className="text-[9px] px-1 rounded bg-green-900/50 text-green-400">key</span>}
                  {c.bassBonus > 0 && <span className="text-[9px] px-1 rounded bg-blue-900/50 text-blue-400">bass</span>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Col 2: Note history piano with % labels */}
        <div>
          <div className="flex items-baseline justify-between mb-2">
            <p className="text-xs text-gray-600 uppercase tracking-widest">Note history</p>
            {totalNotes > 0 && (
              <span className="text-[10px] text-gray-600 tabular-nums">
                {totalNotes.toLocaleString()} notes · {sessionLabel}
              </span>
            )}
          </div>
          <PianoSVG values={histFreq} keyNotes={keyPCs} chordNotes={chordPCs} keyH={70} showPct={true} />
        </div>

        {/* Col 3: Key candidates */}
        <div>
          <p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Key match scores</p>
          <div className="flex flex-col gap-1.5">
            {topKeys.length === 0 && (
              <p className="text-gray-700 text-xs">Not enough history</p>
            )}
            {topKeys.map((k, i) => (
              <div key={`${k.root}-${k.mode}`} className="flex items-center gap-2">
                <span className={`text-xs w-16 shrink-0 ${i === 0 ? 'text-white font-semibold' : 'text-gray-500'}`}>
                  {k.root} {k.mode === 'major' ? 'maj' : 'min'}
                </span>
                <div className="flex-1 h-1 bg-gray-800 rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${i === 0 ? 'bg-amber-400' : 'bg-gray-600'}`}
                    style={{ width: `${Math.max(0, (k.score / topKeyScore) * 100)}%` }}
                  />
                </div>
                <span className="text-[10px] text-gray-600 tabular-nums w-8 text-right">{k.score.toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>

      </div>

      {/* ── Oscilloscope + spectrum ── */}
      <div className="flex flex-col gap-3">
        <Oscilloscope waveform={waveform} />
        <SpectrumPanel spectrum={waveform?.spectrum} detectedFreq={waveform?.detectedFreq} />
      </div>
    </div>
  )
}