"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { timeAgo } from "@/lib/time";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type Backup = {
  name: string;
  size: string;
  createdAt: string;
};

export function BackupManager() {
  const queryClient = useQueryClient();
  const [confirmRestore, setConfirmRestore] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);

  const { data: backups = [] } = useQuery<Backup[]>({
    queryKey: ["backups"],
    queryFn: () => fetch("/api/backups").then((r) => r.json()),
    staleTime: 30_000,
  });

  const createBackup = useMutation({
    mutationFn: async () => {
      const res = await fetch("/api/backups", { method: "POST" });
      return res.json();
    },
    onSuccess: (data) => {
      toast.success(data.message || "Backup created");
      queryClient.invalidateQueries({ queryKey: ["backups"] });
    },
    onError: (err) => {
      toast.error("Backup failed", { description: err.message });
    },
  });

  const restore = useMutation({
    mutationFn: async (name: string) => {
      setConfirmRestore(null);
      const res = await fetch("/api/backups/restore", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name }),
      });
      return res.json();
    },
    onSuccess: (data) => {
      (data.success ? toast.success : toast.error)(data.message);
      queryClient.invalidateQueries({ queryKey: ["status"] });
    },
    onError: (err) => {
      toast.error("Restore failed", { description: err.message });
    },
  });

  const deleteBackup = useMutation({
    mutationFn: async (name: string) => {
      await fetch("/api/backups", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name }),
      });
    },
    onSuccess: () => {
      toast.success("Backup deleted");
      queryClient.invalidateQueries({ queryKey: ["backups"] });
    },
    onError: (err) => {
      toast.error("Delete failed", { description: err.message });
    },
  });

  const isBusy = createBackup.isPending || restore.isPending;

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>World Backups</CardTitle>
            <CardDescription>
              Auto-backup every 6 hours. {backups.length} backup(s) stored.
            </CardDescription>
          </div>
          <Button
            onClick={() => createBackup.mutate()}
            disabled={isBusy}
          >
            {createBackup.isPending ? "Creating..." : "Backup Now"}
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {restore.isPending && (
          <Alert className="border-blue-500/20 bg-blue-500/5">
            <AlertDescription className="text-blue-300 flex items-center gap-2">
              <span className="h-2 w-2 rounded-full bg-blue-400 animate-pulse" />
              Restoring world backup... Server will restart. This may take a minute.
            </AlertDescription>
          </Alert>
        )}

        {backups.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">
            No backups yet. Click &quot;Backup Now&quot; to create one.
          </p>
        ) : (
          <ul className="space-y-1 max-h-[300px] overflow-y-auto">
            {backups.map((b) => (
              <li
                key={b.name}
                className="flex items-center justify-between px-3 py-2.5 rounded-md bg-muted/50 group"
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium truncate">{b.name}</p>
                  <p
                    className="text-xs text-muted-foreground"
                    title={new Date(b.createdAt).toLocaleString()}
                  >
                    {timeAgo(b.createdAt)} — {b.size}
                  </p>
                </div>
                <div className="flex gap-1 shrink-0 flex-wrap justify-end">
                  {confirmRestore === b.name ? (
                    <>
                      <Button
                        size="sm"
                        variant="default"
                        onClick={() => restore.mutate(b.name)}
                        disabled={isBusy}
                        className="text-xs h-9"
                      >
                        Confirm Restore
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => setConfirmRestore(null)}
                        className="text-xs h-9"
                      >
                        Cancel
                      </Button>
                    </>
                  ) : confirmDelete === b.name ? (
                    <>
                      <Button
                        size="sm"
                        variant="destructive"
                        onClick={() => {
                          deleteBackup.mutate(b.name);
                          setConfirmDelete(null);
                        }}
                        disabled={isBusy}
                        className="text-xs h-9"
                      >
                        Confirm Delete
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => setConfirmDelete(null)}
                        className="text-xs h-9"
                      >
                        Cancel
                      </Button>
                    </>
                  ) : (
                    <>
                      <a
                        href={`/api/backups/download?name=${encodeURIComponent(b.name)}`}
                        className="sm:opacity-0 sm:group-hover:opacity-100 transition"
                      >
                        <Button size="sm" variant="ghost" className="text-xs h-9">
                          Download
                        </Button>
                      </a>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => setConfirmRestore(b.name)}
                        disabled={isBusy}
                        className="text-xs h-9 sm:opacity-0 sm:group-hover:opacity-100 transition"
                      >
                        Restore
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => setConfirmDelete(b.name)}
                        disabled={isBusy}
                        className="text-xs h-9 text-muted-foreground sm:opacity-0 sm:group-hover:opacity-100 transition"
                      >
                        Delete
                      </Button>
                    </>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}