import { AlertCircle, Loader2 } from 'lucide-react';
import React, { useState } from 'react';
import { toast } from 'sonner';

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/tasko/ui/dialog';
import { Button } from '@/components/ui/button';
import type { MediaFile } from '@/types/media';

interface DeleteMediaDialogProps {
    media: MediaFile | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
}

export function DeleteMediaDialog({
    media,
    open,
    onOpenChange,
    onSuccess,
}: DeleteMediaDialogProps) {
    const [processing, setProcessing] = useState(false);

    const handleDelete = () => {
        if (!media) {
            return;
        }

        setProcessing(true);
        // Simulasikan proses penghapusan file media
        setTimeout(() => {
            setProcessing(false);
            toast.success(`File "${media.name}" berhasil dihapus`);
            onOpenChange(false);
            onSuccess?.();
        }, 1000);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden border-none bg-white p-0 shadow-2xl sm:max-w-105 dark:bg-neutral-900 [&>button:last-child]:hidden">
                <div className="p-6 text-center">
                    <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-100 shadow-lg dark:border-neutral-800 dark:bg-red-900/30">
                        <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-500" />
                    </div>

                    <DialogHeader className="text-center">
                        <DialogTitle className="text-2xl font-bold text-foreground">
                            Hapus File Media?
                        </DialogTitle>
                        <DialogDescription className="mt-2 text-base text-neutral-500 dark:text-neutral-400">
                            Apakah Anda yakin ingin menghapus file{' '}
                            <span className="font-bold text-foreground underline decoration-red-500/30">
                                "{media?.name}"
                            </span>
                            ? Tindakan ini bersifat permanen dan file tidak
                            dapat dipulihkan kembali.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <DialogFooter className="flex flex-col gap-3 bg-neutral-50 p-6 sm:flex-row dark:bg-neutral-800/50">
                    <Button
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        className="h-12 flex-1 rounded-xl font-semibold transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-700"
                        disabled={processing}
                    >
                        Batal
                    </Button>
                    <Button
                        variant="destructive"
                        onClick={handleDelete}
                        disabled={processing}
                        className="h-12 flex-1 rounded-xl font-bold shadow-xl shadow-red-500/20 transition-all active:scale-95"
                    >
                        {processing ? (
                            <>
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                Menghapus...
                            </>
                        ) : (
                            'Ya, Hapus File'
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}