import { PARAM_GROUPS, type ParamSpec, type WoodblockParams } from '../params';

interface Props {
  params: WoodblockParams;
  onChange: (key: keyof WoodblockParams, value: number | boolean) => void;
}

const SLIDER_STEPS = 1000;

function sliderFromValue(spec: ParamSpec, v: number): number {
  if (spec.log) {
    const t = (Math.log(v) - Math.log(spec.min)) / (Math.log(spec.max) - Math.log(spec.min));
    return Math.round(t * SLIDER_STEPS);
  }
  return Math.round(((v - spec.min) / (spec.max - spec.min)) * SLIDER_STEPS);
}

function valueFromSlider(spec: ParamSpec, s: number): number {
  const t = s / SLIDER_STEPS;
  let v: number;
  if (spec.log) {
    v = Math.exp(Math.log(spec.min) + t * (Math.log(spec.max) - Math.log(spec.min)));
    // keep three significant digits so the displayed number stays readable
    const mag = 10 ** Math.floor(Math.log10(Math.abs(v)));
    v = Math.round((v / mag) * 100) / 100 * mag;
  } else {
    v = spec.min + t * (spec.max - spec.min);
    if (spec.step) v = Math.round(v / spec.step) * spec.step;
  }
  if (spec.integer) v = Math.round(v);
  return Math.min(spec.max, Math.max(spec.min, v));
}

function formatValue(v: number): string {
  if (v === 0) return '0';
  const a = Math.abs(v);
  if (a >= 1e5 || a < 1e-3) return v.toExponential(2);
  return String(Math.round(v * 1e6) / 1e6);
}

function ParamRow({ spec, params, onChange }: Props & { spec: ParamSpec }) {
  const v = params[spec.key] as number;
  return (
    <div className="param-row" title={spec.help ?? ''}>
      <div className="param-label">
        <span className="name">
          {spec.label}
          {spec.unit ? <span style={{ color: 'var(--muted)' }}> ({spec.unit})</span> : null}
        </span>
      </div>
      <div className="param-controls">
        <input
          type="range"
          min={0}
          max={SLIDER_STEPS}
          value={sliderFromValue(spec, v)}
          onChange={(e) => onChange(spec.key, valueFromSlider(spec, Number(e.target.value)))}
        />
        <input
          type="number"
          value={formatValue(v)}
          step={spec.step ?? 'any'}
          onChange={(e) => {
            const nv = Number(e.target.value);
            if (Number.isFinite(nv)) onChange(spec.key, spec.integer ? Math.round(nv) : nv);
          }}
        />
      </div>
    </div>
  );
}

export default function ParamPanel({ params, onChange }: Props) {
  return (
    <div>
      {PARAM_GROUPS.map((g, gi) => (
        <details key={g.name} className="group" open={gi < 2}>
          <summary>{g.name}</summary>
          <div className="group-body">
            {g.specs.map((spec) => (
              <ParamRow key={spec.key} spec={spec} params={params} onChange={onChange} />
            ))}
            {g.name === 'Output' && (
              <>
                <div className="param-row">
                  <div className="param-label">
                    <span className="name">Normalize peak</span>
                  </div>
                  <div className="param-controls">
                    <input
                      type="checkbox"
                      checked={params.normalize}
                      onChange={(e) => onChange('normalize', e.target.checked)}
                    />
                    <span className="param-help">
                      {params.normalize
                        ? `scaled to ${params.peak_dbfs} dBFS`
                        : `absolute: ${params.full_scale_pa} Pa = 0 dBFS`}
                    </span>
                  </div>
                </div>
                <div className="param-row">
                  <div className="param-label">
                    <span className="name">WAV bit depth</span>
                  </div>
                  <div className="param-controls">
                    <select
                      value={params.bit_depth}
                      onChange={(e) => onChange('bit_depth', Number(e.target.value))}
                    >
                      <option value={16}>16-bit</option>
                      <option value={24}>24-bit</option>
                    </select>
                  </div>
                </div>
              </>
            )}
          </div>
        </details>
      ))}
    </div>
  );
}