"use client"

import { MoreHorizontal, Star, UserPlus } from "lucide-react"
import Link from "next/link"
import { useMemo, useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
import { useAuthStore } from "@/store/auth"
import { usePlayerStore } from "@/store/players"
import { useShopStore } from "@/store/shops"

const statusLabels: Record<string, string> = {
  available: "在线",
  busy: "忙碌",
  offline: "离线",
}

const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
  available: "default",
  busy: "secondary",
  offline: "outline",
}

export default function EmployeesPage() {
  const [search, setSearch] = useState("")
  const userId = useAuthStore((state) => state.user?.id)
  const shops = useShopStore((state) => state.shops)
  const players = usePlayerStore((state) => state.players)
  const assignToShop = usePlayerStore((state) => state.assignToShop)
  const removeFromShop = usePlayerStore((state) => state.removeFromShop)
  const shop = resolveOwnerShop(userId, shops)
  const updateShop = useShopStore((state) => state.updateShop)

  const shopPlayers = useMemo(() => {
    if (!shop) return []
    return players.filter(
      (player) =>
        player.shopId === shop.id &&
        player.user.nickname.toLowerCase().includes(search.trim().toLowerCase()),
    )
  }, [players, shop, search])

  const inviteCandidate = useMemo(
    () => (shop ? players.find((player) => player.shopId !== shop.id) : undefined),
    [players, shop],
  )

  if (!shop) {
    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">员工管理</h1>
        <Button
          onClick={() => {
            if (!inviteCandidate) return
            assignToShop(inviteCandidate.id, shop.id, shop.name)
            updateShop(shop.id, { playerCount: shop.playerCount + 1 })
          }}
        >
          <UserPlus className="mr-1 h-4 w-4" />
          邀请打手
        </Button>
      </div>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-base">签约打手 ({shopPlayers.length})</CardTitle>
            <Input
              placeholder="搜索打手..."
              className="max-w-xs"
              value={search}
              onChange={(event) => setSearch(event.target.value)}
            />
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>打手</TableHead>
                <TableHead>擅长游戏</TableHead>
                <TableHead>评分</TableHead>
                <TableHead>完成率</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {shopPlayers.map((player) => (
                <TableRow key={player.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Avatar className="h-8 w-8">
                        <AvatarImage src={player.user.avatar} />
                        <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="text-sm font-medium">{player.user.nickname}</p>
                        <p className="text-xs text-muted-foreground">{player.totalOrders} 单</p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1 flex-wrap">
                      {player.games.map((game) => (
                        <Badge key={game} variant="secondary" className="text-xs">
                          {game}
                        </Badge>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
                      {player.rating}
                    </div>
                  </TableCell>
                  <TableCell>{(player.completionRate * 100).toFixed(0)}%</TableCell>
                  <TableCell>
                    <Badge variant={statusVariants[player.status]}>
                      {statusLabels[player.status]}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem asChild>
                          <Link href={`/player/${player.id}`}>查看详情</Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                          <Link href="/dashboard/shop/rules">调整抽成</Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-destructive"
                          onClick={() => {
                            removeFromShop(player.id)
                            updateShop(shop.id, { playerCount: Math.max(0, shop.playerCount - 1) })
                          }}
                        >
                          移除打手
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}