import Link from "next/link"
import { notFound } from "next/navigation"

import { ArrowLeft, BookOpen, Inbox } from "lucide-react"

import { getTextbookById, getChaptersByTextbookId } from "@/modules/textbooks/data-access"
import { TextbookReader } from "@/modules/textbooks/components/textbook-reader"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { getDemoStudentUser } from "@/modules/homework/data-access"

export const dynamic = "force-dynamic"

export default async function StudentTextbookDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const student = await getDemoStudentUser()
  if (!student) {
    return (
      <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
        <div className="flex items-center justify-between space-y-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Textbook</h2>
            <p className="text-muted-foreground">Read chapters and review content.</p>
          </div>
        </div>
        <EmptyState title="No user found" description="Create a student user to read textbooks." icon={Inbox} />
      </div>
    )
  }

  const { id } = await params

  const [textbook, chapters] = await Promise.all([getTextbookById(id), getChaptersByTextbookId(id)])

  if (!textbook) notFound()

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-muted/5">
      <div className="flex items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-3 px-6 shrink-0 z-10">
        <Button variant="ghost" size="sm" className="gap-2 text-muted-foreground hover:text-foreground" asChild>
          <Link href="/student/learning/textbooks">
            <ArrowLeft className="h-4 w-4" />
            Back
          </Link>
        </Button>
        <div className="w-px h-8 bg-border mx-2" />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h1 className="text-lg font-bold tracking-tight truncate mr-2">{textbook.title}</h1>
            <Badge variant="secondary" className="font-normal text-xs">{textbook.subject}</Badge>
            {textbook.grade && (
              <span className="text-xs text-muted-foreground border px-1.5 py-0.5 rounded">
                {textbook.grade}
              </span>
            )}
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-hidden p-6">
        {chapters.length === 0 ? (
          <div className="h-full flex items-center justify-center rounded-lg border border-dashed bg-card">
            <EmptyState
              icon={BookOpen}
              title="No chapters"
              description="This textbook has no chapters yet."
              className="border-none shadow-none"
            />
          </div>
        ) : (
          <div className="h-full min-h-0 max-w-[1600px] mx-auto w-full">
            <TextbookReader chapters={chapters} />
          </div>
        )}
      </div>
    </div>
  )
}