"use client"

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter, usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'
import {
  FileText,
  Search,
  Car,
  Shield,
  Home,
  Clock,
  CheckCircle,
  HelpCircle,
  Building,
  ChevronUp,
  User,
  LogOut,
  Menu,
  X
} from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

interface UserSidebarProps {
  children?: React.ReactNode
}

const navigation = [
  {
    title: 'Layanan',
    items: [
      {
        title: 'Beranda',
        icon: Home,
        href: '/',
        badge: null,
      },
      {
        title: 'Pengajuan SKCK',
        icon: FileText,
        href: '/ajuan/skck',
        badge: null,
      },
      {
        title: 'Pengajuan SPKT',
        icon: Shield,
        href: '/ajuan/spkt',
        badge: null,
      },
      {
        title: 'Pengajuan Lalu Lintas',
        icon: Car,
        href: '/ajuan/lalu-lintas',
        badge: null,
      },
    ],
  },
  {
    title: 'Pelacakan',
    items: [
      {
        title: 'Lacak Pengajuan',
        icon: Search,
        href: '/lacak',
        badge: null,
      },
      {
        title: 'Riwayat Pengajuan',
        icon: Clock,
        href: '/riwayat',
        badge: null,
      },
    ],
  },
  {
    title: 'Bantuan',
    items: [
      {
        title: 'Panduan Layanan',
        icon: HelpCircle,
        href: '/bantuan',
        badge: null,
      },
      {
        title: 'Kontak Kami',
        icon: User,
        href: '/kontak',
        badge: null,
      },
    ],
  },
]

export function UserSidebar({ children }: UserSidebarProps) {
  const router = useRouter()
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  const handleLogout = () => {
    // For user pages, logout just redirects to home
    router.push('/')
  }

  if (!mounted) {
    return null
  }

  return (
    <SidebarProvider>
      <Sidebar className="border-r border-gray-200 bg-white">
        <SidebarHeader className="bg-gradient-to-r from-amber-600 to-amber-700 text-white">
          <div className="px-4 py-6">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm">
                <Building className="h-6 w-6 text-white" />
              </div>
              <div>
                <h1 className="text-lg font-semibold text-white">Polres Wonosobo</h1>
                <p className="text-xs text-amber-100">Layanan Digital</p>
              </div>
            </div>
          </div>
        </SidebarHeader>

        <SidebarContent className="bg-gray-50">
          <div className="px-3 py-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <input
                placeholder="Cari menu..."
                className="w-full rounded-lg border border-gray-200 bg-white pl-10 pr-4 py-2 text-sm text-gray-900 placeholder-gray-500 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20"
              />
            </div>
          </div>

          {navigation.map((section) => (
            <SidebarGroup key={section.title}>
              <SidebarGroupLabel className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                {section.title}
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {section.items.map((item) => (
                    <SidebarMenuItem key={item.href}>
                      <SidebarMenuButton
                        asChild
                        isActive={pathname === item.href}
                        className={cn(
                          "hover:bg-amber-50 hover:text-amber-700 focus:bg-amber-50 focus:text-amber-700",
                          pathname === item.href && "bg-amber-50 text-amber-700 border-l-4 border-amber-600"
                        )}
                      >
                        <Link href={item.href}>
                          <item.icon className="h-4 w-4" />
                          <span className="font-medium">{item.title}</span>
                          {item.badge && (
                            <Badge variant="destructive" className="ml-auto h-5 px-1.5 text-xs">
                              {item.badge}
                            </Badge>
                          )}
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          ))}
        </SidebarContent>

        <SidebarFooter className="border-t border-gray-200 bg-white p-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-600 text-sm font-medium">
                <User className="h-4 w-4" />
              </div>
              <div className="flex flex-col">
                <span className="text-sm font-medium text-gray-900">Pengunjung</span>
                <span className="text-xs text-gray-500">Guest User</span>
              </div>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <ChevronUp className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  Profil Saya
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <HelpCircle className="mr-2 h-4 w-4" />
                  Bantuan
                </DropdownMenuItem>
                <Separator />
                <DropdownMenuItem onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  Keluar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </SidebarFooter>
      </Sidebar>

      <SidebarInset className="bg-gray-50">
        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-gray-200 bg-white px-4">
          <SidebarTrigger className="-ml-1 hover:bg-gray-100" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <div className="flex flex-1 items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-gray-900">
                {navigation
                  .flatMap(section => section.items)
                  .find(item => item.href === pathname)?.title || 'Layanan Digital'}
              </h2>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="sm">
                <HelpCircle className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
          {children}
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}