"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import {
  ArrowLeft,
  Search,
  Download,
  Filter,
  CheckCircle2,
  XCircle,
  Clock,
  AlertCircle,
  MoreHorizontal,
  Calendar,
  MapPin,
  Video,
  Users,
  CheckSquare,
  Square,
  FileText,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { getClassSessionAttendances, markAttendance } from "@/services/admin_page/query"
import { useToast } from "@/hooks/use-toast"
import type { ClassSession, ClassAttendance } from "@/services/types"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getStudents } from "@/services/students/query"
import type { Student } from "@/services/types"

export default function SessionAttendancePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const sessionId = Number.parseInt(params.id)

  const [session, setSession] = useState<ClassSession | null>(null)
  const [attendances, setAttendances] = useState<ClassAttendance[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedStudents, setSelectedStudents] = useState<number[]>([])
  const [allStudents, setAllStudents] = useState<Student[]>([])
  const [selectedForAttendance, setSelectedForAttendance] = useState<number[]>([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true)

        // Fetch session details with attendances
        const sessionData = await getClassSessionAttendances(sessionId)
        console.log("[attendance][session]", { id: sessionData.id, title: sessionData.package_class?.title })
        setSession(sessionData)

        // Set attendances from the session data
        if (sessionData.attendances && Array.isArray(sessionData.attendances)) {
          setAttendances(sessionData.attendances)
          console.log("[attendance][records]", sessionData.attendances.length)
        } else {
          setAttendances([])
        }

        // Fetch all students for marking attendance
        try {
          const studentsData = await getStudents()
          console.log("[students][all]", studentsData?.length || 0)
          setAllStudents(Array.isArray(studentsData) ? studentsData : [])
        } catch (studentError) {
          console.error("Error fetching students:", studentError)
          setAllStudents([])
          // Don't show error toast for students since it's secondary functionality
        }
      } catch (error) {
        console.error("Error fetching attendance data:", error)
        toast({
          title: "Error",
          description: "Failed to load session data. Students list may be unavailable due to authentication.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

    fetchData()
  }, [sessionId, toast])

  const filteredAttendances = attendances.filter(
    (attendance) =>
      attendance.student?.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      attendance.student?.email?.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  // Get student IDs that are already in attendance records
  const attendedStudentIds = new Set(attendances.map((attendance) => attendance.student_id))

  // Filter out students who are already in attendance records
  const availableStudentsForAttendance = allStudents.filter((student) => !attendedStudentIds.has(student.id))

  const formatDateTime = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

  const getStatusBadge = (status: string) => {
    switch (status.toLowerCase()) {
      case "present":
        return (
          <Badge className="bg-green-100 text-green-800 border-green-200">
            <CheckCircle2 className="h-3 w-3 mr-1" />
            Present
          </Badge>
        )
      case "absent":
        return (
          <Badge className="bg-red-100 text-red-800 border-red-200">
            <XCircle className="h-3 w-3 mr-1" />
            Absent
          </Badge>
        )
      case "late":
        return (
          <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">
            <Clock className="h-3 w-3 mr-1" />
            Late
          </Badge>
        )
      case "excused":
        return (
          <Badge className="bg-blue-100 text-blue-800 border-blue-200">
            <AlertCircle className="h-3 w-3 mr-1" />
            Excused
          </Badge>
        )
      case "registered":
        return (
          <Badge className="bg-purple-100 text-purple-800 border-purple-200">
            <FileText className="h-3 w-3 mr-1" />
            Registered
          </Badge>
        )
      default:
        return <Badge variant="outline">Unknown</Badge>
    }
  }

  const toggleSelectAll = () => {
    if (selectedStudents.length === filteredAttendances.length) {
      setSelectedStudents([])
    } else {
      setSelectedStudents(filteredAttendances.map((attendance) => attendance.student_id))
    }
  }

  const toggleSelectStudent = (id: number) => {
    if (selectedStudents.includes(id)) {
      setSelectedStudents(selectedStudents.filter((studentId) => studentId !== id))
    } else {
      setSelectedStudents([...selectedStudents, id])
    }
  }

  // Local state update only - no API call
  const updateAttendanceStatus = (studentId: number, status: string) => {
    setAttendances(
      attendances.map((attendance) => (attendance.student_id === studentId ? { ...attendance, status } : attendance)),
    )

    toast({
      title: "Attendance updated locally",
      description: `Student attendance marked as ${status} (local only)`,
    })
  }

  // Local state update only - no API call
  const updateBulkAttendance = (status: string) => {
    setAttendances(
      attendances.map((attendance) =>
        selectedStudents.includes(attendance.student_id) ? { ...attendance, status } : attendance,
      ),
    )

    toast({
      title: "Attendance updated locally",
      description: `${selectedStudents.length} students marked as ${status} (local only)`,
    })
  }

  const toggleSelectForAttendance = (studentId: number) => {
    if (selectedForAttendance.includes(studentId)) {
      setSelectedForAttendance(selectedForAttendance.filter((id) => id !== studentId))
    } else {
      setSelectedForAttendance([...selectedForAttendance, studentId])
    }
  }

  const toggleSelectAllForAttendance = () => {
    if (selectedForAttendance.length === availableStudentsForAttendance.length) {
      setSelectedForAttendance([])
    } else {
      setSelectedForAttendance(availableStudentsForAttendance.map((student) => student.id))
    }
  }

  const confirmAttendance = async () => {
    try {
      console.log("[attendance][mark]", { sessionId, selectedCount: selectedForAttendance.length })

      await markAttendance(sessionId, selectedForAttendance)

      toast({
        title: "Attendance Marked",
        description: `${selectedForAttendance.length} students marked for attendance`,
      })

      // Reset selection
      setSelectedForAttendance([])

      // Refresh data
      const sessionData = await getClassSessionAttendances(sessionId)
      console.log("[attendance][refresh]", {
        id: sessionData.id,
        attendanceCount: sessionData.attendances?.length || 0,
      })
      setSession(sessionData)
      if (sessionData.attendances) {
        setAttendances(sessionData.attendances)
      }
    } catch (error) {
      console.error("Error marking attendance:", error)
      toast({
        title: "Error",
        description: "Failed to mark attendance",
        variant: "destructive",
      })
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-2">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
          <p className="text-gray-500">Loading attendance data...</p>
        </div>
      </div>
    )
  }

  const courseTitle = session?.package_class?.course_package?.course?.title || "Unknown Course"
  const classTitle = session?.package_class?.title || "Unknown Class"
  const instructorName = session?.instructor?.name || "Not assigned"

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" onClick={() => router.push("/admin/attendance")}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <h1 className="text-2xl font-bold">Session Attendance</h1>
      </div>

      {session && (
        <Card className="border-0 bg-white">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h2 className="text-xl font-semibold mb-4">
                  {courseTitle}: {classTitle}
                </h2>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-gray-500" />
                    <span>{formatDateTime(session.scheduled_at)}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    {session.online_meeting_link ? (
                      <>
                        <Video className="h-4 w-4 text-blue-500" />
                        <span className="text-blue-600">Online Meeting</span>
                      </>
                    ) : (
                      <>
                        <MapPin className="h-4 w-4 text-green-500" />
                        <span className="text-green-600">{session.offline_location || "No location specified"}</span>
                      </>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Users className="h-4 w-4 text-gray-500" />
                    <span>Instructor: {instructorName}</span>
                  </div>
                </div>
              </div>

              <div className="flex flex-col md:items-end justify-center gap-2">
                <div className="flex gap-2">
                  <Badge className="bg-green-100 text-green-800 border-green-200 px-3 py-1">
                    <CheckCircle2 className="h-4 w-4 mr-2" />
                    <span className="text-sm font-medium">
                      {attendances.filter((a) => a.status === "present").length} Present
                    </span>
                  </Badge>
                  <Badge className="bg-red-100 text-red-800 border-red-200 px-3 py-1">
                    <XCircle className="h-4 w-4 mr-2" />
                    <span className="text-sm font-medium">
                      {attendances.filter((a) => a.status === "absent").length} Absent
                    </span>
                  </Badge>
                </div>
                <div className="flex gap-2">
                  <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200 px-3 py-1">
                    <Clock className="h-4 w-4 mr-2" />
                    <span className="text-sm font-medium">
                      {attendances.filter((a) => a.status === "late").length} Late
                    </span>
                  </Badge>
                  <Badge className="bg-blue-100 text-blue-800 border-blue-200 px-3 py-1">
                    <AlertCircle className="h-4 w-4 mr-2" />
                    <span className="text-sm font-medium">
                      {attendances.filter((a) => a.status === "excused").length} Excused
                    </span>
                  </Badge>
                </div>
                <div className="flex gap-2 mt-2">
                  <Badge className="bg-purple-100 text-purple-800 border-purple-200 px-3 py-1">
                    <FileText className="h-4 w-4 mr-2" />
                    <span className="text-sm font-medium">
                      {attendances.filter((a) => a.status === "registered").length} Registered
                    </span>
                  </Badge>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      <Card className="border-0 bg-white">
        <CardHeader className="pb-0">
          <CardTitle className="text-xl font-heading">Student Attendance</CardTitle>
          <CardDescription>{filteredAttendances.length} students enrolled</CardDescription>
        </CardHeader>
        <CardContent className="p-6">
          <Tabs defaultValue="attended" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="attended">Attended</TabsTrigger>
              <TabsTrigger value="mark-attendance">Mark Attendance</TabsTrigger>
            </TabsList>

            <TabsContent value="attended" className="mt-6">
              <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-6">
                <div className="relative w-full md:w-96">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                  <Input
                    placeholder="Search students..."
                    className="pl-10 bg-gray-50"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
                <div className="flex gap-2 w-full md:w-auto">
                  <Button variant="outline" className="flex-1 md:flex-none">
                    <Filter className="mr-2 h-4 w-4" />
                    Filter
                  </Button>
                  <Button variant="outline" className="flex-1 md:flex-none">
                    <Download className="mr-2 h-4 w-4" />
                    Export
                  </Button>
                </div>
              </div>

              {selectedStudents.length > 0 && (
                <div className="bg-secondary-light rounded-lg p-4 mb-6 flex items-center justify-between">
                  <div className="flex items-center">
                    <CheckSquare className="h-5 w-5 text-secondary mr-2" />
                    <span className="font-medium">{selectedStudents.length} students selected</span>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => updateBulkAttendance("present")}>
                      <CheckCircle2 className="mr-2 h-4 w-4 text-green-600" />
                      Mark Present
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => updateBulkAttendance("absent")}>
                      <XCircle className="mr-2 h-4 w-4 text-red-600" />
                      Mark Absent
                    </Button>
                  </div>
                </div>
              )}

              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="text-left py-3 px-4 font-medium text-gray-600">
                        <div className="flex items-center">
                          <button onClick={toggleSelectAll} className="mr-3 focus:outline-none">
                            {selectedStudents.length === filteredAttendances.length &&
                            filteredAttendances.length > 0 ? (
                              <CheckSquare className="h-5 w-5 text-secondary" />
                            ) : (
                              <Square className="h-5 w-5 text-gray-400" />
                            )}
                          </button>
                          Student
                        </div>
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">Email</th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">Status</th>
                      <th className="text-right py-3 px-4 font-medium text-gray-600">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredAttendances.map((attendance, index) => (
                      <tr
                        key={attendance.id}
                        className={`border-b border-gray-100 ${index % 2 === 0 ? "bg-gray-50" : "bg-white"}`}
                      >
                        <td className="py-4 px-4">
                          <div className="flex items-center">
                            <button
                              onClick={() => toggleSelectStudent(attendance.student_id)}
                              className="mr-3 focus:outline-none"
                            >
                              {selectedStudents.includes(attendance.student_id) ? (
                                <CheckSquare className="h-5 w-5 text-secondary" />
                              ) : (
                                <Square className="h-5 w-5 text-gray-400" />
                              )}
                            </button>
                            <div className="flex items-center gap-3">
                              <div className="h-10 w-10 rounded-full overflow-hidden bg-gray-200 flex-shrink-0">
                                {attendance.student?.avatar ? (
                                  <Image
                                    src={attendance.student.avatar || "/placeholder.svg"}
                                    alt={attendance.student?.name || "Student"}
                                    width={40}
                                    height={40}
                                    className="object-cover"
                                  />
                                ) : (
                                  <div className="h-full w-full flex items-center justify-center bg-primary-light text-primary font-medium">
                                    {attendance.student?.name?.charAt(0) || "S"}
                                  </div>
                                )}
                              </div>
                              <div>
                                <h4 className="font-medium text-gray-900">
                                  {attendance.student?.name || "Unknown Student"}
                                </h4>
                                <p className="text-sm text-gray-500">ID: {attendance.student_id}</p>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td className="text-center py-4 px-4">
                          <span className="text-gray-600">{attendance.student?.email || "No email"}</span>
                        </td>
                        <td className="text-center py-4 px-4">{getStatusBadge(attendance.status || "unknown")}</td>
                        <td className="text-right py-4 px-4">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem
                                onClick={() => updateAttendanceStatus(attendance.student_id, "present")}
                              >
                                <CheckCircle2 className="mr-2 h-4 w-4 text-green-600" />
                                Mark Present
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => updateAttendanceStatus(attendance.student_id, "absent")}>
                                <XCircle className="mr-2 h-4 w-4 text-red-600" />
                                Mark Absent
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => updateAttendanceStatus(attendance.student_id, "late")}>
                                <Clock className="mr-2 h-4 w-4 text-yellow-600" />
                                Mark Late
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => updateAttendanceStatus(attendance.student_id, "excused")}
                              >
                                <AlertCircle className="mr-2 h-4 w-4 text-blue-600" />
                                Mark Excused
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => updateAttendanceStatus(attendance.student_id, "registered")}
                              >
                                <FileText className="mr-2 h-4 w-4 text-purple-600" />
                                Mark Registered
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {filteredAttendances.length === 0 && (
                <div className="text-center py-12">
                  <p className="text-gray-500">No students found for this session.</p>
                  {searchTerm && (
                    <Button variant="link" onClick={() => setSearchTerm("")} className="mt-2">
                      Clear search
                    </Button>
                  )}
                </div>
              )}
            </TabsContent>

            <TabsContent value="mark-attendance" className="mt-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium">Select Students to Mark Attendance</h3>
                  <Button
                    onClick={confirmAttendance}
                    disabled={selectedForAttendance.length === 0}
                    className="bg-primary hover:bg-primary/90"
                  >
                    Confirm ({selectedForAttendance.length})
                  </Button>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-gray-200">
                        <th className="text-left py-3 px-4 font-medium text-gray-600">
                          <div className="flex items-center">
                            <button onClick={toggleSelectAllForAttendance} className="mr-3 focus:outline-none">
                              {selectedForAttendance.length === availableStudentsForAttendance.length &&
                              availableStudentsForAttendance.length > 0 ? (
                                <CheckSquare className="h-5 w-5 text-secondary" />
                              ) : (
                                <Square className="h-5 w-5 text-gray-400" />
                              )}
                            </button>
                            Student
                          </div>
                        </th>
                        <th className="text-center py-3 px-4 font-medium text-gray-600">Email</th>
                        <th className="text-center py-3 px-4 font-medium text-gray-600">Contact</th>
                      </tr>
                    </thead>
                    <tbody>
                      {availableStudentsForAttendance.map((student, index) => (
                        <tr
                          key={student.id}
                          className={`border-b border-gray-100 ${index % 2 === 0 ? "bg-gray-50" : "bg-white"}`}
                        >
                          <td className="py-4 px-4">
                            <div className="flex items-center">
                              <button
                                onClick={() => toggleSelectForAttendance(student.id)}
                                className="mr-3 focus:outline-none"
                              >
                                {selectedForAttendance.includes(student.id) ? (
                                  <CheckSquare className="h-5 w-5 text-secondary" />
                                ) : (
                                  <Square className="h-5 w-5 text-gray-400" />
                                )}
                              </button>
                              <div className="flex items-center gap-3">
                                <div className="h-10 w-10 rounded-full overflow-hidden bg-gray-200 flex-shrink-0">
                                  {student.avatar ? (
                                    <Image
                                      src={student.avatar || "/placeholder.svg"}
                                      alt={student.name}
                                      width={40}
                                      height={40}
                                      className="object-cover"
                                    />
                                  ) : (
                                    <div className="h-full w-full flex items-center justify-center bg-primary-light text-primary font-medium">
                                      {student.name.charAt(0)}
                                    </div>
                                  )}
                                </div>
                                <div>
                                  <h4 className="font-medium text-gray-900">{student.name}</h4>
                                  <p className="text-sm text-gray-500">ID: {student.id}</p>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td className="text-center py-4 px-4">
                            <span className="text-gray-600">{student.email}</span>
                          </td>
                          <td className="text-center py-4 px-4">
                            <span className="text-gray-600">{student.contact_number || "N/A"}</span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {availableStudentsForAttendance.length === 0 && (
                  <div className="text-center py-12">
                    <p className="text-gray-500">
                      {allStudents.length === 0
                        ? "No students available."
                        : "All students are already in the attendance records."}
                    </p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}