"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { ArrowLeft, Users, Trash2, Loader2 } from "lucide-react"
import { useTranslation } from "react-i18next"
import { useForm, Controller, type SubmitHandler } from "react-hook-form"
import { updateClassSession, deleteClassSession, type ClassSession } from "@/services/class_sessions/query"
import { getInstructors } from "@/services/instructors/query"
import { getPackagesByCourseId } from "@/services/course_packages/query"
import { getClassesByPackageId } from "@/services/course_package_classes/query"
import { getClassSessionData } from "@/services/admin_page/query"
import { toSqlDate } from "@/services/utils"

// Types
interface Course {
  id: number
  name?: string
  title: string
}

interface CoursePackage {
  id: number
  name: string
  course_id: number
}

interface Instructor {
  id: number
  name: string
}

interface FormValues {
  title: string
  instructorId: string
  courseId: string
  packageId: string
  classId: string
  date: string
  startTime: string
  duration: string
  isOnline: boolean
  location: string
  capacity: string
}

// Helper components for date and time inputs
const TimePicker = ({
  value,
  onChange,
  label,
  error,
}: {
  value: string
  onChange: (value: string) => void
  label: string
  error?: string
}) => {
  return (
    <div className="grid gap-2">
      <Label htmlFor={label} className={error ? "text-destructive" : ""}>
        {label}
      </Label>
      <Input
        id={label}
        type="time"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={error ? "border-destructive" : ""}
      />
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  )
}

const DatePicker = ({
  value,
  onChange,
  label,
  error,
}: {
  value: string
  onChange: (value: string) => void
  label: string
  error?: string
}) => {
  return (
    <div className="grid gap-2">
      <Label htmlFor={label} className={error ? "text-destructive" : ""}>
        {label}
      </Label>
      <Input
        id={label}
        type="date"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={error ? "border-destructive" : ""}
      />
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  )
}

// Format date string from ISO to YYYY-MM-DD
const formatDateForInput = (dateString: string): string => {
  try {
    const date = new Date(dateString)
    return date.toISOString().split("T")[0]
  } catch (error) {
    console.error("Error formatting date:", error)
    return ""
  }
}

// Format time string from ISO to HH:MM
const formatTimeForInput = (dateString: string): string => {
  try {
    const date = new Date(dateString)
    return date.toTimeString().slice(0, 5)
  } catch (error) {
    console.error("Error formatting time:", error)
    return ""
  }
}

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

  // State for data
  const [session, setSession] = useState<ClassSession | null>(null)
  const [courses, setCourses] = useState<Course[]>([])
  const [coursePackages, setCoursePackages] = useState<CoursePackage[]>([])
  const [instructors, setInstructors] = useState<Instructor[]>([])
  const [coursePackageClasses, setCoursePackageClasses] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // React Hook Form setup
  const {
    register,
    handleSubmit,
    control,
    watch,
    setValue,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    defaultValues: {
      title: "",
      instructorId: "",
      courseId: "",
      packageId: "",
      classId: "",
      date: "",
      startTime: "",
      duration: "90",
      isOnline: true,
      location: "https://zoom.us/j/123456789",
      capacity: "20",
    },
  })

  // Watch values for cascading dropdowns and conditional fields
  const watchCourseId = watch("courseId")
  const watchPackageId = watch("packageId")
  const watchClassId = watch("classId")
  const watchIsOnline = watch("isOnline")

  // Fetch session data and options using getClassSessionData
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      setError(null)

      try {
        console.log("[FETCH] Loading session data for ID:", sessionId)

        // Fetch session data and instructors in parallel
        const [sessionResponse, instructorsData] = await Promise.all([
          getClassSessionData(sessionId.toString()),
          getInstructors(),
        ])

        console.log("[FETCH] Session response:", sessionResponse)
        console.log("[FETCH] Instructors loaded:", instructorsData.length)

        const { session: sessionData, courses: coursesData, course_packages, course_package_classes } = sessionResponse

        // Set data to state
        setSession(sessionData)
        setCourses(coursesData)
        setCoursePackages(course_packages)
        setCoursePackageClasses(course_package_classes)
        setInstructors(instructorsData)

        // Extract date and time from scheduled_at
        const date = formatDateForInput(sessionData.scheduled_at)
        const startTime = formatTimeForInput(sessionData.scheduled_at)

        // Determine if this is an online session
        const isOnline = !!sessionData.online_meeting_link

        // Extract IDs from nested structure
        const courseId = sessionData.package_class?.course_package?.course_id?.toString() || ""
        const packageId = sessionData.package_class?.course_package?.id?.toString() || ""
        const classId = sessionData.package_class?.id?.toString() || ""

        console.log("[FETCH] Extracted IDs - courseId:", courseId, "packageId:", packageId, "classId:", classId)

        // Set form values with session data
        const formData: FormValues = {
          title: sessionData.title || "",
          instructorId: sessionData.instructor_id?.toString() || "",
          courseId,
          packageId,
          classId,
          date,
          startTime,
          duration: sessionData.duration?.toString() || "90",
          isOnline,
          location: isOnline
            ? sessionData.online_meeting_link || "https://zoom.us/j/123456789"
            : sessionData.offline_location || "Room 101",
          capacity: "20", // Default capacity, update if your API provides this
        }

        console.log("[FETCH] Form data to reset:", formData)

        // Reset form with session data
        reset(formData)
      } catch (err) {
        console.error("[ERROR] Failed to load session data:", err)
        setError("Failed to load session data. Please try again.")
      } finally {
        setIsLoading(false)
      }
    }

    fetchData()
  }, [sessionId, reset])

  // Fetch course packages when courseId changes (for manual changes)
  useEffect(() => {
    const fetchPackages = async () => {
      if (watchCourseId && !isLoading) {
        console.log("[FETCH] Loading packages for course:", watchCourseId)
        try {
          const packagesData = await getPackagesByCourseId(Number.parseInt(watchCourseId))
          console.log("[FETCH] Packages loaded:", packagesData.length)
          setCoursePackages(packagesData)

          // Reset dependent dropdowns if this is a manual change
          if (session && watchCourseId !== session.package_class?.course_package?.course_id?.toString()) {
            setValue("packageId", "")
            setValue("classId", "")
            setCoursePackageClasses([])
          }
        } catch (err) {
          console.error("[ERROR] Failed to load course packages:", err)
          setCoursePackages([])
        }
      }
    }
    fetchPackages()
  }, [watchCourseId, setValue, session, isLoading])

  // Fetch course package classes when packageId changes (for manual changes)
  useEffect(() => {
    const fetchClasses = async () => {
      if (watchPackageId && !isLoading) {
        try {
          console.log("[FETCH] Loading course package classes for package:", watchPackageId)
          const classesData = await getClassesByPackageId(Number.parseInt(watchPackageId))
          console.log("[FETCH] Course package classes loaded:", classesData.length)
          setCoursePackageClasses(classesData)

          // Reset class selection if this is a manual change
          if (session && watchPackageId !== session.package_class?.course_package?.id?.toString()) {
            setValue("classId", "")
          }
        } catch (err) {
          console.error("[ERROR] Failed to load course package classes:", err)
          setCoursePackageClasses([])
        }
      }
    }

    fetchClasses()
  }, [watchPackageId, setValue, session, isLoading])

  // Prefill form data when classId changes (for new selections)
  useEffect(() => {
    if (watchClassId && !isLoading && session) {
      // Only auto-fill when manually changing class selection
      if (watchClassId !== session.package_class?.id?.toString()) {
        const selectedClass = coursePackageClasses.find((cls) => cls.id === Number.parseInt(watchClassId))
        if (selectedClass) {
          console.log("[PREFILL] Selected class:", selectedClass)

          if (!watch("title")) {
            setValue("title", selectedClass.title || "")
          }

          if (watch("duration") === "90") {
            setValue("duration", selectedClass.duration?.toString() || "90")
          }

          if (selectedClass.class_type) {
            const isOnline = selectedClass.class_type === "online"
            setValue("isOnline", isOnline)
            setValue("location", isOnline ? "https://zoom.us/j/123456789" : "Room 101")
          }
        }
      }
    }
  }, [watchClassId, coursePackageClasses, setValue, session, isLoading, watch])

  // Update location when isOnline changes
  useEffect(() => {
    if (watchIsOnline && watch("location") === "Room 101") {
      setValue("location", "https://zoom.us/j/123456789")
    } else if (!watchIsOnline && watch("location") === "https://zoom.us/j/123456789") {
      setValue("location", "Room 101")
    }
  }, [watchIsOnline, setValue, watch])

  // Form submission handler
  const onSubmit: SubmitHandler<FormValues> = async (data) => {
    try {
      console.log("[SUBMIT] Updating session with data:", data)

      // Combine date and time into ISO string
      const scheduledAt = new Date(`${data.date}T${data.startTime}:00`)

      // Prepare the data for API call
      const sessionData: Partial<ClassSession> = {
        course_package_classes_id: Number.parseInt(data.classId),
        instructor_id: Number.parseInt(data.instructorId),
        scheduled_at: toSqlDate(scheduledAt),
        duration: Number.parseInt(data.duration),
        status: "upcoming",
        online_meeting_link: data.isOnline ? data.location : null,
        offline_location: !data.isOnline ? data.location : null,
        title: data.title,
      }

      // Update the session
      await updateClassSession(sessionId, sessionData)

      // Show success toast
      toast({
        title: "Session updated",
        description: "The session has been successfully updated.",
        variant: "success",
      })

      // Redirect back to calendar
      router.push("/admin/calendar")
    } catch (err) {
      console.error("[ERROR] Failed to update session:", err)
      toast({
        title: "Update failed",
        description: "Failed to update the session. Please try again.",
        variant: "destructive",
      })
    }
  }

  // Handle session deletion
  const handleDelete = async () => {
    try {
      console.log("[DELETE] Deleting session:", sessionId)

      // Delete the session
      await deleteClassSession(sessionId)

      // Show success toast
      toast({
        title: "Session deleted",
        description: "The session has been successfully deleted.",
        variant: "success",
      })

      // Redirect back to calendar
      router.push("/admin/calendar")
    } catch (err) {
      console.error("[ERROR] Failed to delete session:", err)
      toast({
        title: "Delete failed",
        description: "Failed to delete the session. Please try again.",
        variant: "destructive",
      })
    }
  }

  // Show loading state
  if (isLoading) {
    return (
      <div className="p-6 flex justify-center items-center min-h-[60vh]">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
          <p className="mt-4 text-muted-foreground">{t("admin.sessions.loading", "Loading session...")}</p>
        </div>
      </div>
    )
  }

  // Show error state
  if (error) {
    return (
      <div className="p-6 flex justify-center items-center min-h-[60vh]">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle className="text-destructive">{t("admin.sessions.error", "Error")}</CardTitle>
            <CardDescription>{error}</CardDescription>
          </CardHeader>
          <CardFooter>
            <Button onClick={() => router.push("/admin/calendar")} className="w-full">
              {t("admin.sessions.backToCalendar", "Back to Calendar")}
            </Button>
          </CardFooter>
        </Card>
      </div>
    )
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" onClick={() => router.push("/admin/calendar")}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold tracking-tight">{t("admin.sessions.editTitle", "Edit Session")}</h1>
            <p className="text-muted-foreground">
              {t("admin.sessions.editDescription", "Modify the details of this session")}
            </p>
          </div>
        </div>

        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="destructive" size="sm">
              <Trash2 className="h-4 w-4 mr-2" />
              {t("admin.sessions.delete", "Delete")}
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{t("admin.sessions.deleteConfirmTitle", "Delete session?")}</AlertDialogTitle>
              <AlertDialogDescription>
                {t(
                  "admin.sessions.deleteConfirmDescription",
                  "Are you sure you want to delete this session? This action cannot be undone.",
                )}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>{t("admin.sessions.cancel", "Cancel")}</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDelete}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                {t("admin.sessions.confirmDelete", "Delete")}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>

      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle>{t("admin.sessions.basicInfo", "Basic Information")}</CardTitle>
              <CardDescription>
                {t("admin.sessions.basicInfoDesc", "Edit the basic details of the session")}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="instructor" className={errors.instructorId ? "text-destructive" : ""}>
                    {t("admin.sessions.instructor", "Instructor")}
                  </Label>
                  <Controller
                    name="instructorId"
                    control={control}
                    rules={{ required: "Instructor is required" }}
                    render={({ field }) => (
                      <Select onValueChange={field.onChange} value={field.value}>
                        <SelectTrigger id="instructor" className={errors.instructorId ? "border-destructive" : ""}>
                          <SelectValue placeholder={t("admin.sessions.selectInstructor", "Select an instructor")} />
                        </SelectTrigger>
                        <SelectContent>
                          {instructors.map((instructor) => (
                            <SelectItem key={instructor.id} value={instructor.id.toString()}>
                              {instructor.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  {errors.instructorId && <p className="text-sm text-destructive">{errors.instructorId.message}</p>}
                </div>

                <div className="grid gap-2">
                  <Label htmlFor="course" className={errors.courseId ? "text-destructive" : ""}>
                    {t("admin.sessions.course", "Course")}
                  </Label>
                  <Controller
                    name="courseId"
                    control={control}
                    rules={{ required: "Course is required" }}
                    render={({ field }) => (
                      <Select onValueChange={field.onChange} value={field.value}>
                        <SelectTrigger id="course" className={errors.courseId ? "border-destructive" : ""}>
                          <SelectValue placeholder={t("admin.sessions.selectCourse", "Select a course")} />
                        </SelectTrigger>
                        <SelectContent>
                          {courses.map((course) => (
                            <SelectItem key={course.id} value={course.id.toString()}>
                              {course.title || course.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  {errors.courseId && <p className="text-sm text-destructive">{errors.courseId.message}</p>}
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="package" className={errors.packageId ? "text-destructive" : ""}>
                    {t("admin.sessions.package", "Package")}
                  </Label>
                  <Controller
                    name="packageId"
                    control={control}
                    rules={{ required: "Package is required" }}
                    render={({ field }) => (
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                        disabled={!watchCourseId || coursePackages.length === 0}
                      >
                        <SelectTrigger id="package" className={errors.packageId ? "border-destructive" : ""}>
                          <SelectValue
                            placeholder={
                              !watchCourseId
                                ? t("admin.sessions.selectCourseFirst", "Select course first")
                                : coursePackages.length === 0
                                  ? t("admin.sessions.noPackages", "No packages available")
                                  : t("admin.sessions.selectPackage", "Select a package")
                            }
                          />
                        </SelectTrigger>
                        <SelectContent>
                          {coursePackages.map((pkg) => (
                            <SelectItem key={pkg.id} value={pkg.id.toString()}>
                              {pkg.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  {errors.packageId && <p className="text-sm text-destructive">{errors.packageId.message}</p>}
                </div>

                <div className="grid gap-2">
                  <Label htmlFor="class" className={errors.classId ? "text-destructive" : ""}>
                    {t("admin.sessions.class", "Class")}
                  </Label>
                  <Controller
                    name="classId"
                    control={control}
                    rules={{ required: "Class is required" }}
                    render={({ field }) => (
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                        disabled={!watchPackageId || coursePackageClasses.length === 0}
                      >
                        <SelectTrigger id="class" className={errors.classId ? "border-destructive" : ""}>
                          <SelectValue
                            placeholder={
                              !watchPackageId
                                ? t("admin.sessions.selectPackageFirst", "Select package first")
                                : coursePackageClasses.length === 0
                                  ? t("admin.sessions.noClasses", "No classes available")
                                  : t("admin.sessions.selectClass", "Select a class")
                            }
                          />
                        </SelectTrigger>
                        <SelectContent>
                          {coursePackageClasses.map((cls) => (
                            <SelectItem key={cls.id} value={cls.id.toString()}>
                              {cls.title}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  {errors.classId && <p className="text-sm text-destructive">{errors.classId.message}</p>}
                </div>
              </div>

              <div className="grid gap-2">
                <Label htmlFor="title" className={errors.title ? "text-destructive" : ""}>
                  {t("admin.sessions.title", "Title")}
                </Label>
                <Input
                  id="title"
                  className={errors.title ? "border-destructive" : ""}
                  placeholder={t("admin.sessions.titlePlaceholder", "Session Title")}
                  {...register("title", { required: "Title is required" })}
                />
                {errors.title && <p className="text-sm text-destructive">{errors.title.message}</p>}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>{t("admin.sessions.scheduleInfo", "Schedule Information")}</CardTitle>
              <CardDescription>
                {t("admin.sessions.scheduleInfoDesc", "Set the date and time for the session")}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Controller
                name="date"
                control={control}
                rules={{ required: "Date is required" }}
                render={({ field }) => (
                  <DatePicker
                    label={t("admin.sessions.date", "Date")}
                    value={field.value}
                    onChange={field.onChange}
                    error={errors.date?.message}
                  />
                )}
              />

              <div className="grid grid-cols-2 gap-4">
                <Controller
                  name="startTime"
                  control={control}
                  rules={{ required: "Start time is required" }}
                  render={({ field }) => (
                    <TimePicker
                      label={t("admin.sessions.startTime", "Start Time")}
                      value={field.value}
                      onChange={field.onChange}
                      error={errors.startTime?.message}
                    />
                  )}
                />

                <div className="grid gap-2">
                  <Label htmlFor="duration" className={errors.duration ? "text-destructive" : ""}>
                    {t("admin.sessions.duration", "Duration (minutes)")}
                  </Label>
                  <Input
                    id="duration"
                    type="number"
                    min="15"
                    step="15"
                    className={errors.duration ? "border-destructive" : ""}
                    {...register("duration", {
                      required: "Duration is required",
                      min: { value: 15, message: "Duration must be at least 15 minutes" },
                    })}
                  />
                  {errors.duration && <p className="text-sm text-destructive">{errors.duration.message}</p>}
                </div>
              </div>

              <div className="grid gap-2">
                <Label>{t("admin.sessions.locationType", "Location Type")}</Label>
                <div className="flex space-x-4">
                  <div className="flex items-center">
                    <input
                      type="radio"
                      id="online"
                      className="mr-2"
                      {...register("isOnline")}
                      value="true"
                      checked={watchIsOnline === true}
                      onChange={() => setValue("isOnline", true)}
                    />
                    <Label htmlFor="online" className="cursor-pointer">
                      {t("admin.sessions.online", "Online")}
                    </Label>
                  </div>
                  <div className="flex items-center">
                    <input
                      type="radio"
                      id="offline"
                      className="mr-2"
                      {...register("isOnline")}
                      value="false"
                      checked={watchIsOnline === false}
                      onChange={() => setValue("isOnline", false)}
                    />
                    <Label htmlFor="offline" className="cursor-pointer">
                      {t("admin.sessions.inPerson", "In-Person")}
                    </Label>
                  </div>
                </div>
              </div>

              <div className="grid gap-2">
                <Label htmlFor="location" className={errors.location ? "text-destructive" : ""}>
                  {watchIsOnline
                    ? t("admin.sessions.meetingLink", "Meeting Link")
                    : t("admin.sessions.location", "Location")}
                </Label>
                <Input
                  id="location"
                  className={errors.location ? "border-destructive" : ""}
                  placeholder={watchIsOnline ? "https://zoom.us/j/123456789" : "Room 101"}
                  {...register("location", { required: "Location is required" })}
                />
                {errors.location && <p className="text-sm text-destructive">{errors.location.message}</p>}
              </div>

              <div className="grid gap-2">
                <Label htmlFor="capacity" className={errors.capacity ? "text-destructive" : ""}>
                  {t("admin.sessions.capacity", "Capacity")}
                </Label>
                <Input
                  id="capacity"
                  type="number"
                  min="1"
                  className={errors.capacity ? "border-destructive" : ""}
                  {...register("capacity", {
                    required: "Capacity is required",
                    min: { value: 1, message: "Capacity must be at least 1" },
                  })}
                />
                {errors.capacity && <p className="text-sm text-destructive">{errors.capacity.message}</p>}
              </div>

              {session && session.package_class && (
                <div className="p-3 bg-blue-50 border border-blue-100 rounded-md flex items-start">
                  <Users className="h-5 w-5 text-blue-500 mt-0.5 mr-2 shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-blue-700">
                      {t("admin.sessions.courseInfo", "Course: ")} {session.package_class.course_package?.course?.title}
                    </p>
                    <p className="text-xs text-blue-600 mt-1">
                      {t("admin.sessions.packageInfo", "Package: ")} {session.package_class.course_package?.name}
                    </p>
                  </div>
                </div>
              )}
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" onClick={() => router.push("/admin/calendar")} type="button">
                {t("admin.sessions.cancel", "Cancel")}
              </Button>
              <Button
                type="submit"
                className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
                disabled={isSubmitting}
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    {t("admin.sessions.updating", "Updating...")}
                  </>
                ) : (
                  t("admin.sessions.updateSession", "Update Session")
                )}
              </Button>
            </CardFooter>
          </Card>
        </div>
      </form>
    </div>
  )
}