"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export interface AdminEventLink {
  id: string;
  label: string;
  url: string;
  kind: "gallery" | "video" | "press";
  sort_order: number;
}

const KINDS: AdminEventLink["kind"][] = ["gallery", "video", "press"];

export default function EventLinksManager({
  eventId,
  initial,
}: {
  eventId: string;
  initial: AdminEventLink[];
}) {
  const router = useRouter();
  const [links, setLinks] = useState(initial);
  const [label, setLabel] = useState("");
  const [url, setUrl] = useState("");
  const [kind, setKind] = useState<AdminEventLink["kind"]>("gallery");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function add(e: React.FormEvent) {
    e.preventDefault();
    if (!label.trim() || !url.trim()) return;
    const normUrl = /^https?:\/\//i.test(url.trim()) ? url.trim() : `https://${url.trim()}`;
    setBusy(true);
    setError(null);
    const res = await fetch(`/api/dashboard/events/${eventId}/links`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ label: label.trim(), url: normUrl, kind, sortOrder: links.length + 1 }),
    });
    const data = await res.json();
    setBusy(false);
    if (!res.ok) {
      setError(data.error ?? "Could not add link");
      return;
    }
    setLinks([...links, data as AdminEventLink]);
    setLabel("");
    setUrl("");
    setKind("gallery");
    router.refresh();
  }

  async function remove(id: string) {
    const prev = links;
    setLinks(links.filter((l) => l.id !== id));
    const res = await fetch(`/api/dashboard/event-links/${id}`, { method: "DELETE" });
    if (!res.ok) {
      setError("Could not remove link");
      setLinks(prev);
      return;
    }
    router.refresh();
  }

  return (
    <div className="rounded-lg border border-be-border bg-be-surface p-4">
      {links.length > 0 && (
        <div className="mb-4 grid gap-2">
          {links.map((l) => (
            <div
              key={l.id}
              className="flex items-center justify-between rounded-md border border-be-border p-2.5 text-sm"
            >
              <div className="min-w-0">
                <p className="font-medium">
                  {l.label} <span className="text-xs text-be-muted">· {l.kind}</span>
                </p>
                <p className="truncate text-xs text-be-muted">{l.url}</p>
              </div>
              <button
                onClick={() => remove(l.id)}
                className="ml-3 shrink-0 text-xs font-medium text-red-600 hover:text-red-700"
              >
                Remove
              </button>
            </div>
          ))}
        </div>
      )}

      <form onSubmit={add} className="grid gap-2 sm:grid-cols-[1fr_1.4fr_auto_auto]">
        <input
          value={label}
          onChange={(e) => setLabel(e.target.value)}
          placeholder="Label (e.g. Full gallery)"
          className="input"
        />
        <input
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="https://…"
          className="input"
        />
        <select
          value={kind}
          onChange={(e) => setKind(e.target.value as AdminEventLink["kind"])}
          className="input"
        >
          {KINDS.map((k) => (
            <option key={k} value={k}>
              {k}
            </option>
          ))}
        </select>
        <button
          type="submit"
          disabled={busy}
          className="rounded-md bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
        >
          Add
        </button>
      </form>
      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
    </div>
  );
}