import Link from "next/link"
import { notFound } from "next/navigation"
import { BookOpen, Calendar, ChevronRight, Clock, Users } from "lucide-react"

import { getClassHomeworkInsights, getClassSchedule, getClassStudents } from "@/modules/classes/data-access"
import { ScheduleView } from "@/modules/classes/components/schedule-view"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
import { cn, formatDate } from "@/shared/lib/utils"

export const dynamic = "force-dynamic"

type SearchParams = { [key: string]: string | string[] | undefined }

const getParam = (params: SearchParams, key: string) => {
  const v = params[key]
  return Array.isArray(v) ? v[0] : v
}

const formatNumber = (v: number | null, digits = 1) => {
  if (typeof v !== "number" || Number.isNaN(v)) return "-"
  return v.toFixed(digits)
}

const getInitials = (name: string) => {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2)
}

export default async function ClassDetailPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>
  searchParams: Promise<SearchParams>
}) {
  const { id } = await params
  const sp = await searchParams
  const hw = getParam(sp, "hw")
  const hwFilter = hw === "active" || hw === "overdue" ? hw : "all"

  const [insights, students, schedule] = await Promise.all([
    getClassHomeworkInsights({ classId: id, limit: 50 }),
    getClassStudents({ classId: id }),
    getClassSchedule({ classId: id }),
  ])

  if (!insights) return notFound()

  const latest = insights.latest
  const filteredAssignments = insights.assignments.filter((a) => {
    if (hwFilter === "all") return true
    if (hwFilter === "overdue") return a.isOverdue
    if (hwFilter === "active") return a.isActive
    return true
  })
  const hasAssignments = filteredAssignments.length > 0
  const scheduleBuilderClasses = [
    {
      id: insights.class.id,
      name: insights.class.name,
      grade: insights.class.grade,
      homeroom: insights.class.homeroom ?? null,
      room: insights.class.room ?? null,
      studentCount: insights.studentCounts.total,
    },
  ]

  return (
    <div className="flex flex-col min-h-full space-y-8 p-8">
      {/* Header */}
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div className="space-y-1.5">
          <div className="flex items-center gap-2 text-muted-foreground mb-2">
            <Link href="/teacher/classes/my" className="hover:text-foreground transition-colors">
              My Classes
            </Link>
            <ChevronRight className="h-4 w-4" />
            <span className="text-foreground font-medium">{insights.class.name}</span>
          </div>
          <h2 className="text-3xl font-bold tracking-tight">{insights.class.name}</h2>
          <div className="flex items-center gap-3 text-sm text-muted-foreground">
            <Badge variant="secondary" className="rounded-sm font-normal">
              {insights.class.grade}
            </Badge>
            {insights.class.homeroom && (
              <>
                <span className="w-1 h-1 rounded-full bg-border" />
                <span>Homeroom: {insights.class.homeroom}</span>
              </>
            )}
            {insights.class.room && (
              <>
                <span className="w-1 h-1 rounded-full bg-border" />
                <span>Room: {insights.class.room}</span>
              </>
            )}
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <Button asChild variant="outline">
            <Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>
              <Users className="mr-2 h-4 w-4" />
              Students
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>
              <Calendar className="mr-2 h-4 w-4" />
              Schedule
            </Link>
          </Button>
          <Button asChild>
            <Link href={`/teacher/homework/assignments/create?classId=${encodeURIComponent(insights.class.id)}`}>
              Create Homework
            </Link>
          </Button>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Students</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{insights.studentCounts.total}</div>
            <div className="text-xs text-muted-foreground">
              {insights.studentCounts.active} active · {insights.studentCounts.inactive} inactive
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Schedule Items</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{schedule.length}</div>
            <div className="text-xs text-muted-foreground">Weekly sessions</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Assignments</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {insights.assignments.filter((a) => a.isActive).length}
            </div>
            <div className="text-xs text-muted-foreground">
              {insights.assignments.filter((a) => a.isOverdue).length} overdue
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Class Average</CardTitle>
            <BookOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}%</div>
            <div className="text-xs text-muted-foreground">
              Based on {insights.overallScores.count} graded submissions
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-7">
        {/* Main Content Area */}
        <div className="lg:col-span-4 space-y-6">
          {/* Latest Homework */}
          {latest && (
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="space-y-1">
                    <CardTitle>Latest Homework</CardTitle>
                    <CardDescription>Most recent assignment activity</CardDescription>
                  </div>
                  <Badge variant={latest.isActive ? "default" : "secondary"}>
                    {latest.status}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex flex-col gap-4 rounded-lg border p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="space-y-1">
                      <Link 
                        href={`/teacher/homework/assignments/${latest.assignmentId}`}
                        className="font-semibold hover:underline"
                      >
                        {latest.title}
                      </Link>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <span>Due {latest.dueAt ? formatDate(latest.dueAt) : "No due date"}</span>
                        <span>·</span>
                        <span>{latest.submittedCount}/{latest.targetCount} Submitted</span>
                      </div>
                    </div>
                    <Button variant="outline" size="sm" asChild>
                      <Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>
                        Grade
                      </Link>
                    </Button>
                  </div>
                  
                  <div className="grid grid-cols-3 gap-4 border-t pt-4">
                    <div className="text-center">
                      <div className="text-2xl font-bold">{latest.gradedCount}</div>
                      <div className="text-xs text-muted-foreground">Graded</div>
                    </div>
                    <div className="text-center border-l border-r">
                      <div className="text-2xl font-bold">{formatNumber(latest.scoreStats.avg, 1)}</div>
                      <div className="text-xs text-muted-foreground">Average</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold">{formatNumber(latest.scoreStats.median, 1)}</div>
                      <div className="text-xs text-muted-foreground">Median</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Students Preview */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div className="space-y-1">
                <CardTitle>Students</CardTitle>
                <CardDescription>Recently active students</CardDescription>
              </div>
              <Button variant="ghost" size="sm" asChild>
                <Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>
                  View All
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardHeader>
            <CardContent>
              {students.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  No students enrolled yet.
                </div>
              ) : (
                <div className="space-y-4">
                  {students.slice(0, 5).map((s) => (
                    <div key={s.id} className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <Avatar className="h-9 w-9">
                          <AvatarImage src={s.image || undefined} />
                          <AvatarFallback>{getInitials(s.name)}</AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="font-medium text-sm">{s.name}</div>
                          <div className="text-xs text-muted-foreground">{s.email}</div>
                        </div>
                      </div>
                      <Badge variant={s.status === "active" ? "outline" : "secondary"} className="text-xs font-normal">
                        {s.status}
                      </Badge>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Sidebar Area */}
        <div className="lg:col-span-3 space-y-6">
          {/* Schedule Widget */}
          <Card className="h-fit">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Schedule</CardTitle>
              <Button variant="ghost" size="icon" asChild>
                <Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>
                  <ChevronRight className="h-4 w-4" />
                </Link>
              </Button>
            </CardHeader>
            <CardContent>
              <ScheduleView schedule={schedule} classes={scheduleBuilderClasses} />
            </CardContent>
          </Card>

          {/* Homework History */}
          <Card>
            <CardHeader>
              <CardTitle>History</CardTitle>
              <div className="flex gap-2 mt-2">
                <Button 
                  size="sm" 
                  variant={hwFilter === "all" ? "secondary" : "ghost"}
                  asChild
                  className="h-7 px-2 text-xs"
                >
                  <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}`}>All</Link>
                </Button>
                <Button 
                  size="sm" 
                  variant={hwFilter === "active" ? "secondary" : "ghost"}
                  asChild
                  className="h-7 px-2 text-xs"
                >
                  <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=active`}>Active</Link>
                </Button>
                <Button 
                  size="sm" 
                  variant={hwFilter === "overdue" ? "secondary" : "ghost"}
                  asChild
                  className="h-7 px-2 text-xs"
                >
                  <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=overdue`}>Overdue</Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-0">
              <div className="divide-y">
                {filteredAssignments.slice(0, 5).map((a) => (
                  <div key={a.assignmentId} className="p-4 hover:bg-muted/50 transition-colors">
                    <div className="flex items-start justify-between gap-4 mb-2">
                      <Link 
                        href={`/teacher/homework/assignments/${a.assignmentId}`}
                        className="text-sm font-medium hover:underline line-clamp-1"
                      >
                        {a.title}
                      </Link>
                      <Badge variant={a.isActive ? "default" : "secondary"} className="shrink-0 text-[10px] h-5">
                        {a.status}
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span>Due {a.dueAt ? formatDate(a.dueAt) : "-"}</span>
                      <div className="flex gap-3">
                        <span>{a.submittedCount} submitted</span>
                        <span>{formatNumber(a.scoreStats.avg, 0)}% avg</span>
                      </div>
                    </div>
                  </div>
                ))}
                {filteredAssignments.length === 0 && (
                  <div className="p-8 text-center text-sm text-muted-foreground">
                    No assignments found
                  </div>
                )}
              </div>
              {filteredAssignments.length > 5 && (
                <div className="p-2 border-t text-center">
                  <Button variant="ghost" size="sm" className="w-full text-muted-foreground" asChild>
                    <Link href={`/teacher/homework/assignments?classId=${encodeURIComponent(insights.class.id)}`}>
                      View All Assignments
                    </Link>
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}