"use client";

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

export function ReminderEscalationSettingsPanel({
  reminderEscalationSettings,
}: {
  reminderEscalationSettings: SettingsDoc["reminderEscalationSettings"];
}) {
  const [state, formAction, pending] = useActionState(updateReminderEscalationSettingsAction, {});
  const fees = reminderEscalationSettings?.levelFees ?? [0, 5, 15];

  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">Automatische Mahnstufen</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Läuft täglich per Cron und erstellt bei unbezahlten Rechnungen automatisch die nächste Mahnstufe (mit
        Zusatzgebühr und E-Mail an den Kunden), sobald die Frist der vorherigen Stufe abgelaufen ist — ganz ohne
        manuellen Klick. Manuelles Auslösen unter „Mahnungen" bei einem Auftrag bleibt weiterhin jederzeit möglich.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="autoEnabled" defaultChecked={reminderEscalationSettings?.autoEnabled ?? false} className="h-4 w-4" />
        Automatische Mahnstufen aktivieren
      </label>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Tage ab Rechnungsdatum bis zur 1. Zahlungserinnerung</span>
          <input
            name="daysUntilFirstReminder"
            type="number"
            min="1"
            step="1"
            defaultValue={reminderEscalationSettings?.daysUntilFirstReminder ?? 14}
            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)]">Tage bis zur jeweils nächsten Mahnstufe</span>
          <input
            name="daysBetweenLevels"
            type="number"
            min="1"
            step="1"
            defaultValue={reminderEscalationSettings?.daysBetweenLevels ?? 10}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
      </div>

      <div>
        <p className="text-xs text-[var(--rk-ink-muted)] mb-2">Zusatzgebühr je Mahnstufe (€, meist Stufe 1 = 0)</p>
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1.5 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Zahlungserinnerung</span>
            <input
              name="fee1"
              type="number"
              min="0"
              step="0.01"
              defaultValue={fees[0] ?? 0}
              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)]">1. Mahnung</span>
            <input
              name="fee2"
              type="number"
              min="0"
              step="0.01"
              defaultValue={fees[1] ?? 5}
              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)]">2. Mahnung (und weitere)</span>
            <input
              name="fee3"
              type="number"
              min="0"
              step="0.01"
              defaultValue={fees[2] ?? 15}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
        </div>
      </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>
  );
}