"use client";

import { useState } from "react";
import {
  DEFAULT_TARGET,
  loudnessSpread,
  loudnessVerdict,
  type Loudness,
  type LoudnessTarget,
} from "@/lib/loudness-types";

// What has been measured, and a button for what has not.
//
// Nothing is measured on render -- see the route for why. A row that has never
// been measured says so; it does not show a zero, and it does not quietly
// borrow another row's figure.

type Row = { rel: string; loudness: Loudness | null };

export default function LoudnessTable({
  song,
  initial,
  target = DEFAULT_TARGET,
}: {
  song: string;
  initial: Row[];
  target?: LoudnessTarget;
}) {
  const [rows, setRows] = useState<Row[]>(initial);
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const measure = async (rel: string) => {
    setBusy(rel);
    setError(null);
    try {
      const res = await fetch("/api/browse/loudness", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ song, rel }),
        cache: "no-store",
      });
      const j = (await res.json()) as { error?: string; loudness?: Loudness };
      if (!res.ok || !j.loudness) throw new Error(j.error || `HTTP ${res.status}`);
      const measured = j.loudness;
      setRows((r) => r.map((x) => (x.rel === rel ? { ...x, loudness: measured } : x)));
    } catch (e) {
      setError(`${rel}: ${e instanceof Error ? e.message : String(e)}`);
    } finally {
      setBusy(null);
    }
  };

  /** Sequential, not parallel: each one is an ffmpeg decode of a whole render. */
  const measureAll = async () => {
    for (const r of rows) {
      if (!r.loudness) await measure(r.rel);
    }
  };

  const done = rows.filter((r) => r.loudness);
  const spread = loudnessSpread(done.map((r) => r.loudness!));

  return (
    <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
      <div className="flex flex-wrap items-center gap-2">
        <span className="micro">loudness</span>
        <span className="num text-[11px] text-[var(--color-dim)]">
          target {target.lufs} LUFS · {target.truePeak} dBTP
        </span>
        {spread !== null && (
          // Two cuts of one song that went through different chains and differ
          // by 2 LU is a bug, and nothing else reports it.
          <span
            className={`num text-[11px] ${spread > 1 ? "text-[var(--color-dirty)]" : "text-[var(--color-meter)]"}`}
            data-spread={spread}
          >
            spread {spread} LU across {done.length} measured
          </span>
        )}
        {rows.some((r) => !r.loudness) && (
          <button
            type="button"
            onClick={() => void measureAll()}
            disabled={busy !== null}
            data-measure-all
            className="ml-auto rounded border border-[var(--color-sel)] px-2 py-0.5 text-[11px] text-[var(--color-sel)] disabled:opacity-40"
          >
            {busy ? `measuring ${busy}…` : "measure the rest"}
          </button>
        )}
      </div>

      <table className="mt-2 w-full border-collapse text-[12px]">
        <thead>
          <tr className="micro">
            <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">file</th>
            <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">LUFS</th>
            <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">LRA</th>
            <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">dBTP</th>
            <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">reading</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const v = r.loudness ? loudnessVerdict(r.loudness, target) : null;
            return (
              <tr key={r.rel} data-loudness={r.rel} data-measured={r.loudness ? "1" : "0"}>
                <td className="border-b border-[var(--color-line)] px-2 py-1 font-mono text-[var(--color-text)]">
                  {r.rel}
                </td>
                <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-meter)]">
                  {r.loudness?.integrated?.toFixed(1) ?? "—"}
                </td>
                <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-dim)]">
                  {r.loudness?.lra?.toFixed(1) ?? "—"}
                </td>
                <td
                  className={`num border-b border-[var(--color-line)] px-2 py-1 text-right ${
                    r.loudness?.truePeak !== undefined &&
                    r.loudness?.truePeak !== null &&
                    r.loudness.truePeak > target.truePeak
                      ? "text-[var(--color-bad)]"
                      : "text-[var(--color-dim)]"
                  }`}
                >
                  {r.loudness?.truePeak?.toFixed(1) ?? "—"}
                </td>
                <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                  {v ? (
                    <>
                      <span>{v.line}</span>
                      {v.flags.map((f) => (
                        <span key={f} className="block text-[var(--color-dirty)]">
                          {f}
                        </span>
                      ))}
                    </>
                  ) : (
                    <button
                      type="button"
                      onClick={() => void measure(r.rel)}
                      disabled={busy !== null}
                      data-measure={r.rel}
                      className="rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-40"
                    >
                      {busy === r.rel ? "measuring…" : "not measured — measure"}
                    </button>
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {error && <p className="mt-2 text-[11px] text-[var(--color-bad)]">{error}</p>}
    </section>
  );
}