import React from 'react';
import {
    LayoutDashboard, Users, Calendar, ClipboardList,
    Activity, Shield, DollarSign, LogOut, Settings,
    ChevronRight, Zap, Heart, Bell
} from 'lucide-react';

interface MedSidebarProps {
    activeTab: string;
    setActiveTab: (tab: string) => void;
}

export const MedSidebar: React.FC<MedSidebarProps> = ({ activeTab, setActiveTab }) => {
    const menuItems = [
        { id: 'med-dashboard', label: 'Painel Geral', icon: LayoutDashboard },
        { id: 'med-pacientes', label: 'Pacientes', icon: Users },
        { id: 'med-agenda', label: 'Agenda Médica', icon: Calendar },
        { id: 'med-prontuarios', label: 'Prontuários', icon: ClipboardList },
        { id: 'med-fidelidade', label: 'Planos Fidelidade', icon: Shield },
        { id: 'med-financeiro', label: 'Financeiro / MRR', icon: DollarSign },
        { id: 'medical-repasse', label: 'Repasse Médico', icon: Zap },
    ];

    const handleLogout = () => {
        if (window.confirm('Deseja realmente sair do portal médico?')) {
            window.location.hash = '/medico/landingpage';
        }
    };

    return (
        <div className="w-72 bg-[#0f172a] h-screen flex flex-col border-r border-white/5 fixed left-0 top-0 z-50 overflow-hidden">
            {/* Logo Section */}
            <div className="p-8">
                <div className="flex items-center gap-3 group cursor-pointer" onClick={() => setActiveTab('med-dashboard')}>
                    <div className="w-10 h-10 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/20 group-hover:scale-110 transition-transform">
                        <Activity className="text-white" size={24} />
                    </div>
                    <div>
                        <span className="text-lg font-black tracking-tighter text-white block leading-none italic">CRM <span className="text-cyan-400">MÉDICO</span></span>
                        <span className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Premium Engine</span>
                    </div>
                </div>
            </div>

            {/* Navigation */}
            <nav className="flex-1 px-4 space-y-2 overflow-y-auto py-4">
                <div className="px-4 mb-4">
                    <span className="text-[10px] text-slate-600 font-black uppercase tracking-[0.3em]">Navegação Principal</span>
                </div>
                {menuItems.map((item) => {
                    const Icon = item.icon;
                    const isActive = activeTab === item.id;
                    return (
                        <button
                            key={item.id}
                            onClick={() => setActiveTab(item.id)}
                            className={`w-full flex items-center justify-between px-4 py-3.5 rounded-xl transition-all group ${isActive
                                ? 'bg-gradient-to-r from-cyan-500/10 to-transparent border-l-4 border-cyan-500 text-white'
                                : 'text-slate-400 hover:text-white hover:bg-white/5'
                                }`}
                        >
                            <div className="flex items-center gap-3">
                                <Icon size={20} className={isActive ? 'text-cyan-400' : 'group-hover:text-cyan-400 transition-colors'} />
                                <span className="text-xs font-bold uppercase tracking-wider">{item.label}</span>
                            </div>
                            {isActive && <ChevronRight size={14} className="text-cyan-500" />}
                        </button>
                    );
                })}
            </nav>

            {/* Bottom Section / User Profile */}
            <div className="p-6 bg-slate-900/40 border-t border-white/5">
                <div className="flex items-center gap-4 mb-6 px-2">
                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 border border-white/10 flex items-center justify-center text-cyan-400 font-black text-xs">
                        DR
                    </div>
                    <div className="flex-1 min-w-0">
                        <span className="text-xs font-black text-white block truncate uppercase tracking-tighter">Dr. Profissional</span>
                        <span className="text-[10px] text-cyan-500/80 font-bold uppercase tracking-widest">Médico Diretor</span>
                    </div>
                </div>

                <div className="space-y-2">
                    <button className="w-full flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-white/5 rounded-xl transition-all text-xs font-bold uppercase tracking-widest">
                        <Settings size={18} />
                        Configurações
                    </button>
                    <button
                        onClick={handleLogout}
                        className="w-full flex items-center gap-3 px-4 py-3 text-rose-500 hover:bg-rose-500/10 rounded-xl transition-all text-xs font-bold uppercase tracking-widest"
                    >
                        <LogOut size={18} />
                        Sair do Portal
                    </button>
                </div>
            </div>

            {/* Status Indicator */}
            <div className="px-8 py-4 bg-slate-950/50 flex items-center gap-3">
                <div className="w-2 h-2 bg-cyan-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,211,238,0.5)]"></div>
                <span className="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">Sincronizado</span>
            </div>
        </div>
    );
};