Add genre management functionality and update sidebar navigation

app/mod/the-loai/genre-client.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { GitMerge, Loader2, Pencil, Plus, Save, Tag, Trash2, X } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+interface Genre {
+  id: string
+  name: string
+  slug: string
+  description?: string | null
+  icon?: string | null
+  novelCount?: number
+}
+
+export function GenreClient() {
+  const [genres, setGenres] = useState<Genre[]>([])
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [keyword, setKeyword] = useState("")
+
+  // Form state
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formName, setFormName] = useState("")
+  const [formDesc, setFormDesc] = useState("")
+  const [formIcon, setFormIcon] = useState("")
+
+  // Merge dialog
+  const [mergeOpen, setMergeOpen] = useState(false)
+  const [mergeSource, setMergeSource] = useState<Genre | null>(null)
+  const [mergeTargetId, setMergeTargetId] = useState("")
+  const [mergeKeyword, setMergeKeyword] = useState("")
+
+  // Delete confirm
+  const [deleteTarget, setDeleteTarget] = useState<Genre | null>(null)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const filtered = useMemo(() => {
+    const q = keyword.trim().toLowerCase()
+    if (!q) return genres
+    return genres.filter(
+      (g) =>
+        g.name.toLowerCase().includes(q) ||
+        g.slug.toLowerCase().includes(q)
+    )
+  }, [keyword, genres])
+
+  const mergeTargetOptions = useMemo(() => {
+    const q = mergeKeyword.trim().toLowerCase()
+    return genres.filter(
+      (g) =>
+        g.id !== mergeSource?.id &&
+        (!q || g.name.toLowerCase().includes(q) || g.slug.toLowerCase().includes(q))
+    )
+  }, [genres, mergeSource, mergeKeyword])
+
+  const fetchGenres = async () => {
+    try {
+      const res = await fetch("/api/mod/the-loai")
+      if (!res.ok) throw new Error("Không thể tải danh sách thể loại")
+      const data: Genre[] = await res.json()
+      // Enrich with novelCount from public endpoint
+      const countRes = await fetch("/api/genres")
+      if (countRes.ok) {
+        const countData: Genre[] = await countRes.json()
+        const countMap = Object.fromEntries(countData.map((g) => [g.id, g.novelCount ?? 0]))
+        data.forEach((g) => { g.novelCount = countMap[g.id] ?? 0 })
+      }
+      setGenres(data)
+    } catch (err: any) {
+      toast.error(err.message || "Lỗi tải thể loại")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchGenres() }, [])
+
+  const resetForm = () => {
+    setEditingId(null)
+    setFormName("")
+    setFormDesc("")
+    setFormIcon("")
+  }
+
+  const handleEdit = (g: Genre) => {
+    setEditingId(g.id)
+    setFormName(g.name)
+    setFormDesc(g.description || "")
+    setFormIcon(g.icon || "")
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formName.trim()) { toast.error("Vui lòng nhập tên thể loại"); return }
+
+    setSubmitting(true)
+    try {
+      const payload: Record<string, any> = {
+        name: formName.trim(),
+        description: formDesc.trim() || null,
+        icon: formIcon.trim() || null,
+      }
+      if (editingId) payload.id = editingId
+
+      const res = await fetch("/api/mod/the-loai", {
+        method: editingId ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể lưu")
+      toast.success(editingId ? "Đã cập nhật thể loại" : "Đã tạo thể loại")
+      resetForm()
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const confirmDelete = (g: Genre) => {
+    setDeleteTarget(g)
+    setDeleteOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setSubmitting(true)
+    try {
+      const res = await fetch(`/api/mod/the-loai?id=${deleteTarget.id}`, { method: "DELETE" })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể xóa")
+      toast.success(`Đã xóa thể loại "${deleteTarget.name}"`)
+      if (editingId === deleteTarget.id) resetForm()
+      setDeleteOpen(false)
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const openMerge = (g: Genre) => {
+    setMergeSource(g)
+    setMergeTargetId("")
+    setMergeKeyword("")
+    setMergeOpen(true)
+  }
+
+  const handleMerge = async () => {
+    if (!mergeSource || !mergeTargetId) { toast.error("Vui lòng chọn thể loại đích"); return }
+    setSubmitting(true)
+    try {
+      const res = await fetch("/api/mod/the-loai/merge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sourceId: mergeSource.id, targetId: mergeTargetId }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể gộp")
+      const target = genres.find((g) => g.id === mergeTargetId)
+      toast.success(`Đã gộp "${mergeSource.name}" vào "${target?.name}"`)
+      setMergeOpen(false)
+      if (editingId === mergeSource.id) resetForm()
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Tag className="h-6 w-6 text-primary" />
+        <h1 className="text-2xl font-bold">Quản lý Thể Loại</h1>
+      </div>
+
+      {/* Form tạo / chỉnh sửa */}
+      <form onSubmit={handleSubmit} className="rounded-xl border bg-card p-5 space-y-4">
+        <h2 className="font-semibold text-base">{editingId ? "Chỉnh sửa thể loại" : "Tạo thể loại mới"}</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Tên thể loại <span className="text-destructive">*</span></label>
+            <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="Ví dụ: Kiếm Hiệp" />
+          </div>
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Icon (tên Lucide)</label>
+            <Input value={formIcon} onChange={(e) => setFormIcon(e.target.value)} placeholder="Ví dụ: Sword, Flame, Heart..." />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <label className="text-sm font-medium">Mô tả</label>
+          <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="Mô tả ngắn về thể loại..." rows={2} />
+        </div>
+        <div className="flex gap-2">
+          <Button type="submit" disabled={submitting} size="sm">
+            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : editingId ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+            <span className="ml-1">{editingId ? "Lưu thay đổi" : "Tạo thể loại"}</span>
+          </Button>
+          {editingId && (
+            <Button type="button" variant="ghost" size="sm" onClick={resetForm}>
+              <X className="h-4 w-4" /><span className="ml-1">Hủy</span>
+            </Button>
+          )}
+        </div>
+      </form>
+
+      {/* Danh sách */}
+      <div className="rounded-xl border bg-card">
+        <div className="flex items-center gap-3 border-b px-5 py-3">
+          <Input
+            placeholder="Tìm theo tên, slug..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="max-w-xs h-8 text-sm"
+          />
+          <span className="ml-auto text-sm text-muted-foreground whitespace-nowrap">{filtered.length} / {genres.length} thể loại</span>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-16 text-center text-sm text-muted-foreground">Không tìm thấy thể loại nào</div>
+        ) : (
+          <div className="divide-y">
+            {filtered.map((g) => (
+              <div key={g.id} className={`flex items-center gap-3 px-5 py-3 hover:bg-muted/40 transition-colors ${editingId === g.id ? "bg-primary/5" : ""}`}>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-sm truncate">{g.name}</p>
+                  <p className="text-xs text-muted-foreground truncate">{g.slug}{g.description ? ` · ${g.description}` : ""}</p>
+                </div>
+                <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
+                  {g.novelCount ?? 0} truyện
+                </span>
+                <div className="flex gap-1 shrink-0">
+                  <Button variant="ghost" size="icon" className="h-7 w-7" title="Chỉnh sửa" onClick={() => handleEdit(g)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-7 w-7" title="Gộp thể loại" onClick={() => openMerge(g)}>
+                    <GitMerge className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" title="Xóa" onClick={() => confirmDelete(g)}>
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Dialog xóa */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Xác nhận xóa thể loại</DialogTitle>
+            <DialogDescription>
+              Thể loại <strong>"{deleteTarget?.name}"</strong> sẽ bị xóa vĩnh viễn
+              {(deleteTarget?.novelCount ?? 0) > 0 && (
+                <> và bị gỡ khỏi <strong>{deleteTarget?.novelCount} truyện</strong></>
+              )}. Hành động này không thể hoàn tác.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteOpen(false)}>Hủy</Button>
+            <Button variant="destructive" disabled={submitting} onClick={handleDelete}>
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
+              Xóa
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog gộp */}
+      <Dialog open={mergeOpen} onOpenChange={setMergeOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Gộp thể loại</DialogTitle>
+            <DialogDescription>
+              Tất cả truyện của <strong>"{mergeSource?.name}"</strong> sẽ được chuyển sang thể loại đích,
+              sau đó <strong>"{mergeSource?.name}"</strong> sẽ bị xóa.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 my-2">
+            <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm">
+              <span className="text-muted-foreground">Nguồn (sẽ bị xóa): </span>
+              <strong>{mergeSource?.name}</strong>
+              {(mergeSource?.novelCount ?? 0) > 0 && <span className="text-muted-foreground"> · {mergeSource?.novelCount} truyện</span>}
+            </div>
+
+            <Input
+              placeholder="Tìm thể loại đích..."
+              value={mergeKeyword}
+              onChange={(e) => setMergeKeyword(e.target.value)}
+              className="h-8 text-sm"
+            />
+
+            <div className="max-h-52 overflow-y-auto rounded-md border divide-y">
+              {mergeTargetOptions.length === 0 ? (
+                <p className="py-4 text-center text-sm text-muted-foreground">Không có thể loại nào</p>
+              ) : (
+                mergeTargetOptions.map((g) => (
+                  <button
+                    key={g.id}
+                    type="button"
+                    onClick={() => setMergeTargetId(g.id)}
+                    className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted transition-colors ${mergeTargetId === g.id ? "bg-primary/10 font-medium" : ""}`}
+                  >
+                    <span className="flex-1">{g.name}</span>
+                    <span className="text-xs text-muted-foreground shrink-0">{g.novelCount ?? 0} truyện</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setMergeOpen(false)}>Hủy</Button>
+            <Button disabled={!mergeTargetId || submitting} onClick={handleMerge}>
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <GitMerge className="h-4 w-4 mr-1" />}
+              Gộp thể loại
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

app/mod/the-loai/page.tsx

@@ -0,0 +1,13 @@
+import { getServerSession } from "next-auth/next"
+import { authOptions } from "@/lib/auth"
+import { redirect } from "next/navigation"
+import { GenreClient } from "./genre-client"
+
+export default async function ModTheLoaiPage() {
+  const session = await getServerSession(authOptions)
+  if (!session || (session.user.role !== "MOD" && session.user.role !== "ADMIN")) {
+    redirect("/")
+  }
+
+  return <GenreClient />
+}