/**
 * MessageBubble.jsx - Individual Message Component (Clean Rebuild)
 */

const { useState } = React;

function MessageBubble({ message, t }) {
    const [showCopy, setShowCopy] = useState(false);
    const [copied, setCopied] = useState(false);
    const isUser = message.role === 'user';

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(message.content);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        } catch (error) {
            console.error('Failed to copy:', error);
        }
    };

    return (
        <div
            style={{
                display: 'flex',
                justifyContent: isUser ? 'flex-end' : 'flex-start',
                marginBottom: '1rem'
            }}
            onMouseEnter={() => !isUser && setShowCopy(true)}
            onMouseLeave={() => !isUser && setShowCopy(false)}
        >
            <div style={{
                maxWidth: '75%',
                position: 'relative'
            }}>
                <div style={{
                    padding: '1rem 1.25rem',
                    borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
                    background: isUser
                        ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                        : 'var(--card-bg, #f8fafc)',
                    color: isUser ? 'white' : 'var(--text-primary, #1e293b)',
                    fontSize: '0.9375rem',
                    lineHeight: '1.6',
                    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
                    border: isUser ? 'none' : '1px solid var(--border-color, #e2e8f0)',
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-word'
                }}>
                    {message.content}
                </div>

                {/* Copy Button for AI messages */}
                {!isUser && showCopy && (
                    <button
                        onClick={handleCopy}
                        style={{
                            position: 'absolute',
                            bottom: '0.5rem',
                            right: '0.5rem',
                            background: copied ? '#10b981' : 'rgba(0,0,0,0.6)',
                            color: 'white',
                            border: 'none',
                            borderRadius: '6px',
                            padding: '0.375rem 0.75rem',
                            fontSize: '0.75rem',
                            cursor: 'pointer',
                            transition: 'all 0.2s',
                            fontWeight: '500'
                        }}
                        onMouseEnter={e => {
                            if (!copied) e.currentTarget.style.background = 'rgba(0,0,0,0.8)';
                        }}
                        onMouseLeave={e => {
                            if (!copied) e.currentTarget.style.background = 'rgba(0,0,0,0.6)';
                        }}
                    >
                        {copied ? '✓ Copied!' : '📋 Copy'}
                    </button>
                )}

                {/* Timestamp */}
                <div style={{
                    fontSize: '0.7rem',
                    color: '#94a3b8',
                    marginTop: '0.25rem',
                    textAlign: isUser ? 'right' : 'left'
                }}>
                    {new Date(message.created_at).toLocaleTimeString([], {
                        hour: '2-digit',
                        minute: '2-digit'
                    })}
                </div>
            </div>
        </div>
    );
}

window.MessageBubble = MessageBubble;