'use client'

type Page = 'dashboard' | 'library' | 'outreach' | 'export' | 'team' | 'performance'

interface SidebarProps {
  activePage: Page
  onNavigate: (page: Page) => void
  showTeamPage?: boolean
}

export default function Sidebar({ activePage, onNavigate, showTeamPage = false }: SidebarProps) {
  const navItems: { id: Page; icon: string; label: string }[] = [
    { id: 'dashboard', icon: 'search', label: 'Prospect Search' },
    { id: 'library', icon: 'inventory_2', label: 'Lead Library' },
    { id: 'performance', icon: 'trophy', label: 'Performance' },
    { id: 'outreach', icon: 'mail', label: 'Outreach Composer' },
    { id: 'export', icon: 'ios_share', label: 'Export Center' },
  ]

  if (showTeamPage) {
    navItems.splice(2, 0, { id: 'team', icon: 'groups', label: 'Team Management' })
  }

  return (
    <aside className="fixed left-0 top-0 h-screen w-64 flex flex-col py-6 bg-[#060e20] shadow-[1px_0_0_0_rgba(87,65,67,0.15)] z-50">
      {/* Brand */}
      <div className="px-6 mb-10">
        <h1 className="text-xl font-black text-[#fb7185] tracking-widest uppercase" style={{ fontFamily: 'Manrope, sans-serif' }}>
          Mspacez
        </h1>
        <p className="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-1">Growth Machine</p>
      </div>

      {/* Nav */}
      <nav className="flex-1 space-y-1 px-3">
        {navItems.map(item => (
          <button
            key={item.id}
            onClick={() => onNavigate(item.id)}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-left ${
              activePage === item.id
                ? 'text-[#fb7185] bg-[#fb7185]/10 font-bold border-r-2 border-[#fb7185]'
                : 'text-slate-400 hover:text-slate-100 hover:bg-[#2d3449]/50'
            }`}
          >
            <span className="material-symbols-outlined text-xl">{item.icon}</span>
            <span style={{ fontFamily: 'Manrope, sans-serif' }} className="tracking-tight font-semibold text-sm">
              {item.label}
            </span>
          </button>
        ))}
      </nav>

      {/* Bottom CTA */}
      <div className="px-6 mt-auto">
        <button
          onClick={() => onNavigate('outreach')}
          className="w-full py-4 bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-extrabold rounded-xl shadow-lg hover:opacity-90 transition-opacity active:scale-95 flex items-center justify-center gap-2 text-sm"
        >
          <span className="material-symbols-outlined">bolt</span>
          <span>Generate Outreach</span>
        </button>
      </div>
    </aside>
  )
}