'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,
  LogOut,
  Sparkles,
  Target
} from 'lucide-react'

interface SidebarProps {
  productName?: string
}

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

  const routes = [
    {
      label: 'Overview',
      icon: LayoutDashboard,
      href: '/app/dashboard',
      active: pathname === '/app/dashboard',
    },
  ]

  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>
          ))}
          <Link
            href="/app/search"
            className={cn(
              'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
              pathname === '/app/search'
                ? 'bg-primary text-primary-foreground'
                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
            )}
          >
            <Target className="h-4 w-4" />
            Search
          </Link>
          <Link
            href="/app/inbox"
            className={cn(
              'flex items-center rounded-md px-3 py-2 pl-9 text-sm font-medium transition-colors',
              pathname === '/app/inbox'
                ? 'bg-primary text-primary-foreground'
                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
            )}
          >
            Inbox
          </Link>
        </nav>

        <Separator className="my-4" />
      </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>
  )
}