"use client"

import { useState, useEffect } from "react"
import { Loader2, Calendar } from "lucide-react"
import { SessionTable } from "@/components/student/sessions/session-table"
import { getAllSubscribedSessions, getClassAttendances } from "@/services/students/query"
import type { ClassSession, ClassAttendance } from "@/services/types"

export default function StudentSessionsPage() {
  console.log("[sessions] Component rendered")

  const [loading, setLoading] = useState(true)
  const [sessions, setSessions] = useState<(ClassSession & { attended?: boolean; attendanceStatus?: string })[]>([])

  console.log("[sessions] Component state initialized, loading:", loading)

  useEffect(() => {
    console.log("[sessions] useEffect triggered")

    const fetchData = async () => {
      try {
        setLoading(true)
        console.log("[sessions] Fetching sessions and attendance data...")

        // Get all sessions and attendance records in parallel
        const [allSessions, attendanceRecords] = await Promise.all([getAllSubscribedSessions(), getClassAttendances()])

        console.log(
          `[sessions] Fetched ${allSessions.length} sessions and ${attendanceRecords.length} attendance records`,
        )

        // Map attendance status to sessions
        const sessionsWithAttendance = allSessions.map((session) => {
          // Find attendance record for this session
          //const attendance = attendanceRecords.find((a: ClassAttendance) => a.session_id === session.id)

          const attendance = attendanceRecords.find((a: ClassAttendance) => {
  console.log('Checking attendance record:', a);
  console.log('Comparing session_id:', a.session_id, 'with session.id:', session.id);
  return Number(a.session_id) === Number(session.id);
});

          return {
            ...session,
            attended: attendance != null,
            attendanceStatus: attendance ? attendance.status : "not_recorded",
          }
        })

        // Sort sessions by scheduled_at date (upcoming first)
        const sortedSessions = [...sessionsWithAttendance].sort(
          (a, b) => new Date(a.scheduled_at).getTime() - new Date(b.scheduled_at).getTime(),
        )

        setSessions(sortedSessions)
      } catch (error) {
        console.error("[sessions] Error fetching sessions:", error)
      } finally {
        console.log("[sessions] Setting loading to false")
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  console.log("[sessions] Rendering with sessions count:", sessions.length, "loading:", loading)

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex items-center mb-8">
        <Calendar className="h-6 w-6 text-secondary mr-2" />
        <h1 className="text-3xl font-bold text-gray-900">My Sessions</h1>
      </div>

      {loading ? (
        <div className="flex justify-center items-center h-64">
          <Loader2 className="h-8 w-8 animate-spin text-secondary" />
        </div>
      ) : sessions.length > 0 ? (
        <SessionTable sessions={sessions} />
      ) : (
        <div className="text-center py-12 bg-gray-50 rounded-lg">
          <Calendar className="h-12 w-12 mx-auto text-gray-400 mb-2" />
          <h3 className="text-xl font-medium text-gray-900 mb-2">No Sessions Found</h3>
          <p className="text-gray-600 mb-6">Enroll in courses to see your class schedule</p>
          <a
            href="/courses"
            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-secondary hover:bg-secondary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary"
          >
            Browse Courses
          </a>
        </div>
      )}
    </div>
  )
}