"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { sendReminderAction } from "@/lib/actions/admin";
import { formatDateDE } from "@/lib/orderConstants";

type ReminderInfo = {
  id: string;
  level: number;
  fee: number;
  amountDue: number;
  automatic: boolean;
  createdAt: string;
  dueDate: string;
};

const LEVEL_LABELS: Record<number, string> = {
  1: "Zahlungserinnerung",
  2: "1. Mahnung",
};

function levelLabel(level: number) {
  return LEVEL_LABELS[level] || `${level - 1}. Mahnung`;
}

const fmt = (n: number) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(n);

export function AdminReminderPanel({
  orderId,
  paid,
  hasInvoice,
  reminders,
  nextFee,
}: {
  orderId: string;
  paid: boolean;
  hasInvoice: boolean;
  reminders: ReminderInfo[];
  nextFee: number;
}) {
  const [pending, startTransition] = useTransition();
  const [note, setNote] = useState("");
  const router = useRouter();

  if (!hasInvoice) return null;

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">Mahnungen</p>

      {reminders.length > 0 && (
        <ul className="flex flex-col gap-1.5 mb-3">
          {reminders.map((r) => (
            <li key={r.id} className="flex items-center justify-between gap-3 text-sm">
              <span>
                {levelLabel(r.level)}{" "}
                <span className="text-[var(--rk-ink-muted)]">
                  · {formatDateDE(new Date(r.createdAt))} · {fmt(r.amountDue)}
                  {r.fee > 0 ? ` (inkl. +${fmt(r.fee)} Gebühr)` : ""}
                  {r.automatic ? " · automatisch" : ""}
                </span>
              </span>
              <a
                href={`/api/reminders/${r.id}/pdf`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs border border-white/30 rounded-lg px-3 py-1 hover:border-white transition-colors"
              >
                PDF öffnen
              </a>
            </li>
          ))}
        </ul>
      )}

      {paid ? (
        <p className="text-xs text-[var(--rk-ink-muted)]">Auftrag ist bezahlt, keine Mahnung nötig.</p>
      ) : (
        <div className="flex flex-col gap-2">
          <input
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder="Optionale Notiz auf der Mahnung"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <button
            disabled={pending}
            onClick={() =>
              startTransition(async () => {
                await sendReminderAction(orderId, note);
                setNote("");
                router.refresh();
              })
            }
            className="self-start text-xs border border-amber-400/40 text-amber-400 rounded-lg px-4 py-2 hover:bg-amber-400/10 transition-colors disabled:opacity-50"
          >
            {reminders.length === 0 ? "Zahlungserinnerung senden" : `${levelLabel(reminders.length + 1)} senden`}
            {nextFee > 0 ? ` (+${fmt(nextFee)} Gebühr)` : ""}
          </button>
          <p className="text-[0.65rem] text-[var(--rk-ink-muted)]">
            Der Kunde bekommt automatisch eine E-Mail mit dem neuen offenen Betrag. Automatische Eskalation (falls
            unter Einstellungen aktiviert) läuft unabhängig davon im Hintergrund weiter.
          </p>
        </div>
      )}
    </div>
  );
}