"use client"

import { useState } from "react"
import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Search, Edit, Eye, Sparkles, Plus } from "lucide-react"
import Link from "next/link"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function OutfitsPage() {
  // 直接在页面中实现对话框
  const [open, setOpen] = useState(false)
  const [step, setStep] = useState(1)
  const [outfitType, setOutfitType] = useState("")
  const [rarity, setRarity] = useState("")
  const [printQuantity, setPrintQuantity] = useState(1000)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async () => {
    setIsSubmitting(true)
    // 模拟API请求
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsSubmitting(false)
    setOpen(false)
    // 重置表单
    setStep(1)
  }

  const handleNext = () => {
    setStep(step + 1)
  }

  const handleBack = () => {
    setStep(step - 1)
  }

  return (
    <DashboardShell>
      <DashboardHeader heading="服装管理" text="管理洛天依的服装卡牌">
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
              <Plus className="mr-2 h-4 w-4" />
              添加服装
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                添加新服装
              </DialogTitle>
              <DialogDescription>填写服装信息以创建新的服装卡牌。创建后将生成唯一的卡牌ID。</DialogDescription>
            </DialogHeader>

            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name" className="text-right">
                    服装名称 <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="name"
                    placeholder="输入服装名称"
                    className="border-gray-300 focus-visible:ring-pink-500"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="type" className="text-right">
                    服装类型 <span className="text-red-500">*</span>
                  </Label>
                  <Select value={outfitType} onValueChange={setOutfitType} required>
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue placeholder="选择服装类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="regular">常规</SelectItem>
                      <SelectItem value="seasonal">季节限定</SelectItem>
                      <SelectItem value="festival">节日限定</SelectItem>
                      <SelectItem value="special">特别版</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="rarity" className="text-right">
                    稀有度 <span className="text-red-500">*</span>
                  </Label>
                  <Select value={rarity} onValueChange={setRarity} required>
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue placeholder="选择稀有度" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="common">普通</SelectItem>
                      <SelectItem value="rare">稀有</SelectItem>
                      <SelectItem value="epic">史诗</SelectItem>
                      <SelectItem value="legendary">传说</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="print-quantity" className="text-right">
                    印刷数量 <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="print-quantity"
                    type="number"
                    min={1}
                    value={printQuantity}
                    onChange={(e) => setPrintQuantity(Number.parseInt(e.target.value))}
                    placeholder="输入印刷数量"
                    className="border-gray-300 focus-visible:ring-pink-500"
                    required
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="description" className="text-right">
                  服装描述 <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="description"
                  placeholder="输入服装描述"
                  className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
                  required
                />
              </div>
            </div>

            <DialogFooter className="flex items-center justify-between mt-2">
              <Button variant="outline" onClick={() => setOpen(false)} disabled={isSubmitting}>
                取消
              </Button>
              <Button
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
                onClick={handleSubmit}
                disabled={isSubmitting}
              >
                {isSubmitting ? "创建中..." : "创建服装"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </DashboardHeader>

      <div className="flex items-center justify-between space-y-2 mb-6">
        <div className="flex items-center space-x-2">
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="搜索服装..."
              className="w-[300px] pl-8 border-none bg-white shadow-md focus-visible:ring-pink-500"
            />
          </div>
        </div>
      </div>

      <Tabs defaultValue="all" className="space-y-4">
        <TabsList className="bg-white p-1 shadow-md rounded-lg border">
          <TabsTrigger
            value="all"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            全部服装
          </TabsTrigger>
          <TabsTrigger
            value="published"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            已发布
          </TabsTrigger>
          <TabsTrigger
            value="unpublished"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            未发布
          </TabsTrigger>
          <TabsTrigger
            value="limited"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            限定服装
          </TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  服装列表
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>管理所有洛天依的服装卡牌</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader className="bg-gray-50">
                  <TableRow>
                    <TableHead className="w-[100px]">ID</TableHead>
                    <TableHead>服装名称</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>发布日期</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>激活数量</TableHead>
                    <TableHead>印刷数量</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT001</TableCell>
                    <TableCell className="font-medium text-pink-600">经典原创服装</TableCell>
                    <TableCell>常规</TableCell>
                    <TableCell>2023-10-15</TableCell>
                    <TableCell>
                      <Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
                    </TableCell>
                    <TableCell className="font-medium">1,245</TableCell>
                    <TableCell className="font-medium">2,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT001">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT002</TableCell>
                    <TableCell className="font-medium text-blue-600">夏日泳装</TableCell>
                    <TableCell>季节限定</TableCell>
                    <TableCell>2023-06-01</TableCell>
                    <TableCell>
                      <Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
                    </TableCell>
                    <TableCell className="font-medium">876</TableCell>
                    <TableCell className="font-medium">1,500</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT002">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT003</TableCell>
                    <TableCell className="font-medium text-red-600">冬日圣诞服</TableCell>
                    <TableCell>节日限定</TableCell>
                    <TableCell>2023-12-01</TableCell>
                    <TableCell>
                      <Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
                    </TableCell>
                    <TableCell className="font-medium">1,032</TableCell>
                    <TableCell className="font-medium">2,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT003">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT004</TableCell>
                    <TableCell className="font-medium text-purple-600">校园制服</TableCell>
                    <TableCell>常规</TableCell>
                    <TableCell>2024-01-15</TableCell>
                    <TableCell>
                      <Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
                    </TableCell>
                    <TableCell className="font-medium">1,567</TableCell>
                    <TableCell className="font-medium">3,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT004">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT005</TableCell>
                    <TableCell className="font-medium text-teal-600">演唱会礼服</TableCell>
                    <TableCell>特别版</TableCell>
                    <TableCell>-</TableCell>
                    <TableCell>
                      <Badge variant="outline" className="text-gray-500 border-gray-300">
                        未发布
                      </Badge>
                    </TableCell>
                    <TableCell className="font-medium">0</TableCell>
                    <TableCell className="font-medium">1,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT005">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                      <Button variant="ghost" size="icon" className="hover:bg-pink-50 hover:text-pink-600" asChild>
                        <Link href="/outfits/edit/OFT005">
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="text-sm text-muted-foreground">显示 1-5 共 24 个服装</div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                >
                  上一页
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                >
                  下一页
                </Button>
              </div>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="published" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  已发布服装
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>已正式发布的服装，不可修改基本属性</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader className="bg-gray-50">
                  <TableRow>
                    <TableHead className="w-[100px]">ID</TableHead>
                    <TableHead>服装名称</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>发布日期</TableHead>
                    <TableHead>激活数量</TableHead>
                    <TableHead>印刷数量</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT001</TableCell>
                    <TableCell className="font-medium text-pink-600">经典原创服装</TableCell>
                    <TableCell>常规</TableCell>
                    <TableCell>2023-10-15</TableCell>
                    <TableCell className="font-medium">1,245</TableCell>
                    <TableCell className="font-medium">2,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT001">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT002</TableCell>
                    <TableCell className="font-medium text-blue-600">夏日泳装</TableCell>
                    <TableCell>季节限定</TableCell>
                    <TableCell>2023-06-01</TableCell>
                    <TableCell className="font-medium">876</TableCell>
                    <TableCell className="font-medium">1,500</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT002">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="unpublished" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  未发布服装
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>尚未正式发布的服装，可以修改基本属性</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader className="bg-gray-50">
                  <TableRow>
                    <TableHead className="w-[100px]">ID</TableHead>
                    <TableHead>服装名称</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>印刷数量</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow className="hover:bg-gray-50 transition-colors">
                    <TableCell className="font-medium">OFT005</TableCell>
                    <TableCell className="font-medium text-teal-600">演唱会礼服</TableCell>
                    <TableCell>特别版</TableCell>
                    <TableCell className="font-medium">1,000</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
                        <Link href="/outfits/OFT005">
                          <Eye className="h-4 w-4" />
                        </Link>
                      </Button>
                      <Button variant="ghost" size="icon" className="hover:bg-pink-50 hover:text-pink-600" asChild>
                        <Link href="/outfits/edit/OFT005">
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="limited" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  限定服装
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>限时或特殊活动的限定服装</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-center p-8">
                <div className="flex flex-col items-center text-center">
                  <Sparkles className="h-12 w-12 text-blue-500 mb-4" />
                  <p className="text-lg font-medium text-gray-700">限定服装列表将在这里显示</p>
                  <p className="text-sm text-gray-500 mt-2">您可以查看所有限时或特殊活动的限定服装</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </DashboardShell>
  )
}