"use client"

import { useState, useEffect, useCallback } from "react"
import { 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, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Search, Edit, Video, Eye, Plus, Loader2, Archive } from "lucide-react"
import { AddDanceDialog } from "@/components/dances/add-dance-dialog"
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
import { PublishConfirmationDialog } from "@/components/publish-confirmation-dialog"
import { useToast } from "@/hooks/use-toast"
import { getDances, deleteDance, publishDance, archiveDance } from "@/lib/api/dances"
import { isSuperUser } from "@/lib/api/auth"
import type { Dance } from "@/lib/api/types"

function formatDate(dateStr?: string): string {
  if (!dateStr) return ""
  try {
    return new Date(dateStr).toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  } catch {
    return dateStr
  }
}

export default function DancesPage() {
  const { toast } = useToast()
  const router = useRouter()
  const [dances, setDances] = useState<Dance[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [totalItems, setTotalItems] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [danceToEdit, setDanceToEdit] = useState<Dance | undefined>(undefined)

  const itemsPerPage = 10

  const fetchDances = useCallback(async () => {
    setIsLoading(true)
    try {
      const result = await getDances(currentPage, itemsPerPage, searchTerm)
      if (result.data) {
        setDances(result.data)
        setTotalItems(result.pagination?.totalItems || 0)
      }
    } catch (error) {
      toast({
        title: "加载失败",
        description: "无法获取舞蹈列表",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }, [currentPage, searchTerm, itemsPerPage, toast])

  useEffect(() => {
    fetchDances()
  }, [fetchDances])

  const totalPages = Math.ceil(totalItems / itemsPerPage)

  // 处理添加/编辑舞蹈后刷新列表
  const handleDanceSaved = () => {
    setDanceToEdit(undefined)
    setIsAddDialogOpen(false)
    fetchDances()
    toast({
      title: "保存成功",
      description: "舞蹈数据已更新",
    })
  }

  // 处理删除舞蹈
  const handleDeleteDance = async (danceId: string, danceName: string) => {
    try {
      await deleteDance(danceId)
      await fetchDances()
      toast({
        title: "删除成功",
        description: `舞蹈 ${danceName} 已成功删除`,
        variant: "destructive",
      })
    } catch (error) {
      toast({
        title: "删除失败",
        description: "无法删除该舞蹈",
        variant: "destructive",
      })
    }
  }

  // 发布舞蹈
  const handlePublishDance = async (danceId: string, danceName: string) => {
    try {
      await publishDance(danceId)
      await fetchDances()
      toast({
        title: "发布成功",
        description: `舞蹈 "${danceName}" 已成功发布`,
      })
    } catch (error) {
      toast({
        title: "发布失败",
        description: "无法发布舞蹈，请稍后重试",
        variant: "destructive",
      })
    }
  }

  // 归档舞蹈
  const handleArchiveDance = async (danceId: string, danceName: string) => {
    try {
      await archiveDance(danceId)
      await fetchDances()
      toast({
        title: "归档成功",
        description: `舞蹈 "${danceName}" 已归档`,
      })
    } catch (error) {
      toast({
        title: "归档失败",
        description: "无法归档舞蹈，请稍后重试",
        variant: "destructive",
      })
    }
  }

  // 打开编辑对话框
  const openEditDialog = (dance: Dance) => {
    setDanceToEdit(dance)
    setIsAddDialogOpen(true)
  }

  // 查看舞蹈详情
  const viewDanceDetails = (dance: Dance) => {
    router.push(`/dances/${dance.id}`)
  }

  return (
    <DashboardShell>
      <DashboardHeader heading="舞蹈管理" text="管理洛天依的舞蹈库">
        <Button
          onClick={() => {
            setDanceToEdit(undefined)
            setIsAddDialogOpen(true)
          }}
          className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
        >
          <Plus className="mr-2 h-4 w-4" />
          添加舞蹈
        </Button>
      </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-purple-500"
              value={searchTerm}
              onChange={(e) => {
                setSearchTerm(e.target.value)
                setCurrentPage(1)
              }}
            />
          </div>
        </div>
      </div>

      <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>
          {isLoading ? (
            <div className="flex items-center justify-center h-48">
              <Loader2 className="h-8 w-8 animate-spin text-purple-500" />
            </div>
          ) : (
            <Table>
              <TableHeader className="bg-gray-50">
                <TableRow>
                  <TableHead className="w-[50px]"></TableHead>
                  <TableHead className="w-[80px]">ID</TableHead>
                  <TableHead>舞蹈名称</TableHead>
                  <TableHead>编舞者</TableHead>
                  <TableHead>难度</TableHead>
                  <TableHead>分类</TableHead>
                  <TableHead>时长</TableHead>
                  <TableHead>发布日期</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {dances.map((dance) => (
                  <TableRow key={dance.id} className="hover:bg-gray-50 transition-colors">
                    <TableCell>
                      <div className="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                        <Video className="h-4 w-4" />
                      </div>
                    </TableCell>
                    <TableCell className="font-medium">{dance.id}</TableCell>
                    <TableCell className="font-medium text-purple-600">{dance.name}</TableCell>
                    <TableCell>{dance.choreographer || "未知"}</TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={
                          dance.difficulty === "初级"
                            ? "bg-green-100 text-green-800"
                            : dance.difficulty === "中等" || dance.difficulty === "中级"
                              ? "bg-blue-100 text-blue-800"
                              : dance.difficulty === "中高级"
                                ? "bg-yellow-100 text-yellow-800"
                                : dance.difficulty === "高级"
                                  ? "bg-orange-100 text-orange-800"
                                  : dance.difficulty === "专业"
                                    ? "bg-red-100 text-red-800"
                                    : "bg-gray-100 text-gray-800"
                        }
                      >
                        {dance.difficulty || "未知"}
                      </Badge>
                    </TableCell>
                    <TableCell>{dance.category || "未分类"}</TableCell>
                    <TableCell>{dance.duration || "未知"}</TableCell>
                    <TableCell>{formatDate(dance.publishedAt) || "-"}</TableCell>
                    <TableCell>
                      <Badge
                        className={
                          dance.status === "已发布"
                            ? "bg-green-500 hover:bg-green-600"
                            : dance.status === "已归档"
                              ? "bg-orange-500 hover:bg-orange-600"
                              : "bg-gray-500 hover:bg-gray-600"
                        }
                      >
                        {dance.status || "草稿"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="hover:bg-purple-50 hover:text-purple-600"
                          onClick={() => viewDanceDetails(dance)}
                        >
                          <Eye className="h-4 w-4" />
                          <span className="sr-only">查看详情</span>
                        </Button>

                        {/* 草稿状态：显示发布按钮 */}
                        {dance.status === "草稿" && (
                          <PublishConfirmationDialog
                            title="发布舞蹈"
                            description="发布后该舞蹈将对手机端可见"
                            itemName={dance.name}
                            onPublish={() => handlePublishDance(dance.id, dance.name)}
                          />
                        )}

                        {/* 已发布状态：显示归档按钮 */}
                        {dance.status === "已发布" && (
                          <Button
                            variant="ghost"
                            size="icon"
                            className="hover:bg-orange-50 hover:text-orange-600"
                            title="归档"
                            onClick={() => handleArchiveDance(dance.id, dance.name)}
                          >
                            <Archive className="h-4 w-4" />
                          </Button>
                        )}

                        {(dance.status !== "已发布" || isSuperUser()) && (
                          <>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="hover:bg-purple-50 hover:text-purple-600"
                              onClick={() => openEditDialog(dance)}
                            >
                              <Edit className="h-4 w-4" />
                              <span className="sr-only">编辑</span>
                            </Button>

                            <DeleteConfirmationDialog
                              title="删除舞蹈"
                              description="此操作将永久删除该舞蹈及其所有相关数据。"
                              itemName={dance.name}
                              onDelete={() => handleDeleteDance(dance.id, dance.name)}
                            />
                          </>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}

                {dances.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={10} className="h-24 text-center">
                      没有找到匹配的舞蹈
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <div className="text-sm text-muted-foreground">
            显示 {dances.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0}-
            {Math.min(currentPage * itemsPerPage, totalItems)} 共 {totalItems} 个舞蹈
          </div>
          <div className="flex items-center space-x-2">
            <Button
              variant="outline"
              size="sm"
              className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
            >
              上一页
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages || totalPages === 0}
            >
              下一页
            </Button>
          </div>
        </CardFooter>
      </Card>

      {/* 添加/编辑舞蹈对话框 */}
      <AddDanceDialog
        open={isAddDialogOpen}
        onOpenChange={setIsAddDialogOpen}
        onDanceAdded={handleDanceSaved}
        editDance={danceToEdit}
      />

    </DashboardShell>
  )
}