"use client";

import { useActionState } from "react";
import { updateSocialLinksAction } from "@/lib/actions/admin";
import type { SettingsDoc } from "@/models/Settings";

const FIELDS: { name: keyof SettingsDoc["socialLinks"]; label: string; placeholder: string }[] = [
  { name: "instagram", label: "Instagram", placeholder: "https://instagram.com/..." },
  { name: "twitter", label: "X / Twitter", placeholder: "https://x.com/..." },
  { name: "tiktok", label: "TikTok", placeholder: "https://tiktok.com/@..." },
  { name: "twitch", label: "Twitch", placeholder: "https://twitch.tv/..." },
  { name: "youtube", label: "YouTube", placeholder: "https://youtube.com/@..." },
  { name: "discord", label: "Discord", placeholder: "https://discord.gg/..." },
  { name: "email", label: "E-Mail (optional, abweichend von Kontakt-E-Mail)", placeholder: "kontakt@rakku.de" },
];

export function SocialLinksForm({ socialLinks }: { socialLinks: SettingsDoc["socialLinks"] }) {
  const [state, formAction, pending] = useActionState(updateSocialLinksAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 max-w-2xl mb-8"
    >
      <p className="text-sm font-medium">Social-Media-Links</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Erscheinen im Footer jeder Seite und in den strukturierten Daten für Google. Leer lassen, um einen Kanal
        auszublenden.
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {FIELDS.map((f) => (
          <label key={f.name} className="flex flex-col gap-1.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">{f.label}</span>
            <input
              name={f.name}
              defaultValue={socialLinks?.[f.name] ?? ""}
              placeholder={f.placeholder}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
        ))}
      </div>

      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Speichern
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      {state.success && <p className="text-sm text-emerald-400">Gespeichert.</p>}
    </form>
  );
}