"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import type { Operation, Spec, SpecProblem, SpecSound } from "@/lib/spec";

// The spec sheet, edited.
//
// This is the same file song/spec.mjs writes, and the same file the CLI reads --
// which is the point of it existing at all. Every field here is one line in a
// small JSON document a human can open, so "point Metal Slug at the music
// background" is one edit, visible from both sides.
//
// The OPERATIONS list is the payoff and sits at the top: it is what the declared
// structures let you do. An operation that is unavailable says which structure it
// wanted rather than quietly disappearing, because "why is there no trim button
// on this song" is exactly the question the sheet exists to answer.

type Props = {
  song: string;
  initial: Spec;
  problems: SpecProblem[];
  operations: Operation[];
  plans: string[];
  trimSets: { id: string; label: string }[];
};

const field =
  "w-full rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-1 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]";

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="grid grid-cols-[7rem_minmax(0,1fr)] items-center gap-2">
      <span className="micro">{label}</span>
      {children}
    </label>
  );
}

/** "" -> undefined, so an emptied box removes the key rather than storing "". */
const opt = (v: string) => (v.trim() ? v : undefined);
const optNum = (v: string) => {
  const n = Number(v);
  return v.trim() && Number.isFinite(n) ? n : undefined;
};

export default function SpecSheet({
  song,
  initial,
  problems: initialProblems,
  operations: initialOps,
  plans,
  trimSets,
}: Props) {
  const [spec, setSpec] = useState<Spec>(initial);
  const [problems, setProblems] = useState(initialProblems);
  const [ops, setOps] = useState(initialOps);
  const [dirty, setDirty] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [ready, setReady] = useState(false);

  useEffect(() => setReady(true), []);

  const edit = (fn: (draft: Spec) => void) => {
    setSpec((prev) => {
      const next = structuredClone(prev);
      fn(next);
      return next;
    });
    setDirty(true);
  };

  const save = async () => {
    setSaving(true);
    setError(null);
    try {
      const res = await fetch("/api/browse/spec", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ song, spec }),
        cache: "no-store",
      });
      const j = await res.json();
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      setSpec(j.spec);
      setProblems(j.problems);
      setOps(j.operations);
      setDirty(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  };

  const sounds: SpecSound[] = spec.sounds ?? [];

  return (
    <div className="space-y-3">
      <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <div className="micro mb-2">what this song supports</div>
        <ul className="space-y-1">
          {ops.map((o) => (
            <li
              key={o.id}
              data-op={o.id}
              data-blocked={o.blocked ? "1" : "0"}
              className="flex flex-wrap items-baseline gap-2 text-[12px]"
            >
              {o.href && !o.blocked ? (
                <Link href={o.href} className="text-[var(--color-sel)] underline">
                  {o.label}
                </Link>
              ) : (
                <span className={o.blocked ? "text-[var(--color-dim)]" : "text-[var(--color-text)]"}>
                  {o.label}
                </span>
              )}
              <span className="micro">{o.structure}</span>
              {o.blocked && <span className="text-[11px] text-[var(--color-dim)]">— {o.blocked}</span>}
            </li>
          ))}
        </ul>
      </section>

      <section className="space-y-3 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <div className="flex items-center gap-2">
          <div className="micro">spec sheet</div>
          <code className="font-mono text-[11px] text-[var(--color-dim)]">
            videos/{song}/spec.json
          </code>
          <button
            type="button"
            disabled={!ready || saving || !dirty}
            onClick={save}
            data-save-spec
            className="ml-auto rounded border border-[var(--color-sel)] px-2.5 py-1 text-[12px] text-[var(--color-sel)] disabled:opacity-40"
          >
            {dirty ? "save" : "saved"}
          </button>
        </div>

        {problems.length > 0 && (
          <ul className="space-y-0.5">
            {problems.map((p, i) => (
              <li
                key={i}
                data-problem={p.where}
                data-level={p.level}
                /* `pending` is a normal state to save from — a file you are
                   about to render — so it is not dressed as a failure. */
                className={`text-[11px] ${
                  p.level === "error" ? "text-[var(--color-bad)]" : "text-[var(--color-dirty)]"
                }`}
              >
                {p.where}: {p.message}
              </li>
            ))}
          </ul>
        )}
        {error && <p className="text-[11px] text-[var(--color-bad)]">{error}</p>}

        <div className="grid gap-2 md:grid-cols-2">
          <Row label="title">
            <input
              className={field}
              value={spec.title ?? ""}
              onChange={(e) => edit((d) => void (d.title = opt(e.target.value)))}
            />
          </Row>
          <Row label="builder">
            <input
              className={field}
              placeholder="the .sh that makes it — recorded, never run from here"
              value={spec.builder ?? ""}
              onChange={(e) => edit((d) => void (d.builder = opt(e.target.value)))}
            />
          </Row>
        </div>

        {/* background */}
        <fieldset className="space-y-2 rounded border border-[var(--color-line)] p-2">
          <legend className="micro px-1">background</legend>
          <Row label="file">
            <input
              className={field}
              data-spec-field="background.path"
              placeholder="jer-metalslug-bg.mp4 — relative to a media root"
              value={spec.background?.path ?? ""}
              onChange={(e) =>
                edit((d) => {
                  const v = opt(e.target.value);
                  if (!v) delete d.background;
                  else d.background = { ...(d.background ?? {}), path: v };
                })
              }
            />
          </Row>
          {spec.background && (
            <div className="grid gap-2 md:grid-cols-3">
              <Row label="fit">
                <select
                  className={field}
                  value={spec.background.fit ?? ""}
                  onChange={(e) =>
                    edit((d) => {
                      if (d.background) d.background.fit = (opt(e.target.value) as "pad") ?? undefined;
                    })
                  }
                >
                  <option value="">—</option>
                  <option value="pad">pad</option>
                  <option value="crop">crop</option>
                  <option value="stretch">stretch</option>
                </select>
              </Row>
              <Row label="dim">
                <input
                  className={`${field} num`}
                  value={spec.background.dim ?? ""}
                  onChange={(e) =>
                    edit((d) => {
                      if (d.background) d.background.dim = optNum(e.target.value);
                    })
                  }
                />
              </Row>
              <Row label="handover">
                <input
                  className={`${field} num`}
                  placeholder="seconds"
                  value={spec.background.handoverAt ?? ""}
                  onChange={(e) =>
                    edit((d) => {
                      if (d.background) d.background.handoverAt = optNum(e.target.value);
                    })
                  }
                />
              </Row>
            </div>
          )}
          {spec.background && (
            <Row label="note">
              <input
                className={field}
                value={spec.background.note ?? ""}
                onChange={(e) =>
                  edit((d) => {
                    if (d.background) d.background.note = opt(e.target.value);
                  })
                }
              />
            </Row>
          )}
        </fieldset>

        {/* sounds */}
        <fieldset className="space-y-2 rounded border border-[var(--color-line)] p-2">
          <legend className="micro px-1">sounds</legend>
          {sounds.map((s, i) => (
            <div key={i} className="grid gap-2 md:grid-cols-[8rem_minmax(0,1fr)_5rem_5rem_auto]">
              <input
                className={field}
                placeholder="id"
                value={s.id}
                onChange={(e) => edit((d) => void (d.sounds![i].id = e.target.value))}
              />
              <input
                className={field}
                placeholder="file"
                value={s.path}
                onChange={(e) => edit((d) => void (d.sounds![i].path = e.target.value))}
              />
              <input
                className={`${field} num`}
                placeholder="at"
                value={s.at ?? ""}
                onChange={(e) => edit((d) => void (d.sounds![i].at = optNum(e.target.value)))}
              />
              <input
                className={`${field} num`}
                placeholder="gain"
                value={s.gain ?? ""}
                onChange={(e) => edit((d) => void (d.sounds![i].gain = optNum(e.target.value)))}
              />
              <button
                type="button"
                onClick={() => edit((d) => void d.sounds!.splice(i, 1))}
                className="rounded border border-[var(--color-line)] px-2 text-[11px] text-[var(--color-dim)] hover:text-[var(--color-bad)]"
              >
                remove
              </button>
            </div>
          ))}
          <button
            type="button"
            onClick={() => edit((d) => void (d.sounds = [...(d.sounds ?? []), { id: "", path: "" }]))}
            className="rounded border border-[var(--color-line)] px-2 py-0.5 text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
          >
            + sound
          </button>
        </fieldset>

        {/* drums */}
        <fieldset className="space-y-2 rounded border border-[var(--color-line)] p-2">
          <legend className="micro px-1">drums</legend>
          <Row label="midi">
            <input
              className={field}
              value={spec.drums?.path ?? ""}
              onChange={(e) =>
                edit((d) => {
                  const v = opt(e.target.value);
                  if (!v) delete d.drums;
                  else d.drums = { ...(d.drums ?? {}), path: v };
                })
              }
            />
          </Row>
          {spec.drums && (
            <div className="grid gap-2 md:grid-cols-3">
              <Row label="shift">
                <input
                  className={`${field} num`}
                  value={spec.drums.shift ?? ""}
                  onChange={(e) => edit((d) => void (d.drums!.shift = optNum(e.target.value)))}
                />
              </Row>
              <Row label="tempo×">
                <input
                  className={`${field} num`}
                  value={spec.drums.tempoScale ?? ""}
                  onChange={(e) => edit((d) => void (d.drums!.tempoScale = optNum(e.target.value)))}
                />
              </Row>
              <Row label="trim">
                <input
                  className={`${field} num`}
                  value={spec.drums.trim ?? ""}
                  onChange={(e) => edit((d) => void (d.drums!.trim = optNum(e.target.value)))}
                />
              </Row>
            </div>
          )}
        </fieldset>

        {/* hooks + voices */}
        <div className="grid gap-2 md:grid-cols-2">
          <fieldset className="rounded border border-[var(--color-line)] p-2">
            <legend className="micro px-1">hooks</legend>
            <Row label="trim set">
              <select
                className={field}
                data-spec-field="hooks.trimSet"
                value={spec.hooks?.trimSet ?? ""}
                onChange={(e) =>
                  edit((d) => {
                    const v = opt(e.target.value);
                    if (!v) delete d.hooks;
                    else d.hooks = { ...(d.hooks ?? {}), trimSet: v };
                  })
                }
              >
                <option value="">— none —</option>
                {trimSets.map((t) => (
                  <option key={t.id} value={t.id}>
                    {t.label}
                  </option>
                ))}
              </select>
            </Row>
          </fieldset>

          <fieldset className="rounded border border-[var(--color-line)] p-2">
            <legend className="micro px-1">voices</legend>
            <Row label="plan">
              <select
                className={field}
                value={spec.voices?.plan ?? ""}
                onChange={(e) =>
                  edit((d) => {
                    const v = opt(e.target.value);
                    if (!v) delete d.voices;
                    else d.voices = { ...(d.voices ?? {}), plan: v };
                  })
                }
              >
                <option value="">— none —</option>
                {plans.map((p) => (
                  <option key={p} value={p}>
                    {p}
                  </option>
                ))}
              </select>
            </Row>
          </fieldset>
        </div>
      </section>
    </div>
  );
}