"use client"

import { useState, useEffect } from "react"
import { DashboardHeader } from "@/components/dashboard-header"
import { DashboardShell } from "@/components/dashboard-shell"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  Award,
  Search,
  MoreHorizontal,
  Edit,
  Trash2,
  Trophy,
  Filter,
  ArrowUpDown,
  Zap,
  Heart,
  Coins,
  Gift,
  Shirt,
  BadgeCheck,
} from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import { AddAchievementDialog } from "@/components/achievements/add-achievement-dialog"
import { AchievementDetailDialog } from "@/components/achievements/achievement-detail-dialog"
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
import type { Achievement } from "@/lib/api/types"

export default function AchievementsPage() {
  const [achievements, setAchievements] = useState<Achievement[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState("all")

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

  const fetchAchievements = async () => {
    setLoading(true)
    try {
      // 模拟API调用
      await new Promise((resolve) => setTimeout(resolve, 1000))

      // 这里应该是实际的API调用
      // const response = await fetch('/api/achievements')
      // const data = await response.json()

      // 使用模拟数据
      const mockData = [
        {
          id: "1",
          name: "初次见面",
          description: "第一次与洛天依对话",
          icon: "message-circle",
          category: "互动",
          requirement: "与洛天依进行第一次对话",
          rewardType: "经验值",
          rewardAmount: 100,
          rewardIcon: "zap",
          isHidden: false,
          unlockRate: 98.5,
          createdAt: "2023-01-01",
          updatedAt: "2023-01-01",
        },
        {
          id: "2",
          name: "亲密无间",
          description: "与洛天依好感度达到80",
          icon: "heart",
          category: "好感度",
          requirement: "将洛天依的好感度提升至80",
          rewardType: "虚拟币",
          rewardAmount: 500,
          rewardIcon: "coins",
          isHidden: false,
          unlockRate: 45.2,
          createdAt: "2023-01-02",
          updatedAt: "2023-01-02",
        },
        {
          id: "3",
          name: "形影不离",
          description: "与洛天依好感度达到100",
          icon: "heart-handshake",
          category: "好感度",
          requirement: "将洛天依的好感度提升至100",
          rewardType: "称号",
          rewardAmount: 1,
          rewardIcon: "badge",
          isHidden: false,
          unlockRate: 12.8,
          createdAt: "2023-01-03",
          updatedAt: "2023-01-03",
        },
        {
          id: "4",
          name: "热情如火",
          description: "与洛天依单日互动达到50次",
          icon: "flame",
          category: "互动",
          requirement: "在一天内与洛天依互动50次",
          rewardType: "好感度",
          rewardAmount: 20,
          rewardIcon: "heart",
          isHidden: false,
          unlockRate: 23.7,
          createdAt: "2023-01-04",
          updatedAt: "2023-01-04",
        },
        {
          id: "5",
          name: "坚持不懈",
          description: "连续7天与洛天依互动",
          icon: "calendar-check",
          category: "互动",
          requirement: "连续7天每天至少与洛天依互动1次",
          rewardType: "道具",
          rewardAmount: 1,
          rewardIcon: "gift",
          isHidden: false,
          unlockRate: 34.1,
          createdAt: "2023-01-05",
          updatedAt: "2023-01-05",
        },
        {
          id: "6",
          name: "时尚达人",
          description: "收集10套服装",
          icon: "shirt",
          category: "收集",
          requirement: "收集10套不同的服装",
          rewardType: "服装",
          rewardAmount: 1,
          rewardIcon: "shirt",
          isHidden: false,
          unlockRate: 56.3,
          createdAt: "2023-01-06",
          updatedAt: "2023-01-06",
        },
        {
          id: "7",
          name: "音乐鉴赏家",
          description: "收听20首不同的歌曲",
          icon: "music",
          category: "收集",
          requirement: "收听20首不同的歌曲",
          rewardType: "虚拟币",
          rewardAmount: 300,
          rewardIcon: "coins",
          isHidden: false,
          unlockRate: 42.9,
          createdAt: "2023-01-07",
          updatedAt: "2023-01-07",
        },
        {
          id: "8",
          name: "舞动青春",
          description: "观看10支不同的舞蹈",
          icon: "footprints",
          category: "收集",
          requirement: "观看10支不同的舞蹈表演",
          rewardType: "经验值",
          rewardAmount: 200,
          rewardIcon: "zap",
          isHidden: false,
          unlockRate: 38.5,
          createdAt: "2023-01-08",
          updatedAt: "2023-01-08",
        },
        {
          id: "9",
          name: "美食家",
          description: "收集15种不同的食物",
          icon: "utensils",
          category: "收集",
          requirement: "收集15种不同的食物",
          rewardType: "道具",
          rewardAmount: 1,
          rewardIcon: "gift",
          isHidden: false,
          unlockRate: 27.4,
          createdAt: "2023-01-09",
          updatedAt: "2023-01-09",
        },
        {
          id: "10",
          name: "隐藏的秘密",
          description: "发现洛天依的秘密",
          icon: "sparkles",
          category: "隐藏",
          requirement: "???",
          rewardType: "称号",
          rewardAmount: 1,
          rewardIcon: "badge",
          isHidden: true,
          unlockRate: 5.2,
          createdAt: "2023-01-10",
          updatedAt: "2023-01-10",
        },
      ]

      setAchievements(mockData)
    } catch (error) {
      console.error("获取成就列表失败:", error)
      toast({
        title: "获取失败",
        description: "获取成就列表时发生错误",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

  const handleDeleteAchievement = async (id: string) => {
    try {
      // 模拟API调用
      await new Promise((resolve) => setTimeout(resolve, 1000))

      // 更新本地状态
      setAchievements((prev) => prev.filter((achievement) => achievement.id !== id))

      toast({
        title: "删除成功",
        description: "成就已成功删除",
      })
    } catch (error) {
      toast({
        title: "删除失败",
        description: "删除成就时发生错误",
        variant: "destructive",
      })
    }
  }

  const getCategoryColor = (category: string) => {
    switch (category) {
      case "互动":
        return "bg-blue-500"
      case "好感度":
        return "bg-pink-500"
      case "收集":
        return "bg-purple-500"
      case "探索":
        return "bg-green-500"
      case "特殊":
        return "bg-amber-500"
      case "隐藏":
        return "bg-gray-500"
      default:
        return "bg-gray-500"
    }
  }

  const getRewardIcon = (rewardType: string) => {
    switch (rewardType) {
      case "经验值":
        return <Zap className="h-4 w-4 text-blue-500" />
      case "好感度":
        return <Heart className="h-4 w-4 text-pink-500" />
      case "虚拟币":
        return <Coins className="h-4 w-4 text-amber-500" />
      case "道具":
        return <Gift className="h-4 w-4 text-purple-500" />
      case "服装":
        return <Shirt className="h-4 w-4 text-teal-500" />
      case "称号":
        return <BadgeCheck className="h-4 w-4 text-indigo-500" />
      default:
        return <Gift className="h-4 w-4 text-gray-500" />
    }
  }

  // 过滤成就
  const filteredAchievements = achievements.filter((achievement) => {
    // 搜索过滤
    const matchesSearch =
      searchQuery === "" ||
      achievement.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      achievement.description.toLowerCase().includes(searchQuery.toLowerCase())

    // 标签过滤
    const matchesTab =
      activeTab === "all" || (activeTab === "hidden" && achievement.isHidden) || achievement.category === activeTab

    return matchesSearch && matchesTab
  })

  return (
    <DashboardShell>
      <DashboardHeader heading="成就管理" text="创建和管理系统成就">
        <AddAchievementDialog onAchievementAdded={fetchAchievements} />
      </DashboardHeader>

      <Card>
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4 mb-6">
            <div className="relative flex-1">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                placeholder="搜索成就..."
                className="pl-8"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" className="flex gap-1">
                    <Filter className="h-4 w-4" />
                    <span>筛选</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={() => setActiveTab("all")}>全部成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("互动")}>互动成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("好感度")}>好感度成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("收集")}>收集成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("探索")}>探索成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("特殊")}>特殊成就</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("hidden")}>隐藏成就</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" className="flex gap-1">
                    <ArrowUpDown className="h-4 w-4" />
                    <span>排序</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>按名称排序</DropdownMenuItem>
                  <DropdownMenuItem>按解锁率排序</DropdownMenuItem>
                  <DropdownMenuItem>按创建日期排序</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>

          <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="mb-4">
              <TabsTrigger value="all">全部</TabsTrigger>
              <TabsTrigger value="互动">互动</TabsTrigger>
              <TabsTrigger value="好感度">好感度</TabsTrigger>
              <TabsTrigger value="收集">收集</TabsTrigger>
              <TabsTrigger value="探索">探索</TabsTrigger>
              <TabsTrigger value="特殊">特殊</TabsTrigger>
              <TabsTrigger value="hidden">隐藏</TabsTrigger>
            </TabsList>

            <TabsContent value={activeTab} className="mt-0">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {loading ? (
                  // 加载状态
                  Array(6)
                    .fill(null)
                    .map((_, i) => (
                      <Card key={i} className="p-4 space-y-3 animate-pulse">
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 rounded-full bg-gray-200"></div>
                          <div className="space-y-1 flex-1">
                            <div className="h-4 w-3/4 bg-gray-200 rounded"></div>
                            <div className="h-3 w-1/2 bg-gray-200 rounded"></div>
                          </div>
                        </div>
                        <div className="h-16 w-full bg-gray-200 rounded"></div>
                        <div className="flex justify-between">
                          <div className="h-8 w-20 bg-gray-200 rounded"></div>
                          <div className="h-8 w-20 bg-gray-200 rounded"></div>
                        </div>
                      </Card>
                    ))
                ) : filteredAchievements.length > 0 ? (
                  filteredAchievements.map((achievement) => (
                    <Card
                      key={achievement.id}
                      className="overflow-hidden border-none shadow-md hover:shadow-lg transition-all"
                    >
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center gap-2">
                            <div className="h-10 w-10 rounded-full bg-amber-100 flex items-center justify-center">
                              <Trophy className="h-5 w-5 text-amber-500" />
                            </div>
                            <div>
                              <h3 className="font-medium">{achievement.name}</h3>
                              <div className="flex items-center gap-1 mt-0.5">
                                <Badge className={getCategoryColor(achievement.category)}>{achievement.category}</Badge>
                                {achievement.isHidden && <Badge className="bg-gray-500">隐藏</Badge>}
                              </div>
                            </div>
                          </div>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem>
                                <Edit className="mr-2 h-4 w-4" />
                                编辑
                              </DropdownMenuItem>
                              <DropdownMenuItem>
                                <DeleteConfirmationDialog
                                  title="删除成就"
                                  description={`确定要删除成就 "${achievement.name}" 吗？此操作不可撤销。`}
                                  onConfirm={() => handleDeleteAchievement(achievement.id)}
                                  trigger={
                                    <div className="flex items-center text-red-500">
                                      <Trash2 className="mr-2 h-4 w-4" />
                                      删除
                                    </div>
                                  }
                                />
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>

                        <p className="text-sm text-gray-600 mb-3">{achievement.description}</p>

                        <div className="mb-3">
                          <div className="flex justify-between text-xs text-gray-500 mb-1">
                            <span>解锁率</span>
                            <span>{achievement.unlockRate}%</span>
                          </div>
                          <Progress value={achievement.unlockRate} className="h-2" />
                        </div>

                        <div className="flex justify-between items-center">
                          <div className="flex items-center gap-1 text-sm">
                            <span>奖励:</span>
                            <div className="flex items-center gap-1">
                              {getRewardIcon(achievement.rewardType)}
                              <span>
                                {achievement.rewardAmount} {achievement.rewardType}
                              </span>
                            </div>
                          </div>
                          <AchievementDetailDialog achievement={achievement} onEdit={() => {}} />
                        </div>
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <div className="col-span-full flex flex-col items-center justify-center py-8 text-center">
                    <Award className="h-12 w-12 text-gray-300 mb-2" />
                    <h3 className="text-lg font-medium">未找到成就</h3>
                    <p className="text-gray-500">没有符合当前筛选条件的成就</p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </DashboardShell>
  )
}