DentalManagementMH06/apps/Frontend/src/components/database-management/import-database-section.jsx

import { useRef, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Upload, UploadCloud } from "lucide-react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog";
import { useToast } from "@/hooks/use-toast";
export function ImportDatabaseSection() {
    const { toast } = useToast();
    const fileInputRef = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);
    const [confirmOpen, setConfirmOpen] = useState(false);
    const restoreMutation = useMutation({
        mutationFn: async (file) => {
            const formData = new FormData();
            formData.append("file", file);
            const token = localStorage.getItem("token");
            const res = await fetch("/api/database-management/restore", {
                method: "POST",
                headers: token ? { Authorization: `Bearer ${token}` } : {},
                body: formData,
            });
            if (!res.ok) {
                const body = await res.json().catch(() => ({}));
                throw new Error(body.error || "Restore failed");
            }
            return res.json();
        },
        onSuccess: () => {
            toast({
                title: "Database Restored",
                description: "Database restored successfully. Redirecting to login...",
            });
            setSelectedFile(null);
            if (fileInputRef.current)
                fileInputRef.current.value = "";
            // Clear auth token and reload so the user re-authenticates against the
            // restored database. This is necessary because the restored data may have
            // a different userId than the current JWT, which would cause all
            // user-scoped queries to return empty results.
            setTimeout(() => {
                localStorage.removeItem("token");
                window.location.href = "/";
            }, 2000);
        },
        onError: (err) => {
            toast({
                title: "Restore Failed",
                description: err.message,
                variant: "destructive",
            });
        },
    });
    const handleFileChange = (e) => {
        const file = e.target.files?.[0] ?? null;
        setSelectedFile(file);
    };
    const handleImportClick = () => {
        if (!selectedFile)
            return;
        setConfirmOpen(true);
    };
    const handleConfirm = () => {
        setConfirmOpen(false);
        if (selectedFile)
            restoreMutation.mutate(selectedFile);
    };
    return (<>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <UploadCloud className="h-5 w-5"/>
            <span>Import Database</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-gray-500">
            Restore the database from a <span className="font-medium text-gray-700">.sql</span> or <span className="font-medium text-gray-700">.zip</span> backup file.
            This will overwrite all existing data.
          </p>

          <div className="flex items-center gap-3">
            <input ref={fileInputRef} type="file" accept=".sql,.zip" onChange={handleFileChange} className="block text-sm text-gray-600 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border file:border-gray-300 file:text-sm file:bg-white file:text-gray-700 hover:file:bg-gray-50 cursor-pointer"/>
          </div>

          {selectedFile && (<p className="text-sm text-gray-500">
              Selected: <span className="font-medium text-gray-800">{selectedFile.name}</span>{" "}
              ({(selectedFile.size / 1024 / 1024).toFixed(1)} MB)
            </p>)}

          <Button onClick={handleImportClick} disabled={!selectedFile || restoreMutation.isPending} variant="destructive" className="flex items-center space-x-2">
            <Upload className="h-4 w-4"/>
            <span>{restoreMutation.isPending ? "Restoring..." : "Import & Restore"}</span>
          </Button>
        </CardContent>
      </Card>

      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Restore database?</AlertDialogTitle>
            <AlertDialogDescription>
              This will overwrite <strong>all existing data</strong> with the contents of{" "}
              <strong>{selectedFile?.name}</strong>. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirm} className="bg-red-600 hover:bg-red-700">
              Yes, restore
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>);
}