"use client"

import { Edit, Plus, Trash2 } from "lucide-react"
import Link from "next/link"
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 { useServiceStore } from "@/store/services"

export default function ServicesPage() {
  const services = useServiceStore((state) => state.services)
  const deleteService = useServiceStore((state) => state.deleteService)

  return (
    <div className="space-y-6">
      <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>
        <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>
              {services.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={() => deleteService(service.id)}>
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}