import Link from 'next/link';
import { useRouter } from 'next/router';
import { useAuth } from '../hooks/useAuth';

export default function Sidebar() {
    const router = useRouter();
    const { user, isAdmin, logout } = useAuth();

    const userLinks = [
        { href: '/dashboard', label: 'Dashboard', icon: '📊' },
        { href: '/scans', label: 'Scan History', icon: '🔍' },
        { href: '/subscription', label: 'Subscription', icon: '💳' },
        { href: '/settings', label: 'Settings', icon: '⚙️' },
    ];

    const adminLinks = [
        { href: '/admin', label: 'Admin Dashboard', icon: '🛡️' },
        { href: '/admin/users', label: 'Users', icon: '👥' },
        { href: '/admin/licenses', label: 'Licenses', icon: '🔑' },
        { href: '/admin/revenue', label: 'Revenue', icon: '💰' },
    ];

    const links = isAdmin ? [...userLinks, ...adminLinks] : userLinks;

    return (
        <aside className="fixed left-0 top-0 h-full w-64 bg-dark-card border-r border-dark-border flex flex-col z-50">
            {/* Brand */}
            <div className="p-6 border-b border-dark-border">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white font-bold text-lg">
                        M
                    </div>
                    <div>
                        <h1 className="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                            MarketScope
                        </h1>
                        <p className="text-[10px] text-gray-500 uppercase tracking-widest">Price Intelligence</p>
                    </div>
                </div>
            </div>

            {/* Navigation */}
            <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                {links.map((link) => (
                    <Link key={link.href} href={link.href}>
                        <div className={`sidebar-link ${router.pathname === link.href ? 'active' : ''}`}>
                            <span className="text-lg">{link.icon}</span>
                            <span className="text-sm font-medium">{link.label}</span>
                        </div>
                    </Link>
                ))}
            </nav>

            {/* User Info */}
            <div className="p-4 border-t border-dark-border">
                <div className="flex items-center gap-3 mb-3">
                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center text-white font-bold text-xs">
                        {user?.name?.charAt(0).toUpperCase() || 'U'}
                    </div>
                    <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{user?.name || 'User'}</p>
                        <p className="text-xs text-gray-500 truncate">{user?.email}</p>
                    </div>
                </div>
                <button
                    onClick={logout}
                    className="w-full text-left sidebar-link text-red-400 hover:text-red-300 hover:bg-red-500/10"
                >
                    <span>🚪</span>
                    <span className="text-sm">Logout</span>
                </button>
            </div>
        </aside>
    );
}