"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowUp, ArrowDown, Trash2, Plus } from "lucide-react";
import { SOCIAL_PLATFORMS } from "@/lib/types";
import type { SocialLink } from "@/lib/types";

const BLANK_LINK: SocialLink = { label: "Instagram", handle: "", url: "" };

export default function SocialLinksForm({ links: initLinks }: { links: SocialLink[] }) {
  const router = useRouter();
  const [links, setLinks] = useState<SocialLink[]>(initLinks);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  function update(i: number, field: keyof SocialLink, value: string) {
    setLinks(links.map((l, idx) => (idx === i ? { ...l, [field]: value } : l)));
  }

  function move(i: number, dir: -1 | 1) {
    const j = i + dir;
    if (j < 0 || j >= links.length) return;
    const next = [...links];
    [next[i], next[j]] = [next[j], next[i]];
    setLinks(next);
  }

  function remove(i: number) {
    setLinks(links.filter((_, idx) => idx !== i));
  }

  function add() {
    setLinks([...links, { ...BLANK_LINK }]);
  }

  async function save() {
    setSaving(true);
    setMsg(null);
    setError(null);
    const res = await fetch("/api/admin/settings/social", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ links }),
    });
    setSaving(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(data.error ?? "Could not save");
      return;
    }
    setMsg("Saved. Footer updated.");
    router.refresh();
  }

  return (
    <div className="space-y-6">
      <div className="space-y-3">
        {links.map((link, i) => (
          <div
            key={i}
            className="grid grid-cols-[120px_1fr_1.4fr_auto] items-end gap-2 rounded-lg border border-be-border bg-be-surface p-3"
          >
            <Field label="Platform">
              <select
                value={link.label}
                onChange={(e) => update(i, "label", e.target.value)}
                className="input"
              >
                {SOCIAL_PLATFORMS.map((p) => (
                  <option key={p} value={p}>
                    {p}
                  </option>
                ))}
              </select>
            </Field>
            <Field label="Handle (tooltip)">
              <input
                value={link.handle}
                onChange={(e) => update(i, "handle", e.target.value)}
                placeholder="@vibepass"
                className="input"
              />
            </Field>
            <Field label="URL">
              <input
                value={link.url}
                onChange={(e) => update(i, "url", e.target.value)}
                placeholder="https://instagram.com/vibepass"
                className="input"
              />
            </Field>
            <div className="flex items-center gap-1 pb-0.5">
              <button
                type="button"
                onClick={() => move(i, -1)}
                disabled={i === 0}
                aria-label="Move up"
                className="rounded-md border border-be-border p-1.5 text-be-muted hover:text-be-text disabled:opacity-30"
              >
                <ArrowUp className="h-3.5 w-3.5" />
              </button>
              <button
                type="button"
                onClick={() => move(i, 1)}
                disabled={i === links.length - 1}
                aria-label="Move down"
                className="rounded-md border border-be-border p-1.5 text-be-muted hover:text-be-text disabled:opacity-30"
              >
                <ArrowDown className="h-3.5 w-3.5" />
              </button>
              <button
                type="button"
                onClick={() => remove(i)}
                aria-label="Remove"
                title="Remove"
                className="rounded-md border border-be-border p-1.5 text-red-600 hover:bg-red-50"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            </div>
          </div>
        ))}
      </div>

      <button
        type="button"
        onClick={add}
        className="inline-flex items-center gap-1.5 rounded-md border border-dashed border-be-border px-4 py-2 text-sm font-medium text-be-muted hover:text-be-text"
      >
        <Plus className="h-4 w-4" />
        Add link
      </button>

      <div className="flex items-center gap-3 border-t border-be-border pt-4">
        <button
          onClick={save}
          disabled={saving}
          className="rounded-md bg-brand-green px-5 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
        >
          {saving ? "Saving…" : "Save changes"}
        </button>
        {msg && <p className="text-sm text-green-600">{msg}</p>}
        {error && <p className="text-sm text-red-600">{error}</p>}
      </div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-xs font-medium mb-1 text-be-muted">{label}</label>
      {children}
    </div>
  );
}