"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { AddDanceDialog } from "@/components/dances/add-dance-dialog"
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
import { ArrowLeft, Download, Edit, Play, Upload, FileText, AlertTriangle } from "lucide-react"
import type { Dance } from "@/lib/api/types"

// 模拟获取舞蹈详情的API
const getDanceById = async (id: string): Promise<Dance | null> => {
  // 模拟API延迟
  await new Promise((resolve) => setTimeout(resolve, 500))

  // 模拟舞蹈数据
  const mockDances: Dance[] = [
    {
      id: "1",
      name: "千本樱",
      choreographer: "洛天依工作室",
      duration: "3:45",
      difficulty: "中等",
      videoUrl: "/placeholder.svg?height=300&width=400",
      coverUrl: "/placeholder.svg?height=300&width=400",
      description: "基于《千本樱》歌曲的经典舞蹈编排，动作流畅优美，适合中等水平的舞者。",
      motionFile: "senbonzakura_motion.fbx",
      category: "日式",
      tags: ["经典", "流行", "日式"],
      createdAt: "2023-01-15T08:30:00Z",
      updatedAt: "2023-02-20T14:15:00Z",
      status: "已发布",
      activatedCount: 1245,
      printedCount: 2000,
    },
    {
      id: "2",
      name: "权御天下",
      choreographer: "洛天依动作组",
      duration: "4:20",
      difficulty: "高级",
      videoUrl: "/placeholder.svg?height=300&width=400",
      coverUrl: "/placeholder.svg?height=300&width=400",
      description: "中国风舞蹈，动作幅度大，需要较高的舞蹈基础，展现古风韵味。",
      motionFile: "quanyutianxia_motion.fbx",
      category: "中国风",
      tags: ["高难度", "中国风", "古风"],
      createdAt: "2023-03-10T10:45:00Z",
      updatedAt: "2023-04-05T16:30:00Z",
      status: "已发布",
      activatedCount: 1823,
      printedCount: 3000,
    },
    {
      id: "3",
      name: "达拉崩吧",
      choreographer: "洛天依舞蹈工作室",
      duration: "3:10",
      difficulty: "初级",
      videoUrl: "/placeholder.svg?height=300&width=400",
      coverUrl: "/placeholder.svg?height=300&width=400",
      description: "轻松欢快的舞蹈，适合初学者，动作简单易学。",
      motionFile: "dalabengba_motion.fbx",
      category: "流行",
      tags: ["简单", "欢快", "流行"],
      createdAt: "2023-05-20T09:15:00Z",
      updatedAt: "2023-05-25T11:20:00Z",
      status: "已发布",
      activatedCount: 1356,
      printedCount: 2500,
    },
    {
      id: "4",
      name: "普通DISCO",
      choreographer: "洛天依动作设计组",
      duration: "3:30",
      difficulty: "中等",
      videoUrl: "/placeholder.svg?height=300&width=400",
      coverUrl: "/placeholder.svg?height=300&width=400",
      description: "现代disco风格舞蹈，节奏感强，动作活力四射。",
      motionFile: "disco_motion.fbx",
      category: "现代",
      tags: ["活力", "现代", "disco"],
      createdAt: "2023-06-05T14:30:00Z",
      updatedAt: "2023-06-10T17:45:00Z",
      status: "已发布",
      activatedCount: 1578,
      printedCount: 3000,
    },
    {
      id: "5",
      name: "华灯宴",
      choreographer: "古风舞蹈团队",
      duration: "4:50",
      difficulty: "高级",
      videoUrl: "/placeholder.svg?height=300&width=400",
      coverUrl: "/placeholder.svg?height=300&width=400",
      description: "古风舞蹈，动作优美细腻，需要较高的舞蹈技巧和表现力。",
      motionFile: "hualangyan_motion.fbx",
      category: "中国风",
      tags: ["古风", "优美", "高难度"],
      createdAt: "2023-07-12T11:20:00Z",
      updatedAt: "2023-07-18T13:40:00Z",
      status: "未发布",
      activatedCount: 0,
      printedCount: 2000,
    },
  ]

  const dance = mockDances.find((dance) => dance.id === id)
  return dance || null
}

export default function DanceDetailPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const [dance, setDance] = useState<Dance | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)

  const id = params.id as string

  useEffect(() => {
    const loadDance = async () => {
      setIsLoading(true)
      try {
        const data = await getDanceById(id)
        setDance(data)
      } catch (error) {
        toast({
          title: "加载失败",
          description: "无法加载舞蹈详情，请重试。",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

    loadDance()
  }, [id, toast])

  const handleEditDance = (updatedDance: Dance) => {
    setDance(updatedDance)
    toast({
      title: "更新成功",
      description: `舞蹈 ${updatedDance.name} 已成功更新`,
    })
  }

  const handleDeleteDance = async () => {
    // 模拟删除API
    await new Promise((resolve) => setTimeout(resolve, 500))

    toast({
      title: "删除成功",
      description: `舞蹈 ${dance?.name} 已成功删除`,
      variant: "destructive",
    })

    // 返回舞蹈列表页
    router.push("/dances")
  }

  const togglePlay = () => {
    setIsPlaying(!isPlaying)
  }

  if (isLoading) {
    return (
      <DashboardShell>
        <DashboardHeader heading="舞蹈详情" text="加载中...">
          <Button variant="outline" onClick={() => router.back()}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回
          </Button>
        </DashboardHeader>
        <div className="grid gap-4">
          <Card>
            <CardHeader>
              <CardTitle>
                <div className="h-6 w-[200px] bg-gray-200 rounded animate-pulse"></div>
              </CardTitle>
              <CardDescription>
                <div className="h-4 w-[300px] bg-gray-200 rounded animate-pulse"></div>
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] bg-gray-200 rounded animate-pulse"></div>
            </CardContent>
          </Card>
        </div>
      </DashboardShell>
    )
  }

  if (!dance) {
    return (
      <DashboardShell>
        <div className="flex flex-col items-center justify-center h-[60vh]">
          <AlertTriangle className="h-16 w-16 text-red-500 mb-4" />
          <h1 className="text-2xl font-bold mb-2">舞蹈不存在</h1>
          <p className="text-gray-500 mb-6">找不到ID为 {id} 的舞蹈</p>
          <Button asChild>
            <a href="/dances">
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回舞蹈列表
            </a>
          </Button>
        </div>
      </DashboardShell>
    )
  }

  const isPublished = dance.status === "已发布"

  return (
    <DashboardShell>
      <div className="absolute top-0 right-0 w-1/2 h-48 bg-gradient-to-bl from-purple-200 via-pink-200 to-transparent opacity-20 rounded-bl-full" />

      <div className="flex items-center mb-6">
        <Button variant="ghost" size="sm" className="mr-4" asChild>
          <a href="/dances">
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回列表
          </a>
        </Button>
        <DashboardHeader heading={dance.name} text={`舞蹈ID: ${dance.id}`}>
          <div className="flex space-x-2 ml-auto">
            {!isPublished && (
              <Button
                asChild
                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"
              >
                <a href={`/dances/edit/${params.id}`}>
                  <Edit className="mr-2 h-4 w-4" />
                  编辑舞蹈
                </a>
              </Button>
            )}
            <Button
              variant="outline"
              onClick={() => {
                // 模拟下载动作文件
                toast({
                  title: "开始下载",
                  description: `正在下载舞蹈动作文件`,
                })
              }}
            >
              <Download className="mr-2 h-4 w-4" />
              导出动作文件
            </Button>
          </div>
        </DashboardHeader>
      </div>

      <Tabs defaultValue="details" className="space-y-4">
        <TabsList>
          <TabsTrigger value="details">舞蹈详情</TabsTrigger>
          <TabsTrigger value="batches">批次管理</TabsTrigger>
          <TabsTrigger value="analytics">数据分析</TabsTrigger>
        </TabsList>

        <TabsContent value="details" className="space-y-4">
          <div className="grid gap-6 md:grid-cols-3">
            <Card className="md:col-span-1 border-none shadow-lg bg-white">
              <CardHeader>
                <CardTitle className="text-lg font-bold">舞蹈预览</CardTitle>
              </CardHeader>
              <CardContent className="flex justify-center">
                <div className="relative w-full aspect-square max-w-[300px] rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center group">
                  <img
                    src={dance.coverUrl || "/placeholder.svg?height=300&width=300"}
                    alt={dance.name}
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
                    <Play className="h-16 w-16 text-white" />
                  </div>
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                    <Badge className={`${isPublished ? "bg-green-500" : "bg-gray-500"}`}>{dance.status}</Badge>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="md:col-span-2 border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
              <CardHeader>
                <CardTitle className="text-lg font-bold">舞蹈详情</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">编舞者</p>
                    <p className="font-medium">{dance.choreographer}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">分类</p>
                    <p className="font-medium">{dance.category}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">时长</p>
                    <p className="font-medium">{dance.duration}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">难度</p>
                    <p className="font-medium">{dance.difficulty}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">激活数量</p>
                    <p className="font-medium">{dance.activatedCount}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">印刷总数</p>
                    <p className="font-medium">{dance.printedCount}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">剩余库存</p>
                    <p className="font-medium">{dance.printedCount - dance.activatedCount}</p>
                  </div>
                </div>

                <div className="mt-4">
                  <p className="text-sm font-medium text-gray-500 mb-2">标签</p>
                  <div className="flex flex-wrap gap-2">
                    {dance.tags?.map((tag, index) => (
                      <Badge key={index} variant="outline" className="bg-purple-50 text-purple-700">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>

                {isPublished && (
                  <div className="mt-6 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start">
                    <AlertTriangle className="h-5 w-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
                    <p className="text-sm text-amber-700">该舞蹈已发布，基本属性不可修改。您仍可以增加印刷数量。</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
            <CardHeader>
              <CardTitle className="text-lg font-bold">舞蹈描述</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-700">{dance.description || "暂无描述"}</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="batches" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle className="text-lg font-bold">印刷批次</CardTitle>
                <CardDescription>管理舞蹈卡牌的印刷批次和卡牌ID</CardDescription>
              </div>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700">
                <Upload className="mr-2 h-4 w-4" />
                添加批次
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="w-full">
                  <thead>
                    <tr className="bg-gray-50 border-b">
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">批次ID</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">创建日期</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">数量</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">起始ID</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">结束ID</th>
                      <th className="py-3 px-4 text-right text-sm font-medium text-gray-500">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="py-3 px-4 text-sm font-medium">B001</td>
                      <td className="py-3 px-4 text-sm">2023-04-01</td>
                      <td className="py-3 px-4 text-sm">1000</td>
                      <td className="py-3 px-4 text-sm font-mono text-xs">DNC{dance.id}-0001</td>
                      <td className="py-3 px-4 text-sm font-mono text-xs">DNC{dance.id}-1000</td>
                      <td className="py-3 px-4 text-right">
                        <Button variant="ghost" size="sm" className="h-8 hover:bg-blue-50 hover:text-blue-600">
                          <FileText className="h-4 w-4 mr-1" />
                          导出ID
                        </Button>
                      </td>
                    </tr>
                    {isPublished && (
                      <tr className="border-b hover:bg-gray-50">
                        <td className="py-3 px-4 text-sm font-medium">B002</td>
                        <td className="py-3 px-4 text-sm">2023-08-15</td>
                        <td className="py-3 px-4 text-sm">1000</td>
                        <td className="py-3 px-4 text-sm font-mono text-xs">DNC{dance.id}-1001</td>
                        <td className="py-3 px-4 text-sm font-mono text-xs">DNC{dance.id}-2000</td>
                        <td className="py-3 px-4 text-right">
                          <Button variant="ghost" size="sm" className="h-8 hover:bg-blue-50 hover:text-blue-600">
                            <FileText className="h-4 w-4 mr-1" />
                            导出ID
                          </Button>
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="analytics" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-green-50">
            <CardHeader>
              <CardTitle className="text-lg font-bold">数据分析</CardTitle>
              <CardDescription>查看舞蹈卡牌的激活数据和使用情况</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-6 md:grid-cols-2">
                <div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">激活数据图表</p>
                </div>
                <div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">地区分布图表</p>
                </div>
                <div className="md:col-span-2 h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">时间趋势图表</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 编辑舞蹈对话框 */}
      <AddDanceDialog
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onDanceAdded={handleEditDance}
        editDance={dance}
      />

      {/* 删除确认对话框 */}
      <DeleteConfirmationDialog
        open={isDeleteDialogOpen}
        onOpenChange={setIsDeleteDialogOpen}
        onConfirm={handleDeleteDance}
        title="删除舞蹈"
        description={`确定要删除舞蹈 "${dance.name}" 吗？此操作无法撤销。`}
      />
    </DashboardShell>
  )
}