"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { HardDrive, Download, Trash2, RefreshCw, CheckCircle, XCircle, Loader2, Layers } from "lucide-react";
import Button from "../ui/Button";
import Modal from "../ui/Modal";
import { EmptyState } from "../ui/PageHeader";
import { formatFileSize, formatDate } from "@/lib/utils";
import toast from "react-hot-toast";

interface BackupData {
  id: string;
  status: string;
  type: string;
  size: number;
  path: string | null;
  startedAt: string;
  completedAt: string | null;
}

export default function BackupPanel() {
  const [backups, setBackups] = useState<BackupData[]>([]);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState<"full" | "incremental" | null>(null);
  const [toDelete, setToDelete] = useState<BackupData | null>(null);

  const fetchBackups = async () => {
    const res = await fetch("/api/backup");
    if (res.ok) setBackups(await res.json());
    setLoading(false);
  };

  useEffect(() => { fetchBackups(); }, []);

  const createBackup = async (type: "full" | "incremental") => {
    setCreating(type);
    try {
      const res = await fetch("/api/backup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type }) });
      if (res.ok) {
        toast.success(`Backup ${type === "full" ? "complet" : "incrémental"} créé`);
        fetchBackups();
      } else toast.error("Échec du backup");
    } catch {
      toast.error("Erreur réseau");
    }
    setCreating(null);
  };

  const deleteBackup = async () => {
    if (!toDelete) return;
    const res = await fetch("/api/backup", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: toDelete.id }) });
    setToDelete(null);
    if (res.ok) {
      toast.success("Backup supprimé");
      fetchBackups();
    } else toast.error("Suppression impossible");
  };

  const statusIcon = (status: string) => {
    if (status === "completed") return <CheckCircle className="w-4 h-4 text-emerald-500 shrink-0" />;
    if (status === "failed") return <XCircle className="w-4 h-4 text-rose-500 shrink-0" />;
    return <Loader2 className="w-4 h-4 text-blue-500 animate-spin shrink-0" />;
  };

  const totalSize = backups.reduce((s, b) => s + (b.size || 0), 0);

  return (
    <div className="space-y-5">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
          <h2 className="text-[15px] font-semibold text-gray-900 dark:text-white flex items-center gap-2"><HardDrive className="w-[18px] h-[18px] text-cyan-500" /> Sauvegardes manuelles</h2>
          <p className="text-[13px] text-gray-500 dark:text-gray-400 mt-0.5">{backups.length} backup{backups.length !== 1 ? "s" : ""} · {formatFileSize(totalSize)} au total</p>
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant="secondary" onClick={() => createBackup("incremental")} loading={creating === "incremental"} disabled={!!creating}>
            <Layers className="w-4 h-4" /> Incrémental
          </Button>
          <Button size="sm" variant="accent" onClick={() => createBackup("full")} loading={creating === "full"} disabled={!!creating}>
            <Download className="w-4 h-4" /> Backup complet
          </Button>
        </div>
      </div>

      {loading ? (
        <div className="space-y-2">
          {[0, 1, 2].map((i) => (
            <div key={i} className="rounded-2xl border border-line dark:border-white/[0.07] p-4 flex items-center gap-3 animate-pulse">
              <div className="w-4 h-4 rounded-full bg-gray-200 dark:bg-white/10" />
              <div className="flex-1 space-y-2"><div className="h-3 w-1/3 rounded bg-gray-200 dark:bg-white/10" /><div className="h-2 w-1/4 rounded bg-gray-200 dark:bg-white/10" /></div>
            </div>
          ))}
        </div>
      ) : backups.length === 0 ? (
        <EmptyState icon={HardDrive} title="Aucun backup" description="Lancez un backup complet pour créer une première archive de vos fichiers et de la base de données." />
      ) : (
        <div className="rounded-2xl border border-line dark:border-white/[0.07] overflow-hidden divide-y divide-line dark:divide-white/[0.06]">
          {backups.map((backup, i) => (
            <motion.div
              key={backup.id}
              initial={{ opacity: 0, y: 5 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: Math.min(i, 10) * 0.03 }}
              className="flex flex-col sm:flex-row sm:items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-white/[0.03] transition-colors"
            >
              <div className="flex items-center gap-3 flex-1 min-w-0">
                {statusIcon(backup.status)}
                <div className="flex-1 min-w-0">
                  <p className="text-[14px] text-gray-900 dark:text-white flex items-center gap-2 flex-wrap">
                    <span className="font-medium">{formatDate(backup.startedAt)}</span>
                    <span className={`inline-flex px-2 py-0.5 rounded-full text-[11px] font-medium ring-1 ring-inset ${backup.type === "full" ? "bg-cyan-500/10 text-cyan-700 dark:text-cyan-300 ring-cyan-500/20" : "bg-gray-100 dark:bg-white/[0.06] text-gray-600 dark:text-gray-300 ring-gray-500/15"}`}>
                      {backup.type === "full" ? "Complet" : "Incrémental"}
                    </span>
                  </p>
                  <p className="text-[12px] text-gray-500 dark:text-gray-400 tabular-nums">
                    {backup.size > 0 ? formatFileSize(backup.size) : "—"}
                    {backup.completedAt && ` · terminé à ${new Date(backup.completedAt).toLocaleTimeString("fr-CA", { hour: "2-digit", minute: "2-digit" })}`}
                    {backup.status === "failed" && " · échec"}
                  </p>
                </div>
              </div>
              <div className="flex gap-1 pl-7 sm:pl-0">
                <button onClick={fetchBackups} className="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-xl hover:bg-gray-100 dark:hover:bg-white/[0.08] transition-colors" title="Actualiser">
                  <RefreshCw className="w-4 h-4" />
                </button>
                <button onClick={() => setToDelete(backup)} className="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-rose-500 rounded-xl hover:bg-rose-500/10 transition-colors" title="Supprimer">
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </motion.div>
          ))}
        </div>
      )}

      <Modal
        isOpen={!!toDelete}
        onClose={() => setToDelete(null)}
        title="Supprimer ce backup ?"
        description={toDelete ? `${formatDate(toDelete.startedAt)} · ${formatFileSize(toDelete.size || 0)}` : undefined}
        footer={<><Button variant="ghost" onClick={() => setToDelete(null)}>Annuler</Button><Button variant="danger" onClick={deleteBackup}><Trash2 className="w-4 h-4" /> Supprimer</Button></>}
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">L&apos;archive sera effacée du disque. Cette action est irréversible.</p>
      </Modal>
    </div>
  );
}