"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { useServiceStore } from "@/store/services"
import { useShopStore } from "@/store/shops"
import { Edit, Plus, Trash2 } from "lucide-react"
import Link from "next/link"

export default function ServicesPage() {
  const userId = useAuthStore((state) => state.user?.id)
  const currentRole = useAuthStore((state) => state.currentRole)
  const shops = useShopStore((state) => state.shops)
  const players = usePlayerStore((state) => state.players)
  const services = useServiceStore((state) => state.services)
  const deleteService = useServiceStore((state) => state.deleteService)
  const ownerShop = resolveOwnerShop(userId, shops)

  const scopedPlayerIds =
    currentRole === "player"
      ? userId
        ? [userId]
        : []
      : currentRole === "owner"
        ? ownerShop
          ? players.filter((player) => player.shopId === ownerShop.id).map((player) => player.id)
          : []
        : []

  const scopedPlayerIdSet = new Set(scopedPlayerIds)
  const scopedServices = services.filter((service) => scopedPlayerIdSet.has(service.playerId))

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">服务管理</h1>
        <Button asChild>
          <Link href="/dashboard/services/new">
            <Plus className="mr-1 h-4 w-4" />
            发布服务
          </Link>
        </Button>
      </div>

      <Card className="hover:shadow-card-hover">
        <CardHeader>
          <CardTitle className="text-base">已发布的服务</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>服务名称</TableHead>
                <TableHead>游戏</TableHead>
                <TableHead>价格</TableHead>
                <TableHead>段位范围</TableHead>
                <TableHead>可用时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {scopedServices.map((service) => (
                <TableRow key={service.id}>
                  <TableCell className="font-medium">{service.title}</TableCell>
                  <TableCell>
                    <Badge variant="secondary">{service.gameName}</Badge>
                  </TableCell>
                  <TableCell>
                    ¥{service.price}/{service.unit}
                  </TableCell>
                  <TableCell>{service.rankRange ?? "-"}</TableCell>
                  <TableCell>
                    <div className="text-xs text-muted-foreground">
                      {service.availability.map((a) => (
                        <div key={a}>{a}</div>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-1">
                      <Button variant="ghost" size="icon" asChild>
                        <Link href={`/dashboard/services/new?serviceId=${service.id}`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => {
                          if (!scopedPlayerIdSet.has(service.playerId)) return
                          deleteService(service.id)
                        }}
                      >
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}