// Header Component
const Header = ({ title, subtitle, actions, queueData, onStart, onStop, currentView, onNotificationNavigate, onShowAllNotifications }) => {
    const { started, jobs = [], pending_count = 0 } = queueData || {};
    const pending = pending_count || jobs.filter(j => j.status === 'queued').length;

    // Only show pipeline button in automazione visure views
    const automazioneViews = ['dashboard', 'new', 'queue', 'profiles', 'analytics', 'archive'];
    const showPipelineButton = automazioneViews.includes(currentView);

    return (
        <header className="bg-white border-b border-slate-200 px-8 py-4 flex items-center justify-between sticky top-0 z-10">
            <div>
                <h2 className="text-xl font-semibold text-slate-900">{title}</h2>
                {subtitle && <p className="text-sm text-slate-500 mt-0.5">{subtitle}</p>}
            </div>
            <div className="flex items-center gap-3">
                {actions}

                {/* Notification Bell */}
                <NotificationBell onNotificationClick={onNotificationNavigate} onShowAll={onShowAllNotifications} />
                
                {showPipelineButton && (
                    started ? (
                        <Button variant="danger" onClick={onStop}>
                            <span>⏹</span> Ferma Pipeline
                        </Button>
                    ) : (
                        <Button variant="success" onClick={onStart} disabled={pending === 0}>
                            <span>▶</span> {pending > 0 ? `Avvia (${pending})` : 'Avvia Pipeline'}
                        </Button>
                    )
                )}
            </div>
        </header>
    );
};

window.Header = Header;