import { useCallback, useEffect, useRef, useState } from 'react';
import { DEFAULTS, loadParams, saveParams, type WoodblockParams } from './params';
import { useRenderer } from './hooks/useRenderer';
import { encodeWav } from './lib/wav';
import ParamPanel from './components/ParamPanel';
import Scene3D from './components/Scene3D';
import DiagnosticsPanel from './components/DiagnosticsPanel';
import WaveformPlot from './components/plots/WaveformPlot';
import SpectrumPlot from './components/plots/SpectrumPlot';
import SpectrogramPlot from './components/plots/SpectrogramPlot';
import ContactForcePlot from './components/plots/ContactForcePlot';
import ModeShapes from './components/plots/ModeShapes';

export default function App() {
  const [params, setParams] = useState<WoodblockParams>(() => loadParams());
  const { result, busy, stage, progress, renderFull } = useRenderer(params);
  const audioCtxRef = useRef<AudioContext | null>(null);

  useEffect(() => saveParams(params), [params]);

  const onChange = useCallback((key: keyof WoodblockParams, value: number | boolean) => {
    setParams((p) => ({ ...p, [key]: value }));
  }, []);

  const reset = useCallback(() => setParams({ ...DEFAULTS }), []);

  const [looping, setLooping] = useState(false);
  const loopSrcRef = useRef<AudioBufferSourceNode | null>(null);

  const getAudioCtx = useCallback((sampleRate: number) => {
    let ctx = audioCtxRef.current;
    if (!ctx || ctx.state === 'closed') {
      ctx = new AudioContext({ sampleRate });
      audioCtxRef.current = ctx;
    }
    void ctx.resume();
    return ctx;
  }, []);

  const makeBuffer = useCallback((ctx: AudioContext, r: NonNullable<typeof result>) => {
    const buf = ctx.createBuffer(1, r.y.length, r.sampleRate);
    buf.copyToChannel(new Float32Array(r.y), 0);
    return buf;
  }, []);

  const play = useCallback(() => {
    if (!result) return;
    const ctx = getAudioCtx(result.sampleRate);
    const src = ctx.createBufferSource();
    src.buffer = makeBuffer(ctx, result);
    src.connect(ctx.destination);
    src.start();
  }, [result, getAudioCtx, makeBuffer]);

  // Loop mode: repeat the strike continuously, swapping in each new render as
  // parameters change so edits are audible without pressing Play.
  useEffect(() => {
    if (!looping || !result) return;
    const ctx = getAudioCtx(result.sampleRate);
    const src = ctx.createBufferSource();
    src.buffer = makeBuffer(ctx, result);
    src.loop = true;
    src.connect(ctx.destination);
    src.start();
    loopSrcRef.current = src;
    return () => {
      loopSrcRef.current = null;
      try {
        src.stop();
      } catch {
        // already stopped
      }
      src.disconnect();
    };
  }, [looping, result, getAudioCtx, makeBuffer]);

  const download = useCallback(() => {
    if (!result) return;
    const blob = encodeWav(result.y, result.sampleRate, params.bit_depth === 16 ? 16 : 24);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = result.quality === 'full' ? 'woodblock.wav' : 'woodblock_preview.wav';
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 5000);
  }, [result, params.bit_depth]);

  return (
    <div className="app">
      <div className="topbar">
        <h1>Woodblock Simulator</h1>
        <button className="primary" onClick={renderFull} disabled={busy}>
          Render
        </button>
        <button
          className={`play ${result?.quality === 'preview' ? 'preview' : ''}`}
          onClick={play}
          disabled={!result}
          title={
            result?.quality === 'preview'
              ? 'Playing the fast preview render; press Render for full quality'
              : 'Play the rendered strike'
          }
        >
          ▶ Play{result?.quality === 'preview' ? ' (preview)' : ''}
        </button>
        <button
          className={`loop ${looping ? 'active' : ''}`}
          onClick={() => setLooping((v) => !v)}
          disabled={!result && !looping}
          title="Repeat the strike continuously so parameter changes are audible immediately"
        >
          ⟳ Loop{looping ? ' on' : ''}
        </button>
        <button onClick={download} disabled={!result}>
          Download .wav{result?.quality === 'preview' ? ' (preview)' : ''}
        </button>
        <button onClick={reset}>Reset to defaults</button>
        <div className="status">
          {result && (
            <span className={`badge ${result.quality}`}>
              {result.quality === 'full' ? 'full quality' : 'preview quality — press Render'}
            </span>
          )}
          {busy ? (
            <>
              <span>{stage}…</span>
              <div className="progressbar">
                <div style={{ width: `${Math.round(progress * 100)}%` }} />
              </div>
            </>
          ) : (
            <span>ready</span>
          )}
        </div>
      </div>
      <div className="main">
        <div className="sidebar">
          <ParamPanel params={params} onChange={onChange} />
        </div>
        <div className="content">
          <div className="card wide">
            <h2>Geometry — block, strike, slit, microphone</h2>
            <Scene3D params={params} />
          </div>
          {result && (
            <>
              <div className="card">
                <h2>Diagnostics</h2>
                <DiagnosticsPanel result={result} />
              </div>
              <div className="card">
                <h2>Contact force</h2>
                <ContactForcePlot
                  force={result.force}
                  forceFsHz={result.forceFsHz}
                  peakForceN={result.diag.peakForceN}
                  contactMs={result.diag.contactMs}
                />
              </div>
              <div className="card">
                <h2>Waveform</h2>
                <WaveformPlot y={result.y} sampleRate={result.sampleRate} />
              </div>
              <div className="card">
                <h2>Spectrum</h2>
                <SpectrumPlot
                  y={result.y}
                  sampleRate={result.sampleRate}
                  partialsHz={result.diag.partialsHz}
                  helmholtzHz={result.diag.helmholtzHz}
                />
              </div>
              <div className="card">
                <h2>Spectrogram</h2>
                <SpectrogramPlot y={result.y} sampleRate={result.sampleRate} />
              </div>
              <div className="card">
                <h2>Mode shapes</h2>
                <ModeShapes
                  modeShapes={result.modeShapes}
                  shapePts={result.shapePts}
                  partialsHz={result.diag.partialsHz}
                  strikePosition={params.strike_position}
                />
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}