import type { ReactNode } from 'react';
import {
  LayoutDashboard,
  BarChart3,
  Users,
  Search,
  History,
  Handshake,
  LogOut,
  UserCircle,
} from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import logo from '../../assets/logo.png';

export interface NavItem {
  id: string;
  label: string;
  icon: ReactNode;
}

const influencerNav: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard className="h-5 w-5" /> },
  { id: 'analytics', label: 'Analytics', icon: <BarChart3 className="h-5 w-5" /> },
  { id: 'collaborations', label: 'Collaborations', icon: <Handshake className="h-5 w-5" /> },
  { id: 'profile', label: 'Profile', icon: <UserCircle className="h-5 w-5" /> },
];

const businessNav: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard className="h-5 w-5" /> },
  { id: 'find', label: 'Find Creators', icon: <Search className="h-5 w-5" /> },
  { id: 'collaborations', label: 'Collaborations', icon: <Users className="h-5 w-5" /> },
  { id: 'history', label: 'Search History', icon: <History className="h-5 w-5" /> },
  { id: 'profile', label: 'Profile', icon: <UserCircle className="h-5 w-5" /> },
];

interface SidebarProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
  const { user, logout } = useAuth();
  const navItems = user?.is_influencer ? influencerNav : businessNav;

  return (
    <aside className="fixed left-0 top-0 bottom-0 w-64 bg-surface-50 border-r border-surface-300 flex flex-col z-40">
      {/* Logo */}
      <div className="p-6 border-b border-surface-300">
        <div className="flex items-center gap-2.5">
          <img src={logo} alt="SYNC" className="h-9 w-auto" />
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
        {navItems.map((item) => (
          <button
            key={item.id}
            onClick={() => onTabChange(item.id)}
            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer ${
              activeTab === item.id
                ? 'bg-brand-600/15 text-brand-400'
                : 'text-zinc-400 hover:bg-surface-200 hover:text-zinc-200'
            }`}
          >
            {item.icon}
            {item.label}
          </button>
        ))}
      </nav>

      {/* User section */}
      <div className="p-4 border-t border-surface-300">
        <button
          type="button"
          onClick={() => onTabChange('profile')}
          className="w-full flex items-center gap-3 mb-3 px-1 py-1.5 rounded-lg text-left hover:bg-surface-200 transition-colors cursor-pointer"
          title="Edit profile"
        >
          <div className="h-9 w-9 rounded-full bg-brand-50 flex items-center justify-center text-brand-600 font-semibold text-sm shrink-0">
            {user?.first_name?.[0] ?? user?.username?.[0] ?? '?'}
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-zinc-200 truncate">
              {user?.first_name} {user?.last_name}
            </p>
            <p className="text-xs text-zinc-500 truncate">{user?.email}</p>
          </div>
        </button>
          <button
          onClick={logout}
          className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
        >
          <LogOut className="h-4 w-4" />
          Sign Out
        </button>
      </div>
    </aside>
  );
}
