/**
 * Supera Glia - Sidebar
 * @module components/Sidebar
 * 
 * Sidebar com nome do usuário abaixo da logo
 */

(function() {
    'use strict';

    const Sidebar = ({ activeTab, setActiveTab, collapsed, setCollapsed, user }) => {
        const { useState } = SuperaGlia.hooks;
        const { useAuth, Icon } = SuperaGlia;
        const { logout } = useAuth();

        const menuItems = [
            { id: 'pedagogico', icon: 'layout-dashboard', label: 'Pedagógico' },
            { id: 'turmas', icon: 'grid-3x3', label: 'Turmas' },
            { id: 'calendario', icon: 'calendar', label: 'Calendário' },
            { id: 'alunos', icon: 'users', label: 'Alunos' },
            { id: 'financeiro', icon: 'wallet', label: 'Financeiro' },
            { id: 'comercial', icon: 'briefcase', label: 'Comercial' },
            { id: 'comunicacao', icon: 'message-circle', label: 'Comunicação' },
            { id: 'email', icon: 'mail', label: 'E-mail' },
            { id: 'assistente', icon: 'bot', label: 'Assistente IA' },
            { id: 'equipe', icon: 'messages-square', label: 'Chat Equipe' }
        ];

        // Logo SVG Supera
        const SuperaLogo = () => React.createElement('svg', { 
            viewBox: '0 0 422.4 195.6', 
            xmlns: 'http://www.w3.org/2000/svg',
            style: { height: '24px', width: 'auto' }
        },
            React.createElement('path', { fill: '#F37021', d: 'M319,38c-19.9,0-35.9,16.1-35.9,36v83.9h24v-83.9c0-6.6,5.4-12,12-12h12v-24h-12Z' }),
            React.createElement('path', { fill: '#F37021', d: 'M420.5,50h-17.6v-12c0-19.9-16.1-36-36-36s-36,16.1-36,36h24c0-6.6,5.4-12,12-12s12,5.4,12,12v12h-12c-19.9,0-36,16.1-36,36s16.1,36,36,36,36-16.1,36-35.9v-12h17.6v-24h0ZM367,97.9c-6.6,0-12-5.4-12-12s5.4-12,12-12,12,5.4,12,12-5.4,12-12,12' }),
            React.createElement('path', { fill: '#F37021', d: 'M193.6,1.9c-19.9,0-35.9,16.1-35.9,35.9v36.1h-35.9v83.9c0,6.6-5.4,12-12,12s-12-5.4-12-12v-83.9h-24v83.9c0,19.9,16.1,35.9,36,35.9s35.9-16.1,35.9-35.9v-59.9h12v59.9h24v-59.9h12c19.9,0,35.9-16.1,35.9-36v-24.1c0-19.9-16.1-36-35.9-36M205.5,61.9c0,6.6-5.4,12-12,12h-12v-36c0-6.6,5.4-11.9,12-11.9s12,5.4,12,12v24h0Z' }),
            React.createElement('path', { fill: '#F37021', d: 'M247.1,169.8c-6.6,0-12-5.4-12-12v-12h12c19.8,0,35.9-16.1,35.9-35.9s-16.1-35.9-35.9-35.9-35.9,16.1-35.9,35.9v12h-17.6v24h17.6v12c0,19.9,16.1,35.9,35.9,35.9s35.9-16.1,35.9-35.9h-24c0,6.6-5.4,12-12,12h0ZM247.1,97.9c6.6,0,12,5.4,12,12s-5.4,12-12,12-12-5.4-12-12,5.4-12,12-12' }),
            React.createElement('path', { fill: '#F37021', d: 'M37.7,85.9c-6.6,0-11.9-5.4-11.9-12s5.4-12,12-12,12,5.4,12,12h24c0-19.8-16.1-36-36-36S1.8,54.1,1.8,73.9s15.2,35.1,34.3,35.9c.5,0,3.2,0,4.9.5,5,1.4,8.7,6.1,8.7,11.5s-5.4,12-12,12-12-5.4-12-12H1.9c0,19.9,16.1,35.9,35.9,35.9s36-16.1,36-35.9-11.4-30.7-26.8-34.8c-2.8-.8-7-1.2-9.2-1.2' })
        );

        // Pegar primeiro nome do usuário
        const primeiroNome = user?.nome?.split(' ')[0] || user?.email?.split('@')[0] || 'Usuário';

        return React.createElement('aside', { 
            className: `fixed top-0 left-0 h-full sidebar-transition ${collapsed ? 'w-16' : 'w-64'} z-40 flex flex-col`, 
            style: { background: 'linear-gradient(180deg, #231F20 0%, #2d2829 50%, #1a1718 100%)' } 
        },
            // Header com Logo e Nome do Usuário
            React.createElement('div', { className: 'p-4 border-b border-white/10' },
                // Logo e botão colapsar
                React.createElement('div', { className: 'flex items-center justify-between' },
                    !collapsed && React.createElement('div', { className: 'flex items-center gap-2' },
                        React.createElement(SuperaLogo),
                        React.createElement('span', { className: 'text-white/50 text-sm font-light' }, 'Glia')
                    ),
                    collapsed && React.createElement('div', { className: 'mx-auto' },
                        React.createElement('div', { 
                            className: 'w-9 h-9 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center'
                        },
                            React.createElement('span', { className: 'text-base font-bold text-white' }, 
                                primeiroNome.charAt(0).toUpperCase()
                            )
                        )
                    ),
                    !collapsed && React.createElement('button', { 
                        onClick: () => setCollapsed(!collapsed), 
                        className: 'p-2 hover:bg-white/10 rounded-lg text-white transition-colors' 
                    },
                        React.createElement(Icon, { name: 'panel-left-close', className: 'w-4 h-4' })
                    )
                ),
                // Nome do usuário (só quando expandido)
                !collapsed && React.createElement('div', { className: 'mt-4 flex items-center gap-3' },
                    React.createElement('div', { 
                        className: 'w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center flex-shrink-0'
                    },
                        React.createElement('span', { className: 'text-sm font-bold text-white' }, 
                            primeiroNome.charAt(0).toUpperCase()
                        )
                    ),
                    React.createElement('div', { className: 'flex-1 min-w-0' },
                        React.createElement('p', { className: 'text-white font-medium truncate' }, primeiroNome),
                        React.createElement('p', { className: 'text-white/50 text-xs truncate' }, user?.email || '')
                    )
                )
            ),
            
            // Botão expandir quando colapsado
            collapsed && React.createElement('div', { className: 'flex justify-center py-2' },
                React.createElement('button', { 
                    onClick: () => setCollapsed(!collapsed), 
                    className: 'p-2 hover:bg-white/10 rounded-lg text-white/70 transition-colors' 
                },
                    React.createElement(Icon, { name: 'panel-left-open', className: 'w-4 h-4' })
                )
            ),
            
            // Menu de navegação
            React.createElement('nav', { className: 'flex-1 p-2 mt-2 overflow-y-auto' },
                menuItems.map(item => React.createElement('button', {
                    key: item.id,
                    onClick: () => setActiveTab(item.id),
                    className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-xl mb-1 transition-all ${
                        activeTab === item.id 
                            ? 'bg-orange-500 text-white shadow-lg' 
                            : 'text-white/70 hover:bg-white/10 hover:text-white'
                    }`,
                    style: activeTab === item.id ? { boxShadow: '0 4px 12px rgba(243, 112, 33, 0.3)' } : {},
                    title: collapsed ? item.label : ''
                },
                    React.createElement(Icon, { name: item.icon, className: 'w-5 h-5 flex-shrink-0' }),
                    !collapsed && React.createElement('span', { className: 'text-sm' }, item.label)
                ))
            ),
            
            // Footer com Admin e Sair
            React.createElement('div', { className: 'p-2 border-t border-white/10' },
                // Link Admin
                React.createElement('button', {
                    onClick: () => setActiveTab('admin'),
                    className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-xl mb-1 transition-all ${
                        activeTab === 'admin' 
                            ? 'bg-orange-500 text-white' 
                            : 'text-white/70 hover:bg-white/10 hover:text-white'
                    }`,
                    title: collapsed ? 'Admin' : ''
                },
                    React.createElement(Icon, { name: 'settings', className: 'w-5 h-5 flex-shrink-0' }),
                    !collapsed && React.createElement('span', { className: 'text-sm' }, 'Admin')
                ),
                // Botão Sair
                React.createElement('button', {
                    onClick: logout,
                    className: 'w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-white/70 hover:bg-red-500/20 hover:text-red-400 transition-all',
                    title: collapsed ? 'Sair' : ''
                },
                    React.createElement(Icon, { name: 'log-out', className: 'w-5 h-5 flex-shrink-0' }),
                    !collapsed && React.createElement('span', { className: 'text-sm' }, 'Sair')
                )
            )
        );
    };

    // Registrar componente
    SuperaGlia.initSidebar = function() {
        SuperaGlia.Sidebar = Sidebar;
    };
})();