import Link from "next/link"
import { ChevronRight, Users } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
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 { formatDate } from "@/shared/lib/utils"

interface StudentSummary {
  id: string
  name: string
  email: string
  image?: string | null
  status: string
  subjectScores?: Record<string, number | null>
}

interface ClassStudentsWidgetProps {
  classId: string
  students: StudentSummary[]
}

export function ClassStudentsWidget({ classId, students }: ClassStudentsWidgetProps) {
  const activeCount = students.filter(s => s.status === "active").length

  return (
    <Card className="h-fit">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div className="space-y-1">
          <CardTitle className="text-base font-semibold">Students</CardTitle>
          <CardDescription>
            {activeCount} active students
          </CardDescription>
        </div>
        <Button variant="ghost" size="sm" asChild>
          <Link href={`/teacher/classes/students?classId=${encodeURIComponent(classId)}`}>
            View All
            <ChevronRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </CardHeader>
      <CardContent className="pt-4">
        {students.length === 0 ? (
          <div className="flex flex-col items-center justify-center space-y-3 py-8 text-center">
            <div className="rounded-full bg-muted p-3">
              <Users className="h-6 w-6 text-muted-foreground" />
            </div>
            <p className="text-sm text-muted-foreground">No students enrolled yet.</p>
          </div>
        ) : (
          <div className="space-y-4">
            {students.slice(0, 6).map((student) => (
              <div key={student.id} className="flex flex-col gap-2 rounded-lg border p-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={student.image || undefined} alt={student.name} />
                      <AvatarFallback className="text-xs">
                        {student.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")
                          .toUpperCase()
                          .slice(0, 2)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="space-y-0.5">
                      <div className="text-sm font-medium leading-none">{student.name}</div>
                      <div className="text-xs text-muted-foreground line-clamp-1">{student.email}</div>
                    </div>
                  </div>
                  <Badge
                    variant={student.status === "active" ? "outline" : "secondary"}
                    className="text-[10px] capitalize"
                  >
                    {student.status}
                  </Badge>
                </div>
                
                {/* Subject Scores */}
                {student.subjectScores && Object.keys(student.subjectScores).length > 0 && (
                  <div className="flex flex-wrap gap-2 pt-1">
                    {Object.entries(student.subjectScores).map(([subject, score]) => (
                      <div key={subject} className="flex items-center gap-1.5 rounded bg-muted/50 px-2 py-1 text-[10px]">
                        <span className="font-medium text-muted-foreground">{subject}</span>
                        {score !== null ? (
                          <span className={score >= 60 ? "font-semibold text-primary" : "font-semibold text-destructive"}>
                            {score}
                          </span>
                        ) : (
                          <span className="text-muted-foreground">-</span>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}