import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react';
import { DEFAULTS, PRESETS, applyPreset, matchPresetId, loadParams, saveParams, type Cymbal2Params } from './params';
import { DEFAULT_MFILES, type MFile } from './mfiles';
import { useRenderer } from './hooks/useRenderer';
import { encodeWav } from './lib/wav';
import ParamPanel from './components/ParamPanel';
import CodePanel from './components/CodePanel';
import StrikePicker from './components/StrikePicker';
import DiagnosticsPanel from './components/DiagnosticsPanel';
import WaveformPlot from './components/plots/WaveformPlot';
import SpectrumPlot from './components/plots/SpectrumPlot';
import SpectrogramPlot from './components/plots/SpectrogramPlot';
import ContactPlot from './components/plots/ContactPlot';

// The tutorial carries KaTeX and its own figures; load it only when opened.
const Tutorial = lazy(() => import('./tutorial/Tutorial'));

export default function App() {
  const [params, setParams] = useState<Cymbal2Params>(() => loadParams());
  // Editable copy of the MATLAB implementation. Deliberately not persisted:
  // a reload restores the shipped code.
  const [mfiles, setMfiles] = useState<MFile[]>(() => DEFAULT_MFILES.map((f) => ({ ...f })));
  const [codeOpen, setCodeOpen] = useState(false);
  // The tutorial is linkable: #how-it-works opens it (and its internal
  // anchors keep it open across a reload).
  const [tutorialOpen, setTutorialOpenRaw] = useState(
    () => window.location.hash === '#how-it-works' || window.location.hash.startsWith('#tut-'),
  );
  const setTutorialOpen = useCallback((open: boolean) => {
    setTutorialOpenRaw(open);
    try {
      const url = open
        ? '#how-it-works'
        : window.location.pathname + window.location.search;
      window.history.replaceState(null, '', url);
    } catch {
      // sandboxed iframe or similar; the hash is a convenience only
    }
  }, []);
  const { result, error, busy, stage, elapsedS, renderPreview, renderFull, cancel } = useRenderer(
    params,
    mfiles,
  );
  const audioCtxRef = useRef<AudioContext | null>(null);

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

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

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

  const presetId = matchPresetId(params);
  const preset = PRESETS.find((p) => p.id === presetId) ?? null;
  const onPreset = useCallback((id: string) => {
    const p = PRESETS.find((q) => q.id === id);
    if (p) setParams(applyPreset(p));
  }, []);

  const onChangeFile = useCallback((name: string, source: string) => {
    setMfiles((fs) => fs.map((f) => (f.name === name ? { ...f, source } : f)));
  }, []);

  const onResetFile = useCallback((name: string) => {
    setMfiles((fs) =>
      fs.map((f) =>
        f.name === name
          ? { ...f, source: DEFAULT_MFILES.find((d) => d.name === name)?.source ?? f.source }
          : f,
      ),
    );
  }, []);

  const onResetAllFiles = useCallback(() => setMfiles(DEFAULT_MFILES.map((f) => ({ ...f }))), []);
  const codeEdited = mfiles.some(
    (f) => f.source !== DEFAULT_MFILES.find((d) => d.name === f.name)?.source,
  );

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

  // A failed render clears the result, so a loop left running has nothing to
  // play; drop out of loop mode rather than leaving the button lit.
  useEffect(() => {
    if (!result) setLooping(false);
  }, [result]);

  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]);

  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' ? 'cymbal2.wav' : 'cymbal2_preview.wav';
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 5000);
  }, [result, params.bit_depth]);

  return (
    <div className="app">
      <div className="topbar">
        <h1>Cymbal2 Simulator</h1>
        <button
          className="primary"
          onClick={renderPreview}
          disabled={busy}
          title="No oversampling, full duration and grid otherwise — about half the cost of a full render"
        >
          Render preview
        </button>
        <button
          className="primary"
          onClick={renderFull}
          disabled={busy}
          title="Full time-domain integration at the set quality — takes minutes in the browser"
        >
          Render full
        </button>
        {busy && (
          <button onClick={cancel} title="Stop the integration">
            ✕ Cancel
          </button>
        )}
        <button
          className={`play ${result?.quality === 'preview' ? 'preview' : ''}`}
          onClick={play}
          disabled={!result}
        >
          ▶ Play{result?.quality === 'preview' ? ' (preview)' : ''}
        </button>
        <button
          className={`loop ${looping ? 'active' : ''}`}
          onClick={() => setLooping((v) => !v)}
          disabled={!result}
          title="Repeat the last render continuously"
        >
          ⟳ Loop{looping ? ' on' : ''}
        </button>
        <button onClick={download} disabled={!result}>
          Download .wav{result?.quality === 'preview' ? ' (preview)' : ''}
        </button>
        <button onClick={reset}>Reset to defaults</button>
        <button
          className={codeOpen ? 'code active' : 'code'}
          onClick={() => setCodeOpen((v) => !v)}
          title="View and edit the MATLAB source that numbl executes"
        >
          {'{ }'} Code{codeEdited ? ' •' : ''}
        </button>
        <button
          className={tutorialOpen ? 'howto active' : 'howto'}
          onClick={() => setTutorialOpen(!tutorialOpen)}
          title="Interactive tutorial: the theory (Samejima 2021) and how the solver integrates it"
        >
          ? How it works
        </button>
        <div className="status">
          {error && <span className="badge err">code error</span>}
          {result && !busy && (
            <span className={`badge ${result.quality}`}>
              {result.quality === 'full' ? 'full quality' : 'preview quality'}
            </span>
          )}
          {busy ? (
            <span>
              {stage}… {elapsedS.toFixed(0)} s
            </span>
          ) : (
            <span>ready</span>
          )}
        </div>
      </div>
      {tutorialOpen && (
        <Suspense fallback={<div className="tut-loading">Loading the tutorial…</div>}>
          <Tutorial onClose={() => setTutorialOpen(false)} />
        </Suspense>
      )}
      <div className="main" style={tutorialOpen ? { display: 'none' } : undefined}>
        <div className="sidebar">
          <div className="preset-row">
            <label htmlFor="preset-select">Preset</label>
            <select
              id="preset-select"
              value={presetId ?? 'custom'}
              onChange={(e) => onPreset(e.target.value)}
              title="Replaces the whole parameter set; pick a preset, then adjust"
            >
              {presetId === null && (
                <option value="custom" disabled>
                  custom
                </option>
              )}
              {PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>
          {preset && <div className="preset-note">{preset.note}</div>}
          <ParamPanel params={params} onChange={onChange} />
          <div className="sidebar-credit">
            Physical model: T. Samejima, &ldquo;Nonlinear physical modeling sound synthesis
            of cymbals involving dynamics of washers and sticks/mallets,&rdquo;{' '}
            <i>Acoust. Sci. &amp; Tech.</i> <b>42</b>(6), 314&ndash;325 (2021).{' '}
            <a href="https://doi.org/10.1250/ast.42.314" target="_blank" rel="noreferrer">
              doi:10.1250/ast.42.314
            </a>
            <br />
            <button className="linklike" onClick={() => setTutorialOpen(true)}>
              How the solver works: an interactive tutorial →
            </button>
          </div>
        </div>
        <div className="content">
          {error && (
            <div className="card wide error-card">
              <h2>MATLAB error</h2>
              <div>
                <strong>
                  {error.file ? `${error.file}${error.line ? `:${error.line}` : ''}` : 'error'}
                </strong>{' '}
                {error.message}
              </div>
              <div className="code-hint">
                Nothing is playable until a render succeeds. Open Code to fix the source, or
                revert it.
              </div>
            </div>
          )}
          <div className="card wide">
            <h2>Cross-section — drag the strike and pickup points</h2>
            <StrikePicker params={params} onChange={onChange} />
          </div>
          {result && (
            <>
              <div className="card">
                <h2>Diagnostics</h2>
                <DiagnosticsPanel result={result} />
              </div>
              <div className="card">
                <h2>Contact force</h2>
                <ContactPlot forceT={result.forceT} forceN={result.forceN} />
              </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}
                  modeF={result.modeF}
                  modeN={result.modeM}
                />
              </div>
              <div className="card wide">
                <h2>Spectrogram — watch the crash build after the attack</h2>
                <SpectrogramPlot y={result.y} sampleRate={result.sampleRate} />
              </div>
            </>
          )}
          {!result && !busy && !error && (
            <div className="card wide">
              <h2>No render yet</h2>
              <div className="code-hint">
                Press Render preview for a cheaper pass at the same duration, or Render full for the real thing.
                Unlike the sibling modal-cymbal app, every render here is a nonlinear time-domain
                integration of the shell, so nothing renders automatically.
              </div>
            </div>
          )}
        </div>
      </div>
      {codeOpen && (
        <CodePanel
          mfiles={mfiles}
          onChangeFile={onChangeFile}
          onResetFile={onResetFile}
          onResetAll={onResetAllFiles}
          onClose={() => setCodeOpen(false)}
          onRenderFull={renderFull}
          error={error}
          busy={busy}
        />
      )}
    </div>
  );
}