"use client";

import { useEffect, useState } from "react";
import { AlertTriangle, CheckCircle2, Info, X } from "lucide-react";
import { clsx } from "clsx";

interface ConfirmModalProps {
    isOpen: boolean;
    title: string;
    message: string;
    type?: 'danger' | 'warning' | 'info' | 'success';
    confirmLabel?: string;
    cancelLabel?: string;
    onConfirm: () => void;
    onCancel: () => void;
}

export default function ConfirmModal({
    isOpen,
    title,
    message,
    type = 'warning',
    confirmLabel = 'Confirm',
    cancelLabel = 'Cancel',
    onConfirm,
    onCancel
}: ConfirmModalProps) {
    const [render, setRender] = useState(isOpen);

    useEffect(() => {
        if (isOpen) setRender(true);
    }, [isOpen]);

    if (!render) return null;

    const iconMap = {
        danger: <AlertTriangle className="w-6 h-6 text-red-500" />,
        warning: <AlertTriangle className="w-6 h-6 text-amber-500" />,
        info: <Info className="w-6 h-6 text-cyan-500" />,
        success: <CheckCircle2 className="w-6 h-6 text-emerald-500" />
    };

    const colorMap = {
        danger: "border-red-500/20 bg-red-500/5 ",
        warning: "border-amber-500/20 bg-amber-500/5 ",
        info: "border-cyan-500/20 bg-cyan-500/5 ",
        success: "border-emerald-500/20 bg-emerald-500/5 "
    };

    const btnMap = {
        danger: "bg-red-500 text-white hover:bg-red-600 ",
        warning: "bg-amber-500 text-white hover:bg-amber-600 ",
        info: "bg-cyan-500 text-white hover:bg-cyan-600 ",
        success: "bg-emerald-500 text-white hover:bg-emerald-600 "
    };

    return (
        <div className={clsx(
            "fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md transition-all duration-300",
            isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        )}
            onTransitionEnd={() => { if (!isOpen) setRender(false); }}
        >
            <div className={clsx(
                "w-full max-w-md bg-zinc-900 border rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 transform",
                isOpen ? "translate-y-0 scale-100 opacity-100" : "translate-y-12 scale-95 opacity-0",
                colorMap[type]
            )}>
                <div className="p-6 md:p-8 space-y-6">
                    <div className="flex items-start gap-4">
                        <div className={clsx(
                            "w-12 h-12 rounded-2xl flex items-center justify-center shrink-0",
                            type === 'danger' ? 'bg-red-500/10' :
                                type === 'warning' ? 'bg-amber-500/10' :
                                    type === 'info' ? 'bg-cyan-500/10' : 'bg-emerald-500/10'
                        )}>
                            {iconMap[type]}
                        </div>
                        <div className="flex-1 min-w-0">
                            <h3 className="text-xl font-black text-white tracking-tight mb-2">{title}</h3>
                            <p className="text-sm text-white/50 leading-relaxed font-medium">{message}</p>
                        </div>
                    </div>

                    <div className="flex items-center gap-3 pt-2">
                        {cancelLabel && (
                            <button
                                onClick={onCancel}
                                className="flex-1 py-4 px-6 rounded-2xl bg-white/5 hover:bg-white/10 text-white/40 hover:text-white transition-all font-bold text-sm tracking-widest uppercase border border-white/5 active:scale-95"
                            >
                                {cancelLabel}
                            </button>
                        )}
                        <button
                            onClick={onConfirm}
                            className={clsx(
                                "py-4 px-6 rounded-2xl transition-all font-bold text-sm tracking-widest uppercase active:scale-95",
                                cancelLabel ? "flex-[1.5]" : "flex-1",
                                btnMap[type]
                            )}
                        >
                            {confirmLabel}
                        </button>
                    </div>
                </div>

                {/* Cyber Decorative bottom bar */}
                <div className={clsx(
                    "h-1 w-full opacity-50",
                    type === 'danger' ? 'bg-red-500' :
                        type === 'warning' ? 'bg-amber-500' :
                            type === 'info' ? 'bg-cyan-500' : 'bg-emerald-500'
                )} />
            </div>
        </div>
    );
}