import { useCallback, useEffect, useRef, useState } from 'react';
import { CheckCircle, X } from 'lucide-react';

interface ToastMessage {
    id: number;
    text: string;
}

let toastCounter = 0;

export function usePolicyToast() {
    const [toasts, setToasts] = useState<ToastMessage[]>([]);
    const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());

    const dismiss = useCallback((id: number) => {
        setToasts((current) => current.filter((toast) => toast.id !== id));
        const timer = timers.current.get(id);
        if (timer) {
            clearTimeout(timer);
            timers.current.delete(id);
        }
    }, []);

    const showToast = useCallback((text: string) => {
        const id = ++toastCounter;
        setToasts((current) => [...current, { id, text }]);

        const timer = setTimeout(() => dismiss(id), 3200);
        timers.current.set(id, timer);
    }, [dismiss]);

    useEffect(() => {
        const activeTimers = timers.current;
        return () => {
            activeTimers.forEach((timer) => clearTimeout(timer));
            activeTimers.clear();
        };
    }, []);

    const ToastContainer = useCallback(() => (
        <div className="pointer-events-none fixed bottom-6 right-6 z-50 flex flex-col gap-2">
            {toasts.map((toast) => (
                <div
                    key={toast.id}
                    className="pointer-events-auto flex items-center gap-2 rounded-xl border border-emerald-500/25 bg-slate-900/95 px-4 py-2.5 text-sm text-emerald-300 shadow-lg backdrop-blur-sm animate-fade-in"
                    role="status"
                >
                    <CheckCircle className="h-4 w-4 shrink-0 text-emerald-400" aria-hidden="true" />
                    <span>{toast.text}</span>
                    <button
                        type="button"
                        onClick={() => dismiss(toast.id)}
                        className="ml-1 rounded p-0.5 text-slate-500 hover:text-slate-300"
                        aria-label="Dismiss notification"
                    >
                        <X className="h-3.5 w-3.5" />
                    </button>
                </div>
            ))}
        </div>
    ), [dismiss, toasts]);

    return { showToast, ToastContainer };
}