"use client";

import { useCallback, useEffect, useState } from "react";
import type { WidgetPreset } from "yt-dlp-transcript-common/lib/widgetPresets";
import { BUILT_IN_PRESETS, type BuiltInPreset } from "yt-dlp-transcript-common/views/builtInPresets";
import {
  deleteWidgetPresetAction,
  renameWidgetPresetAction,
  saveWidgetPresetAction,
} from "../presetActions";

// The preset library row, in the house pattern (ProfilesRow in
// WorkspaceSearchBar, SavedChatsRow in /ask): a grouped <select> of built-ins
// and saved arrangements, then Save / Save as… / Rename / Delete as text
// buttons, a dirty dot, and the browser's own prompt/confirm for naming.
//
// A preset is a stored /widget QUERY STRING, so "load" is just "hand this link
// to the config parser" — which is why the same row works identically on the
// builder page and inside the widget's own menu.
//
// BUILT-INS ARE LOAD-ONLY. Save on a built-in writes a new named preset rather
// than editing it: the starting points have to stay where you left them, or
// "Cockpit" stops meaning anything.

export type PresetsPayload = { builtIn: BuiltInPreset[]; saved: WidgetPreset[] };

export function PresetsRow({
  query,
  initial,
  onLoad,
}: {
  // The query the current config serializes to — what Save would store, and
  // what the dirty dot compares against.
  query: string;
  // SSR seed. The builder page has one; the in-widget menu doesn't (it is a bare
  // client page), so it fetches on open instead.
  initial?: PresetsPayload;
  onLoad: (query: string) => void;
}) {
  const [data, setData] = useState<PresetsPayload>(
    initial ?? { builtIn: BUILT_IN_PRESETS, saved: [] },
  );
  const [activeId, setActiveId] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(async () => {
    try {
      const res = await fetch("/api/widget/presets", { cache: "no-store" });
      if (res.ok) setData((await res.json()) as PresetsPayload);
    } catch {
      // Offline or mid-restart: keep showing what we already have rather than
      // blanking the row.
    }
  }, []);

  // Mounting IS opening for the in-widget menu, so this is the "fetch on open"
  // the seeded builder doesn't need.
  useEffect(() => {
    if (!initial) void refresh();
  }, [initial, refresh]);

  const activeSaved = data.saved.find((p) => p.id === activeId) ?? null;
  const activeBuiltIn = data.builtIn.find((p) => p.id === activeId) ?? null;
  const activeQuery = activeSaved?.query ?? activeBuiltIn?.query ?? null;
  const dirty = activeQuery !== null && activeQuery !== query;

  async function run(fn: () => Promise<{ ok: boolean; error?: string }>) {
    setBusy(true);
    setError(null);
    try {
      const result = await fn();
      if (!result.ok) setError(result.error ?? "Failed.");
      await refresh();
      return result.ok;
    } finally {
      setBusy(false);
    }
  }

  function load(id: string) {
    const preset =
      data.saved.find((p) => p.id === id) ?? data.builtIn.find((p) => p.id === id);
    if (!preset) return;
    setActiveId(id);
    onLoad(preset.query);
  }

  async function saveAs() {
    const suggested = activeSaved?.name ?? activeBuiltIn?.name ?? "";
    const name = window.prompt("Save this arrangement as:", suggested);
    if (name === null) return;
    const ok = await run(() => saveWidgetPresetAction(name, query));
    if (!ok) return;
    // Re-read so the new preset can be selected by the id the store gave it.
    const res = await fetch("/api/widget/presets", { cache: "no-store" }).catch(
      () => null,
    );
    if (!res?.ok) return;
    const next = (await res.json()) as PresetsPayload;
    setData(next);
    const saved = next.saved.find((p) => p.name === name.trim());
    if (saved) setActiveId(saved.id);
  }

  async function save() {
    // A built-in can't be written over, so Save on one means Save as… — the
    // action you actually wanted.
    if (!activeSaved) return saveAs();
    await run(() => saveWidgetPresetAction(activeSaved.name, query));
  }

  async function rename() {
    if (!activeSaved) return;
    const name = window.prompt("Rename this preset:", activeSaved.name);
    if (name === null) return;
    await run(() => renameWidgetPresetAction(activeSaved.id, name));
  }

  async function remove() {
    if (!activeSaved) return;
    if (!window.confirm(`Delete the preset "${activeSaved.name}"?`)) return;
    const id = activeSaved.id;
    const ok = await run(() => deleteWidgetPresetAction(id));
    if (ok) setActiveId(null);
  }

  const hint = activeBuiltIn?.hint;

  return (
    <div className="flex flex-col gap-1">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
        <span className="text-xs uppercase tracking-wide text-muted-foreground">
          Presets
        </span>
        <select
          aria-label="preset"
          value={activeId ?? ""}
          onChange={(e) => e.target.value && load(e.target.value)}
          className="rounded border border-border bg-card px-2 py-0.5 text-sm text-foreground"
        >
          <option value="">(custom)</option>
          <optgroup label="Built in">
            {data.builtIn.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </optgroup>
          {data.saved.length > 0 && (
            <optgroup label="Saved">
              {data.saved.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </optgroup>
          )}
        </select>
        {dirty && (
          <span
            role="status"
            aria-label="preset has unsaved changes"
            className="text-base leading-none text-warning"
          >
            •
          </span>
        )}
        <button
          type="button"
          onClick={save}
          disabled={busy || (activeSaved !== null && !dirty)}
          className={PRESET_BTN}
        >
          Save
        </button>
        <button type="button" onClick={saveAs} disabled={busy} className={PRESET_BTN}>
          Save as…
        </button>
        <button
          type="button"
          onClick={rename}
          disabled={busy || !activeSaved}
          className={PRESET_BTN}
        >
          Rename
        </button>
        <button
          type="button"
          onClick={remove}
          disabled={busy || !activeSaved}
          className="text-xs text-destructive transition-colors hover:opacity-80 disabled:opacity-50"
        >
          Delete
        </button>
      </div>
      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
      {error && (
        <p role="alert" className="text-xs text-destructive">
          {error}
        </p>
      )}
    </div>
  );
}

const PRESET_BTN =
  "text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50";