"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { useTranslation } from "react-i18next"
import { Loader2, ArrowLeft } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { SessionInfo } from "@/components/student/sessions/session-info"
import { ResourceList } from "@/components/student/sessions/resource-list"
import { JoinMeetingButton } from "@/components/student/sessions/join-meeting-button"
//import { getClassSessions } from "@/services/class_sessions/query"
import { getClassMaterials } from "@/services/class_materials/query"
//import { getClassAttendances } from "@/services/class_attendances/query"
//import { getCurrentUser } from "@/services/users/query"
import { getClassSessionDetail } from "@/services/student_page/query"
import { parseArray } from "@/services/utils"

export default function SessionDetailPage() {
  const { t } = useTranslation()
  const params = useParams()
  const sessionId = Number.parseInt(params.id as string)

  const [loading, setLoading] = useState(true)
  const [session, setSession] = useState(null)
  const [resources, setResources] = useState([])
  const [attendance, setAttendance] = useState(null)

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

        // Fetch session details

        console.log("Fetching class sessions...")
        const sessionsResponse = await getClassSessionDetail(sessionId)



        if (!sessionsResponse || sessionsResponse.length==0) {
          throw new Error("Session not found")
        }

        const sessionData = sessionsResponse[0]

        // Map the session data to the format expected by the component
        const mappedSession = {
          id: sessionData.id,
          title: sessionData.title,
          description: sessionData.package_class?.title,
          date: sessionData.scheduled_at, // Use new field with fallback
          duration: sessionData.duration || 90, // Use new field with fallback
          instructor: {
            id: sessionData.instructor_id,
            name: sessionData.instructor?.name,
            avatar: "",
          },
          location: sessionData.offline_location || sessionData.online_meeting_link || "", // Use new fields with fallback
          agenda: parseArray(sessionData.package_class?.agenda || []),
          course_id: sessionData.package_class?.course_package?.course?.id,
          meeting_url: sessionData.online_meeting_link || "", // Use new field with fallback
          recording_url: "" //sessionData.recording_link,
        }

        setSession(mappedSession)

        // Fetch session resources
        const materialsData = await getClassMaterials(sessionData.id)
        const sessionResources = materialsData.filter((m) => m.session_id === sessionId)
        setResources(sessionResources)

        // Fetch attendance status
        //const studentId = 1 // Mock current student ID
        //console.log('currentUser',currentUser);
        //const attendancesData = await getClassAttendances(null, currentUser.session_id)
        //const attendanceData = attendancesData.find((a) => a.session_id === sessionId && a.student_id === studentId)
        setAttendance(sessionData?.attendances?.[0] ?? { status: "" });
      } catch (error) {
        console.error("Error fetching session details:", error)
      } finally {
        setLoading(false)
      }
    }

    if (sessionId) {
      fetchData()
    }
  }, [sessionId])

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-secondary" />
      </div>
    )
  }

  if (!session) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">{t("student.sessionNotFound")}</h2>
        <p className="text-gray-600 mb-6">{t("student.sessionNotFoundDescription")}</p>
        <a
          href="/student/courses"
          className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-secondary hover:bg-secondary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary"
        >
          {t("student.backToCourses")}
        </a>
      </div>
    )
  }

  const isSessionPast = new Date(session.date) < new Date()

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <a
          href={`/student/sessions`}
          className="inline-flex items-center text-secondary hover:text-secondary-dark"
        >
          <ArrowLeft className="h-4 w-4 mr-1" />
          {t("student.backToCourse")}
        </a>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2">
          <SessionInfo session={session} />

          <Separator className="my-8" />

          <div>
            <h3 className="text-lg font-medium mb-4">{t("student.sessionResources")}</h3>
            <ResourceList resources={resources} />
          </div>
        </div>

        <div>
          <Card>
            <CardContent className="p-6">
              <h3 className="text-lg font-medium mb-4">{t("student.sessionStatus")}</h3>

              {isSessionPast ? (
                <div>
                  <div className="mb-6">
                    <p className="text-gray-600 mb-2">{t("student.attendanceStatus")}</p>
                    <div
                      className={`px-3 py-2 rounded-md text-sm font-medium ${
                        attendance?.status != "" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                      }`}
                    >
                      {attendance?.status != "" ? t("student.attended") : t("student.missed")}
                    </div>
                  </div>

                  <div>
                    <p className="text-gray-600 mb-2">{t("student.recording")}</p>
                    <a
                      href={session.recording_url || "#"}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-secondary hover:bg-secondary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary w-full justify-center ${
                        !session.recording_url && "opacity-50 cursor-not-allowed"
                      }`}
                      onClick={(e) => !session.recording_url && e.preventDefault()}
                    >
                      {t("student.watchRecording")}
                    </a>
                    {!session.recording_url && (
                      <p className="text-xs text-gray-500 mt-2 text-center">{t("student.recordingNotAvailable")}</p>
                    )}
                  </div>
                </div>
              ) : (
                <div>
                  <JoinMeetingButton sessionDate={session.date} meetingUrl={session.meeting_url} />

                  <div className="mt-6">
                    <h4 className="font-medium mb-2">{t("student.preparation")}</h4>
                    <ul className="text-sm text-gray-600 space-y-2 list-disc pl-5">
                      <li>{t("student.preparationTip1")}</li>
                      <li>{t("student.preparationTip2")}</li>
                      <li>{t("student.preparationTip3")}</li>
                    </ul>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}