const { useState, useEffect, useRef, createContext, useContext } = React;

// Global Contexts
const AppContext = createContext();

const AppProvider = ({ children }) => {
    const [theme, setTheme] = useState(currentUser.theme || 'light');
    const [notifications, setNotifications] = useState(mockNotifications);
    const [messages, setMessages] = useState(mockMessages);
    
    useEffect(() => {
        if (theme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }, [theme]);

    const toggleTheme = () => {
        setTheme(prev => prev === 'light' ? 'dark' : 'light');
    };

    return (
        <AppContext.Provider value={{ theme, toggleTheme, notifications, setNotifications, messages, setMessages }}>
            {children}
        </AppContext.Provider>
    );
};

// UI Components
const Card = ({ children, className = '', hoverable = false }) => (
    <div className={`bg-white dark:bg-surface-dark rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden transition-all duration-200 ${hoverable ? 'hover:shadow-md hover:-translate-y-1' : ''} ${className}`}>
        {children}
    </div>
);

const Button = ({ children, variant = 'primary', size = 'md', className = '', onClick, icon, fullWidth = false, disabled = false }) => {
    const baseStyle = "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 active:scale-95 disabled:opacity-50 disabled:pointer-events-none";
    
    const sizes = {
        sm: "px-3 py-1.5 text-xs",
        md: "px-4 py-2 text-sm",
        lg: "px-6 py-3 text-base"
    };

    const variants = {
        primary: "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm",
        secondary: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-gray-500",
        outline: "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 focus:ring-primary-500",
        ghost: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 focus:ring-gray-500",
        danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500 shadow-sm"
    };

    return (
        <button 
            className={`${baseStyle} ${sizes[size]} ${variants[variant]} ${fullWidth ? 'w-full' : ''} ${className}`} 
            onClick={onClick}
            disabled={disabled}
        >
            {icon && <span className={`${children ? 'mr-2' : ''}`}>{icon}</span>}
            {children}
        </button>
    );
};

const Avatar = ({ src, alt, size = 'md', className = '', border = false }) => {
    const sizes = {
        sm: 'w-8 h-8',
        md: 'w-10 h-10',
        lg: 'w-16 h-16',
        xl: 'w-24 h-24',
        '2xl': 'w-32 h-32'
    };
    return (
        <img 
            src={src} 
            alt={alt} 
            className={`rounded-full object-cover ${sizes[size]} ${border ? 'border-4 border-white dark:border-surface-dark' : ''} ${className}`} 
        />
    );
};

const Badge = ({ children, variant = 'gray', className = '' }) => {
    const variants = {
        gray: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
        indigo: 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300',
        emerald: 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300',
        blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
        purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300',
        red: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'
    };
    return (
        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]} ${className}`}>
            {children}
        </span>
    );
};

const Tab = ({ active, children, onClick }) => (
    <button
        onClick={onClick}
        className={`px-4 py-3 font-medium text-sm transition-colors border-b-2 whitespace-nowrap ${
            active 
                ? 'border-primary-600 text-primary-600 dark:text-primary-400 dark:border-primary-400' 
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
        }`}
    >
        {children}
    </button>
);

const Input = ({ placeholder, type = 'text', icon, value, onChange, className = '' }) => (
    <div className="relative w-full">
        {icon && (
            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500">
                {icon}
            </div>
        )}
        <input 
            type={type}
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            className={`w-full ${icon ? 'pl-10' : 'pl-4'} pr-4 py-2.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-gray-100 focus:bg-white dark:focus:bg-gray-800 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none ${className}`}
        />
    </div>
);

const Skeleton = ({ className = '' }) => (
    <div className={`animate-pulse bg-gray-200 dark:bg-gray-700 rounded ${className}`}></div>
);

const EmptyState = ({ icon, title, description, action }) => (
    <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-2xl">
        <div className="w-16 h-16 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center text-gray-400 dark:text-gray-500 mb-4">
            {icon}
        </div>
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{title}</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-sm mb-6">{description}</p>
        {action && action}
    </div>
);