/**
 * TaxiBook Partner - Navigation Components
 * =========================================
 * Sidebar
 */

const Sidebar = ({ partner, currentView, setCurrentView, onLogout, branding }) => {
    const navItems = [
        { id: 'dashboard', icon: 'fa-chart-line', label: 'Dashboard' },
        { id: 'rides', icon: 'fa-car', label: 'Courses' },
        { id: 'clients', icon: 'fa-users', label: 'Clients' },
        { id: 'factures', icon: 'fa-file-invoice', label: 'Factures' },
        { id: 'packages', icon: 'fa-route', label: 'Forfaits' },
        { id: 'history', icon: 'fa-history', label: 'Historique' },
        { id: 'cards', icon: 'fa-credit-card', label: 'Cartes' },
        { id: 'vouchers', icon: 'fa-ticket', label: 'Bons clients' },
        { id: 'minisites', icon: 'fa-globe', label: 'Mini Sites' },
        { id: 'access', icon: 'fa-users-gear', label: 'Accès' },
        { id: 'api', icon: 'fa-code', label: 'API' },
        { id: 'profile', icon: 'fa-building', label: 'Profil' },
    ];

    const brandLogo = branding?.logo_dark_url || branding?.logo_url;
    const brandName = branding?.display_name || 'TaxiBook';

    return (
        <nav className="w-20 lg:w-64 gradient-bg flex flex-col h-screen fixed left-0 top-0 z-40">
            {/* Logo */}
            <div className="p-4 border-b border-dark-700">
                <div className="flex items-center justify-center lg:justify-start gap-3">
                    {brandLogo ? (
                        <img
                            src={brandLogo}
                            alt={brandName}
                            title={brandName}
                            className="block"
                            style={{ maxHeight: '32px', maxWidth: '100%', objectFit: 'contain' }}
                        />
                    ) : (
                        <>
                            <div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center flex-shrink-0">
                                <i className="fas fa-building text-white text-xl"></i>
                            </div>
                            <div className="hidden lg:block">
                                <h1 className="text-white font-bold text-lg">{brandName}</h1>
                                <p className="text-dark-400 text-xs">Partner Portal</p>
                            </div>
                        </>
                    )}
                </div>
            </div>

            {/* Partner Name */}
            <div className="p-4 border-b border-dark-700 hidden lg:block">
                <p className="text-dark-400 text-xs uppercase tracking-wider mb-1">Partenaire</p>
                <p className="text-white font-semibold truncate">{partner?.name || 'Partenaire'}</p>
            </div>

            {/* Navigation */}
            <div className="flex-1 p-4 space-y-2">
                {navItems.map(item => (
                    <button
                        key={item.id}
                        onClick={() => setCurrentView(item.id)}
                        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${
                            currentView === item.id
                                ? 'bg-primary-500 text-white'
                                : 'text-dark-400 hover:bg-dark-800 hover:text-white'
                        }`}
                    >
                        <i className={`fas ${item.icon} text-lg`}></i>
                        <span className="hidden lg:block font-medium">{item.label}</span>
                    </button>
                ))}
            </div>

            {/* Logout */}
            <div className="p-4 border-t border-dark-700">
                <button
                    onClick={onLogout}
                    className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition"
                >
                    <i className="fas fa-sign-out-alt text-lg"></i>
                    <span className="hidden lg:block font-medium">Déconnexion</span>
                </button>
            </div>
        </nav>
    );
};