import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { LogOut, Calendar, Home, FileText, Building2, X, Users } from 'lucide-react';
import { useAuth } from '../context/AuthContext';

const Sidebar = ({ isOpen, onToggle }) => {
    const location = useLocation();
    const { user, logout } = useAuth();

    const isActive = (path) => location.pathname === path;

    const getRoleBadgeClass = (role) => {
        switch (role) {
            case 'Admin':
                return 'bg-red-100 text-red-800';
            case 'Validateur':
                return 'bg-green-100 text-green-800';
            default:
                return 'bg-blue-100 text-blue-800';
        }
    };

    return (
        <>
            {isOpen && (
                <div
                    className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
                    onClick={onToggle}
                />
            )}

            <div className={`
                fixed inset-y-0 left-0 z-50 w-60 bg-white border-r border-gray-200 min-h-screen flex flex-col transform transition-transform duration-300 ease-in-out
                ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
            `}>
                {/* Bouton fermer (mobile) */}
                <div className="lg:hidden flex justify-end p-4">
                    <button onClick={onToggle} className="p-2 rounded-lg hover:bg-gray-100">
                        <X className="w-6 h-6" />
                    </button>
                </div>

                {/* Logo */}
                <div className="p-6 border-b border-gray-100">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                            <Building2 className="w-6 h-6 text-white" />
                        </div>
                        <div>
                            <h2 className="text-xl font-bold text-gray-900">GTA</h2>
                            <p className="text-sm text-gray-500">Gestion de congés</p>
                        </div>
                    </div>
                </div>

                {/* Infos utilisateur */}
                <div className="p-4 lg:p-6 border-b border-gray-100">
                    <div className="flex flex-col items-center text-center">
                        <img
                            src={user?.avatar || "/assets/utilisateur.png"}
                            alt="User"
                            className="w-12 h-12 lg:w-16 lg:h-16 rounded-full object-cover mb-3"
                        />
                        <div>
                            <p className="font-semibold text-gray-900 text-sm lg:text-base">
                                {user?.name || "Utilisateur"}
                            </p>
                            <p className="text-xs lg:text-sm text-gray-500">
                                {user?.service || "Service non défini"}
                            </p>
                            {user?.role && (
                                <span className={`inline-block mt-2 px-3 py-1 text-xs font-medium rounded-full ${getRoleBadgeClass(user.role)}`}>
                                    {user.role}
                                </span>
                            )}
                        </div>
                    </div>
                </div>

                {/* Navigation */}
                <nav className="flex-1 p-4 space-y-2">
                    <Link
                        to="/dashboard"
                        onClick={() => window.innerWidth < 1024 && onToggle()}
                        className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/dashboard") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
                            }`}
                    >
                        <Home className="w-5 h-5" />
                        <span className="font-medium">Dashboard</span>
                    </Link>

                    <Link
                        to="/demandes"
                        onClick={() => window.innerWidth < 1024 && onToggle()}
                        className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/demandes") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
                            }`}
                    >
                        <FileText className="w-5 h-5" />
                        <span className="font-medium">Demandes</span>
                    </Link>

                    <Link
                        to="/calendrier"
                        onClick={() => window.innerWidth < 1024 && onToggle()}
                        className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/calendrier") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
                            }`}
                    >
                        <Calendar className="w-5 h-5" />
                        <span className="font-medium">Calendrier</span>
                    </Link>

                    {(user?.role === 'Validateur' || user?.role === 'Admin' || user?.role === 'Collaborateur') && (
                        <Link
                            to="/manager"
                            onClick={() => window.innerWidth < 1024 && onToggle()}
                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/manager") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
                                }`}
                        >
                            <Users className="w-5 h-5" />
                            <span className="font-medium">
                                {user?.role === 'Collaborateur' ? 'Mon équipe' : 'Équipe'}
                            </span>
                        </Link>
                    )}
                </nav>

                {/* Bouton déconnexion */}
                <div className="p-4 border-t border-gray-100">
                    <button
                        onClick={logout}
                        className="flex items-center gap-3 px-4 py-3 w-full text-left text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg transition-colors"
                    >
                        <LogOut className="w-5 h-5" />
                        <span className="font-medium">Déconnexion</span>
                    </button>
                </div>
            </div>
        </>
    );
};

export default Sidebar;
