import { useRef } from 'react';
import { store, useApp } from '../state/store.ts';
import { getInstrument, listInstruments } from '../instruments/registry.ts';
import type { KnobSpec } from '../instruments/types.ts';
import { importInstrumentText, listImportedIds, removeImportedInstrument } from '../instruments/numbl/adapter.ts';
import { trackColor } from './colors.ts';

// Imported instrument bundles: a file picker that accepts exported
// numbl-instrument-v1 JSON, and a chip per import so a stale one can be
// removed (a shadowed catalog instrument of the same id comes back).
function ImportedInstruments() {
  const fileRef = useRef<HTMLInputElement>(null);
  const imported = listImportedIds();
  const onFiles = async (files: FileList | null) => {
    if (!files) return;
    for (const f of files) {
      try {
        const bundle = await importInstrumentText(await f.text());
        store.setStatus(`imported instrument '${bundle.name}'`);
      } catch (err) {
        store.setStatus(err instanceof Error ? err.message : String(err));
      }
    }
    store.bumpInstruments();
  };
  return (
    <div className="importinstr">
      <button
        className="addtrack"
        title="Import an exported instrument bundle (numbl-instrument-v1 JSON)"
        onClick={() => fileRef.current?.click()}
      >+ Import instrument</button>
      <input
        ref={fileRef}
        type="file"
        accept=".json,application/json"
        multiple
        style={{ display: 'none' }}
        onChange={(e) => { void onFiles(e.target.files); e.target.value = ''; }}
      />
      {imported.length > 0 && (
        <div className="importedlist">
          {imported.map((id) => (
            <span key={id} className="importedchip">
              {id}
              <button
                className="mini danger"
                title="Remove imported instrument"
                onClick={() => { void removeImportedInstrument(id).then(() => store.bumpInstruments()); }}
              >✕</button>
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

function fmtKnob(v: number): string {
  const a = Math.abs(v);
  if (a >= 1e5 || (a > 0 && a < 0.01)) return v.toExponential(1);
  return String(Number(v.toPrecision(3)));
}

function KnobSlider({ knob, value, onChange }: { knob: KnobSpec; value: number | undefined; onChange: (v: number) => void }) {
  const cur = value ?? knob.default;
  const log = knob.scale === 'log';
  const pos = log ? (1000 * Math.log(cur / knob.min)) / Math.log(knob.max / knob.min) : cur;
  return (
    <label className="knob" title={`${knob.label} (default ${fmtKnob(knob.default)})`}>
      <span className="knoblabel">{knob.label}</span>
      <input
        type="range"
        min={log ? 0 : knob.min}
        max={log ? 1000 : knob.max}
        step={log ? 1 : (knob.step ?? (knob.max - knob.min) / 200)}
        value={pos}
        onChange={(e) => {
          const raw = Number(e.target.value);
          onChange(log ? knob.min * Math.pow(knob.max / knob.min, raw / 1000) : raw);
        }}
        onClick={(e) => e.stopPropagation()}
      />
      <span className="knobvalue">{fmtKnob(cur)}</span>
    </label>
  );
}

export function TrackList() {
  const app = useApp();
  const song = app.rec?.song ?? null;
  if (!song) return <div className="tracklist" />;
  const instruments = listInstruments();
  return (
    <div className="tracklist">
      {song.tracks.map((t, i) => {
        const active = t.id === app.activeTrackId;
        const armed = t.id === app.armedTrackId;
        return (
          <div key={t.id} className={`trackrow ${active ? 'active' : ''}`} onClick={() => store.setActiveTrack(t.id)}>
            <div className="trackrow-top">
              <span className="chip" style={{ background: trackColor(i) }} />
              <input
                className="trackname"
                value={t.name}
                onChange={(e) => store.updateTrack(t.id, { name: e.target.value }, false)}
                onBlur={() => store.endEdit()}
                onClick={(e) => e.stopPropagation()}
              />
              <button
                className="mini danger"
                title="Delete track"
                onClick={(e) => { e.stopPropagation(); store.removeTrack(t.id); }}
              >✕</button>
            </div>
            <div className="trackrow-bottom">
              <select
                value={t.instrumentId}
                onChange={(e) => store.updateTrack(t.id, { instrumentId: e.target.value })}
                onClick={(e) => e.stopPropagation()}
                title="Instrument"
              >
                {instruments.map((ins) => (
                  <option key={ins.id} value={ins.id}>{ins.name}</option>
                ))}
              </select>
              <button
                className={`mini ${t.mute ? 'toggled' : ''}`}
                title="Mute"
                onClick={(e) => { e.stopPropagation(); store.updateTrack(t.id, { mute: !t.mute }, false); store.endEdit(); }}
              >M</button>
              <button
                className={`mini ${t.solo ? 'toggled' : ''}`}
                title="Solo"
                onClick={(e) => { e.stopPropagation(); store.updateTrack(t.id, { solo: !t.solo }, false); store.endEdit(); }}
              >S</button>
              <button
                className={`mini rec ${armed ? 'toggled' : ''}`}
                title="Arm for recording"
                onClick={(e) => { e.stopPropagation(); store.setArmedTrack(armed ? null : t.id); }}
              >R</button>
              <button className="mini" title="Move track up" onClick={(e) => { e.stopPropagation(); store.moveTrack(t.id, -1); }}>↑</button>
              <button className="mini" title="Move track down" onClick={(e) => { e.stopPropagation(); store.moveTrack(t.id, 1); }}>↓</button>
              <button className="mini" title="Duplicate track" onClick={(e) => { e.stopPropagation(); store.duplicateTrack(t.id); }}>⧉</button>
            </div>
            {active && (getInstrument(t.instrumentId).knobs ?? []).length > 0 && (
              <div className="trackrow-knobs">
                {(getInstrument(t.instrumentId).knobs ?? []).map((k) => (
                  <KnobSlider
                    key={k.key}
                    knob={k}
                    value={t.settings?.[k.key]}
                    onChange={(v) => store.setTrackSetting(t.id, k.key, v)}
                  />
                ))}
              </div>
            )}
            <div className="trackrow-vol">
              <input
                type="range"
                min={0}
                max={1.5}
                step={0.01}
                value={t.volume}
                title={`Volume ${(t.volume * 100).toFixed(0)}%`}
                onChange={(e) => store.updateTrack(t.id, { volume: Number(e.target.value) }, false)}
                onClick={(e) => e.stopPropagation()}
              />
              <span className="notecount">{t.notes.length} notes</span>
            </div>
          </div>
        );
      })}
      <button className="addtrack" onClick={() => store.addTrack()}>+ Add track</button>
      <ImportedInstruments />
    </div>
  );
}