const { useState, useEffect, useCallback, useRef } = React;

const Toast = ({ message, onClose }) => {
    useEffect(() => {
        const timer = setTimeout(onClose, 2500);
        return () => clearTimeout(timer);
    }, [onClose]);

    return (
        <div className="toast">
            <span className="toast-icon">+</span>
            {message}
        </div>
    );
};

const AnnouncementModal = ({ announcement, onClose }) => {
    const overlayRef = useRef(null);
    const contentRef = useRef(null);

    useEffect(() => {
        const overlay = overlayRef.current;
        const content = contentRef.current;
        if (!overlay || !content) return;

        Motion.animate(overlay, { opacity: [0, 1] }, { duration: 0.15 });
        Motion.animate(content,
            { opacity: [0, 1], transform: ['scale(0.95)', 'scale(1)'] },
            { duration: 0.25, easing: [0.22, 1, 0.36, 1] }
        );

        document.body.style.overflow = 'hidden';
        return () => { document.body.style.overflow = ''; };
    }, []);

    const handleClose = () => {
        localStorage.setItem('shop_announcement_read_version', announcement.version);
        onClose();
    };

    return (
        <div
            ref={overlayRef}
            onClick={handleClose}
            style={{
                position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: '1rem', zIndex: 100
            }}
        >
            <div
                ref={contentRef}
                onClick={e => e.stopPropagation()}
                style={{
                    background: '#fff', borderRadius: '1rem', padding: '1.5rem',
                    maxWidth: '320px', width: '100%', textAlign: 'center',
                    position: 'relative'
                }}
            >
                <button
                    onClick={handleClose}
                    style={{
                        position: 'absolute', top: '0.75rem', right: '0.75rem',
                        background: 'transparent', border: 'none', cursor: 'pointer',
                        color: '#6b6560', fontSize: '1.25rem', lineHeight: 1
                    }}
                >
                    &times;
                </button>
                <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#2d2a26', marginBottom: '0.75rem' }}>
                    最新公告
                </h3>
                <p style={{ fontSize: '0.875rem', color: '#6b6560', whiteSpace: 'pre-wrap', marginBottom: '1rem', lineHeight: 1.6 }}>
                    {announcement.content}
                </p>
                <button
                    onClick={handleClose}
                    style={{
                        width: '100%', padding: '0.625rem 1rem',
                        background: '#5a6a7d', color: '#fff', border: 'none',
                        borderRadius: '0.5rem', fontSize: '0.875rem', cursor: 'pointer'
                    }}
                >
                    我知道了
                </button>
            </div>
        </div>
    );
};

const Loading = ({ message = '載入中' }) => (
    <div className="loading">
        <div className="spinner"></div>
        <span>{message}</span>
    </div>
);

const MetalIcon = ({ type, size = 'md' }) => {
    const sizes = { sm: 24, md: 40, lg: 56 };
    const s = sizes[size] || sizes.md;

    const colors = {
        gold: ['#d4a853', '#b8923f'],
        silver: ['#c9c9c9', '#a0a0a0'],
        platinum: ['#d8d4cf', '#b5b0a8'],
        palladium: ['#e0e0e0', '#c0c0c0']
    };

    const [c1, c2] = colors[type] || colors.gold;

    return (
        <svg width={s} height={s} viewBox="0 0 40 40" fill="none">
            <defs>
                <linearGradient id={`grad-${type}`} x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stopColor={c1} />
                    <stop offset="100%" stopColor={c2} />
                </linearGradient>
            </defs>
            <circle cx="20" cy="20" r="18" fill={`url(#grad-${type})`} />
            <circle cx="20" cy="20" r="12" fill="none" stroke="rgba(255,255,255,0.3)" strokeWidth="0.5" />
            <circle cx="14" cy="14" r="4" fill="rgba(255,255,255,0.2)" />
        </svg>
    );
};