import type { User } from './data';
import { Avatar } from './Shared';
import { RoleBadge } from './Shared';

const NAV_ITEMS = [
    { id: 'dashboard', icon: '⊞', label: 'Dashboard', roles: ['cto', 'manager', 'employee'] },
    { id: 'calendar', icon: '📅', label: 'Calendar', roles: ['cto', 'manager', 'employee'] },
    { id: 'kanban', icon: '▦', label: 'Kanban Board', roles: ['cto', 'manager', 'employee'] },
    { id: 'mytasks', icon: '✓', label: 'My Tasks', roles: ['employee'] },
    { id: 'teamtasks', icon: '👥', label: 'Team Tasks', roles: ['cto', 'manager'] },
    { id: 'reports', icon: '📊', label: 'Reports', roles: ['cto', 'manager'] },
    { id: 'members', icon: '👤', label: 'Members', roles: ['cto'] },
];

interface SidebarProps {
    currentUser: User;
    activePage: string;
    onNavigate: (page: string) => void;
    onSignOut: () => void;
    isOpen: boolean;
    onClose: () => void;
}

export function Sidebar({ currentUser, activePage, onNavigate, onSignOut, isOpen, onClose }: SidebarProps) {
    const filteredNav = NAV_ITEMS.filter(n => n.roles.includes(currentUser.role));
    return (
        <>
            {isOpen && <div className="sidebar-backdrop visible" onClick={onClose} />}
            <div className={`sidebar ${isOpen ? 'sidebar-open' : ''}`}>
                <div className="sidebar-logo">
                    <div className="sidebar-logo-icon">⚡</div>
                    <span className="sidebar-logo-text">Scrum-manager</span>
                </div>
                <div className="sidebar-divider" />
                <div className="sidebar-section-label">Navigate</div>
                <nav className="sidebar-nav">
                    {filteredNav.map(n => (
                        <div key={n.id} className={`sidebar-item ${activePage === n.id ? 'active' : ''}`} onClick={() => onNavigate(n.id)}>
                            <span className="sidebar-item-icon">{n.icon}</span>
                            {n.label}
                        </div>
                    ))}
                </nav>
                <div className="sidebar-profile">
                    <Avatar userId={currentUser.id} size={36} />
                    <div className="sidebar-profile-info">
                        <div className="sidebar-profile-name">{currentUser.name}</div>
                        <RoleBadge role={currentUser.role} />
                    </div>
                </div>
                <div style={{ padding: '0 16px 12px' }}>
                    <button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
                </div>
            </div>
        </>
    );
}