"use client"; import { useState, useMemo } from "react"; import { useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; import { MoreHorizontal, Plus, Pencil, Trash2, ChevronRight, Pin, PinOff } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { toast } from "sonner"; interface Category { id: string; name: string; slug: string; description: string | null; icon: string | null; order: number; pinned: boolean; parentId: string | null; parent: { id: string; name: string } | null; children?: Category[]; _count: { prompts: number; children: number; }; } interface CategoriesTableProps { categories: Category[]; } export function CategoriesTable({ categories }: CategoriesTableProps) { const router = useRouter(); const t = useTranslations("admin.categories"); const [editCategory, setEditCategory] = useState(null); const [deleteId, setDeleteId] = useState(null); const [isCreating, setIsCreating] = useState(false); const [loading, setLoading] = useState(false); const [formData, setFormData] = useState({ name: "", slug: "", description: "", icon: "", parentId: "", pinned: false }); // Get only root categories (no parent) for parent selection const rootCategories = useMemo(() => categories.filter(c => !c.parentId), [categories] ); // Build hierarchical list for display (parents first, then children indented) const hierarchicalCategories = useMemo(() => { const result: (Category & { level: number })[] = []; // Add root categories and their children rootCategories.forEach(parent => { result.push({ ...parent, level: 0 }); const children = categories.filter(c => c.parentId === parent.id); children.forEach(child => { result.push({ ...child, level: 1 }); }); }); return result; }, [categories, rootCategories]); const openCreateDialog = () => { setFormData({ name: "", slug: "", description: "", icon: "", parentId: "", pinned: false }); setIsCreating(true); }; const openEditDialog = (category: Category) => { setFormData({ name: category.name, slug: category.slug, description: category.description || "", icon: category.icon || "", parentId: category.parentId || "", pinned: category.pinned, }); setEditCategory(category); }; const handleTogglePin = async (category: Category) => { setLoading(true); try { const res = await fetch(`/api/admin/categories/${category.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pinned: !category.pinned }), }); if (!res.ok) throw new Error("Failed to update"); toast.success(category.pinned ? t("unpinned") : t("pinned")); router.refresh(); } catch { toast.error(t("saveFailed")); } finally { setLoading(false); } }; // Filter out invalid parent options (can't be own parent or child of self) const getValidParentOptions = () => { if (!editCategory) return rootCategories; // When editing, exclude self and any category that has this as parent return rootCategories.filter(c => c.id !== editCategory.id && c.parentId !== editCategory.id ); }; const handleSubmit = async () => { setLoading(true); try { const url = editCategory ? `/api/admin/categories/${editCategory.id}` : "/api/admin/categories"; const method = editCategory ? "PATCH" : "POST"; const payload = { ...formData, parentId: formData.parentId || null, // Convert empty string to null }; const res = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); if (!res.ok) throw new Error("Failed to save"); toast.success(editCategory ? t("updated") : t("created")); router.refresh(); setEditCategory(null); setIsCreating(false); } catch { toast.error(t("saveFailed")); } finally { setLoading(false); } }; const handleDelete = async () => { if (!deleteId) return; setLoading(true); try { const res = await fetch(`/api/admin/categories/${deleteId}`, { method: "DELETE", }); if (!res.ok) throw new Error("Failed to delete"); toast.success(t("deleted")); router.refresh(); } catch { toast.error(t("deleteFailed")); } finally { setLoading(false); setDeleteId(null); } }; return ( <>

{t("title")}

{t("description")}

{t("name")} {t("slug")} {t("parent")} {t("prompts")} {hierarchicalCategories.length === 0 ? ( {t("noCategories")} ) : ( hierarchicalCategories.map((category) => ( 0 ? "bg-muted/30" : ""}>

{category.level > 0 && ( )} {category.icon && {category.icon}} {category.name} {category._count.children > 0 && ( {category._count.children} {t("subcategories")} )} {category.pinned && ( {t("pinnedBadge")} )}

{category.slug} {category.parent ? ( {category.parent.name} ) : ( {t("rootCategory")} )} {category._count.prompts} openEditDialog(category)}> {t("edit")} handleTogglePin(category)} disabled={loading}> {category.pinned ? ( <>{t("unpin")} ) : ( <>{t("pin")} )} setDeleteId(category.id)} > {t("delete")} )) )}

{/* Create/Edit Dialog */} {/* Delete Confirmation */} setDeleteId(null)}> {t("deleteConfirmTitle")} {t("deleteConfirmDescription")} {t("cancel")} {t("delete")} ); }