"use client";

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

export function ReengagementSettingsPanel({ reengagementSettings }: { reengagementSettings: SettingsDoc["reengagementSettings"] }) {
  const [state, formAction, pending] = useActionState(updateReengagementSettingsAction, {});

  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">Wiedervorlage-Mail</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Automatische Erinnerungsmail an Kunden, deren letztes vereinbartes Shooting eine Weile zurückliegt. Läuft
        einmal täglich per Cron, verschickt pro Kunde erst wieder eine neue Mail, wenn danach ein weiteres Shooting
        stattgefunden hat.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="enabled" defaultChecked={reengagementSettings?.enabled ?? true} className="h-4 w-4" />
        Wiedervorlage-Mail aktivieren
      </label>

      <label className="flex flex-col gap-1.5 text-xs max-w-xs">
        <span className="text-[var(--rk-ink-muted)]">Tage seit dem letzten Shooting</span>
        <input
          name="delayDays"
          type="number"
          min="30"
          step="1"
          defaultValue={reengagementSettings?.delayDays ?? 365}
          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 (DE, optional — leer = eingebauter Standardtext)</span>
        <textarea
          name="customText"
          defaultValue={reengagementSettings?.customText ?? ""}
          rows={3}
          placeholder="Eigenen Text eingeben, um den Standardtext zu ersetzen…"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm 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 (EN, optional)</span>
        <textarea
          name="customTextEn"
          defaultValue={reengagementSettings?.customTextEn ?? ""}
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y"
        />
      </label>

      <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>
  );
}