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"
import { StarRating } from "@/components/star-rating"
import { ChapterList } from "@/components/chapter-list"
import { CommentSection } from "@/components/comment-section"
import { NovelDetailActions } from "./novel-detail-actions"
import { getNovelStatusBadgeClass } from "@/lib/novel-status"
import { readerApiFetch, readerApiFetchNullable } from "@/lib/server-api"

export const dynamic = "force-dynamic"

type NovelGenre = {
  id: string
  name: string
  slug: string
}

type SeriesNovel = {
  id: string
  slug: string
  title: string
  status: string
  totalChapters: number
  coverUrl: string | null
}

type NovelDetail = {
  id: string
  title: string
  slug: string
  originalTitle: string | null
  authorName: string
  originalAuthorName: string | null
  description: string | null
  coverUrl: string | null
  status: string
  totalChapters: number
  views: number
  ratingCount: number
  bookmarkCount: number
  seriesId: string | null
  genres: NovelGenre[]
  series: {
    id: string
    name: string
    slug: string
    novels: SeriesNovel[]
  } | null
}

type ChaptersResponse = {
  chapters: Array<{
    id: string
    number: number
    title: string
    views: number
    createdAt: string | null
    volumeNumber?: number | null
    volumeTitle?: string | null
    volumeChapterNumber?: number | null
  }>
  totalChapters: number
  totalPages: number
}

type CommentsResponse = {
  comments: Array<{
    id: string
    userId: string
    username: string
    content: string
    chapterId?: string | null
    createdAt: string | null
  }>
}

export default async function NovelDetailPage({
  params,
  searchParams
}: {
  params: Promise<{ slug: string }>,
  searchParams: Promise<{ page?: string }>
}) {
  const { slug } = await params
  const { page } = await searchParams

  const currentPage = Math.max(1, parseInt(page || "1", 10) || 1)
  const limit = 20

  const novel = await readerApiFetchNullable<NovelDetail>(`/api/novels/${encodeURIComponent(slug)}`)

  if (!novel) {
    notFound()
  }

  let formattedChapters: any[] = []
  let totalChapters = 0
  let totalPages = 1
  let firstChapterNumber: number | undefined
  let seriesVolumes: Array<{
    id: string
    slug: string
    title: string
    status: string
    totalChapters: number
    coverUrl: string | null
  }> = []
  const [firstChapterData, commentsData, chapterCommentsData, chaptersData] = await Promise.all([
    readerApiFetch<ChaptersResponse>(`/api/truyen/${encodeURIComponent(novel.id)}/chapters?page=1&limit=1`),
    readerApiFetch<CommentsResponse>(`/api/truyen/${encodeURIComponent(novel.id)}/comments?page=1&limit=50`),
    readerApiFetch<CommentsResponse>(`/api/truyen/${encodeURIComponent(novel.id)}/comments?scope=chapter&page=1&limit=50`),
    novel.seriesId
      ? Promise.resolve(null)
      : readerApiFetch<ChaptersResponse>(`/api/truyen/${encodeURIComponent(novel.id)}/chapters?page=${currentPage}&limit=${limit}`),
  ])

  firstChapterNumber = firstChapterData.chapters[0]?.number

  if (novel.seriesId) {
    seriesVolumes = novel.series?.novels || []
  } else if (chaptersData) {
    totalChapters = chaptersData.totalChapters
    totalPages = Math.max(1, chaptersData.totalPages || 1)
    formattedChapters = chaptersData.chapters.map((chapter) => ({
      id: chapter.id,
      novelId: novel.id,
      number: chapter.number,
      volumeNumber: chapter.volumeNumber ?? null,
      volumeTitle: chapter.volumeTitle ?? null,
      volumeChapterNumber: chapter.volumeChapterNumber ?? null,
      title: chapter.title,
      createdAt: chapter.createdAt ? chapter.createdAt.split("T")[0] : "",
      views: chapter.views || 0,
      content: "",
    }))
  }

  const comments = commentsData.comments.map((comment) => ({
    id: comment.id,
    userId: comment.userId,
    username: comment.username || "User",
    avatarColor: "bg-primary",
    novelId: novel.id,
    content: comment.content,
    createdAt: comment.createdAt ? comment.createdAt.split("T")[0] : "",
  }))

  const chapterComments = chapterCommentsData.comments.map((comment) => ({
    id: comment.id,
    userId: comment.userId,
    username: comment.username || "User",
    avatarColor: "bg-primary",
    novelId: novel.id,
    content: comment.content,
    createdAt: comment.createdAt ? comment.createdAt.split("T")[0] : "",
  }))

  const novelGenres = novel.genres || []

  return (
    <div className="mx-auto max-w-6xl px-4 py-6">
      {/* Novel Header */}
      <div className="flex flex-col gap-6 md:flex-row">
        {/* Cover */}
        <img src={novel.coverUrl || "/default-cover.svg"} alt={novel.title} className="h-64 w-44 shrink-0 self-center rounded-xl bg-muted object-contain shadow-lg md:self-start" />

        {/* Info */}
        <div className="flex flex-1 flex-col gap-3">
          <h1 title={novel.title} className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>

          <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 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 ${getNovelStatusBadgeClass(novel.status)}`}>
                {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>

          {/* 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>

          <div className="mt-4">
            <NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={firstChapterNumber} />
          </div>
        </div>
      </div>

      {/* Description */}
      <section className="mt-8">
        <h2 className="mb-3 text-lg font-bold text-foreground">Giới Thiệu</h2>
        <div className="text-sm leading-relaxed text-foreground/80 whitespace-pre-wrap">{novel.description || ""}</div>
      </section>

      {/* Chapter list or series volumes */}
      {novel.seriesId ? (
        <section className="mt-8">
          <h2 className="mb-3 text-lg font-bold text-foreground">Danh Sách Quyển</h2>
          <div className="rounded-lg border border-border bg-card divide-y divide-border">
            {seriesVolumes.map((volume, idx) => (
              <Link
                key={volume.id}
                href={`/truyen/${volume.slug}`}
                className={`flex items-center gap-4 px-4 py-3 hover:bg-muted/40 transition-colors ${volume.id === novel.id ? "bg-primary/5" : ""}`}
              >
                <span className="w-8 text-center text-sm font-semibold text-muted-foreground">{idx + 1}</span>
                <img
                  src={volume.coverUrl || "/default-cover.svg"}
                  alt={volume.title}
                  className="h-14 w-10 rounded bg-muted object-contain"
                />
                <div className="min-w-0 flex-1">
                  <p className="font-medium text-foreground truncate">{volume.title}</p>
                  <p className="text-xs text-muted-foreground">{volume.totalChapters} chương</p>
                </div>
                <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold ${getNovelStatusBadgeClass(volume.status)}`}>
                  {volume.status}
                </span>
              </Link>
            ))}
          </div>
        </section>
      ) : (
        <section className="mt-8">
          <h2 className="mb-3 text-lg font-bold text-foreground">Danh Sách Chương</h2>
          <div className="rounded-lg border border-border bg-card">
            <ChapterList
              chapters={formattedChapters as any}
              novelSlug={novel.slug}
              currentPage={currentPage}
              totalPages={totalPages}
              totalChapters={totalChapters}
            />
          </div>
        </section>
      )}

      {/* Comments */}
      <section className="mt-8">
        <CommentSection 
          comments={comments as any} 
          chapterComments={chapterComments as any}
          novelId={novel.id} 
        />
      </section>
    </div>
  )
}