"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
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 [result, setResult] = useState<{ ok: boolean; message: 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) => {
      setResult({ ok: true, message: data.message || "Backup created" });
      queryClient.invalidateQueries({ queryKey: ["backups"] });
    },
    onError: (err) => {
      setResult({ ok: false, message: 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) => {
      setResult({ ok: data.success, message: data.message });
      queryClient.invalidateQueries({ queryKey: ["status"] });
    },
    onError: (err) => {
      setResult({ ok: false, message: 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: () => {
      queryClient.invalidateQueries({ queryKey: ["backups"] });
    },
  });

  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">
        {result && (
          <Alert className={result.ok ? "border-emerald-500/20 bg-emerald-500/5" : "border-red-500/20 bg-red-500/5"}>
            <AlertDescription className={result.ok ? "text-emerald-300" : "text-red-300"}>
              {result.message}
            </AlertDescription>
          </Alert>
        )}

        {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">
                    {new Date(b.createdAt).toLocaleString()} — {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>
                    </>
                  ) : (
                    <>
                      <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={() => deleteBackup.mutate(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>
  );
}