import { MoreHorizontal, Star, UserPlus } from "lucide-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 { mockPlayers } from "@/lib/mock"

const shopPlayers = mockPlayers.filter((p) => p.shopId === "shop1")

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() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">员工管理</h1>
        <Button>
          <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" />
          </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>查看详情</DropdownMenuItem>
                        <DropdownMenuItem>调整抽成</DropdownMenuItem>
                        <DropdownMenuItem className="text-destructive">移除打手</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}