"use client"

import {
  Bell,
  Gamepad2,
  LogOut,
  Menu,
  MessageSquare,
  Search,
  Settings,
  ShoppingBag,
  User,
  Wallet,
} from "lucide-react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { currentUser, mockShops } from "@/lib/mock"
import type { UserRole } from "@/lib/types"
import { cn } from "@/lib/utils"
import { useAuthStore } from "@/store/auth"
import { useNotificationStore } from "@/store/notifications"

const roleLabels: Record<UserRole, string> = {
  consumer: "消费者",
  player: "打手",
  owner: "店主",
}

export function Header() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()
  const { isAuthenticated, currentRole, verifiedRoles, switchRole, logout } = useAuthStore()

  const navLinks =
    currentRole === "consumer"
      ? [
          { href: "/", label: "首页" },
          { href: "/search", label: "找陪玩" },
          { href: "/community", label: "社区" },
          { href: "/chat", label: "消息" },
        ]
      : [
          { href: "/", label: "首页" },
          { href: "/community", label: "社区" },
          { href: "/orders", label: "订单" },
          { href: "/chat", label: "消息" },
          { href: "/dashboard", label: "管理后台" },
        ]

  const availableRoles = (Object.entries(roleLabels) as [UserRole, string][]).filter(([role]) =>
    verifiedRoles.includes(role),
  )

  const handleRoleSwitch = (role: UserRole) => {
    switchRole(role)
    router.push(role === "consumer" ? "/" : "/dashboard")
    setMobileOpen(false)
  }

  const unreadCount = useNotificationStore(
    (state) => state.notifications.filter((notification) => !notification.read).length,
  )

  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const q = formData.get("q") as string
    if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`)
  }

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-14 items-center gap-4 px-4">
        <Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
          <Gamepad2 className="h-5 w-5" />
          聚玩
        </Link>

        <nav className="hidden md:flex items-center gap-1">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={cn(
                "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
                pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
                  ? "bg-accent text-accent-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
              )}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <form onSubmit={handleSearch} className="hidden md:flex flex-1 max-w-sm">
          <div className="relative w-full">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input name="q" placeholder="搜索打手、店铺..." className="pl-8 h-9" />
          </div>
        </form>

        <div className="flex flex-1 md:flex-none items-center justify-end gap-1">
          {isAuthenticated ? (
            <>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" size="sm" className="hidden md:flex text-xs h-8">
                    {roleLabels[currentRole]}
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>切换身份</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {availableRoles.map(([role, label]) => (
                    <DropdownMenuItem
                      key={role}
                      onClick={() => handleRoleSwitch(role)}
                      className={cn(currentRole === role && "bg-accent")}
                    >
                      {label}
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>

              <Button variant="ghost" size="icon" className="relative h-9 w-9" asChild>
                <Link href="/notifications">
                  <Bell className="h-4 w-4" />
                  {unreadCount > 0 && (
                    <Badge className="absolute -top-1 -right-1 h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
                      {unreadCount}
                    </Badge>
                  )}
                </Link>
              </Button>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9">
                    <Avatar className="h-7 w-7">
                      <AvatarImage src={currentUser.avatar} />
                      <AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  <DropdownMenuLabel>{currentUser.nickname}</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                    <DropdownMenuItem asChild>
                      <Link
                        href={
                          currentRole === "player"
                            ? `/player/${currentUser.id}`
                            : currentRole === "owner"
                              ? `/shop/${mockShops.find((s) => s.owner.id === currentUser.id)?.id ?? "shop1"}`
                              : `/user/${currentUser.id}`
                        }
                      >
                        <User className="mr-2 h-4 w-4" />
                        个人主页
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/orders">
                        <ShoppingBag className="mr-2 h-4 w-4" />
                        我的订单
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/chat">
                        <MessageSquare className="mr-2 h-4 w-4" />
                        消息
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/wallet">
                        <Wallet className="mr-2 h-4 w-4" />
                        钱包
                      </Link>
                    </DropdownMenuItem>
                    {(currentRole === "player" || currentRole === "owner") && (
                      <DropdownMenuItem asChild>
                        <Link href="/dashboard">
                          <Gamepad2 className="mr-2 h-4 w-4" />
                          管理后台
                        </Link>
                      </DropdownMenuItem>
                    )}
                    <DropdownMenuItem asChild>
                      <Link href="/settings">
                        <Settings className="mr-2 h-4 w-4" />
                        设置
                      </Link>
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={logout}>
                    <LogOut className="mr-2 h-4 w-4" />
                    退出登录
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <div className="hidden md:flex items-center gap-2">
              <Button variant="ghost" size="sm" asChild>
                <Link href="/login">登录</Link>
              </Button>
              <Button size="sm" asChild>
                <Link href="/register">注册</Link>
              </Button>
            </div>
          )}

          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden h-9 w-9">
                <Menu className="h-5 w-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-72">
              <SheetHeader>
                <SheetTitle className="flex items-center gap-2">
                  <Gamepad2 className="h-5 w-5" />
                  聚玩
                </SheetTitle>
              </SheetHeader>
              <div className="mt-4 space-y-4">
                <form onSubmit={handleSearch}>
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input name="q" placeholder="搜索打手、店铺..." className="pl-8" />
                  </div>
                </form>

                {isAuthenticated && (
                  <div className="flex items-center gap-2 px-1">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={currentUser.avatar} />
                      <AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">{currentUser.nickname}</p>
                      <p className="text-xs text-muted-foreground">{roleLabels[currentRole]}</p>
                    </div>
                  </div>
                )}

                <nav className="flex flex-col gap-1">
                  {navLinks.map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      onClick={() => setMobileOpen(false)}
                      className={cn(
                        "px-3 py-2 rounded-md text-sm font-medium transition-colors",
                        pathname === link.href ||
                          (link.href !== "/" && pathname.startsWith(link.href))
                          ? "bg-accent text-accent-foreground"
                          : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
                      )}
                    >
                      {link.label}
                    </Link>
                  ))}
                  {isAuthenticated && (
                    <>
                      <Link
                        href="/wallet"
                        onClick={() => setMobileOpen(false)}
                        className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
                      >
                        钱包
                      </Link>
                      <Link
                        href="/settings"
                        onClick={() => setMobileOpen(false)}
                        className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
                      >
                        设置
                      </Link>
                    </>
                  )}
                </nav>

                {isAuthenticated && (
                  <div className="border-t pt-4">
                    <p className="px-3 text-xs text-muted-foreground mb-2">切换身份</p>
                    <div className="flex gap-1 px-3">
                      {availableRoles.map(([role, label]) => (
                        <Button
                          key={role}
                          variant={currentRole === role ? "default" : "outline"}
                          size="sm"
                          className="text-xs flex-1"
                          onClick={() => handleRoleSwitch(role)}
                        >
                          {label}
                        </Button>
                      ))}
                    </div>
                  </div>
                )}

                {!isAuthenticated && (
                  <div className="border-t pt-4 flex gap-2 px-3">
                    <Button variant="outline" className="flex-1" asChild>
                      <Link href="/login" onClick={() => setMobileOpen(false)}>
                        登录
                      </Link>
                    </Button>
                    <Button className="flex-1" asChild>
                      <Link href="/register" onClick={() => setMobileOpen(false)}>
                        注册
                      </Link>
                    </Button>
                  </div>
                )}
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}