import React from 'react';
import { User, RefreshCw, CreditCard, Shield, Mail, Users } from 'lucide-react';
import { DashboardView } from '../types';

interface AccountSidebarProps {
    clientId: number;
    currentView: DashboardView;
    setView?: (view: DashboardView) => void;
}

interface SidebarItemProps {
    icon: any;
    label: string;
    view: DashboardView;
    active: boolean;
    onClick: () => void;
}

const SidebarItem = ({ icon: Icon, label, active, onClick }: SidebarItemProps) => (
    <div
        onClick={onClick}
        className={`group flex items-center gap-3 px-4 py-2.5 rounded-lg cursor-pointer transition-all duration-200 ${active ? 'bg-blue-600 text-white shadow-md shadow-blue-500/20' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
            }`}
    >
        <Icon size={16} />
        <span className={`text-xs tracking-tight ${active ? 'font-bold' : 'font-medium'}`}>{label}</span>
        {active && <div className="ml-auto w-1 h-1 bg-white rounded-full" />}
    </div>
);

const AccountSidebar: React.FC<AccountSidebarProps> = ({ currentView, setView }) => {
    const menuItems = [
        { icon: User, label: 'My Details', view: DashboardView.MY_DETAILS },
        { icon: Users, label: 'User Management', view: DashboardView.USER_MANAGEMENT },
        { icon: Mail, label: 'Email History', view: DashboardView.EMAIL_HISTORY },
        { icon: Shield, label: 'Security Settings', view: DashboardView.SETTINGS }
    ];

    return (
        <div className="space-y-8 animate-in fade-in slide-in-from-left-4 duration-700">
            <div className="space-y-2">
                <h3 className="px-6 text-[10px] uppercase tracking-[0.2em] text-slate-400 font-black mb-4">Account Navigator</h3>
                <div className="space-y-2">
                    {menuItems.map((item, idx) => (
                        <SidebarItem
                            key={idx}
                            icon={item.icon}
                            label={item.label}
                            view={item.view}
                            active={currentView === item.view}
                            onClick={() => setView && setView(item.view)}
                        />
                    ))}
                </div>
            </div>

            <div className="px-5 py-6 bg-slate-100 border border-slate-200 rounded-xl relative overflow-hidden">
                <div className="relative z-10 space-y-3">
                    <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center text-blue-600 shadow-sm">
                        <Shield size={16} />
                    </div>
                    <div>
                        <p className="text-slate-900 font-bold text-xs">Pro Protection</p>
                        <p className="text-slate-500 text-[10px] font-bold uppercase tracking-widest">Enhanced Shield Active</p>
                    </div>
                    <button className="w-full py-2 bg-white border border-slate-200 text-slate-700 text-[10px] font-bold rounded-lg hover:bg-slate-50 transition-colors uppercase tracking-widest">Upgrade</button>
                </div>
            </div>
        </div>
    );
};

export default AccountSidebar;
