'use client';

import React, { useState } from 'react';
import { Trash2, Loader2, AlertTriangle } from 'lucide-react';
import { deleteBottle } from '@/services/delete-bottle';
import { useRouter } from 'next/navigation';

interface DeleteBottleButtonProps {
    bottleId: string;
}

export default function DeleteBottleButton({ bottleId }: DeleteBottleButtonProps) {
    const [isDeleting, setIsDeleting] = useState(false);
    const [showConfirm, setShowConfirm] = useState(false);
    const router = useRouter();

    const handleDelete = async () => {
        setIsDeleting(true);
        try {
            const res = await deleteBottle(bottleId);
            if (res.success) {
                router.push('/');
                router.refresh();
            } else {
                alert(res.error || 'Fehler beim Löschen');
                setIsDeleting(false);
                setShowConfirm(false);
            }
        } catch (err) {
            alert('Löschen fehlgeschlagen');
            setIsDeleting(false);
            setShowConfirm(false);
        }
    };

    if (showConfirm) {
        return (
            <div className="flex flex-col gap-3 p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded-2xl animate-in fade-in zoom-in-95 duration-200">
                <div className="flex items-center gap-2 text-red-600 dark:text-red-400 font-bold text-sm">
                    <AlertTriangle size={18} />
                    Flasche wirklich löschen?
                </div>
                <p className="text-xs text-red-500/80">Diese Aktion kann nicht rückgängig gemacht werden. Alle Tasting Notes dieser Flasche gehen verloren.</p>
                <div className="flex gap-2">
                    <button
                        onClick={handleDelete}
                        disabled={isDeleting}
                        className="flex-1 py-2 bg-red-600 hover:bg-red-700 text-white text-xs font-black uppercase rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                    >
                        {isDeleting ? <Loader2 size={14} className="animate-spin" /> : 'Ja, Löschen'}
                    </button>
                    <button
                        onClick={() => setShowConfirm(false)}
                        disabled={isDeleting}
                        className="flex-1 py-2 bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs font-black uppercase rounded-xl hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-all"
                    >
                        Abbrechen
                    </button>
                </div>
            </div>
        );
    }

    return (
        <button
            onClick={() => setShowConfirm(true)}
            className="w-full py-4 px-6 border border-zinc-200 dark:border-zinc-800 text-zinc-400 hover:text-red-500 hover:border-red-500/30 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center gap-2 transition-all group"
        >
            <Trash2 size={16} className="group-hover:scale-110 transition-transform" />
            Flasche aus Vault entfernen
        </button>
    );
}