import React from 'react';
import { DashboardIcon } from './icons/DashboardIcon';
import { AnalyticsIcon } from './icons/AnalyticsIcon';
import { SettingsIcon } from './icons/SettingsIcon';
import { UserIcon } from './icons/UserIcon';
import { CampaignsIcon } from './icons/CampaignsIcon';
import { AuditIcon } from './icons/AuditIcon';
import { KnowledgeBaseIcon } from './icons/KnowledgeBaseIcon';
import type { UserRole } from '../types';

interface NavItem {
    name: string;
    icon: React.FC<{ className?: string }>;
    roles: UserRole[];
}

const navigation: NavItem[] = [
    { name: 'Home', icon: DashboardIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin', 'basic_user'] },
    { name: 'Campaigns', icon: CampaignsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin', 'basic_user'] },
    { name: 'Analytics', icon: AnalyticsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin'] },
    { name: 'Auditing', icon: AuditIcon, roles: ['super_admin', 'oversight_admin'] },
    { name: 'Knowledge Base', icon: KnowledgeBaseIcon, roles: ['super_admin'] },
    { name: 'User Management', icon: UserIcon, roles: ['super_admin', 'oversight_admin'] },
    { name: 'Settings', icon: SettingsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin'] },
];

interface SidebarProps {
    activeItem: string;
    onNavigate: (viewName: string) => void;
    userName?: string;
    userEmail?: string;
    userRole: UserRole;
}

export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userName, userEmail, userRole }) => {
    return (
        <aside className="w-72 flex-shrink-0 bg-oliver-black text-slate-200 flex flex-col font-sans">
            {/* Brand Header */}
            <div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
                <img src={`${import.meta.env.BASE_URL}BAR-ModComms-logo-v6.png`} alt="Mod Comms AI" className="w-full h-auto object-contain" />
            </div>

            {/* Navigation */}
            <nav className="flex-1 pr-4 pl-0 py-8 space-y-2 overflow-y-auto">
                {navigation.filter(item => item.roles.includes(userRole)).map((item) => {
                    const Icon = item.icon;
                    const isActive = item.name === activeItem;

                    return (
                        <button
                            key={item.name}
                            onClick={() => onNavigate(item.name)}
                            className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
                                isActive
                                ? 'bg-white text-oliver-black shadow-lg rounded-r-[10px] rounded-l-none'
                                : 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
                            }`}
                            aria-current={isActive ? 'page' : undefined}
                        >
                            <Icon className={`h-5 w-5 mr-4 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`} />
                            <span className="flex-1 tracking-wide">{item.name}</span>
                        </button>
                    );
                })}
            </nav>

            {/* User Profile Snippet */}
            <div className="p-4 border-t border-white/10 bg-oliver-black/80">
                 <button
                    onClick={() => onNavigate('Profile')}
                    className={`group w-full flex items-center gap-3 p-3 rounded-[10px] text-left transition-all duration-200 ${
                        activeItem === 'Profile'
                        ? 'bg-white/10'
                        : 'hover:bg-white/10'
                    }`}
                >
                    <div className="w-10 h-10 rounded-full bg-oliver-azure flex items-center justify-center ring-2 ring-white/20 group-hover:ring-oliver-azure/50 transition-all">
                        <UserIcon className="h-5 w-5 text-white" />
                    </div>
                    <div className="overflow-hidden">
                        <p className="font-semibold text-sm text-white truncate">{userName || 'Unknown User'}</p>
                        <p className="text-xs text-slate-400 truncate">{userEmail || ''}</p>
                    </div>
                </button>
            </div>
        </aside>
    );
};