'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuthStore } from '@/lib/auth';

const navigation = [
  { name: 'Dashboard', href: '/', icon: '📊' },
  { name: 'Tenants', href: '/tenants', icon: '🏢' },
  { name: 'Users', href: '/users', icon: '👥' },
  {
    name: 'Support Tickets',
    href: '/support',
    icon: '🎫',
    children: [
      { name: 'All Tickets', href: '/support' },
      { name: 'Open', href: '/support?status=open' },
      { name: 'My Assigned', href: '/support?assigned=me' },
    ],
  },
  { name: 'Audit Logs', href: '/audit-logs', icon: '📋' },
];

export function AdminSidebar() {
  const pathname = usePathname();
  const admin = useAuthStore((s) => s.admin);

  return (
    <aside className="w-64 bg-white border-r border-surface-200 flex flex-col shrink-0">
      <div className="h-16 flex items-center px-6 border-b border-surface-200">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-lg font-bold text-primary-600">FiberOps</span>
          <span className="text-xs font-medium text-surface-400 bg-surface-100 px-2 py-0.5 rounded">Admin</span>
        </Link>
      </div>

      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        {navigation.map((item) => {
          const isActive =
            item.href === '/'
              ? pathname === '/'
              : pathname.startsWith(item.href);

          return (
            <div key={item.name}>
              <Link
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  isActive
                    ? 'bg-primary-50 text-primary-700'
                    : 'text-surface-600 hover:bg-surface-100 hover:text-surface-900'
                }`}
              >
                <span>{item.icon}</span>
                {item.name}
              </Link>
            </div>
          );
        })}
      </nav>

      <div className="p-4 border-t border-surface-200">
        <div className="text-xs text-surface-500">
          <p className="font-medium text-surface-700">
            {admin?.firstName} {admin?.lastName}
          </p>
          <p>{admin?.email}</p>
        </div>
      </div>
    </aside>
  );
}