"use client";

import type { SocialLink } from "yt-dlp-transcript-common/lib/settings";
import { socialLinksJson, type SocialRow } from "./socialLinksJson";
// Its controlled checkboxes sit inside action forms, whose reset they would not
// survive alone (forms/Controlled.tsx).
import { ControlledCheck } from "./forms/Controlled";

export type { SocialRow };

export function toSocialRow(s: SocialLink): SocialRow {
  return {
    label: s.label,
    url: s.url,
    svg: s.svg,
    ...(s.featured ? { featured: true } : {}),
  };
}

type Props = {
  // Controlled rows + setter, owned by the parent form so it can also gate the
  // whole editor (e.g. behind an "inherit global" toggle).
  value: SocialRow[];
  onChange: (rows: SocialRow[]) => void;
  // When set, a hidden <input name> carries the trimmed rows as JSON for the
  // server action (same shape both the sites and settings actions parse).
  name?: string;
};

// Shared editor for a list of social links (label / URL / inline SVG), with
// reorder + remove + add. Used by both the per-site form and the global
// settings form.
export function SocialLinksField({ value, onChange, name }: Props) {
  const move = (idx: number, delta: -1 | 1) => {
    const next = value.slice();
    const j = idx + delta;
    if (j < 0 || j >= next.length) return;
    [next[idx], next[j]] = [next[j], next[idx]];
    onChange(next);
  };
  const update = (idx: number, patch: Partial<SocialRow>) =>
    onChange(value.map((row, i) => (i === idx ? { ...row, ...patch } : row)));

  const json = socialLinksJson(value);

  return (
    <>
      {name && <input type="hidden" name={name} value={json} />}
      {value.map((s, idx) => (
        <div
          key={idx}
          className="flex flex-col gap-2 border border-border rounded p-3 bg-card"
        >
          <div className="flex items-center justify-end gap-1">
            <button
              type="button"
              onClick={() => move(idx, -1)}
              disabled={idx === 0}
              className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
              aria-label="Move link up"
            >
              ↑
            </button>
            <button
              type="button"
              onClick={() => move(idx, 1)}
              disabled={idx === value.length - 1}
              className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
              aria-label="Move link down"
            >
              ↓
            </button>
            <button
              type="button"
              onClick={() => onChange(value.filter((_, i) => i !== idx))}
              className="px-2 py-0.5 rounded border border-destructive/30 text-xs text-destructive"
            >
              Remove
            </button>
          </div>
          <input
            type="text"
            value={s.label}
            onChange={(e) => update(idx, { label: e.target.value })}
            placeholder="Label (e.g. GitHub)"
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          />
          <input
            type="text"
            value={s.url}
            onChange={(e) => update(idx, { url: e.target.value })}
            placeholder="https://…"
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          />
          <textarea
            value={s.svg}
            onChange={(e) => update(idx, { svg: e.target.value })}
            rows={4}
            placeholder='<svg viewBox="0 0 24 24"><path d="…"/></svg>'
            className="rounded border border-border bg-card px-2 py-1 text-xs font-mono"
          />
          {/* On a small screen a header shows only the links checked here
              (`featured`); a wide one shows every link, up to four, these
              kept first (common/lib/socialLinks.ts headerSocialLinks). */}
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <label className="flex items-center gap-2 text-sm">
              <ControlledCheck
                type="checkbox"
                checked={s.featured === true}
                onChange={(e) => update(idx, { featured: e.target.checked })}
                className="accent-brand"
              />
              Keep in header on small screens
            </label>
            <span className="text-xs text-muted-foreground">
              On small screens the header shows only these; the rest stay in the footer.
            </span>
          </div>
        </div>
      ))}
      <div>
        <button
          type="button"
          onClick={() => onChange([...value, { label: "", url: "", svg: "" }])}
          className="px-3 py-1.5 rounded border border-border text-sm hover:bg-muted"
        >
          + Add link
        </button>
      </div>
    </>
  );
}