'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils/cn';

const NAV = [
  { href: '/dashboard', label: 'Dashboard', icon: '🏠' },
  { href: '/categories', label: 'Categories', icon: '📂' },
  { href: '/ask-question', label: 'Ask Question', icon: '✍️' },
  { href: '/faqs', label: 'FAQs', icon: '⭐' },
];

const ADMIN_NAV = [
  { href: '/admin/categories', label: 'Manage Categories', icon: '🗂️' },
  { href: '/admin/users', label: 'Manage Users', icon: '👥' },
];

export function Sidebar({ role }: { role: 'ADMIN' | 'EMPLOYEE' }) {
  const pathname = usePathname();

  return (
    <aside className="hidden w-60 shrink-0 border-r border-gray-200 bg-white md:flex md:flex-col">
      <div className="flex h-16 items-center gap-2 border-b border-gray-200 px-5">
         <div className="mx-auto mb-3 flex w-[100px] items-center justify-center rounded-lg ">
          <img src="/Logo.png" alt="Logo" className="" />
        </div>
        <span className="text-sm font-semibold text-gray-900">Support Portal</span>
      </div>

      <nav className="flex-1 space-y-1 px-3 py-4">
        {NAV.map((item) => (
          <NavLink key={item.href} {...item} active={isActive(pathname, item.href)} />
        ))}

        {role === 'ADMIN' ? (
          <>
            <div className="mt-6 px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
              Admin
            </div>
            {ADMIN_NAV.map((item) => (
              <NavLink key={item.href} {...item} active={isActive(pathname, item.href)} />
            ))}
          </>
        ) : null}
      </nav>
    </aside>
  );
}

function NavLink({
  href, label, icon, active,
}: { href: string; label: string; icon: string; active: boolean }) {
  return (
    <Link
      href={href}
      className={cn(
        'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
        active
          ? 'bg-brand-50 text-brand-700'
          : 'text-gray-700 hover:bg-gray-100'
      )}
    >
      <span aria-hidden>{icon}</span>
      {label}
    </Link>
  );
}

function isActive(pathname: string, href: string) {
  if (href === '/dashboard') return pathname === href;
  return pathname === href || pathname.startsWith(href + '/');
}