modcomms/frontend/components/Sidebar.tsx

import React from 'react';
import { BarclaysLogo } from './icons/BarclaysLogo';
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';

const navigation = [
    { name: 'Home', icon: DashboardIcon },
    { name: 'Campaigns', icon: CampaignsIcon },
    // { name: 'WIP Reviewer', icon: ClipboardIcon }, // Hidden: Moved to Settings > Beta
    // { name: 'CopyGenAI', icon: CopyGenAIIcon },   // Hidden: Moved to Settings > Beta
    { name: 'Analytics', icon: AnalyticsIcon },
    { name: 'Auditing', icon: AuditIcon },
    { name: 'Settings', icon: SettingsIcon },
];

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

export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userName, userEmail }) => {
    return (
        <aside className="w-72 flex-shrink-0 bg-primary-blue text-slate-200 flex flex-col border-r border-white/10 font-sans">
            {/* Brand Header */}
            <div className="h-24 flex items-center px-8 border-b border-white/10">
                <BarclaysLogo className="h-8 w-auto text-cyan-brand" />
                <div className="ml-3 flex flex-col">
                     <span className="text-lg font-bold tracking-tight text-white leading-tight">
                        Mod Comms
                    </span>
                    <span className="text-xs text-electric-violet uppercase tracking-widest font-semibold">
                        Compliance AI
                    </span>
                </div>
            </div>

            {/* Navigation */}
            <nav className="flex-1 px-4 py-8 space-y-2 overflow-y-auto">
                {navigation.map((item) => {
                    const Icon = item.icon;
                    const isActive = item.name === activeItem;
                    const isComingSoon = (item as any).isComingSoon;

                    return (
                        <button
                            key={item.name}
                            onClick={() => !isComingSoon && onNavigate(item.name)}
                            className={`group w-full flex items-center px-4 py-3.5 text-left text-sm font-medium rounded-xl transition-all duration-300 ease-in-out ${
                                isActive
                                ? 'bg-white text-primary-blue shadow-lg'
                                : isComingSoon
                                ? 'text-slate-600 cursor-not-allowed'
                                : 'text-slate-300 hover:bg-white/10 hover:text-white'
                            }`}
                            aria-current={isActive ? 'page' : undefined}
                            disabled={isComingSoon}
                        >
                            <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>
                            {isActive && (
                                <div className="w-1.5 h-1.5 rounded-full bg-active-blue"></div>
                            )}
                        </button>
                    );
                })}
            </nav>

            {/* User Profile Snippet */}
            <div className="p-4 border-t border-white/10 bg-primary-blue/80">
                 <button
                    onClick={() => onNavigate('Profile')}
                    className={`group w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all duration-200 ${
                        activeItem === 'Profile'
                        ? 'bg-white/10'
                        : 'hover:bg-white/10'
                    }`}
                >
                    <div className="w-10 h-10 rounded-full bg-active-blue flex items-center justify-center ring-2 ring-white/20 group-hover:ring-active-blue/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>
    );
};