Refactor code structure for improved readability and maintainability

app/truyen/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation"
+import Link from "next/link"
 import { BookOpen, Eye, BookMarked, User, Clock, Layers } from "lucide-react"
 import { formatViews } from "@/lib/utils"
 import { GenreBadge } from "@/components/genre-badge"
@@ -10,6 +11,8 @@ import { prisma } from "@/lib/prisma"
 import connectToMongoDB from "@/lib/mongoose"
 import { Chapter } from "@/lib/models/chapter"
 
+export const dynamic = "force-dynamic"
+
 export default async function NovelDetailPage({
   params,
   searchParams
@@ -36,12 +39,6 @@ export default async function NovelDetailPage({
     notFound()
   }
 
-  // Increment view quietly
-  prisma.novel.update({
-    where: { id: novel.id },
-    data: { views: { increment: 1 } }
-  }).catch(e => console.error("Error incrementing view:", e))
-
   // Fetch chapters from MongoDB
   await connectToMongoDB()
   const skip = (currentPage - 1) * limit
@@ -86,6 +83,23 @@ export default async function NovelDetailPage({
     createdAt: c.createdAt.toISOString().split("T")[0]
   }))
 
+  const chapterCommentsData = await prisma.comment.findMany({
+    where: { novelId: novel.id, chapterId: { not: null } },
+    include: { user: true },
+    orderBy: { createdAt: "desc" }
+  })
+
+  // Format explicitly as the CommentProp type
+  const chapterComments = chapterCommentsData.map(c => ({
+    id: c.id,
+    userId: c.user.id,
+    username: c.user.name || "User",
+    avatarColor: c.user.image || "bg-primary",
+    novelId: c.novelId,
+    content: c.content,
+    createdAt: c.createdAt.toISOString().split("T")[0]
+  }))
+
   const novelGenres = novel.genres.map(ng => ng.genre) || []
 
   return (
@@ -93,47 +107,85 @@ export default async function NovelDetailPage({
       {/* Novel Header */}
       <div className="flex flex-col gap-6 md:flex-row">
         {/* Cover */}
-        <div className={`flex h-64 w-44 shrink-0 items-center justify-center self-center rounded-xl bg-gradient-to-br shadow-lg md:self-start ${novel.coverColor || "from-slate-700 to-slate-800"}`}>
-          <BookOpen className="h-14 w-14 text-background/80" />
-        </div>
+        <img src={novel.coverUrl || "/default-cover.svg"} alt={novel.title} className="h-64 w-44 shrink-0 self-center rounded-xl object-cover shadow-lg md:self-start bg-muted" />
 
         {/* Info */}
         <div className="flex flex-1 flex-col gap-3">
-          <h1 className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>
+          <h1 title={novel.title} className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>
 
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
-            <span className="flex items-center gap-1"><User className="h-3.5 w-3.5" />{novel.authorName}</span>
-            <span className="flex items-center gap-1"><Layers className="h-3.5 w-3.5" />{novel.totalChapters} chương</span>
-            <span className="flex items-center gap-1"><Eye className="h-3.5 w-3.5" />{formatViews(novel.views)} lượt xem</span>
-            <span className="flex items-center gap-1"><BookMarked className="h-3.5 w-3.5" />{formatViews(novel.bookmarkCount)} bookmark</span>
-            <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" />Cập nhật: {novel.updatedAt.toLocaleDateString('vi-VN')}</span>
+          <div className="flex flex-col gap-1 text-sm text-muted-foreground mt-1">
+            <div className="flex items-center gap-1.5">
+              <span>Tác giả:</span>
+              <Link href={`/tim-kiem?q=${encodeURIComponent(novel.authorName)}`} className="text-red-500 font-medium hover:underline">
+                {novel.authorName}
+              </Link>
+              {novel.originalAuthorName && <span>({novel.originalAuthorName})</span>}
+            </div>
+            {novel.originalTitle && 
+              <div className="flex items-center gap-1.5">
+                <span>Tên gốc:</span>
+                <span>{novel.originalTitle}</span>
+              </div>
+            }
           </div>
 
-          <div className="flex items-center gap-2">
-            <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${novel.status === "Hoàn thành" ? "bg-green-500/10 text-green-600 dark:text-green-400" :
-              novel.status === "Đang ra" ? "bg-primary/10 text-primary" :
-                "bg-muted text-muted-foreground"
+          <div className="flex flex-col gap-3 mt-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-muted-foreground">Trạng thái:</span>
+              <span className={`inline-block rounded-full px-4 py-1.5 text-xs font-semibold ${
+                novel.status === "Hoàn thành" ? "bg-green-500/10 text-green-600 dark:text-green-400" :
+                novel.status === "Tạm dừng" || novel.status === "Tạm ngưng" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" :
+                "bg-primary/10 text-primary" // Đang ra
               }`}>
-              {novel.status}
-            </span>
+                {novel.status}
+              </span>
+            </div>
+            
+            <div className="flex flex-wrap items-center gap-2">
+              {novelGenres.map((g, i) => (
+                <Link 
+                  key={g.id} 
+                  href={`/the-loai/${g.slug}`}
+                  className={`rounded-full px-4 py-1.5 text-xs font-semibold transition-colors hover:opacity-80 ${
+                    i % 2 === 0 ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+                  }`}
+                >
+                  {g.name}
+                </Link>
+              ))}
+            </div>
           </div>
 
-          <StarRating rating={novel.rating} ratingCount={novel.ratingCount} novelId={novel.id} interactive />
-
-          <div className="flex flex-wrap gap-1.5">
-            {novelGenres.map((g) => (
-              <GenreBadge key={g.id} slug={g.slug} name={g.name} variant="link" />
-            ))}
+          {/* Stats Row */}
+          <div className="flex items-center gap-6 mt-4 md:gap-8 overflow-hidden">
+            <div className="flex flex-col items-center">
+              <span className="text-xl md:text-2xl font-bold text-foreground">{novel.totalChapters}</span>
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Chương</span>
+            </div>
+            <div className="flex flex-col items-center">
+              <span className="text-xl md:text-2xl font-bold text-foreground">{novel.views}</span>
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Lượt đọc</span>
+            </div>
+            <div className="flex flex-col items-center">
+              <span className="text-xl md:text-2xl font-bold text-foreground">{novel.bookmarkCount}</span>
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Cất giữ</span>
+            </div>
+            <div className="flex flex-col items-center">
+              <span className="text-xl md:text-2xl font-bold text-foreground">{novel.ratingCount}</span>
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Đề cử</span>
+            </div>
           </div>
 
-          <NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={formattedChapters[0]?.number} />
+          <div className="mt-4">
+            <NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={formattedChapters[0]?.number} />
+          </div>
         </div>
       </div>
 
       {/* Description */}
       <section className="mt-8">
         <h2 className="mb-3 text-lg font-bold text-foreground">Giới Thiệu</h2>
-        <p className="text-sm leading-relaxed text-foreground/80">{novel.description}</p>
+        <div className="text-sm leading-relaxed text-foreground/80 whitespace-pre-wrap">{novel.description}</div>
       </section>
 
       {/* Chapter list */}
@@ -152,7 +204,11 @@ export default async function NovelDetailPage({
 
       {/* Comments */}
       <section className="mt-8">
-        <CommentSection comments={comments as any} novelId={novel.id} />
+        <CommentSection 
+          comments={comments as any} 
+          chapterComments={chapterComments as any}
+          novelId={novel.id} 
+        />
       </section>
     </div>
   )