'use client'
import { CloseCircle, InfoCircle, TickCircle } from 'iconsax-react';
import React, { useState, useEffect } from 'react';

interface Toast {
    id: string;
    message: string;
    type?: 'success' | 'error' | 'info';
    isExiting?: boolean;
}

let addToast: (toast: Toast) => void;

const ToastContainer: React.FC = () => {
    const [toasts, setToasts] = useState<Toast[]>([]);

    // ثبت toast جدید
    const showToast = (toast: Toast) => {
        setToasts((prev) => [...prev, toast]);

        // حذف خودکار بعد از ۳ ثانیه
        setTimeout(() => {
            setToasts((prev) => prev.map(t =>
                t.id === toast.id ? { ...t, isExiting: true } : t
            ));

            // حذف از DOM بعد از اتمام انیمیشن
            setTimeout(() => {
                setToasts((prev) => prev.filter((t) => t.id !== toast.id));
            }, 300); // مدت زمان انیمیشن خروج
        }, 3000);
    };

    // تخصیص تابع نمایش toast به متغیر سراسری
    useEffect(() => {
        addToast = showToast;
    }, []);

    return (
        <div className="fixed top-4 text-sm right-0 left-0 mx-auto w-fit z-50 flex flex-col gap-2">
            {toasts.map((toast) => (
                <div
                    key={toast.id}
                    className={`px-4 flex items-center gap-2 backdrop-blur-2xl h-16 min-w-[300px] rounded-2xl shadow-md 
                        ${toast.isExiting ? 'animate-slide-out-right' : 'animate-slide-in-right'} ${toast.type === 'success'
                            ? 'bg-white/70 text-black'
                            : toast.type === 'error'
                                ? 'bg-white/70 text-black'
                                : 'bg-white/70 text-black'
                        }`}
                    style={{
                        animationFillMode: 'forwards',
                        animationDuration: '0.3s',
                        animationTimingFunction: 'ease-out'
                    }}
                >
                    {
                        toast.type === 'success' ? <TickCircle className='size-5' color='green' /> :
                            toast.type === 'error' ? <CloseCircle className='size-5' color='red' /> :
                                <InfoCircle className='size-5' color='blue' />
                    }
                    {toast.message}
                </div>
            ))}
        </div>
    );
};

export const toast = (message?: string, type: 'success' | 'error' | 'info' = 'info') => {
    addToast({ id: Date.now().toString(), message: message || '', type });
};

export default ToastContainer;