"use client";

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

export function PreshootReminderSettingsPanel({
  preshootReminderSettings,
}: {
  preshootReminderSettings: SettingsDoc["preshootReminderSettings"];
}) {
  const [state, formAction, pending] = useActionState(updatePreshootReminderSettingsAction, {});

  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">Erinnerungs-Mail vor dem Termin</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Automatische Mail an den Kunden kurz vor dem vereinbarten Shooting-Termin, inklusive Treffpunkt, der internen
        Vorbereitungs-Checkliste des Auftrags und ein paar allgemeinen Vorbereitungs-Tipps passend zur Shooting-Art
        (Convention, Outdoor, Portrait, …). Läuft alle 2 Stunden per Cron, pro Termin nur einmal (setzt sich zurück,
        wenn der Termin geändert wird).
      </p>

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

      <label className="flex flex-col gap-1.5 text-xs max-w-xs">
        <span className="text-[var(--rk-ink-muted)]">Stunden vor dem Termin</span>
        <input
          name="hoursBefore"
          type="number"
          min="2"
          step="1"
          defaultValue={preshootReminderSettings?.hoursBefore ?? 48}
          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={preshootReminderSettings?.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={preshootReminderSettings?.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>
  );
}