"use client"

import { useState, useEffect, useRef } from "react"
import { Calendar, momentLocalizer, Views } from "react-big-calendar"
import moment from "moment"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import Link from "next/link"
import {
  ChevronLeft,
  ChevronRight,
  Filter,
  CalendarIcon,
  CalendarDays,
  CalendarIcon as CalendarMonth,
  Clock,
  BookOpen,
  CheckCircle,
  ExternalLink,
  User,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useTranslation } from "react-i18next"
import { Checkbox } from "@/components/ui/checkbox"
import { getAllClassSessions } from "@/services/student_page/query"
import type { ClassSession } from "@/services/types"
import { getCourses } from "@/services/courses/query"
import { getCoursePackageStudents } from "@/services/course_package_students/query"

// Import the react-big-calendar styles
import "react-big-calendar/lib/css/react-big-calendar.css"

// Enhanced custom styles for the calendar (same as admin)
const calendarStyles = `
  .calendar-container {
    height: 100%;
    font-family: Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Header styling */
  .rbc-header {
    padding: 12px 3px;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .rbc-time-header-content .rbc-header.rbc-today {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
  }
  
  /* View containers */
  .rbc-time-view, .rbc-month-view {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
  }
  
  /* Event styling */
  .rbc-event {
    border-radius: 4px;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0px !important;
    padding: 0px !important;
  }
  
  .rbc-day-slot .rbc-event {
    border-left: 4px solid rgba(0, 0, 0, 0.15);
  }
  
  .rbc-event-label {
    font-size: 0.75rem;
    font-weight: 500;
  }
  
  .rbc-event-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  /* Time grid */
  .rbc-time-content {
    border-top: 1px solid #f0f0f0;
  }
  
  .rbc-time-header-content {
    border-left: 1px solid #f0f0f0;
  }
  
  .rbc-timeslot-group {
    border-bottom: 1px solid #f3f4f6;
  }
  
  .rbc-time-slot {
    font-size: 0.75rem;
  }
  
  /* Today highlighting */
  .rbc-today {
    background-color: rgba(59, 130, 246, 0.05);
  }
  
  /* Off-range days */
  .rbc-off-range-bg {
    background: #f9fafb;
  }
  
  /* Toolbar buttons */
  .rbc-toolbar button {
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .rbc-toolbar button:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
  }
  
  .rbc-toolbar button.rbc-active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }
  
  .rbc-toolbar button.rbc-active:hover {
    background-color: #2563eb;
    border-color: #2563eb;
  }
  
  /* Month view specific */
  .rbc-month-view .rbc-date-cell {
    padding: 4px 8px;
    text-align: right;
    font-size: 0.875rem;
  }
  
  .rbc-month-view .rbc-date-cell.rbc-now {
    font-weight: 600;
    color: #2563eb;
  }
  
  .rbc-row-segment {
    padding: 2px 4px;
  }
  
  /* Selection highlight */
  .rbc-slot-selection {
    background-color: rgba(59, 130, 246, 0.2);
  }
  
  .rbc-selected-cell {
    background-color: rgba(59, 130, 246, 0.1);
  }
  
  /* Agenda view */
  .rbc-agenda-view table {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  .rbc-agenda-view table thead {
    background-color: #f9fafb;
  }
  
  .rbc-agenda-view table th {
    padding: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .rbc-agenda-view table td {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  
  /* Responsive adjustments */
  @media (max-width: 640px) {
    .rbc-toolbar {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    
    .rbc-toolbar .rbc-toolbar-label {
      margin: 0.5rem 0;
    }
  }
`

// Define the event type
interface CalendarEvent {
  id: number
  title: string
  start: Date
  end: Date
  courseId: number
  courseName: string
  instructorId: number
  instructorName: string
  location: string
  color: string
  status?: string
  isEnrolled: boolean
  coursePackageId: number
}

// Define the course type
interface Course {
  id: number
  name: string
  color?: string
}

// Define the enrollment type
interface Enrollment {
  id: number
  student_id: number
  course_package_id: number
  status: string
}

const localizer = momentLocalizer(moment)

export default function StudentCalendarPage() {
  const { t } = useTranslation()
  const router = useRouter()
  const [view, setView] = useState(Views.MONTH) // Default to month view
  const [date, setDate] = useState(new Date())
  const [events, setEvents] = useState<CalendarEvent[]>([])
  const [courses, setCourses] = useState<Course[]>([])
  const [enrollments, setEnrollments] = useState<Enrollment[]>([])
  const [filteredCourses, setFilteredCourses] = useState<number[]>([])
  const [showOnlyEnrolled, setShowOnlyEnrolled] = useState(false)
  const [isFilterOpen, setIsFilterOpen] = useState(false)
  const [studentId, setStudentId] = useState<number | null>(null)
  const filterRef = useRef<HTMLDivElement>(null)

  // Get student ID from localStorage
  useEffect(() => {
    console.log("Getting student ID from localStorage...")
    const loginInfo = localStorage.getItem("login_info")
    if (loginInfo) {
      const parsedInfo = JSON.parse(loginInfo)
      console.log("Login info:", parsedInfo)
      if (parsedInfo.student_id) {
        setStudentId(parsedInfo.student_id)
        console.log("Student ID set to:", parsedInfo.student_id)
      }
    }
  }, [])

  // Load data
  useEffect(() => {
    const fetchData = async () => {
      try {
        console.log("Starting to fetch calendar data...")

        // Fetch sessions
        console.log("Fetching class sessions...")
        const sessionsResponse = await getAllClassSessions()
        const sessions = sessionsResponse.class_sessions
        console.log("[calendar] Class sessions fetched:", sessions)

        // Fetch courses
        console.log("Fetching courses...")
        const coursesData = await getCourses()
        console.log("[calendar] Courses fetched:", coursesData)

        // Fetch student enrollments if studentId is available
        let enrollmentsData: Enrollment[] = []
        if (studentId) {
          console.log("Fetching student enrollments for studentId:", studentId)
          enrollmentsData = await getCoursePackageStudents(studentId)
          console.log("[calendar] Student enrollments fetched:", enrollmentsData)
        } else {
          console.log("No student ID available, skipping enrollment fetch")
        }

        // Map courses with their colors (same logic as admin calendar)
        console.log("Mapping courses...")
        const mappedCourses = coursesData.map((course, index) => {
          const colors = [
            "#3b82f6", // blue
            "#10b981", // green
            "#f59e0b", // amber
            "#8b5cf6", // purple
            "#ec4899", // pink
            "#06b6d4", // cyan
            "#f97316", // orange
          ]

          return {
            id: course.id,
            name: course.title,
            color: colors[course.id % colors.length], // Use course.id instead of index for consistency
          }
        })
        console.log("[calendar] Mapped courses:", mappedCourses)

        // Map sessions to calendar events
        console.log("Mapping sessions to calendar events...")
        const mappedEvents = sessions
          .map((session: ClassSession) => {
            console.log("[calendar] Processing session:", session)

            const course = coursesData.find((c) => c.id === session.course_package_id) || { title: "Unknown Course" }
            console.log("[calendar] Found course for session:", course)

            // Check if student is enrolled in this course package
            const isEnrolled = studentId
              ? enrollmentsData.some(
                  (enrollment) =>
                    enrollment.course_package_id === session.course_package_id && enrollment.status === "active",
                )
              : false
            console.log(`[calendar] Student enrolled in course ${session.course_package_id}:`, isEnrolled)

            // Generate a consistent color based on course ID (same as admin calendar)
            const colors = [
              "#3b82f6", // blue
              "#10b981", // green
              "#f59e0b", // amber
              "#8b5cf6", // purple
              "#ec4899", // pink
              "#06b6d4", // cyan
              "#f97316", // orange
            ]

            // Use the same logic as admin calendar for color assignment
            const courseId = session.package_class.course_package.course_id
            const color = colors[(session.package_class?.course_package?.course?.id || session.id) % colors.length]

            // Use scheduled_at for start time
            const startDate = new Date(session.scheduled_at)

            // Calculate end time based on duration
            const endDate = new Date(startDate.getTime() + (session.duration || 60) * 60000)

            console.log("[calendar] Parsed start date:", startDate)
            console.log("[calendar] Parsed end date:", endDate)

            if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
              console.error("[calendar] Invalid date for session:", session)
              return null
            }

            // Determine location display
            const locationDisplay = session.online_meeting_link
              ? "Online"
              : session.offline_location || "Unknown Location"

            return {
              id: session.id,
              title: session.course_title || `Session ${session.id}`,
              start: startDate,
              end: endDate,
              courseId: session.course_package_id,
              courseName: course.title,
              instructorId: session.instructor_id,
              instructorName: session.instructor_name,
              location: locationDisplay,
              color,
              status: session.status,
              isEnrolled,
              coursePackageId: session.course_package_id,
            }
          })
          .filter((event) => event !== null) // Filter out any null events

        console.log("[calendar] Mapped events:", mappedEvents)

        setEvents(mappedEvents)
        setCourses(mappedCourses)
        setEnrollments(enrollmentsData)

        console.log("[calendar] Data fetching complete. Events set to:", mappedEvents)
      } catch (error) {
        console.error("[calendar] Error fetching calendar data:", error)
      }
    }

    fetchData()
  }, [studentId])

  // Filter events based on selected courses and enrollment status
  const filteredEvents = events.filter((event) => {
    const courseMatch = filteredCourses.length === 0 || filteredCourses.includes(event.courseId)
    const enrollmentMatch = !showOnlyEnrolled || event.isEnrolled
    return courseMatch && enrollmentMatch
  })

  // Handle event selection
  const handleSelectEvent = (event: CalendarEvent) => {
    console.log("[calendar] Event selected:", event)
    router.push(`/student/sessions/${event.id}`)
  }

  // Custom event component with color coding and enrollment status
  const EventComponent = ({ event }: { event: CalendarEvent }) => {
    console.log("[calendar] Rendering event:", event)
    return (
      <div
        className="rounded px-2 py-1 text-white overflow-hidden text-sm transition-opacity hover:opacity-90"
        style={{ backgroundColor: event.color }}
      >
        <div className="font-medium truncate">{event.title}</div>
        {view !== Views.MONTH && (
          <>
            <div className="text-xs opacity-90 truncate">{event.instructorName}</div>
            <div className="text-xs opacity-90 truncate">{event.location}</div>
            <div className="text-xs mt-1">
              {event.isEnrolled ? (
                <Badge className="bg-green-500 text-white text-xs">Enrolled</Badge>
              ) : (
                <Badge variant="outline" className="bg-gray-200 text-gray-700 text-xs">
                  Not Enrolled
                </Badge>
              )}
            </div>
          </>
        )}
      </div>
    )
  }

  // Add the styles to the document
  useEffect(() => {
    console.log("[calendar] Adding calendar styles to document")
    const styleElement = document.createElement("style")
    styleElement.innerHTML = calendarStyles
    document.head.appendChild(styleElement)

    return () => {
      document.head.removeChild(styleElement)
    }
  }, [])

  // Close filter dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (filterRef.current && !filterRef.current.contains(event.target as Node)) {
        setIsFilterOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [filterRef])

  // Get upcoming sessions
  const upcomingSessions = events
    .filter((event) => new Date(event.start) > new Date())
    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
    .slice(0, 3)

  // Get enrolled courses count
  const enrolledCoursesCount = courses.filter((course) =>
    enrollments.some((enrollment) => enrollment.course_package_id === course.id && enrollment.status === "active"),
  ).length

  console.log(
    "[calendar] StudentCalendarPage rendering with view:",
    view,
    "date:",
    date,
    "events count:",
    events.length,
  )

  return (
    <div className="p-6 space-y-6">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t("student.calendar.title", "My Calendar")}</h1>
          <p className="text-muted-foreground">
            {t("student.calendar.description", "View all your scheduled classes and available sessions")}
          </p>
        </div>
      </div>

      <Card className="shadow-sm">
        <CardHeader className="pb-3 border-b">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <CardTitle className="text-xl">{t("student.calendar.schedule", "Schedule")}</CardTitle>
              <CardDescription className="text-sm">{moment(date).format("MMMM YYYY")}</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                size="icon"
                className="h-9 w-9 bg-transparent"
                onClick={() =>
                  setDate(
                    moment(date)
                      .subtract(1, view === Views.DAY ? "day" : view === Views.WEEK ? "week" : "month")
                      .toDate(),
                  )
                }
                aria-label="Previous"
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="sm" onClick={() => setDate(new Date())} className="h-9">
                <CalendarIcon className="h-4 w-4 mr-2" />
                {t("student.calendar.today", "Today")}
              </Button>
              <Button
                variant="outline"
                size="icon"
                className="h-9 w-9 bg-transparent"
                onClick={() =>
                  setDate(
                    moment(date)
                      .add(1, view === Views.DAY ? "day" : view === Views.WEEK ? "week" : "month")
                      .toDate(),
                  )
                }
                aria-label="Next"
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row justify-between mb-4 gap-4">
            <Tabs
              defaultValue={Views.MONTH}
              className="w-full md:w-auto"
              onValueChange={(value) => setView(value as any)}
            >
              <TabsList>
                <TabsTrigger value={Views.DAY}>
                  <Clock className="h-4 w-4 mr-2" />
                  {t("student.calendar.day", "Day")}
                </TabsTrigger>
                <TabsTrigger value={Views.WEEK}>
                  <CalendarDays className="h-4 w-4 mr-2" />
                  {t("student.calendar.week", "Week")}
                </TabsTrigger>
                <TabsTrigger value={Views.MONTH}>
                  <CalendarMonth className="h-4 w-4 mr-2" />
                  {t("student.calendar.month", "Month")}
                </TabsTrigger>
              </TabsList>
            </Tabs>

            <div className="relative" ref={filterRef}>
              <Button variant="outline" onClick={() => setIsFilterOpen(!isFilterOpen)} className="flex items-center">
                <Filter className="h-4 w-4 mr-2" />
                {t("student.calendar.filter", "Filter")}
                {(filteredCourses.length > 0 || showOnlyEnrolled) && (
                  <Badge className="ml-2 bg-primary text-white" variant="secondary">
                    {filteredCourses.length + (showOnlyEnrolled ? 1 : 0)}
                  </Badge>
                )}
              </Button>

              {isFilterOpen && (
                <div className="absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-10 border border-gray-200 overflow-hidden">
                  <div className="p-3 border-b border-gray-200">
                    <div className="flex items-center justify-between">
                      <h3 className="font-medium">{t("student.calendar.filterByCourse", "Filter by Course")}</h3>
                      {filteredCourses.length > 0 && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-xs"
                          onClick={() => setFilteredCourses([])}
                        >
                          {t("student.calendar.clear", "Clear")}
                        </Button>
                      )}
                    </div>
                    <div className="mt-2 space-y-2 max-h-40 overflow-y-auto pr-1">
                      {courses.map((course) => (
                        <div key={course.id} className="flex items-center">
                          <Checkbox
                            id={`course-${course.id}`}
                            checked={filteredCourses.includes(course.id)}
                            onCheckedChange={(checked) => {
                              if (checked) {
                                setFilteredCourses((prev) => [...prev, course.id])
                              } else {
                                setFilteredCourses((prev) => prev.filter((id) => id !== course.id))
                              }
                            }}
                            className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
                          />
                          <label
                            htmlFor={`course-${course.id}`}
                            className="ml-2 text-sm text-gray-700 flex items-center"
                          >
                            <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: course.color }}></div>
                            {course.name}
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="p-3">
                    <div className="flex items-center">
                      <Checkbox
                        id="enrolled-only"
                        checked={showOnlyEnrolled}
                        onCheckedChange={(checked) => setShowOnlyEnrolled(!!checked)}
                        className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
                      />
                      <label htmlFor="enrolled-only" className="ml-2 text-sm text-gray-700">
                        {t("student.calendar.showOnlyEnrolled", "Show only enrolled courses")}
                      </label>
                    </div>
                  </div>

                  <div className="p-3 border-t border-gray-200 flex justify-between">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setFilteredCourses([])
                        setShowOnlyEnrolled(false)
                      }}
                    >
                      {t("student.calendar.clearFilters", "Clear All")}
                    </Button>
                    <Button size="sm" onClick={() => setIsFilterOpen(false)}>
                      {t("student.calendar.apply", "Apply")}
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="h-[700px] bg-white rounded-md overflow-auto border border-gray-100 font-sans">
            {events.length === 0 ? (
              <div className="h-full flex items-center justify-center text-gray-500">
                <div className="text-center">
                  <CalendarIcon className="h-12 w-12 mx-auto mb-4 opacity-20" />
                  <p className="text-lg font-medium">{t("student.calendar.noEvents", "No events to display")}</p>
                  <p className="text-sm mt-2">
                    {t("student.calendar.browseCoursesPrompt", "Browse courses to find available sessions")}
                  </p>
                  <Button variant="outline" className="mt-4 bg-transparent" onClick={() => router.push("/courses")}>
                    {t("student.calendar.browseCourses", "Browse Courses")}
                  </Button>
                </div>
              </div>
            ) : (
              <Calendar
                localizer={localizer}
                events={filteredEvents}
                startAccessor="start"
                endAccessor="end"
                view={view}
                onView={(newView) => {
                  console.log("[calendar] View changed to:", newView)
                  setView(newView)
                }}
                date={date}
                onNavigate={(newDate) => {
                  console.log("[calendar] Date navigated to:", newDate)
                  setDate(newDate)
                }}
                selectable={false}
                onSelectEvent={handleSelectEvent}
                components={{
                  event: EventComponent as any,
                }}
                formats={{
                  timeGutterFormat: (date, culture, localizer) => localizer.format(date, "HH:mm", culture),
                  dayFormat: (date, culture, localizer) => localizer.format(date, "ddd DD", culture),
                  dayHeaderFormat: (date, culture, localizer) => localizer.format(date, "dddd, MMMM D", culture),
                  dayRangeHeaderFormat: ({ start, end }, culture, localizer) =>
                    `${localizer.format(start, "MMMM D", culture)} - ${localizer.format(end, "MMMM D", culture)}`,
                  eventTimeRangeFormat: ({ start, end }, culture, localizer) =>
                    `${localizer.format(start, "HH:mm", culture)} - ${localizer.format(end, "HH:mm", culture)}`,
                  agendaDateFormat: (date, culture, localizer) => localizer.format(date, "ddd D", culture),
                  agendaTimeFormat: (date, culture, localizer) => localizer.format(date, "HH:mm", culture),
                  agendaTimeRangeFormat: ({ start, end }, culture, localizer) =>
                    `${localizer.format(start, "HH:mm", culture)} - ${localizer.format(end, "HH:mm", culture)}`,
                }}
                className="calendar-container"
              />
            )}
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <Card className="col-span-1 shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <BookOpen className="h-4 w-4 mr-2 text-gray-500" />
              {t("student.calendar.legend", "Legend")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {courses.slice(0, 5).map((course) => (
                <div key={course.id} className="flex items-center">
                  <div className="w-4 h-4 rounded-full mr-2" style={{ backgroundColor: course.color }}></div>
                  <span className="text-sm">{course.name}</span>
                </div>
              ))}
              <div className="pt-2 mt-2 border-t border-gray-100">
                <div className="flex items-center mb-2">
                  <Badge className="bg-green-500 text-white mr-2">Enrolled</Badge>
                  <span className="text-sm">You are enrolled in this course</span>
                </div>
                <div className="flex items-center">
                  <Badge variant="outline" className="bg-gray-200 text-gray-700 mr-2">
                    Not Enrolled
                  </Badge>
                  <span className="text-sm">You are not enrolled in this course</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="col-span-1 md:col-span-2 lg:col-span-2 shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <CalendarDays className="h-4 w-4 mr-2 text-gray-500" />
              {t("student.calendar.upcomingSessions", "Upcoming Sessions")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {upcomingSessions.length > 0 ? (
                upcomingSessions.map((session) => (
                  <div
                    key={session.id}
                    className="flex items-start p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
                    onClick={() => router.push(`/student/sessions/${session.id}`)}
                  >
                    <div className="mr-3 text-center">
                      <div className="text-xs font-medium text-gray-500">{moment(session.start).format("MMM")}</div>
                      <div className="text-xl font-bold">{moment(session.start).format("DD")}</div>
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">{session.title}</div>
                      <div className="text-sm text-gray-500">
                        {moment(session.start).format("HH:mm")} - {moment(session.end).format("HH:mm")}
                      </div>
                      <div className="text-sm text-gray-500">{session.instructorName}</div>
                      <div className="mt-2 flex items-center gap-2">
                        {session.isEnrolled ? (
                          <Badge className="bg-green-500 text-white">
                            <CheckCircle className="h-3 w-3 mr-1" />
                            Enrolled
                          </Badge>
                        ) : (
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="bg-gray-200 text-gray-700">
                              Not Enrolled
                            </Badge>
                            <Link
                              href={`/enroll/course/${session.coursePackageId}`}
                              className="text-xs text-blue-600 hover:text-blue-800 flex items-center"
                            >
                              Enroll Now <ExternalLink className="h-3 w-3 ml-1" />
                            </Link>
                          </div>
                        )}
                      </div>
                    </div>
                    <Badge style={{ backgroundColor: session.color }} className="text-white">
                      {session.location}
                    </Badge>
                  </div>
                ))
              ) : (
                <div className="text-center py-6 text-gray-500">
                  <CalendarIcon className="h-12 w-12 mx-auto mb-2 opacity-20" />
                  <p>{t("student.calendar.noUpcomingSessions", "No upcoming sessions")}</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        <Card className="col-span-1 md:col-span-2 shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <User className="h-4 w-4 mr-2 text-gray-500" />
              {t("student.calendar.enrollmentStatus", "My Enrollment Status")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 rounded-lg border border-gray-100">
                <div className="flex items-center">
                  <CheckCircle className="h-5 w-5 text-green-500 mr-2" />
                  <span className="text-sm font-medium">Enrolled Courses</span>
                </div>
                <Badge className="bg-green-500 text-white">{enrolledCoursesCount}</Badge>
              </div>

              <div className="flex items-center justify-between p-3 rounded-lg border border-gray-100">
                <div className="flex items-center">
                  <BookOpen className="h-5 w-5 text-blue-500 mr-2" />
                  <span className="text-sm font-medium">Available Courses</span>
                </div>
                <Badge variant="outline" className="bg-blue-50 text-blue-700">
                  {courses.length - enrolledCoursesCount}
                </Badge>
              </div>

              <div className="flex items-center justify-between p-3 rounded-lg border border-gray-100">
                <div className="flex items-center">
                  <CalendarDays className="h-5 w-5 text-purple-500 mr-2" />
                  <span className="text-sm font-medium">Total Sessions</span>
                </div>
                <Badge variant="outline" className="bg-purple-50 text-purple-700">
                  {events.length}
                </Badge>
              </div>

              <div className="pt-2 border-t border-gray-100">
                <Button variant="outline" className="w-full bg-transparent" onClick={() => router.push("/courses")}>
                  <ExternalLink className="h-4 w-4 mr-2" />
                  Browse More Courses
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}