'use client'

import * as React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  Home,
  Building2,
  Users,
  BarChart3,
  Settings,
  PlusCircle,
  FileText,
  LogOut,
  Menu,
  X,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet'
import { Separator } from '@/components/ui/separator'

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: Home },
  { name: 'Imóveis', href: '/dashboard/imoveis', icon: Building2 },
  { name: 'Proprietários', href: '/dashboard/proprietarios', icon: Users },
  { name: 'Relatórios', href: '/dashboard/relatorios', icon: BarChart3 },
]

const actions = [
  { name: 'Novo Imóvel', href: '/dashboard/imoveis/novo', icon: PlusCircle },
  { name: 'Novo Proprietário', href: '/dashboard/proprietarios/novo', icon: FileText },
]

interface DashboardSidebarProps {
  className?: string
}

function SidebarContent({ onClose }: { onClose?: () => void }) {
  const pathname = usePathname()

  return (
    <div className="flex flex-col h-full">
      {/* Logo */}
      <div className="p-4 lg:p-6">
        <Link href="/dashboard" className="flex items-center gap-2" onClick={onClose}>
          <div className="size-10 rounded-lg bg-primary flex items-center justify-center">
            <span className="text-primary-foreground font-bold text-lg">PD</span>
          </div>
          <div>
            <span className="font-bold text-lg text-foreground">Pé Direito</span>
            <span className="block text-xs -mt-0.5 text-muted-foreground">
              Painel Admin
            </span>
          </div>
        </Link>
      </div>

      <Separator />

      {/* Navigation */}
      <nav className="flex-1 p-4 space-y-1">
        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-3 mb-2">
          Menu
        </p>
        {navigation.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
          return (
            <Link
              key={item.name}
              href={item.href}
              onClick={onClose}
              className={cn(
                'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                isActive
                  ? 'bg-primary/10 text-primary'
                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
              )}
            >
              <item.icon className="size-5" />
              {item.name}
            </Link>
          )
        })}

        <div className="pt-6">
          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-3 mb-2">
            Ações Rápidas
          </p>
          {actions.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              onClick={onClose}
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
            >
              <item.icon className="size-5" />
              {item.name}
            </Link>
          ))}
        </div>
      </nav>

      <Separator />

      {/* Bottom section */}
      <div className="p-4 space-y-1">
        <Link
          href="/dashboard/configuracoes"
          onClick={onClose}
          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
        >
          <Settings className="size-5" />
          Configurações
        </Link>
        <button
          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors w-full"
        >
          <LogOut className="size-5" />
          Sair
        </button>
      </div>
    </div>
  )
}

export function DashboardSidebar({ className }: DashboardSidebarProps) {
  return (
    <>
      {/* Desktop Sidebar */}
      <aside
        className={cn(
          'hidden lg:flex flex-col w-64 bg-card border-r border-border fixed inset-y-0 left-0 z-30',
          className
        )}
      >
        <SidebarContent />
      </aside>

      {/* Mobile Header with Sheet */}
      <header className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-30 px-4 flex items-center justify-between">
        <Link href="/dashboard" className="flex items-center gap-2">
          <div className="size-8 rounded-lg bg-primary flex items-center justify-center">
            <span className="text-primary-foreground font-bold text-sm">PD</span>
          </div>
          <span className="font-bold text-foreground">Pé Direito</span>
        </Link>

        <Sheet>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon">
              <Menu className="size-6" />
              <span className="sr-only">Abrir menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-72 p-0">
            <SheetClose asChild>
              <SidebarContent />
            </SheetClose>
          </SheetContent>
        </Sheet>
      </header>
    </>
  )
}