import React from 'react';
import { UserRole } from '../types';

interface SidebarProps {
  role: UserRole;
  activeTab: string;
  onTabChange: (tab: string) => void;
}

const Sidebar: React.FC<SidebarProps> = ({ role, activeTab, onTabChange }) => {
  const citizenItems = [
    { id: 'dashboard', label: 'Overview', icon: 'fa-location-crosshairs' },
    { id: 'register', label: 'File Grievance', icon: 'fa-plus-circle' },
    { id: 'track', label: 'Live Tracking', icon: 'fa-grid-2' },
    { id: 'schemes', label: 'State Schemes', icon: 'fa-scroll' },
    { id: 'profile', label: 'My Profile', icon: 'fa-user-circle' },
  ];

  const officerItems = [
    { id: 'dashboard', label: 'My Workspace', icon: 'fa-briefcase' },
    { id: 'pending', label: 'Active Queue', icon: 'fa-clock-rotate-left' },
    { id: 'resolved', label: 'Completed', icon: 'fa-check-circle' },
    { id: 'escalated', label: 'Critical Alerts', icon: 'fa-bolt' },
    { id: 'profile', label: 'My Profile', icon: 'fa-user-gear' },
  ];

  const cmoItems = [
    { id: 'dashboard', label: 'Live Insights', icon: 'fa-chart-network' },
    { id: 'dept-wise', label: 'Depts Analytics', icon: 'fa-building-columns' },
    { id: 'ranking', label: 'District Meter', icon: 'fa-gauge-high' },
    { id: 'reports', label: 'Intelligence', icon: 'fa-brain' },
    { id: 'profile', label: 'Admin Profile', icon: 'fa-shield-halved' },
  ];

  const items = role === UserRole.CITIZEN ? citizenItems : (role === UserRole.OFFICER ? officerItems : cmoItems);

  return (
    <div className="hidden md:flex flex-col w-72 h-[calc(100vh-2rem)] m-4 bg-slate-900 text-white rounded-3xl shadow-2xl sticky top-4">
      <div className="p-8">
        <div className="flex items-center space-x-4">
          <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center font-black text-2xl shadow-lg shadow-orange-500/20 rotate-3">G</div>
          <div>
            <h1 className="text-xl font-black tracking-tight leading-none uppercase">IGSMS</h1>
            <p className="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1 opacity-80">Gujarat State</p>
          </div>
        </div>
      </div>
      
      <nav className="flex-1 px-6 space-y-1">
        <p className="px-4 text-[10px] font-black text-slate-600 uppercase tracking-[0.2em] mb-4">Navigation</p>
        {items.map((item) => (
          <button
            key={item.id}
            onClick={() => onTabChange(item.id)}
            className={`w-full flex items-center space-x-4 px-4 py-3.5 rounded-2xl transition-all duration-300 group ${
              activeTab === item.id 
                ? 'bg-blue-600 text-white shadow-xl shadow-blue-600/20 scale-[1.02]' 
                : 'text-slate-400 hover:bg-slate-800 hover:text-white'
            }`}
          >
            <div className={`w-8 h-8 rounded-xl flex items-center justify-center transition-colors relative ${
               activeTab === item.id ? 'bg-white/20' : 'bg-slate-800 group-hover:bg-slate-700'
            }`}>
              <i className={`fa-solid ${item.icon} text-sm`}></i>
              
              {/* Notification Dot for Live Tracking (Citizen) */}
              {item.id === 'track' && role === UserRole.CITIZEN && (
                <span className="absolute inset-0 flex items-center justify-center">
                   <span className="w-3 h-3 bg-red-500 rounded-full border-2 border-slate-900 ring-2 ring-red-500/20 animate-pulse flex items-center justify-center z-10">
                    <span className="w-1.5 h-1.5 bg-white rounded-full"></span>
                  </span>
                </span>
              )}

              {/* White Pin Symbol for Live Insights (CMO) */}
              {item.id === 'dashboard' && role === UserRole.CMO && (
                <span className="absolute inset-0 flex items-center justify-center">
                  <i className="fa-solid fa-location-dot text-[8px] text-white z-10 drop-shadow-md"></i>
                </span>
              )}
            </div>
            <span className="font-bold text-sm tracking-tight">{item.label}</span>
          </button>
        ))}
      </nav>

      <div className="p-6">
        <div className="bg-slate-800/50 backdrop-blur rounded-2xl p-5 border border-slate-700/50">
          <div className="flex items-center gap-3 mb-3">
             <div className="w-8 h-8 rounded-full bg-orange-500/10 text-orange-500 flex items-center justify-center">
                <i className="fa-solid fa-headset text-xs"></i>
             </div>
             <p className="text-xs font-bold text-white">24/7 Support</p>
          </div>
          <p className="text-[10px] text-slate-400 mb-4 leading-relaxed">Need help navigating the portal? Our CM Helpline is active.</p>
          <button className="w-full py-2.5 bg-blue-600/10 hover:bg-blue-600 text-blue-500 hover:text-white text-[11px] font-black rounded-xl transition-all uppercase tracking-wider">
            Call 155303
          </button>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;