// Sidebar Component
const Sidebar = ({ currentView, onViewChange, queueData }) => {
    const { user, isAdmin, logout } = useAuth();
    const { jobs = [], pending_count = 0 } = queueData || {};
    const running = jobs.filter(j => j.status === 'running').length;
    const pending = pending_count || jobs.filter(j => j.status === 'queued').length;

    const navItems = [
        { id: 'dashboard', icon: '🏠', label: 'Panoramica', count: running > 0 ? running : null, countType: 'warning' },
        { id: 'new', icon: '➕', label: 'Nuova Registrazione' },
        { id: 'queue', icon: '📋', label: 'Coda Lavori', count: pending + running, countType: pending > 0 ? 'info' : 'default' },
        { id: 'profiles', icon: '📬', label: 'Profili Email' },
        { id: 'analytics', icon: '📊', label: 'Statistiche' },
        { id: 'archive', icon: '📦', label: 'Archivio' },
    ];

    // Gestione items
    const adminItems = [
        // Welcome screen for all users
        { id: 'welcome', icon: '🏠', label: 'Panoramica' },
        // Pratiche for all users - permissions checked in the view
        { id: 'projects', icon: '📁', label: 'Pratiche' },
        // Referenti available for all users
        { id: 'referenti', icon: '👤', label: 'Referenti' },
        // Admin only items
        ...(isAdmin ? [
            { id: 'performance', icon: '📈', label: 'Performance' },
            { id: 'users', icon: '👥', label: 'Utenti' },
        ] : []),
    ];

    return (
        <aside className="w-64 bg-white border-r border-slate-200 flex flex-col h-screen fixed left-0 top-0">
            {/* Logo */}
            <div className="p-6 border-b border-slate-100">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center text-white text-xl">🌹</div>
                    <div>
                        <h1 className="text-lg font-bold text-slate-900">Gestionale Interno</h1>
                        <p className="text-xs text-slate-500">Gestione Pratiche</p>
                    </div>
                </div>
            </div>

            {/* Navigation */}
            <nav className="flex-1 p-4 space-y-1 overflow-y-auto scrollbar-thin">
                {/* Gestione Section */}
                {adminItems.length > 0 && (
                    <>
                        <div className="mb-2">
                            <p className="px-3 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Gestione</p>
                        </div>
                        {adminItems.map(item => (
                            <button
                                key={item.id}
                                onClick={() => onViewChange(item.id)}
                                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
                                    currentView === item.id
                                        ? 'bg-brand-50 text-brand-700'
                                        : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
                                }`}
                            >
                                <span className="text-lg">{item.icon}</span>
                                <span className="flex-1 text-left">{item.label}</span>
                            </button>
                        ))}
                    </>
                )}

                {/* Automazione Visure Section */}
                <div className="mt-6 mb-2">
                    <p className="px-3 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Automazione Visure</p>
                </div>
                {navItems.map(item => (
                    <button
                        key={item.id}
                        onClick={() => onViewChange(item.id)}
                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
                            currentView === item.id
                                ? 'bg-brand-50 text-brand-700'
                                : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
                        }`}
                    >
                        <span className="text-lg">{item.icon}</span>
                        <span className="flex-1 text-left">{item.label}</span>
                        {item.count > 0 && (
                            <span className={`px-2 py-0.5 text-xs rounded-full font-semibold ${
                                item.countType === 'warning' ? 'bg-amber-100 text-amber-700' :
                                item.countType === 'info' ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'
                            }`}>{item.count}</span>
                        )}
                    </button>
                ))}
            </nav>

            {/* User Profile */}
            {user && (
                <div className="p-4 border-t border-slate-100">
                    <div className="flex items-center gap-3">
                        {user.avatar_path ? (
                            <img
                                src={window.ApiUsers?.getAvatarUrl(user.avatar_path)}
                                alt={user.full_name}
                                className="w-9 h-9 rounded-full object-cover"
                            />
                        ) : (
                            <div className="w-9 h-9 bg-gradient-to-br from-brand-400 to-brand-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                                {user.full_name?.charAt(0).toUpperCase() || '?'}
                            </div>
                        )}
                        <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium text-slate-800 truncate">{user.full_name}</div>
                            <div className="text-xs text-slate-500 truncate">{user.email}</div>
                        </div>
                        <button
                            onClick={() => onViewChange('settings')}
                            className={`p-2 rounded-lg transition-colors ${
                                currentView === 'settings' 
                                    ? 'text-brand-600 bg-brand-50' 
                                    : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
                            }`}
                            title="Impostazioni"
                        >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </button>
                        <button
                            onClick={logout}
                            className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
                            title="Sign out"
                        >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                            </svg>
                        </button>
                    </div>
                </div>
            )}
        </aside>
    );
};

window.Sidebar = Sidebar;