"use client"

import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { GameIcon } from "@/lib/game-icons"
import { mockGames } from "@/lib/mock"

const serviceSchema = z.object({
  title: z.string().min(2, "标题至少2个字符"),
  description: z.string().min(10, "描述至少10个字符"),
  price: z.string().min(1, "请输入价格"),
  unit: z.string().min(1, "请输入单位"),
  rankRange: z.string().optional(),
  availability: z.string().min(1, "请输入可用时间"),
})

export default function NewServicePage() {
  const router = useRouter()
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(serviceSchema),
  })

  const onSubmit = async () => {
    await new Promise((r) => setTimeout(r, 500))
    router.push("/dashboard/services")
  }

  return (
    <div className="max-w-2xl space-y-4">
      <Link
        href="/dashboard/services"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" />
        返回服务列表
      </Link>

      <Card>
        <CardHeader>
          <CardTitle>发布服务</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <div className="space-y-2">
              <Label>游戏</Label>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="选择游戏" />
                </SelectTrigger>
                <SelectContent>
                  {mockGames.map((game) => (
                    <SelectItem key={game.id} value={game.id}>
                      <div className="flex items-center gap-2">
                        <GameIcon name={game.icon} className="h-4 w-4" />
                        {game.name}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="title">服务标题</Label>
              <Input id="title" placeholder="例如：英雄联盟上分陪玩" {...register("title")} />
              {errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="description">服务描述</Label>
              <Textarea
                id="description"
                placeholder="详细描述你的服务内容、优势等"
                rows={4}
                {...register("description")}
              />
              {errors.description && (
                <p className="text-xs text-destructive">{errors.description.message}</p>
              )}
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="price">价格</Label>
                <Input id="price" type="number" placeholder="30" {...register("price")} />
                {errors.price && <p className="text-xs text-destructive">{errors.price.message}</p>}
              </div>
              <div className="space-y-2">
                <Label htmlFor="unit">单位</Label>
                <Select onValueChange={(value) => setValue("unit", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择单位" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="局">局</SelectItem>
                    <SelectItem value="小时">小时</SelectItem>
                    <SelectItem value="星">星</SelectItem>
                    <SelectItem value="次">次</SelectItem>
                    <SelectItem value="段">段</SelectItem>
                  </SelectContent>
                </Select>
                {errors.unit && <p className="text-xs text-destructive">{errors.unit.message}</p>}
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="rankRange">段位范围（可选）</Label>
              <Input id="rankRange" placeholder="例如：钻石-大师" {...register("rankRange")} />
            </div>

            <div className="space-y-2">
              <Label htmlFor="availability">可用时间</Label>
              <Input
                id="availability"
                placeholder="例如：周一至周五 19:00-23:00"
                {...register("availability")}
              />
              {errors.availability && (
                <p className="text-xs text-destructive">{errors.availability.message}</p>
              )}
            </div>

            <div className="flex gap-2">
              <Button type="submit" className="flex-1" disabled={isSubmitting}>
                {isSubmitting ? "发布中..." : "发布服务"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/dashboard/services">取消</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}