'use client';

import React, { useEffect, useState } from 'react';
import { 
    Tick02Icon, 
    Cancel01Icon,
    AlertCircleIcon,
    InformationCircleIcon,
    CancelCircleIcon
} from '@zen/core/shared/icons';

const Toast = ({ 
    id, 
    type = 'info', 
    message, 
    title,
    duration = 5000,
    dismissible = true,
    isAutoRemoving = false,
    onDismiss
}) => {
    const [isVisible, setIsVisible] = useState(false);
    const [isLeaving, setIsLeaving] = useState(false);

    useEffect(() => {
        // Trigger entrance animation
        const timer = setTimeout(() => setIsVisible(true), 10);
        return () => clearTimeout(timer);
    }, []);

    useEffect(() => {
        // Trigger exit animation on auto-remove
        if (isAutoRemoving && !isLeaving) {
            setIsLeaving(true);
        }
    }, [isAutoRemoving, isLeaving]);

    const handleDismiss = () => {
        if (!dismissible) return;
        
        setIsLeaving(true);
        setTimeout(() => {
            onDismiss(id);
        }, 300); // Match animation duration
    };

    const getIcon = () => {
        switch (type) {
            case 'success':
                return <Tick02Icon className="h-5 w-5 flex-shrink-0" />;
            case 'error':
                return <Cancel01Icon className="h-5 w-5 flex-shrink-0" />;
            case 'warning':
                return <AlertCircleIcon className="h-5 w-5 flex-shrink-0" />;
            case 'info':
            default:
                return <InformationCircleIcon className="h-5 w-5 flex-shrink-0" />;
        }
    };

    const getStyles = () => {
        const base = 'backdrop-blur-sm shadow-lg transition-colors duration-200';
        const shadow = 'shadow-neutral-900/10 dark:shadow-black/20';
        switch (type) {
            case 'success':
                return `${base} ${shadow} bg-green-50 border border-green-200 text-green-700 hover:bg-green-100/80 dark:bg-green-500/10 dark:border-green-500/20 dark:text-green-400 dark:hover:bg-green-500/15`;
            case 'error':
                return `${base} ${shadow} bg-red-50 border border-red-200 text-red-700 hover:bg-red-100/80 dark:bg-red-500/10 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/15`;
            case 'warning':
                return `${base} ${shadow} bg-yellow-50 border border-yellow-200 text-yellow-800 hover:bg-yellow-100/80 dark:bg-yellow-500/10 dark:border-yellow-500/20 dark:text-yellow-400 dark:hover:bg-yellow-500/15`;
            case 'info':
            default:
                return `${base} ${shadow} bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100/80 dark:bg-blue-500/10 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/15`;
        }
    };

    const getTitle = () => {
        if (title) return title;
        switch (type) {
            case 'success':
                return 'Success';
            case 'error':
                return 'Error';
            case 'warning':
                return 'Warning';
            case 'info':
            default:
                return 'Information';
        }
    };

    return (
        <div
            className={`
                ${getStyles()}
                px-4 py-3 min-w-[300px] max-w-[400px]
                rounded-xl flex items-start gap-3 
                transition-all duration-300 ease-in-out
                transform
                ${isVisible && !isLeaving 
                    ? 'translate-x-0 opacity-100 scale-100' 
                    : 'translate-x-8 opacity-0 scale-95'
                }
                ${isLeaving ? 'translate-x-8 opacity-0 scale-95' : ''}
            `}
        >
            {/* Icon */}
            <div className="mt-0.5">
                {getIcon()}
            </div>

            {/* Content */}
            <div className="flex-1 min-w-0">
                <p className="font-medium text-sm">{getTitle()}</p>
                <p className="text-xs opacity-90 dark:opacity-95 mt-0.5 break-words">{message}</p>
            </div>

            {/* Dismiss button */}
            {dismissible && (
                <button
                    onClick={handleDismiss}
                    className="flex-shrink-0 mt-0.5 opacity-60 hover:opacity-100 dark:opacity-70 dark:hover:opacity-100 transition-opacity duration-200 text-current"
                    aria-label="Dismiss notification"
                >
                    <CancelCircleIcon className="h-4 w-4" />
                </button>
            )}
        </div>
    );
};

export default Toast;

