/**
 * Toast Notification System
 * Usage: Toast.success(title, subtext), Toast.error(title, subtext), etc.
 * Or: Toast.show(title, subtext, 'success')
 */
const Toast = {
    container: null,
    duration: 3000,

    init() {
        if (this.container) return;

        this.container = document.createElement('div');
        this.container.id = 'toast-container';
        this.container.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
        document.body.appendChild(this.container);

        // Add styles for animations
        const style = document.createElement('style');
        style.textContent = `
            .toast-enter {
                opacity: 0;
                transform: translateX(100%) scale(0.95);
                filter: blur(4px);
            }
            .toast-show {
                opacity: 1;
                transform: translateX(0) scale(1);
                filter: blur(0);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .toast-exit {
                opacity: 0;
                transform: translateX(100%) scale(0.95);
                filter: blur(4px);
                transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
            }
        `;
        document.head.appendChild(style);
    },

    getConfig(type) {
        const configs = {
            success: {
                bg: 'bg-emerald-50',
                border: 'border-emerald-100',
                iconBg: 'bg-emerald-100',
                iconColor: 'text-emerald-600',
                titleColor: 'text-emerald-800',
                subtextColor: 'text-emerald-600',
                closeColor: 'text-emerald-400 hover:text-emerald-600',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>'
            },
            error: {
                bg: 'bg-red-50',
                border: 'border-red-100',
                iconBg: 'bg-red-100',
                iconColor: 'text-red-600',
                titleColor: 'text-red-800',
                subtextColor: 'text-red-600',
                closeColor: 'text-red-400 hover:text-red-600',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>'
            },
            warning: {
                bg: 'bg-amber-50',
                border: 'border-amber-100',
                iconBg: 'bg-amber-100',
                iconColor: 'text-amber-600',
                titleColor: 'text-amber-800',
                subtextColor: 'text-amber-600',
                closeColor: 'text-amber-400 hover:text-amber-600',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>'
            },
            info: {
                bg: 'bg-blue-50',
                border: 'border-blue-100',
                iconBg: 'bg-blue-100',
                iconColor: 'text-blue-600',
                titleColor: 'text-blue-800',
                subtextColor: 'text-blue-600',
                closeColor: 'text-blue-400 hover:text-blue-600',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>'
            }
        };
        return configs[type] || configs.info;
    },

    show(title, subtext = '', type = 'info') {
        this.init();
        const config = this.getConfig(type);

        const toast = document.createElement('div');
        toast.className = `toast-enter ${config.bg} rounded-xl border ${config.border} p-3 flex items-start gap-3 w-80 shadow-lg`;

        toast.innerHTML = `
            <div class="w-8 h-8 ${config.iconBg} rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 ${config.iconColor}" fill="none" stroke="currentColor" viewBox="0 0 24 24">${config.icon}</svg>
            </div>
            <div class="flex-1 min-w-0">
                <div class="font-medium text-sm ${config.titleColor}">${title}</div>
                ${subtext ? `<div class="text-xs ${config.subtextColor}">${subtext}</div>` : ''}
            </div>
            <button class="toast-close ${config.closeColor} flex-shrink-0">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;

        // Add to container
        this.container.appendChild(toast);

        // Trigger animation
        requestAnimationFrame(() => {
            toast.classList.remove('toast-enter');
            toast.classList.add('toast-show');
        });

        // Close button handler
        const closeBtn = toast.querySelector('.toast-close');
        closeBtn.addEventListener('click', () => this.dismiss(toast));

        // Auto dismiss
        const timeout = setTimeout(() => this.dismiss(toast), this.duration);
        toast.dataset.timeout = timeout;

        return toast;
    },

    dismiss(toast) {
        if (!toast || toast.classList.contains('toast-exit')) return;

        clearTimeout(toast.dataset.timeout);
        toast.classList.remove('toast-show');
        toast.classList.add('toast-exit');

        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 250);
    },

    // Convenience methods
    success(title, subtext = '') {
        return this.show(title, subtext, 'success');
    },

    error(title, subtext = '') {
        return this.show(title, subtext, 'error');
    },

    warning(title, subtext = '') {
        return this.show(title, subtext, 'warning');
    },

    info(title, subtext = '') {
        return this.show(title, subtext, 'info');
    }
};
