'use client'

import { useState } from 'react'
import { signOut } from 'next-auth/react'
import { Menu, LogOut, Settings, User } from 'lucide-react'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { ADMIN_NAVIGATION } from './AdminSidebar'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuGroup,
} from '@/components/ui/dropdown-menu'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'

interface AdminHeaderProps {
  userEmail?: string | null
  userName?: string | null
}

export function AdminHeader({ userEmail, userName }: AdminHeaderProps) {
  const pathname = usePathname()
  const [open, setOpen] = useState(false)
  
  const initials = userName 
    ? userName.slice(0, 2).toUpperCase() 
    : userEmail?.slice(0, 2).toUpperCase() || 'AD'

  return (
    <header className="sticky top-0 z-40 flex h-16 w-full items-center justify-between border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 px-4 backdrop-blur md:px-6">
      
      {/* Mobile Menu */}
      <div className="flex items-center md:hidden">
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger render={<Button variant="ghost" size="icon" className="-ml-2 mr-2" />}>
            <Menu className="h-5 w-5" />
            <span className="sr-only">Menüyü aç</span>
          </SheetTrigger>
          <SheetContent side="left" className="w-72">
            <SheetHeader className="border-b pb-4 mb-4">
              <SheetTitle className="text-left text-xl bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                Sitar Admin
              </SheetTitle>
            </SheetHeader>
            <nav className="flex flex-col space-y-1">
              {ADMIN_NAVIGATION.map((item) => {
                const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href))
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    onClick={() => setOpen(false)}
                    className={`
                      flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors
                      ${isActive 
                        ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400' 
                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}
                    `}
                  >
                    <item.icon className={`mr-3 h-5 w-5 ${isActive ? 'text-blue-700 dark:text-blue-400' : 'text-gray-400'}`} />
                    {item.name}
                  </Link>
                )
              })}
            </nav>
          </SheetContent>
        </Sheet>
        <span className="text-lg font-bold text-gray-900 dark:text-white sm:hidden">Admin</span>
      </div>

      <div className="flex flex-1 items-center justify-end space-x-4">
        {/* User Dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger render={<Button variant="ghost" className="relative h-9 w-9 rounded-full" />}>
            <Avatar className="h-9 w-9 border border-gray-200 dark:border-gray-800">
              <AvatarFallback className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200">
                {initials}
              </AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56" align="end">
            <DropdownMenuGroup>
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium leading-none text-gray-900 dark:text-white">
                    {userName || 'Admin'}
                  </p>
                  <p className="text-xs leading-none text-gray-500 dark:text-gray-400">
                    {userEmail}
                  </p>
                </div>
              </DropdownMenuLabel>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem render={<Link href="/admin/settings" />}>
              <Settings className="mr-2 h-4 w-4" />
              <span>Ayarlar</span>
            </DropdownMenuItem>
            <DropdownMenuItem render={<Link href="/" target="_blank" />}>
              <User className="mr-2 h-4 w-4" />
              <span>Siteye Git</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem 
              className="text-red-600 dark:text-red-400 cursor-pointer focus:bg-red-50 dark:focus:bg-red-950/30 focus:text-red-600"
              onClick={() => signOut({ callbackUrl: '/' })}
            >
              <LogOut className="mr-2 h-4 w-4" />
              <span>Çıkış Yap</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}