function ContentBlock({ block, onDelete }) {
    const getExtractionBadge = () => {
        if (block.extracted_text && block.extracted_text.trim()) {
            return {
                icon: '✅',
                label: 'Extracted',
                color: '#10b981', // green
                bg: 'rgba(16, 185, 129, 0.1)'
            };
        }
        return {
            icon: '⭘',
            label: 'Not extracted',
            color: '#6b7280', // gray
            bg: 'rgba(107, 114, 128, 0.1)'
        };
    };

    const badge = getExtractionBadge();

    const renderContent = () => {
        switch (block.content_type) {
            case 'text':
                return <div style={{ padding: '0 1rem 1rem 1rem', whiteSpace: 'pre-wrap' }}>{block.content_data?.text}</div>;
            case 'image':
                return <div style={{ padding: '0 1rem 1rem 1rem' }}><img src={`${API_URL.replace('/api', '')}/uploads/${block.file_path}`} alt={block.filename} style={{ maxWidth: '100%', borderRadius: '8px' }} /><p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginTop: '0.5rem' }}>{block.filename}</p></div>;
            case 'pdf':
                return <div style={{ padding: '0 1rem 1rem 1rem' }}><div style={{ background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', textAlign: 'center' }}><p style={{ fontSize: '3rem', marginBottom: '0.5rem' }}>📄</p><p style={{ fontWeight: '600' }}>{block.filename}</p><p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>PDF Document</p></div></div>;
            case 'audio':
                // Build audio URL
                const audioUrl = `${API_URL.replace('/api', '')}/uploads/${block.file_path}`;

                // Defensive check: Verify AudioPlayer component is loaded
                if (typeof AudioPlayer === 'undefined' || !window.AudioPlayer) {
                    return (
                        <div style={{ padding: '0 1rem 1rem 1rem' }}>
                            <div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '8px', textAlign: 'center' }}>
                                <p style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🎤</p>
                                <p style={{ fontWeight: '600' }}>{block.filename || 'Audio Recording'}</p>
                                <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
                                    Audio Player loading... Please refresh if  this persists.
                                </p>
                            </div>
                        </div>
                    );
                }

                // Render AudioPlayer component
                return (
                    <div style={{ padding: '0 1rem 1rem 1rem' }}>
                        <AudioPlayer
                            audioUrl={audioUrl}
                            filename={block.filename || 'Audio Recording'}
                        />
                    </div>
                );
            case 'link':
                return <div style={{ padding: '0 1rem 1rem 1rem' }}><a href={block.content_data?.url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block', padding: '1rem', background: 'var(--primary-light)', color: 'var(--primary)', borderRadius: '8px', textDecoration: 'none' }}>🔗 {block.content_data?.url}</a></div>;
            default:
                return <div>Unknown block type</div>;
        }
    };
    return (
        <div style={{ position: 'relative', background: 'var(--card-bg)', border: '1px solid var(--border-color)', borderRadius: '12px', marginBottom: '1rem', overflow: 'hidden', paddingTop: '2.5rem' }}>
            {renderContent()}
            {/* Extraction Status Badge */}
            <div style={{
                position: 'absolute',
                top: '0.5rem',
                left: '0.5rem',
                display: 'flex',
                alignItems: 'center',
                gap: '0.25rem',
                padding: '0.25rem 0.5rem',
                borderRadius: '6px',
                background: badge.bg,
                border: `1px solid ${badge.color}`,
                fontSize: '0.75rem',
                fontWeight: '500',
                color: badge.color
            }}>
                <span>{badge.icon}</span>
                <span>{badge.label}</span>
            </div>
            <button onClick={onDelete} style={{ position: 'absolute', top: '0.5rem', right: '0.5rem', background: 'var(--danger)', color: 'white', border: 'none', borderRadius: '50%', width: '32px', height: '32px', cursor: 'pointer', fontSize: '1.25rem' }} title="Delete">×</button>
        </div>
    );
}

// Export to global scope
window.ContentBlock = ContentBlock;