"use client";

// Authoring UI for search aliases. Two independent sections — the global
// dictionary and the site's overrides — each edits a list of concept rows and
// saves the whole list via a server action. Triggers
// are entered comma-separated and shown back as chips. Suggestions are
// validated as regex when the row is in regex mode, mirroring the viewer's
// leaf-input guard.

import { useRef, useState } from "react";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import { Input } from "yt-dlp-transcript-common/components/ui/input";
import { Checkbox } from "yt-dlp-transcript-common/components/ui/checkbox";
import {
  slugifyAliasId,
  type AliasConfig,
  type SearchAlias,
} from "yt-dlp-transcript-common/lib/searchAliases";
import { saveGlobalAliasesAction, saveSiteAliasesAction } from "../lib/aliasesActions";

type Row = {
  key: string;
  id: string;
  label: string;
  triggersText: string;
  suggestion: string;
  useRegex: boolean;
  enabled: boolean;
  note: string;
};

function toRow(a: SearchAlias, key: string): Row {
  return {
    key,
    id: a.id,
    label: a.label,
    triggersText: a.triggers.join(", "),
    suggestion: a.suggestion,
    useRegex: a.useRegex,
    enabled: a.enabled !== false,
    note: a.note ?? "",
  };
}

function parseTriggers(text: string): string[] {
  return text
    .split(",")
    .map((t) => t.trim())
    .filter(Boolean);
}

function toAlias(r: Row): SearchAlias {
  const triggers = parseTriggers(r.triggersText);
  const label = r.label.trim();
  const note = r.note.trim();
  return {
    id: r.id.trim() || slugifyAliasId(label),
    label,
    triggers,
    suggestion: r.suggestion,
    useRegex: r.useRegex,
    enabled: r.enabled,
    ...(note ? { note } : {}),
  };
}

function isValidRegex(s: string): boolean {
  try {
    new RegExp(s);
    return true;
  } catch {
    return false;
  }
}

export function EditorAliasesClient({
  globalConfig,
  siteConfig,
  siteId,
}: {
  globalConfig: AliasConfig;
  siteConfig: AliasConfig;
  siteId: string;
}) {
  return (
    <div className="flex flex-col gap-8">
      <AliasSection
        title="Global"
        subtitle="Suggested on every site."
        initial={globalConfig.aliases}
        onSave={(cfg) => saveGlobalAliasesAction(cfg)}
        testid="global"
      />
      <AliasSection
        title={`This site — ${siteId}`}
        subtitle="Adds to the global list. An entry that reuses a global id overrides it (set it disabled to hide that global alias here)."
        initial={siteConfig.aliases}
        onSave={(cfg) => saveSiteAliasesAction(siteId, cfg)}
        testid="site"
      />
    </div>
  );
}

function AliasSection({
  title,
  subtitle,
  initial,
  onSave,
  testid,
}: {
  title: string;
  subtitle: string;
  initial: SearchAlias[];
  onSave: (config: AliasConfig) => Promise<{ ok: true }>;
  testid: string;
}) {
  const keyRef = useRef(0);
  const mkKey = () => `r${keyRef.current++}`;
  const [rows, setRows] = useState<Row[]>(() =>
    initial.map((a) => toRow(a, mkKey())),
  );
  const [dirty, setDirty] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const patch = (key: string, next: Partial<Row>) => {
    setRows((rs) => rs.map((r) => (r.key === key ? { ...r, ...next } : r)));
    setDirty(true);
    setSaved(false);
  };
  const remove = (key: string) => {
    setRows((rs) => rs.filter((r) => r.key !== key));
    setDirty(true);
    setSaved(false);
  };
  const add = () => {
    setRows((rs) => [
      ...rs,
      {
        key: mkKey(),
        id: "",
        label: "",
        triggersText: "",
        suggestion: "",
        useRegex: true,
        enabled: true,
        note: "",
      },
    ]);
    setDirty(true);
    setSaved(false);
  };

  const anyRegexInvalid = rows.some(
    (r) => r.useRegex && r.suggestion.trim() !== "" && !isValidRegex(r.suggestion),
  );

  const save = async () => {
    setSaving(true);
    try {
      // Drop rows missing a label, triggers, or a suggestion — coerce would too.
      const aliases = rows
        .map(toAlias)
        .filter((a) => a.label && a.triggers.length > 0 && a.suggestion);
      await onSave({ aliases });
      setDirty(false);
      setSaved(true);
    } finally {
      setSaving(false);
    }
  };

  return (
    <section
      className="flex flex-col gap-3"
      data-testid={`alias-section-${testid}`}
    >
      <div className="flex items-baseline justify-between gap-4">
        <div>
          <h2 className="text-lg font-semibold">{title}</h2>
          <p className="text-xs text-muted-foreground">{subtitle}</p>
        </div>
        <div className="flex items-center gap-2">
          {saved && !dirty && (
            <span className="text-xs text-success" data-testid={`alias-saved-${testid}`}>
              Saved
            </span>
          )}
          <Button
            type="button"
            size="sm"
            onClick={save}
            disabled={!dirty || saving || anyRegexInvalid}
            data-testid={`alias-save-${testid}`}
          >
            {saving ? "Saving…" : "Save"}
          </Button>
        </div>
      </div>

      {rows.length === 0 ? (
        <p className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
          No aliases yet. Add one to start suggesting better queries.
        </p>
      ) : (
        <ul className="flex flex-col gap-3">
          {rows.map((r) => (
            <AliasRow
              key={r.key}
              row={r}
              onPatch={(next) => patch(r.key, next)}
              onRemove={() => remove(r.key)}
              testid={testid}
            />
          ))}
        </ul>
      )}

      <div>
        <Button
          type="button"
          size="sm"
          variant="outline"
          onClick={add}
          data-testid={`alias-add-${testid}`}
        >
          + Add alias
        </Button>
      </div>
    </section>
  );
}

function AliasRow({
  row,
  onPatch,
  onRemove,
  testid,
}: {
  row: Row;
  onPatch: (next: Partial<Row>) => void;
  onRemove: () => void;
  testid: string;
}) {
  const triggers = parseTriggers(row.triggersText);
  const regexInvalid =
    row.useRegex && row.suggestion.trim() !== "" && !isValidRegex(row.suggestion);

  return (
    <li
      className={cnRow(row.enabled)}
      data-testid={`alias-row-${testid}`}
    >
      <div className="flex flex-wrap items-center gap-3">
        <label className="flex flex-1 min-w-[10rem] flex-col gap-1 text-xs text-muted-foreground">
          Concept
          <Input
            value={row.label}
            onChange={(e) => onPatch({ label: e.target.value })}
            placeholder="e.g. loli"
            data-testid={`alias-label-${testid}`}
          />
        </label>
        <label className="flex select-none items-center gap-1.5 text-xs">
          <Checkbox
            checked={row.enabled}
            onCheckedChange={(c) => onPatch({ enabled: c === true })}
            data-testid={`alias-enabled-${testid}`}
          />
          Enabled
        </label>
        <Button
          type="button"
          variant="outline"
          size="icon-xs"
          onClick={onRemove}
          aria-label={`Remove ${row.label || "alias"}`}
          data-testid={`alias-remove-${testid}`}
        >
          ×
        </Button>
      </div>

      <label className="flex flex-col gap-1 text-xs text-muted-foreground">
        Triggers <span className="text-[11px]">(comma-separated spellings)</span>
        <Input
          value={row.triggersText}
          onChange={(e) => onPatch({ triggersText: e.target.value })}
          placeholder="loli, lolly, loly"
          data-testid={`alias-triggers-${testid}`}
        />
      </label>
      {triggers.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {triggers.map((t, i) => (
            <span
              key={`${t}-${i}`}
              className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
            >
              {t}
            </span>
          ))}
        </div>
      )}

      <div className="flex flex-wrap items-end gap-3">
        <label className="flex flex-1 min-w-[12rem] flex-col gap-1 text-xs text-muted-foreground">
          Suggested query
          <Input
            value={row.suggestion}
            onChange={(e) => onPatch({ suggestion: e.target.value })}
            placeholder="\blol(i|ly)"
            aria-invalid={regexInvalid || undefined}
            className={row.useRegex ? "font-mono" : undefined}
            data-testid={`alias-suggestion-${testid}`}
          />
        </label>
        <label className="flex select-none items-center gap-1.5 pb-2 text-xs">
          <Checkbox
            checked={row.useRegex}
            onCheckedChange={(c) => onPatch({ useRegex: c === true })}
            data-testid={`alias-regex-${testid}`}
          />
          Regex
        </label>
      </div>
      {regexInvalid && (
        <p className="font-mono text-xs text-destructive">Invalid regex</p>
      )}

      <label className="flex flex-col gap-1 text-xs text-muted-foreground">
        Note <span className="text-[11px]">(optional)</span>
        <Input
          value={row.note}
          onChange={(e) => onPatch({ note: e.target.value })}
          placeholder="Why this alias exists"
          data-testid={`alias-note-${testid}`}
        />
      </label>

      {triggers[0] && row.suggestion && (
        <p className="text-[11px] text-muted-foreground">
          Preview: typing <code className="font-mono">{triggers[0]}</code> suggests{" "}
          <code className="font-mono">{row.suggestion}</code>
        </p>
      )}
    </li>
  );
}

function cnRow(enabled: boolean): string {
  return [
    "flex flex-col gap-2 rounded-lg border bg-card/60 px-3 py-3",
    enabled ? "" : "opacity-60",
  ]
    .filter(Boolean)
    .join(" ");
}