import { useEffect, useState } from 'react'
import type { MorphPlayer } from '../morph'

type Props = {
  active: boolean
  busy: boolean
  cycleHz: number
  setCycleHz: (hz: number) => void
  onStart: () => void
  onStop: () => void
  player: MorphPlayer | null
  error: string | null
}

const LOG_MIN = -2 // 0.01 Hz
const LOG_MAX = 2 // 100 Hz
const BOX_MIN = 0.001
const BOX_MAX = 1000

/** Round to three significant figures so slider positions give tidy numbers. */
const sig3 = (x: number) => Number(x.toPrecision(3))

const formatPeriod = (t: number) => {
  if (t >= 100) return `${t.toFixed(0)} s`
  if (t >= 10) return `${t.toFixed(1)} s`
  if (t >= 1) return `${t.toFixed(2)} s`
  return `${Number((t * 1000).toPrecision(3))} ms`
}

/** Controls for the continuous tone whose phases cycle between A and B. */
export function CyclePanel({ active, busy, cycleHz, setCycleHz, onStart, onStop, player, error }: Props) {
  const [pos, setPos] = useState(0)

  useEffect(() => {
    if (!active || !player) {
      setPos(0)
      return
    }
    return player.subscribe(setPos)
  }, [active, player])

  const period = 1 / cycleHz

  return (
    <section className="card cycle">
      <h2>Continuous tone cycling between A and B</h2>
      <p className="hint">
        A steady tone whose harmonic phases glide smoothly from A's values to B's and back, following a raised cosine at the rate below.
        The amplitudes never change, so any change you hear is due to phase alone. Phase, amplitude, f<sub>0</sub>, and rate edits take
        effect while it plays.
      </p>
      <div className="cycle-controls">
        {active ? (
          <button className="primary" onClick={onStop}>
            Stop
          </button>
        ) : (
          <button className="primary" onClick={onStart} disabled={busy}>
            Play cycling tone
          </button>
        )}
        <label>
          <span>Cycle rate</span>
          <input
            type="range"
            className="cycle-range"
            min={LOG_MIN}
            max={LOG_MAX}
            step={0.01}
            value={Math.min(LOG_MAX, Math.max(LOG_MIN, Math.log10(cycleHz)))}
            onChange={(e) => setCycleHz(sig3(10 ** Number(e.target.value)))}
            aria-label="cycle rate, logarithmic"
          />
          <input
            type="number"
            className="slider-value"
            min={BOX_MIN}
            max={BOX_MAX}
            step="any"
            value={cycleHz}
            onChange={(e) => {
              const x = Number(e.target.value)
              if (Number.isFinite(x) && x > 0) setCycleHz(Math.min(BOX_MAX, Math.max(BOX_MIN, x)))
            }}
          />
          <span className="slider-unit">Hz</span>
          <span className="cycle-period">(period {formatPeriod(period)})</span>
        </label>
      </div>
      <div className="cycle-position" aria-label="cycle position">
        <span className="cycle-end cycle-a">A</span>
        <div className="cycle-track">
          <div className="cycle-marker" style={{ left: `${pos * 100}%`, opacity: active ? 1 : 0.35 }} />
        </div>
        <span className="cycle-end cycle-b">B</span>
      </div>
      {error && <div className="error">{error}</div>}
    </section>
  )
}