"use client";

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

export function LegalTextSettingsPanel({ legal }: { legal: SettingsDoc["legal"] }) {
  const [state, formAction, pending] = useActionState(updateLegalTextSettingsAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-6 max-w-2xl mb-8"
    >
      <div>
        <p className="text-sm font-medium">Rechtstexte</p>
        <p className="text-xs text-[var(--rk-ink-muted)] mt-1">
          Inhalt der öffentlichen Seiten „AGB" (<code>/agb</code>) und „Datenschutz" (<code>/datenschutz</code>).
          Format: <code>## Titel</code> für eine Überschrift, Leerzeile trennt Absätze. Bei der AGB unbedingt einmal
          rechtlich gegenprüfen lassen (z. B. Berufsverband, Fotorecht-Anwalt) — der vorausgefüllte Text ist ein
          solider Entwurf, aber keine Rechtsberatung.
        </p>
      </div>

      <div className="flex flex-col gap-3 border-t border-white/10 pt-5">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">AGB</p>
        <label className="flex flex-col gap-1.5 text-xs max-w-xs">
          <span className="text-[var(--rk-ink-muted)]">Stand (z. B. „Stand: August 2026")</span>
          <input
            name="termsUpdated"
            type="text"
            defaultValue={legal?.termsUpdated || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Text (Deutsch)</span>
          <textarea
            name="termsTextDe"
            rows={10}
            defaultValue={legal?.termsTextDe || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-white/50 resize-y"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Text (Englisch, optional — sonst wird die deutsche Version angezeigt)</span>
          <textarea
            name="termsTextEn"
            rows={10}
            defaultValue={legal?.termsTextEn || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-white/50 resize-y"
          />
        </label>
      </div>

      <div className="flex flex-col gap-3 border-t border-white/10 pt-5">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Datenschutzerklärung</p>
        <label className="flex flex-col gap-1.5 text-xs max-w-xs">
          <span className="text-[var(--rk-ink-muted)]">Stand</span>
          <input
            name="privacyUpdated"
            type="text"
            defaultValue={legal?.privacyUpdated || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Text (Deutsch)</span>
          <textarea
            name="privacyTextDe"
            rows={10}
            defaultValue={legal?.privacyTextDe || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-white/50 resize-y"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Text (Englisch, optional)</span>
          <textarea
            name="privacyTextEn"
            rows={10}
            defaultValue={legal?.privacyTextEn || ""}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-white/50 resize-y"
          />
        </label>
      </div>

      <div className="flex flex-col gap-3 border-t border-white/10 pt-5">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Impressum</p>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Externer Link (z. B. impressum4u.de)</span>
          <input
            name="impressumUrl"
            type="url"
            defaultValue={legal?.impressumUrl || ""}
            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>
  );
}