'use client';

import { useState, useMemo } from 'react';
import { toast } from 'sonner';
import {
  Plus,
  Search,
  Pencil,
  Trash2,
  Send,
  CheckCircle,
  XCircle,
  MoreHorizontal,
} from 'lucide-react';
import {
  useArticles,
  useCreateArticle,
  useUpdateArticle,
  useDeleteArticle,
  usePublishArticle,
  useSubmitForReview,
  useCategories,
  useCategoryTree,
  useCreateCategory,
  useUpdateCategory,
  useDeleteCategory,
  useTags,
  useCreateTag,
  useUpdateTag,
  useDeleteTag,
  useComments,
  useApproveComment,
  useRejectComment,
  useDeleteComment,
} from '@/hooks/use-content';
import type {
  Article,
  Category,
  Tag,
  Comment,
  CreateArticleRequest,
  UpdateArticleRequest,
  CreateCategoryRequest,
  UpdateCategoryRequest,
  CreateTagRequest,
  UpdateTagRequest,
} from '@/lib/content-api';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

const ARTICLE_STATUS_OPTIONS = [
  { label: '全部', value: 'ALL' },
  { label: '草稿', value: 'draft' },
  { label: '待审核', value: 'pending' },
  { label: '已发布', value: 'published' },
  { label: '已拒绝', value: 'rejected' },
];

const ARTICLE_STATUS_LABEL: Record<string, string> = {
  draft: '草稿',
  pending: '待审核',
  published: '已发布',
  rejected: '已拒绝',
};

const ARTICLE_STATUS_CLASS: Record<string, string> = {
  draft: 'bg-gray-100 text-gray-800 hover:bg-gray-100 border-gray-200',
  pending: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100 border-yellow-200',
  published: 'bg-green-100 text-green-800 hover:bg-green-100 border-green-200',
  rejected: 'bg-red-100 text-red-800 hover:bg-red-100 border-red-200',
};

const COMMENT_STATUS_LABEL: Record<string, string> = {
  pending: '待审核',
  approved: '已通过',
  rejected: '已拒绝',
};

const COMMENT_STATUS_CLASS: Record<string, string> = {
  pending: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100 border-yellow-200',
  approved: 'bg-green-100 text-green-800 hover:bg-green-100 border-green-200',
  rejected: 'bg-red-100 text-red-800 hover:bg-red-100 border-red-200',
};

function buildCategoryTree(categories: Category[]): (Category & { children: Category[] })[] {
  const map = new Map<string, Category & { children: Category[] }>();
  const roots: (Category & { children: Category[] })[] = [];
  categories.forEach((cat) => map.set(cat.id, { ...cat, children: [] }));
  categories.forEach((cat) => {
    const node = map.get(cat.id)!;
    if (cat.parentId && map.has(cat.parentId)) {
      map.get(cat.parentId)!.children.push(node);
    } else {
      roots.push(node);
    }
  });
  return roots;
}

function flattenCategoryTree(
  nodes: (Category & { children: Category[] })[],
  depth = 0
): { category: Category; depth: number }[] {
  const result: { category: Category; depth: number }[] = [];
  nodes.forEach((node) => {
    result.push({ category: node, depth });
    if (node.children.length > 0) {
      result.push(...flattenCategoryTree(node.children as (Category & { children: Category[] })[], depth + 1));
    }
  });
  return result;
}

function ArticleTab() {
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState<string>('ALL');
  const [searchKeyword, setSearchKeyword] = useState('');
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
  const [formTitle, setFormTitle] = useState('');
  const [formContent, setFormContent] = useState('');
  const [formCategoryId, setFormCategoryId] = useState('');
  const [formTags, setFormTags] = useState<string[]>([]);

  const filterStatus = statusFilter === 'ALL' ? undefined : statusFilter;
  const { data: articlesData, isLoading } = useArticles({
    page,
    limit: 20,
    status: filterStatus,
    keyword: searchKeyword || undefined,
  });
  const { data: categoriesData } = useCategories();
  const { data: tagsData } = useTags();
  const createArticle = useCreateArticle();
  const updateArticle = useUpdateArticle();
  const deleteArticle = useDeleteArticle();
  const publishArticle = usePublishArticle();
  const submitForReview = useSubmitForReview();

  const articles = (articlesData as any)?.data?.articles || [];
  const categories = (categoriesData as any)?.data || [];
  const tags = (tagsData as any)?.data?.tags || [];

  const resetForm = () => {
    setFormTitle('');
    setFormContent('');
    setFormCategoryId('');
    setFormTags([]);
  };

  const openCreateDialog = () => {
    resetForm();
    setCreateDialogOpen(true);
  };

  const openEditDialog = (article: Article) => {
    setSelectedArticle(article);
    setFormTitle(article.title);
    setFormContent(article.content);
    setFormCategoryId(article.categoryId || '');
    setFormTags(article.tags || []);
    setEditDialogOpen(true);
  };

  const openDeleteDialog = (article: Article) => {
    setSelectedArticle(article);
    setDeleteDialogOpen(true);
  };

  const handleCreate = async () => {
    try {
      const data: CreateArticleRequest = {
        title: formTitle,
        slug: formTitle.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\u4e00-\u9fa5-]/g, ''),
        content: formContent,
        categoryId: formCategoryId || undefined,
        tags: formTags.length > 0 ? formTags : undefined,
      };
      await createArticle.mutateAsync(data);
      toast.success('文章创建成功');
      setCreateDialogOpen(false);
      resetForm();
    } catch {
      toast.error('创建文章失败');
    }
  };

  const handleUpdate = async () => {
    if (!selectedArticle) return;
    try {
      const data: UpdateArticleRequest = {
        title: formTitle,
        content: formContent,
        categoryId: formCategoryId || undefined,
        tags: formTags.length > 0 ? formTags : undefined,
      };
      await updateArticle.mutateAsync({ id: selectedArticle.id, data });
      toast.success('文章更新成功');
      setEditDialogOpen(false);
      resetForm();
    } catch {
      toast.error('更新文章失败');
    }
  };

  const handleDelete = async () => {
    if (!selectedArticle) return;
    try {
      await deleteArticle.mutateAsync(selectedArticle.id);
      toast.success('文章删除成功');
      setDeleteDialogOpen(false);
      setSelectedArticle(null);
    } catch {
      toast.error('删除文章失败');
    }
  };

  const handlePublish = async (article: Article) => {
    try {
      await publishArticle.mutateAsync(article.id);
      toast.success('文章已发布');
    } catch {
      toast.error('发布失败');
    }
  };

  const handleSubmitForReview = async (article: Article) => {
    try {
      await submitForReview.mutateAsync(article.id);
      toast.success('已提交审核');
    } catch {
      toast.error('提交审核失败');
    }
  };

  const toggleTag = (tagName: string) => {
    setFormTags((prev) =>
      prev.includes(tagName) ? prev.filter((t) => t !== tagName) : [...prev, tagName]
    );
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="搜索文章标题..."
              value={searchKeyword}
              onChange={(e) => {
                setSearchKeyword(e.target.value);
                setPage(1);
              }}
              className="pl-9"
            />
          </div>
          <Select value={statusFilter} onValueChange={(v) => { setStatusFilter(v); setPage(1); }}>
            <SelectTrigger className="w-[140px]">
              <SelectValue placeholder="全部状态" />
            </SelectTrigger>
            <SelectContent>
              {ARTICLE_STATUS_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button onClick={openCreateDialog}>
          <Plus className="mr-2 h-4 w-4" />
          新建文章
        </Button>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-12 w-full" />
          ))}
        </div>
      ) : articles.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">暂无文章</div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>标题</TableHead>
                <TableHead>分类</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>作者</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {articles.map((article: Article) => (
                <TableRow key={article.id}>
                  <TableCell className="font-medium max-w-[200px] truncate">
                    {article.title}
                  </TableCell>
                  <TableCell>
                    {categories.find((c: Category) => c.id === article.categoryId)?.name || '-'}
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant="outline"
                      className={ARTICLE_STATUS_CLASS[article.status] || ''}
                    >
                      {ARTICLE_STATUS_LABEL[article.status] || article.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-muted-foreground">{article.authorId}</TableCell>
                  <TableCell className="text-muted-foreground">
                    {new Date(article.createdAt).toLocaleString('zh-CN')}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => openEditDialog(article)}>
                          <Pencil className="mr-2 h-4 w-4" />
                          编辑
                        </DropdownMenuItem>
                        {article.status === 'draft' && (
                          <DropdownMenuItem onClick={() => handleSubmitForReview(article)}>
                            <Send className="mr-2 h-4 w-4" />
                            提交审核
                          </DropdownMenuItem>
                        )}
                        {article.status === 'pending' && (
                          <DropdownMenuItem onClick={() => handlePublish(article)}>
                            <CheckCircle className="mr-2 h-4 w-4" />
                            发布
                          </DropdownMenuItem>
                        )}
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          onClick={() => openDeleteDialog(article)}
                          className="text-destructive"
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>新建文章</DialogTitle>
            <DialogDescription>填写文章信息以创建新文章</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>标题</Label>
              <Input value={formTitle} onChange={(e) => setFormTitle(e.target.value)} placeholder="请输入文章标题" />
            </div>
            <div className="space-y-2">
              <Label>内容</Label>
              <Textarea value={formContent} onChange={(e) => setFormContent(e.target.value)} placeholder="请输入文章内容" rows={8} />
            </div>
            <div className="space-y-2">
              <Label>分类</Label>
              <Select value={formCategoryId} onValueChange={setFormCategoryId}>
                <SelectTrigger>
                  <SelectValue placeholder="选择分类" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((cat: Category) => (
                    <SelectItem key={cat.id} value={cat.id}>
                      {cat.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>标签</Label>
              <div className="flex flex-wrap gap-3">
                {tags.map((tag: Tag) => (
                  <div key={tag.id} className="flex items-center gap-2">
                    <Checkbox
                      id={`tag-create-${tag.id}`}
                      checked={formTags.includes(tag.name)}
                      onCheckedChange={() => toggleTag(tag.name)}
                    />
                    <Label htmlFor={`tag-create-${tag.id}`} className="cursor-pointer">
                      {tag.name}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>取消</Button>
            <Button onClick={handleCreate} disabled={createArticle.isPending}>
              {createArticle.isPending ? '创建中...' : '创建'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>编辑文章</DialogTitle>
            <DialogDescription>修改文章信息</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>标题</Label>
              <Input value={formTitle} onChange={(e) => setFormTitle(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>内容</Label>
              <Textarea value={formContent} onChange={(e) => setFormContent(e.target.value)} rows={8} />
            </div>
            <div className="space-y-2">
              <Label>分类</Label>
              <Select value={formCategoryId} onValueChange={setFormCategoryId}>
                <SelectTrigger>
                  <SelectValue placeholder="选择分类" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((cat: Category) => (
                    <SelectItem key={cat.id} value={cat.id}>
                      {cat.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>标签</Label>
              <div className="flex flex-wrap gap-3">
                {tags.map((tag: Tag) => (
                  <div key={tag.id} className="flex items-center gap-2">
                    <Checkbox
                      id={`tag-edit-${tag.id}`}
                      checked={formTags.includes(tag.name)}
                      onCheckedChange={() => toggleTag(tag.name)}
                    />
                    <Label htmlFor={`tag-edit-${tag.id}`} className="cursor-pointer">
                      {tag.name}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>取消</Button>
            <Button onClick={handleUpdate} disabled={updateArticle.isPending}>
              {updateArticle.isPending ? '保存中...' : '保存'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>删除文章</DialogTitle>
            <DialogDescription>
              确定要删除文章「{selectedArticle?.title}」吗？此操作不可撤销。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>取消</Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteArticle.isPending}>
              {deleteArticle.isPending ? '删除中...' : '确认删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function CategoryTab() {
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
  const [formName, setFormName] = useState('');
  const [formSlug, setFormSlug] = useState('');
  const [formDescription, setFormDescription] = useState('');
  const [formParentId, setFormParentId] = useState('');

  const { data: categoriesData, isLoading } = useCategories();
  const { data: treeData } = useCategoryTree();
  const createCategory = useCreateCategory();
  const updateCategory = useUpdateCategory();
  const deleteCategory = useDeleteCategory();

  const categories = (categoriesData as any)?.data || [];
  const tree = (treeData as any)?.data || [];

  const flatTree = useMemo(() => {
    const source = tree.length > 0 ? tree : categories;
    const built = buildCategoryTree(source as Category[]);
    return flattenCategoryTree(built);
  }, [tree, categories]);

  const resetForm = () => {
    setFormName('');
    setFormSlug('');
    setFormDescription('');
    setFormParentId('');
  };

  const openCreateDialog = () => {
    resetForm();
    setCreateDialogOpen(true);
  };

  const openEditDialog = (cat: Category) => {
    setSelectedCategory(cat);
    setFormName(cat.name);
    setFormSlug(cat.slug);
    setFormDescription(cat.description || '');
    setFormParentId(cat.parentId || '');
    setEditDialogOpen(true);
  };

  const openDeleteDialog = (cat: Category) => {
    setSelectedCategory(cat);
    setDeleteDialogOpen(true);
  };

  const handleCreate = async () => {
    try {
      const data: CreateCategoryRequest = {
        name: formName,
        slug: formSlug,
        description: formDescription || undefined,
        parentId: formParentId || undefined,
      };
      await createCategory.mutateAsync(data);
      toast.success('分类创建成功');
      setCreateDialogOpen(false);
      resetForm();
    } catch {
      toast.error('创建分类失败');
    }
  };

  const handleUpdate = async () => {
    if (!selectedCategory) return;
    try {
      const data: UpdateCategoryRequest = {
        name: formName,
        slug: formSlug,
        description: formDescription || undefined,
        parentId: formParentId || undefined,
      };
      await updateCategory.mutateAsync({ id: selectedCategory.id, data });
      toast.success('分类更新成功');
      setEditDialogOpen(false);
      resetForm();
    } catch {
      toast.error('更新分类失败');
    }
  };

  const handleDelete = async () => {
    if (!selectedCategory) return;
    try {
      await deleteCategory.mutateAsync(selectedCategory.id);
      toast.success('分类删除成功');
      setDeleteDialogOpen(false);
      setSelectedCategory(null);
    } catch {
      toast.error('删除分类失败');
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">分类列表</h2>
        <Button onClick={openCreateDialog}>
          <Plus className="mr-2 h-4 w-4" />
          新建分类
        </Button>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-full" />
          ))}
        </div>
      ) : flatTree.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">暂无分类</div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>分类名称</TableHead>
                <TableHead>Slug</TableHead>
                <TableHead>描述</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {flatTree.map(({ category, depth }) => (
                <TableRow key={category.id}>
                  <TableCell className="font-medium" style={{ paddingLeft: `${(depth + 1) * 24}px` }}>
                    {depth > 0 && <span className="text-muted-foreground mr-1">└</span>}
                    {category.name}
                  </TableCell>
                  <TableCell className="text-muted-foreground">{category.slug}</TableCell>
                  <TableCell className="text-muted-foreground max-w-[200px] truncate">
                    {category.description || '-'}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => openEditDialog(category)}>
                          <Pencil className="mr-2 h-4 w-4" />
                          编辑
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          onClick={() => openDeleteDialog(category)}
                          className="text-destructive"
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新建分类</DialogTitle>
            <DialogDescription>填写分类信息</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>名称</Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="请输入分类名称" />
            </div>
            <div className="space-y-2">
              <Label>Slug</Label>
              <Input value={formSlug} onChange={(e) => setFormSlug(e.target.value)} placeholder="请输入 Slug" />
            </div>
            <div className="space-y-2">
              <Label>描述</Label>
              <Textarea value={formDescription} onChange={(e) => setFormDescription(e.target.value)} placeholder="请输入分类描述" />
            </div>
            <div className="space-y-2">
              <Label>父级分类</Label>
              <Select value={formParentId} onValueChange={setFormParentId}>
                <SelectTrigger>
                  <SelectValue placeholder="无父级分类" />
                </SelectTrigger>
                <SelectContent>
                  {categories
                    .filter((c: Category) => c.id !== selectedCategory?.id)
                    .map((cat: Category) => (
                      <SelectItem key={cat.id} value={cat.id}>
                        {cat.name}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>取消</Button>
            <Button onClick={handleCreate} disabled={createCategory.isPending}>
              {createCategory.isPending ? '创建中...' : '创建'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>编辑分类</DialogTitle>
            <DialogDescription>修改分类信息</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>名称</Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>Slug</Label>
              <Input value={formSlug} onChange={(e) => setFormSlug(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>描述</Label>
              <Textarea value={formDescription} onChange={(e) => setFormDescription(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>父级分类</Label>
              <Select value={formParentId} onValueChange={setFormParentId}>
                <SelectTrigger>
                  <SelectValue placeholder="无父级分类" />
                </SelectTrigger>
                <SelectContent>
                  {categories
                    .filter((c: Category) => c.id !== selectedCategory?.id)
                    .map((cat: Category) => (
                      <SelectItem key={cat.id} value={cat.id}>
                        {cat.name}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>取消</Button>
            <Button onClick={handleUpdate} disabled={updateCategory.isPending}>
              {updateCategory.isPending ? '保存中...' : '保存'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>删除分类</DialogTitle>
            <DialogDescription>
              确定要删除分类「{selectedCategory?.name}」吗？此操作不可撤销。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>取消</Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteCategory.isPending}>
              {deleteCategory.isPending ? '删除中...' : '确认删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function TagTab() {
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedTag, setSelectedTag] = useState<Tag | null>(null);
  const [formName, setFormName] = useState('');
  const [formSlug, setFormSlug] = useState('');
  const [formDescription, setFormDescription] = useState('');

  const { data: tagsData, isLoading } = useTags();
  const createTag = useCreateTag();
  const updateTag = useUpdateTag();
  const deleteTag = useDeleteTag();

  const tags = (tagsData as any)?.data?.tags || [];

  const resetForm = () => {
    setFormName('');
    setFormSlug('');
    setFormDescription('');
  };

  const openCreateDialog = () => {
    resetForm();
    setCreateDialogOpen(true);
  };

  const openEditDialog = (tag: Tag) => {
    setSelectedTag(tag);
    setFormName(tag.name);
    setFormSlug(tag.slug);
    setFormDescription(tag.description || '');
    setEditDialogOpen(true);
  };

  const openDeleteDialog = (tag: Tag) => {
    setSelectedTag(tag);
    setDeleteDialogOpen(true);
  };

  const handleCreate = async () => {
    try {
      const data: CreateTagRequest = {
        name: formName,
        slug: formSlug,
        description: formDescription || undefined,
      };
      await createTag.mutateAsync(data);
      toast.success('标签创建成功');
      setCreateDialogOpen(false);
      resetForm();
    } catch {
      toast.error('创建标签失败');
    }
  };

  const handleUpdate = async () => {
    if (!selectedTag) return;
    try {
      const data: UpdateTagRequest = {
        name: formName,
        slug: formSlug,
        description: formDescription || undefined,
      };
      await updateTag.mutateAsync({ id: selectedTag.id, data });
      toast.success('标签更新成功');
      setEditDialogOpen(false);
      resetForm();
    } catch {
      toast.error('更新标签失败');
    }
  };

  const handleDelete = async () => {
    if (!selectedTag) return;
    try {
      await deleteTag.mutateAsync(selectedTag.id);
      toast.success('标签删除成功');
      setDeleteDialogOpen(false);
      setSelectedTag(null);
    } catch {
      toast.error('删除标签失败');
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">标签列表</h2>
        <Button onClick={openCreateDialog}>
          <Plus className="mr-2 h-4 w-4" />
          新建标签
        </Button>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-full" />
          ))}
        </div>
      ) : tags.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">暂无标签</div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>名称</TableHead>
                <TableHead>Slug</TableHead>
                <TableHead>描述</TableHead>
                <TableHead>文章数</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {tags.map((tag: Tag) => (
                <TableRow key={tag.id}>
                  <TableCell className="font-medium">{tag.name}</TableCell>
                  <TableCell className="text-muted-foreground">{tag.slug}</TableCell>
                  <TableCell className="text-muted-foreground max-w-[200px] truncate">
                    {tag.description || '-'}
                  </TableCell>
                  <TableCell>{tag.articleCount ?? 0}</TableCell>
                  <TableCell className="text-muted-foreground">
                    {new Date(tag.createdAt).toLocaleString('zh-CN')}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => openEditDialog(tag)}>
                          <Pencil className="mr-2 h-4 w-4" />
                          编辑
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          onClick={() => openDeleteDialog(tag)}
                          className="text-destructive"
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新建标签</DialogTitle>
            <DialogDescription>填写标签信息</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>名称</Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="请输入标签名称" />
            </div>
            <div className="space-y-2">
              <Label>Slug</Label>
              <Input value={formSlug} onChange={(e) => setFormSlug(e.target.value)} placeholder="请输入 Slug" />
            </div>
            <div className="space-y-2">
              <Label>描述</Label>
              <Textarea value={formDescription} onChange={(e) => setFormDescription(e.target.value)} placeholder="请输入标签描述" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>取消</Button>
            <Button onClick={handleCreate} disabled={createTag.isPending}>
              {createTag.isPending ? '创建中...' : '创建'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>编辑标签</DialogTitle>
            <DialogDescription>修改标签信息</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>名称</Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>Slug</Label>
              <Input value={formSlug} onChange={(e) => setFormSlug(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>描述</Label>
              <Textarea value={formDescription} onChange={(e) => setFormDescription(e.target.value)} />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>取消</Button>
            <Button onClick={handleUpdate} disabled={updateTag.isPending}>
              {updateTag.isPending ? '保存中...' : '保存'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>删除标签</DialogTitle>
            <DialogDescription>
              确定要删除标签「{selectedTag?.name}」吗？此操作不可撤销。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>取消</Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteTag.isPending}>
              {deleteTag.isPending ? '删除中...' : '确认删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function CommentTab() {
  const [statusFilter, setStatusFilter] = useState<string>('ALL');

  const filterStatus = statusFilter === 'ALL' ? undefined : statusFilter;
  const { data: commentsData, isLoading } = useComments({ status: filterStatus });
  const approveComment = useApproveComment();
  const rejectComment = useRejectComment();
  const deleteComment = useDeleteComment();

  const comments = (commentsData as any)?.data?.comments || [];

  const handleApprove = async (id: string) => {
    try {
      await approveComment.mutateAsync(id);
      toast.success('评论已通过');
    } catch {
      toast.error('审核通过失败');
    }
  };

  const handleReject = async (id: string) => {
    try {
      await rejectComment.mutateAsync(id);
      toast.success('评论已拒绝');
    } catch {
      toast.error('拒绝评论失败');
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteComment.mutateAsync(id);
      toast.success('评论已删除');
    } catch {
      toast.error('删除评论失败');
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">评论审核</h2>
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder="全部状态" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="ALL">全部</SelectItem>
            <SelectItem value="pending">待审核</SelectItem>
            <SelectItem value="approved">已通过</SelectItem>
            <SelectItem value="rejected">已拒绝</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-full" />
          ))}
        </div>
      ) : comments.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">暂无评论</div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>文章ID</TableHead>
                <TableHead>评论内容</TableHead>
                <TableHead>评论者</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {comments.map((comment: Comment) => (
                <TableRow key={comment.id}>
                  <TableCell className="font-medium">{comment.articleId}</TableCell>
                  <TableCell className="max-w-[200px] truncate">{comment.content}</TableCell>
                  <TableCell className="text-muted-foreground">{comment.authorId}</TableCell>
                  <TableCell>
                    <Badge
                      variant="outline"
                      className={COMMENT_STATUS_CLASS[comment.status] || ''}
                    >
                      {COMMENT_STATUS_LABEL[comment.status] || comment.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {new Date(comment.createdAt).toLocaleString('zh-CN')}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        {comment.status === 'pending' && (
                          <>
                            <DropdownMenuItem onClick={() => handleApprove(comment.id)}>
                              <CheckCircle className="mr-2 h-4 w-4" />
                              通过
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleReject(comment.id)}>
                              <XCircle className="mr-2 h-4 w-4" />
                              拒绝
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                          </>
                        )}
                        <DropdownMenuItem
                          onClick={() => handleDelete(comment.id)}
                          className="text-destructive"
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
}

export default function ContentPage() {
  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">内容管理</h1>

      <Tabs defaultValue="articles">
        <TabsList>
          <TabsTrigger value="articles">文章管理</TabsTrigger>
          <TabsTrigger value="categories">分类管理</TabsTrigger>
          <TabsTrigger value="tags">标签管理</TabsTrigger>
          <TabsTrigger value="comments">评论审核</TabsTrigger>
        </TabsList>

        <TabsContent value="articles" className="mt-4">
          <ArticleTab />
        </TabsContent>

        <TabsContent value="categories" className="mt-4">
          <CategoryTab />
        </TabsContent>

        <TabsContent value="tags" className="mt-4">
          <TagTab />
        </TabsContent>

        <TabsContent value="comments" className="mt-4">
          <CommentTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}