"use client";

import { useTransition, useState } from "react";
import { useRouter } from "next/navigation";
import { runBackupNowAction } from "@/lib/actions/backup";
import { formatDateTimeDE } from "@/lib/orderConstants";

const WARN_AFTER_HOURS = 30;

export function BackupStatusPanel({ lastBackupAt }: { lastBackupAt: string | null }) {
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<{ error?: string; success?: boolean; sizeBytes?: number } | null>(null);
  const router = useRouter();

  const last = lastBackupAt ? new Date(lastBackupAt) : null;
  const hoursSince = last ? (Date.now() - last.getTime()) / 3_600_000 : null;
  const overdue = hoursSince === null || hoursSince > WARN_AFTER_HOURS;

  return (
    <div 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">Datenbank-Sicherung</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Tägliches <code>mongodump</code>-Backup der lokal gehosteten Datenbank nach <code>/var/backups/rakku-v2-db</code>{" "}
        (letzte 14 Sicherungen werden aufgehoben). Läuft automatisch per Cron.
      </p>

      <div className={`flex items-center gap-2 text-sm ${overdue ? "text-red-400" : "text-emerald-400"}`}>
        <span className={`w-2 h-2 rounded-full ${overdue ? "bg-red-400" : "bg-emerald-400"}`} />
        {last ? (
          <span>
            Letzte Sicherung: {formatDateTimeDE(last)}
            {overdue && " — überfällig, bitte Cron prüfen"}
          </span>
        ) : (
          <span>Noch keine Sicherung gelaufen.</span>
        )}
      </div>

      <button
        type="button"
        disabled={pending}
        onClick={() =>
          startTransition(async () => {
            const res = await runBackupNowAction();
            setResult(res);
            router.refresh();
          })
        }
        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"
      >
        {pending ? "Sichert …" : "Jetzt sichern"}
      </button>
      {result?.error && <p className="text-sm text-red-400">{result.error}</p>}
      {result?.success && (
        <p className="text-sm text-emerald-400">
          Sicherung erfolgreich ({result.sizeBytes ? `${(result.sizeBytes / 1024 / 1024).toFixed(2)} MB` : ""}).
        </p>
      )}
    </div>
  );
}