'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import {
  LayoutDashboard,
  Search,
  Settings,
  HelpCircle,
  LogOut,
  Sparkles,
  Target
} from 'lucide-react'

interface SidebarProps {
  productName?: string
}

export function Sidebar({ productName }: SidebarProps) {
  const pathname = usePathname()

  const routes = [
    {
      label: 'Dashboard',
      icon: LayoutDashboard,
      href: '/dashboard',
      active: pathname === '/dashboard',
    },
    {
      label: 'Opportunities',
      icon: Target,
      href: '/opportunities',
      active: pathname === '/opportunities',
    },
  ]

  const bottomRoutes = [
    {
      label: 'Settings',
      icon: Settings,
      href: '/settings',
    },
    {
      label: 'Help',
      icon: HelpCircle,
      href: '/help',
    },
  ]

  return (
    <div className="flex h-full w-64 flex-col border-r border-border bg-card">
      {/* Logo */}
      <div className="flex h-14 items-center border-b border-border px-4">
        <Link href="/" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
            <Sparkles className="h-4 w-4" />
          </div>
          <span className="font-semibold">Sanati</span>
        </Link>
      </div>

      {/* Product Name */}
      {productName && (
        <div className="px-4 py-3 border-b border-border">
          <p className="text-xs text-muted-foreground uppercase tracking-wide">Analyzing</p>
          <p className="text-sm font-medium truncate">{productName}</p>
        </div>
      )}

      {/* Main Nav */}
      <ScrollArea className="flex-1 py-4">
        <nav className="space-y-1 px-2">
          {routes.map((route) => (
            <Link
              key={route.href}
              href={route.href}
              className={cn(
                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                route.active
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
              )}
            >
              <route.icon className="h-4 w-4" />
              {route.label}
            </Link>
          ))}
        </nav>

        <Separator className="my-4" />

        <nav className="space-y-1 px-2">
          {bottomRoutes.map((route) => (
            <Link
              key={route.href}
              href={route.href}
              className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            >
              <route.icon className="h-4 w-4" />
              {route.label}
            </Link>
          ))}
        </nav>
      </ScrollArea>

      {/* Bottom */}
      <div className="border-t border-border p-4">
        <Link href="/">
          <Button variant="ghost" className="w-full justify-start gap-2 text-muted-foreground">
            <LogOut className="h-4 w-4" />
            Exit
          </Button>
        </Link>
      </div>
    </div>
  )
}