import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { 
  FolderOpen, 
  FolderPlus, 
  MoreVertical,
  Edit,
  Trash,
  Plus,
  Search,
  TreePine
} from 'lucide-react'
import { toast } from 'sonner'
import { categoryService } from '@/services/categoryService'

export default function Categories() {
  const queryClient = useQueryClient()
  const [search, setSearch] = useState('')

  // 获取分类树
  const { data: categories, isLoading: categoriesLoading } = useQuery({
    queryKey: ['categories-tree'],
    queryFn: categoryService.getCategoryTree
  })

  // 获取分类统计
  const { data: stats, isLoading: statsLoading } = useQuery({
    queryKey: ['category-stats'],
    queryFn: categoryService.getStats
  })

  // 删除分类
  const deleteCategoryMutation = useMutation({
    mutationFn: categoryService.deleteCategory,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
      queryClient.invalidateQueries({ queryKey: ['category-stats'] })
      toast.success('分类删除成功')
    },
    onError: (error: any) => {
      toast.error(error?.message || '删除失败')
    }
  })

  const handleDeleteCategory = (categoryId: number) => {
    if (confirm('确定要删除这个分类吗？')) {
      deleteCategoryMutation.mutate(categoryId)
    }
  }

  const renderCategoryTree = (categories: any[], level = 0) => {
    return categories?.map((category) => (
      <div key={category.id} className="mb-2">
        <div className={`flex items-center justify-between p-3 border rounded-lg ${level > 0 ? 'ml-6 border-l-4 border-l-primary/20' : ''}`}>
          <div className="flex items-center space-x-3">
            <FolderOpen className="h-5 w-5 text-blue-500" />
            <div>
              <div className="flex items-center space-x-2">
                <span className="font-medium">{category.name}</span>
                <Badge variant={category.isActive ? 'default' : 'secondary'}>
                  {category.isActive ? '启用' : '禁用'}
                </Badge>
                <Badge variant="outline">
                  {category.photoCount} 张照片
                </Badge>
              </div>
              {category.description && (
                <p className="text-sm text-muted-foreground mt-1">{category.description}</p>
              )}
            </div>
          </div>
          
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Edit className="h-4 w-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuItem>
                <FolderPlus className="h-4 w-4 mr-2" />
                添加子分类
              </DropdownMenuItem>
              <DropdownMenuItem 
                onClick={() => handleDeleteCategory(category.id)}
                disabled={category.photoCount > 0 || category.children?.length > 0}
              >
                <Trash className="h-4 w-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        
        {category.children && category.children.length > 0 && (
          <div className="mt-2">
            {renderCategoryTree(category.children, level + 1)}
          </div>
        )}
      </div>
    ))
  }

  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面头部 */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold">分类管理</h1>
          <p className="text-muted-foreground mt-1">
            管理照片分类和相册结构
          </p>
        </div>
        <Button className="flex items-center gap-2">
          <Plus className="h-4 w-4" />
          新建分类
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">总分类数</CardTitle>
            <FolderOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {statsLoading ? (
              <Skeleton className="h-8 w-20" />
            ) : (
              <div className="text-2xl font-bold">{stats?.total || 0}</div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">活跃分类</CardTitle>
            <TreePine className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {statsLoading ? (
              <Skeleton className="h-8 w-20" />
            ) : (
              <div className="text-2xl font-bold text-green-600">{stats?.active || 0}</div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">顶级分类</CardTitle>
            <FolderOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {statsLoading ? (
              <Skeleton className="h-8 w-20" />
            ) : (
              <div className="text-2xl font-bold text-blue-600">{stats?.topLevel || 0}</div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">平均照片数</CardTitle>
            <FolderOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {statsLoading ? (
              <Skeleton className="h-8 w-20" />
            ) : (
              <div className="text-2xl font-bold text-purple-600">
                {stats?.total ? Math.round(Object.values(stats.photoCounts || {}).reduce((a, b) => a + b, 0) / stats.total) : 0}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 搜索栏 */}
      <Card className="mb-6">
        <CardContent className="pt-6">
          <div className="flex items-center gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="搜索分类..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="pl-10"
              />
            </div>
            <Button variant="outline">
              <TreePine className="h-4 w-4 mr-2" />
              树形视图
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 分类列表 */}
      <Card>
        <CardHeader>
          <CardTitle>分类结构</CardTitle>
        </CardHeader>
        <CardContent>
          {categoriesLoading ? (
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="flex items-center gap-4 p-4 border rounded-lg">
                  <Skeleton className="h-5 w-5" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-3 w-64" />
                  </div>
                  <Skeleton className="h-8 w-8" />
                </div>
              ))}
            </div>
          ) : categories?.length ? (
            <div className="space-y-2">
              {renderCategoryTree(categories)}
            </div>
          ) : (
            <div className="text-center py-12">
              <FolderOpen className="h-16 w-16 mx-auto mb-4 text-gray-300" />
              <h3 className="text-lg font-medium mb-2">暂无分类</h3>
              <p className="text-muted-foreground mb-4">
                创建您的第一个分类来组织照片
              </p>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                创建分类
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}