'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  ShieldCheck,
  ChevronLeft,
  ChevronRight,
  Sparkles,
} from 'lucide-react';

export interface NavItem {
  label: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  badge?: string;
  highlight?: boolean;
}

interface SmartAuthSidebarProps {
  items: NavItem[];
  roleTitle?: string;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
  brandHref?: string;
}

export default function SmartAuthSidebar({
  items,
  roleTitle = 'Workspace',
  collapsed = false,
  onToggleCollapse,
  brandHref = '/dashboard',
}: SmartAuthSidebarProps) {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/dashboard' || href === '/api-dashboard' || href === '/admin-dashboard' || href === '/super-admin-dashboard') {
      return pathname === href;
    }
    return pathname.startsWith(href);
  };

  return (
    <aside
      className={`bg-white border-r border-slate-200/90 flex flex-col justify-between transition-all duration-200 z-40 select-none ${
        collapsed ? 'w-20' : 'w-64 sm:w-72'
      }`}
    >
      {/* Brand Header */}
      <div className="p-5 border-b border-slate-100 flex items-center justify-between">
        <Link href={brandHref} className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-700 to-teal-500 flex items-center justify-center text-white shadow-md shadow-emerald-500/10 shrink-0">
            <ShieldCheck className="w-6 h-6" />
          </div>
          {!collapsed && (
            <div className="leading-tight">
              <div className="text-base font-black text-slate-900 tracking-tight font-sans">
                Smart<span className="text-emerald-700">Auth</span>
              </div>
              <div className="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-wider">
                {roleTitle}
              </div>
            </div>
          )}
        </Link>

        {onToggleCollapse && (
          <button
            type="button"
            onClick={onToggleCollapse}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors hidden md:block"
            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          >
            {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
          </button>
        )}
      </div>

      {/* Navigation List */}
      <div className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
        {items.map((item) => {
          const Icon = item.icon;
          const active = isActive(item.href);

          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all duration-150 relative ${
                active
                  ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200/80 shadow-2xs'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
              }`}
              title={collapsed ? item.label : undefined}
            >
              <Icon className={`w-4 h-4 shrink-0 ${active ? 'text-emerald-700' : 'text-slate-400'}`} />

              {!collapsed && <span className="truncate">{item.label}</span>}

              {!collapsed && item.badge && (
                <span
                  className={`ml-auto px-2 py-0.5 rounded-full text-[10px] font-mono font-bold uppercase ${
                    item.highlight
                      ? 'bg-emerald-600 text-white shadow-xs'
                      : 'bg-slate-100 text-slate-600'
                  }`}
                >
                  {item.badge}
                </span>
              )}
            </Link>
          );
        })}
      </div>

      {/* Footer Branding / NDPR Notice */}
      {!collapsed && (
        <div className="p-4 border-t border-slate-100 text-center">
          <div className="text-[10px] text-slate-400 font-mono">
            SmartAuth • NDPR Compliant
          </div>
          <div className="text-[9px] text-slate-400 mt-0.5">
            ISO/IEC 27001 Security Standard
          </div>
        </div>
      )}
    </aside>
  );
}