"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { createStandardContractAction, sendContractAction, sendContractReminderAction, deleteContractAction } from "@/lib/actions/admin";

const REMINDER_COOLDOWN_HOURS = 48;

type ContractSummary = {
  id: string;
  type: "standard" | "tfp";
  status: "draft" | "sent" | "signed" | "declined";
  lastReminderAt: string | null;
} | null;

export function AdminContractPanel({
  orderId,
  compensationType,
  priceAgreed,
  contract,
}: {
  orderId: string;
  compensationType: "paid" | "tfp";
  priceAgreed: boolean;
  contract: ContractSummary;
}) {
  const [pending, startTransition] = useTransition();
  const [reminderResult, setReminderResult] = useState<{ error?: string; success?: boolean } | null>(null);
  const [newContractLocale, setNewContractLocale] = useState<"de" | "en">("de");
  const router = useRouter();

  function handleSendReminder() {
    if (!contract) return;
    startTransition(async () => {
      const result = await sendContractReminderAction(contract.id);
      setReminderResult(result);
      if (result.success) router.refresh();
    });
  }

  function handleDelete() {
    const message =
      contract?.status === "signed"
        ? `Dieser Vertrag wurde bereits vom Kunden unterschrieben. Trotzdem löschen und neu erstellen? Die bisherige Unterschrift geht dabei verloren.`
        : `Vertrag „${contract?.type === "tfp" ? "TFP" : "Standard"}" wirklich löschen? Kann danach neu erstellt werden.`;
    if (contract && confirm(message)) {
      startTransition(async () => {
        await deleteContractAction(contract.id);
        router.refresh();
      });
    }
  }

  return (
    <div className="mt-4 border-t border-white/10 pt-4">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Vertrag</p>

      {!contract && compensationType === "paid" && (
        <div className="text-xs text-[var(--rk-ink-muted)]">
          {priceAgreed ? (
            <div className="flex items-center gap-2 flex-wrap">
              <select
                value={newContractLocale}
                onChange={(e) => setNewContractLocale(e.target.value as "de" | "en")}
                className="bg-transparent border border-white/15 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:border-white/50"
              >
                <option value="de">Deutsch</option>
                <option value="en">English</option>
              </select>
              <button
                disabled={pending}
                onClick={() => startTransition(() => createStandardContractAction(orderId, newContractLocale))}
                className="border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
              >
                Vertrag erstellen
              </button>
            </div>
          ) : (
            "Vertrag kann erstellt werden, sobald der Preis vereinbart ist."
          )}
        </div>
      )}

      {!contract && compensationType === "tfp" && (
        <Link
          href={`/de/admin/orders/${orderId}/tfp-contract`}
          className="inline-block text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white"
        >
          TFP-Vertrag ausfüllen
        </Link>
      )}

      {contract && (
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-3 flex-wrap text-xs">
            <span className="text-[var(--rk-ink-muted)]">{contract.type === "tfp" ? "TFP-Vertrag" : "Vertrag"}</span>
            <StatusBadge status={contract.status} />
            <a
              href={`/api/contracts/${contract.id}/pdf`}
              target="_blank"
              rel="noopener noreferrer"
              className="border border-white/15 rounded-full px-3 py-1 hover:border-white/50"
            >
              PDF ansehen
            </a>
            {contract.status === "draft" && (
              <button
                disabled={pending}
                onClick={() => startTransition(() => sendContractAction(contract.id))}
                className="border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
              >
                An Kunden senden
              </button>
            )}
            {contract.status === "sent" && <ReminderControl lastReminderAt={contract.lastReminderAt} pending={pending} onSend={handleSendReminder} />}
            <button
              disabled={pending}
              onClick={handleDelete}
              className="border border-red-400/30 text-red-400/80 rounded-lg px-3 py-1.5 hover:border-red-400 hover:text-red-400 disabled:opacity-50 transition-colors"
            >
              Löschen & neu erstellen
            </button>
          </div>
          {reminderResult?.error && <p className="text-xs text-red-400">{reminderResult.error}</p>}
          {reminderResult?.success && <p className="text-xs text-emerald-400">Erinnerung gesendet.</p>}
        </div>
      )}
    </div>
  );
}

export function statusLabel(status: string) {
  return { draft: "Entwurf", sent: "Wartet auf Unterschrift", signed: "Unterschrieben", declined: "Abgelehnt" }[status] ?? status;
}

export function StatusBadge({ status }: { status: "draft" | "sent" | "signed" | "declined" }) {
  const color = { draft: "#a3a1a6", sent: "#f5a623", signed: "#34d399", declined: "#f87171" }[status];
  return (
    <span
      className="rounded-full border px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.1em]"
      style={{ borderColor: `${color}66`, color }}
    >
      {statusLabel(status)}
    </span>
  );
}

function ReminderControl({
  lastReminderAt,
  pending,
  onSend,
}: {
  lastReminderAt: string | null;
  pending: boolean;
  onSend: () => void;
}) {
  // Lazy useState-Initializer statt eines direkten Date.now()-Aufrufs im
  // Render-Body - läuft nur einmal beim Mount, genügt hier (kein Live-
  // Countdown nötig, ein router.refresh() nach dem Senden reicht).
  const [now] = useState(() => Date.now());
  const nextPossibleAt = lastReminderAt ? new Date(lastReminderAt).getTime() + REMINDER_COOLDOWN_HOURS * 60 * 60 * 1000 : 0;
  const onCooldown = nextPossibleAt > now;

  if (onCooldown) {
    return (
      <span className="text-[var(--rk-ink-muted)]" title="Kein versehentliches Zuspammen">
        Nächste Erinnerung ab{" "}
        {new Date(nextPossibleAt).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
      </span>
    );
  }

  return (
    <button
      disabled={pending}
      onClick={onSend}
      className="border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
    >
      {lastReminderAt ? "Erneut erinnern" : "Erinnerung senden"}
    </button>
  );
}