"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 {
  ChevronLeft,
  ChevronRight,
  Plus,
  Filter,
  CalendarIcon,
  CalendarDays,
  CalendarIcon as CalendarMonth,
  Clock,
  X,
  CheckCircle2,
  Users,
  BookOpen,
} 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 { Avatar } from "@/components/ui/avatar"
import { getClassSessions } from "@/services/admin_page/query"
import type { ClassSession, Instructor as InstructorData, Course as CourseData } from "@/types" // Declare types

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

// Enhanced custom styles for the calendar
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;
  }

  .rbc-toolbar .rbc-btn-group {
    display: none
  }
  
  /* 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
}

// Define the instructor type
interface Instructor {
  id: number
  name: string
  avatar?: string
  availability?: "available" | "busy"
}

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

const localizer = momentLocalizer(moment)

export default function AdminCalendarPage() {
  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 [instructors, setInstructors] = useState<Instructor[]>([])
  const [courses, setCourses] = useState<Course[]>([])
  const [filteredInstructors, setFilteredInstructors] = useState<number[]>([])
  const [filteredCourses, setFilteredCourses] = useState<number[]>([])
  const [isFilterOpen, setIsFilterOpen] = useState(false)
  const filterRef = useRef<HTMLDivElement>(null)

  // Sample data for instructors and courses
  const instructorsData: InstructorData[] = [
    { id: 1, name: "John Doe", avatar: "avatar1.jpg" },
    { id: 2, name: "Jane Smith", avatar: "avatar2.jpg" },
  ]

  const coursesData: CourseData[] = [
    { id: 1, title: "Course 1" },
    { id: 2, title: "Course 2" },
  ]

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

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

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

            // Access course through the nested structure
            const course = session.package_class?.course_package?.course || { title: "Unknown Course" }
            console.log("Found course for session:", course)

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

            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("Parsed start date:", startDate)
            console.log("Parsed end date:", endDate)

            if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
              console.error("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.title || `Session ${session.id}`,
              start: startDate,
              end: endDate,
              courseId: session.package_class?.course_package?.course?.id || session.id,
              courseName: course.title,
              instructorId: session.instructor_id,
              instructorName: session.instructor_name,
              location: locationDisplay,
              color,
              status: session.status,
            }
          })
          .filter((event) => event !== null) // Filter out any null events

        console.log("Mapped events:", mappedEvents)

        // Map instructors with random availability for demo
        console.log("Mapping instructors...")
        const mappedInstructors = instructorsData.map((instructor) => ({
          id: instructor.id,
          name: instructor.name,
          avatar: instructor.avatar,
          availability: Math.random() > 0.3 ? "available" : ("busy" as "available" | "busy"),
        }))
        console.log("Mapped instructors:", mappedInstructors)

        // Map courses with their colors
        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[index % colors.length],
          }
        })
        console.log("Mapped courses:", mappedCourses)

        setEvents(mappedEvents)
        setInstructors(mappedInstructors)
        setCourses(mappedCourses)

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

    fetchData()
  }, [])

  // Log when events state changes
  useEffect(() => {
    console.log("Events state updated:", events)
  }, [events])

  // Filter events based on selected instructors and courses
  const filteredEvents = events.filter((event) => {
    const instructorMatch = filteredInstructors.length === 0 || filteredInstructors.includes(event.instructorId)
    const courseMatch = filteredCourses.length === 0 || filteredCourses.includes(event.courseId)
    return instructorMatch && courseMatch
  })

  // Log filtered events
  useEffect(() => {
    console.log("Filtered events:", filteredEvents)
  }, [filteredEvents])

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

  // Handle slot selection (creating new event)
  const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
    console.log("Slot selected:", { start, end })
    // Format the date and time for the URL
    const startDate = moment(start).format("YYYY-MM-DD")
    const startTime = moment(start).format("HH:mm")
    const endTime = moment(end).format("HH:mm")

    router.push(`/admin/sessions/new?date=${startDate}&start=${startTime}&end=${endTime}`)
  }

  // Custom event component with color coding
  const EventComponent = ({ event }: { event: CalendarEvent }) => {
    console.log("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>
    )
  }

  // Add the styles to the document
  useEffect(() => {
    console.log("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)

  console.log("Upcoming sessions:", upcomingSessions)

  // Log when the component renders
  console.log("AdminCalendarPage 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("admin.calendar.title", "Calendar")}</h1>
          <p className="text-muted-foreground">
            {t("admin.calendar.description", "Manage all class sessions and instructor schedules")}
          </p>
        </div>
        <Button
          onClick={() => router.push("/admin/sessions/new")}
          className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transition-all"
        >
          <Plus className="mr-2 h-4 w-4" />
          {t("admin.calendar.addSession", "Add Session")}
        </Button>
      </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("admin.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"
                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("admin.calendar.today", "Today")}
              </Button>
              <Button
                variant="outline"
                size="icon"
                className="h-9 w-9"
                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("admin.calendar.day", "Day")}
                </TabsTrigger>
                <TabsTrigger value={Views.WEEK}>
                  <CalendarDays className="h-4 w-4 mr-2" />
                  {t("admin.calendar.week", "Week")}
                </TabsTrigger>
                <TabsTrigger value={Views.MONTH}>
                  <CalendarMonth className="h-4 w-4 mr-2" />
                  {t("admin.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("admin.calendar.filter", "Filter")}
                {(filteredCourses.length > 0 || filteredInstructors.length > 0) && (
                  <Badge className="ml-2 bg-primary text-white" variant="secondary">
                    {filteredCourses.length + filteredInstructors.length}
                  </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("admin.calendar.filterByCourse", "Filter by Course")}</h3>
                      {filteredCourses.length > 0 && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-xs"
                          onClick={() => setFilteredCourses([])}
                        >
                          {t("admin.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 justify-between">
                      <h3 className="font-medium">{t("admin.calendar.filterByInstructor", "Filter by Instructor")}</h3>
                      {filteredInstructors.length > 0 && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-xs"
                          onClick={() => setFilteredInstructors([])}
                        >
                          {t("admin.calendar.clear", "Clear")}
                        </Button>
                      )}
                    </div>
                    <div className="mt-2 space-y-2 max-h-40 overflow-y-auto pr-1">
                      {instructors.map((instructor) => (
                        <div key={instructor.id} className="flex items-center">
                          <Checkbox
                            id={`instructor-${instructor.id}`}
                            checked={filteredInstructors.includes(instructor.id)}
                            onCheckedChange={(checked) => {
                              if (checked) {
                                setFilteredInstructors((prev) => [...prev, instructor.id])
                              } else {
                                setFilteredInstructors((prev) => prev.filter((id) => id !== instructor.id))
                              }
                            }}
                            className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
                          />
                          <label htmlFor={`instructor-${instructor.id}`} className="ml-2 text-sm text-gray-700">
                            {instructor.name}
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>

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

          <div className="h-[700px] bg-white rounded-md overflow-auto">
            {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("admin.calendar.noEvents", "No events to display")}</p>
                  <p className="text-sm mt-2">{t("admin.calendar.addSessionPrompt", "Add a session to get started")}</p>
                </div>
              </div>
            ) : (
              <Calendar
                localizer={localizer}
                events={filteredEvents}
                startAccessor="start"
                endAccessor="end"
                view={view}
                onView={(newView) => {
                  console.log("View changed to:", newView)
                  setView(newView)
                }}
                date={date}
                onNavigate={(newDate) => {
                  console.log("Date navigated to:", newDate)
                  setDate(newDate)
                }}
                selectable
                onSelectEvent={handleSelectEvent}
                onSelectSlot={handleSelectSlot}
                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("admin.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>
          </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("admin.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(`/admin/sessions/${session.id}/edit`)}
                  >
                    <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>
                    <Badge style={{ backgroundColor: session.color }} className="text-white">
                      {session.location.includes("Online") ? "Online" : "In-Person"}
                    </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("admin.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">
              <Users className="h-4 w-4 mr-2 text-gray-500" />
              {t("admin.calendar.instructorAvailability", "Instructor Availability")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {instructors.slice(0, 4).map((instructor) => (
                <div
                  key={instructor.id}
                  className="flex items-center justify-between p-2 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center">
                    <Avatar className="h-8 w-8 mr-2">
                      <div className="bg-gray-200 h-full w-full flex items-center justify-center text-gray-700 font-medium">
                        {instructor.name.charAt(0)}
                      </div>
                    </Avatar>
                    <span className="text-sm font-medium">{instructor.name}</span>
                  </div>
                  <Badge variant={instructor.availability === "available" ? "success" : "destructive"}>
                    {instructor.availability === "available" ? (
                      <span className="flex items-center">
                        <CheckCircle2 className="h-3 w-3 mr-1" />
                        {t("admin.calendar.available", "Available")}
                      </span>
                    ) : (
                      <span className="flex items-center">
                        <X className="h-3 w-3 mr-1" />
                        {t("admin.calendar.busy", "Busy")}
                      </span>
                    )}
                  </Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}