'use client'
import { removeCourse, startCourse } from '@services/courses/activity'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { getUriWithOrg } from '@services/config/config'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import { revalidateTags } from '@services/utils/ts/requests'
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
import { useRouter } from 'next/navigation'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import {
  getCourseThumbnailMediaDirectory,
  getUserAvatarMediaDirectory,
} from '@services/media/media'
import { ArrowRight, Backpack, Check, File, Sparkles, Video } from 'lucide-react'
import { useOrg } from '@components/Contexts/OrgContext'
import UserAvatar from '@components/Objects/UserAvatar'
import CourseUpdates from '@components/Objects/CourseUpdates/CourseUpdates'
import { CourseProvider } from '@components/Contexts/CourseContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useMediaQuery } from 'usehooks-ts'

const CourseClient = (props: any) => {
  const [user, setUser] = useState<any>({})
  const [learnings, setLearnings] = useState<any>([])
  const session = useLHSession() as any;
  const courseuuid = props.courseuuid
  const orgslug = props.orgslug
  const course = props.course
  const org = useOrg() as any
  const router = useRouter()
  const isMobile = useMediaQuery('(max-width: 768px)')

  function getLearningTags() {
    // create array of learnings from a string object (comma separated)
    let learnings = course?.learnings ? course?.learnings.split(',') : []
    setLearnings(learnings)
  }

  async function startCourseUI() {
    // Create activity
    await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
    await revalidateTags(['courses'], orgslug)
    router.refresh()

    // refresh page (FIX for Next.js BUG)
    // window.location.reload();
  }

  function isCourseStarted() {
    const runs = course.trail?.runs
    if (!runs) return false
    return runs.some(
      (run: any) =>
        run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
    )
  }

  async function quitCourse() {
    // Close activity
    let activity = await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
    // Mutate course
    await revalidateTags(['courses'], orgslug)
    router.refresh()
  }

  useEffect(() => {
    getLearningTags()
  }, [org, course])

  return (
    <>
      {!course && !org ? (
        <PageLoading></PageLoading>
      ) : (
        <GeneralWrapperStyled>
          <div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
            <div>
              <p className="text-md font-bold text-gray-400 pb-2">Course</p>
              <h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
            </div>
            <div className="mt-4 md:mt-0">
             {!isMobile &&  <CourseProvider courseuuid={course.course_uuid}>
                <CourseUpdates />
              </CourseProvider>}
            </div>
          </div>

          {props.course?.thumbnail_image && org ? (
            <div
              className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
              style={{
                backgroundImage: `url(${getCourseThumbnailMediaDirectory(
                  org?.org_uuid,
                  course?.course_uuid,
                  course?.thumbnail_image
                )})`,
              }}
            ></div>
          ) : (
            <div
              className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
              style={{
                backgroundImage: `url('../empty_thumbnail.png')`,
                backgroundSize: 'auto',
              }}
            ></div>
          )}

          <ActivityIndicators
            course_uuid={props.course.course_uuid}
            orgslug={orgslug}
            course={course}
          />

          <div className="flex flex-col md:flex-row pt-10">
            <div className="course_metadata_left grow space-y-2">
              <h2 className="py-3 text-2xl font-bold">Description</h2>
              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
                <p className="py-5 px-5">{course.description}</p>
              </div>

              {learnings.length > 0 && learnings[0] !== 'null' && (
                <div>
                  <h2 className="py-3 text-2xl font-bold">
                    What you will learn
                  </h2>
                  <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
                    {learnings.map((learning: any) => {
                      return (
                        <div
                          key={learning}
                          className="flex space-x-2 items-center font-semibold text-gray-500"
                        >
                          <div className="px-2 py-2 rounded-full">
                            <Check className="text-gray-400" size={15} />
                          </div>
                          <p>{learning}</p>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}

              <h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
                {course.chapters.map((chapter: any) => {
                  return (
                    <div key={chapter} className="">
                      <div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
                        <h3 className="grow">{chapter.name}</h3>
                        <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full ">
                          {chapter.activities.length} Activities
                        </p>
                      </div>
                      <div className="py-3">
                        {chapter.activities.map((activity: any) => {
                          return (
                            <>
                              <p className="flex text-md"></p>
                              <div className="flex space-x-1 py-2 px-4 items-center">
                                <div className="courseicon items-center flex space-x-2 text-neutral-400">
                                  {activity.activity_type ===
                                    'TYPE_DYNAMIC' && (
                                      <div className="bg-gray-100 px-2 py-2 rounded-full">
                                        <Sparkles
                                          className="text-gray-400"
                                          size={13}
                                        />
                                      </div>
                                    )}
                                  {activity.activity_type === 'TYPE_VIDEO' && (
                                    <div className="bg-gray-100 px-2 py-2 rounded-full">
                                      <Video
                                        className="text-gray-400"
                                        size={13}
                                      />
                                    </div>
                                  )}
                                  {activity.activity_type ===
                                    'TYPE_DOCUMENT' && (
                                      <div className="bg-gray-100 px-2 py-2 rounded-full">
                                        <File
                                          className="text-gray-400"
                                          size={13}
                                        />
                                      </div>
                                    )}
                                    {activity.activity_type ===
                                    'TYPE_ASSIGNMENT' && (
                                      <div className="bg-gray-100 px-2 py-2 rounded-full">
                                        <Backpack
                                          className="text-gray-400"
                                          size={13}
                                        />
                                      </div>
                                    )}
                                </div>
                                <Link
                                  className="flex font-semibold grow pl-2 text-neutral-500"
                                  href={
                                    getUriWithOrg(orgslug, '') +
                                    `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
                                      'activity_',
                                      ''
                                    )}`
                                  }
                                  rel="noopener noreferrer"
                                >
                                  <p>{activity.name}</p>
                                </Link>
                                <div className="flex ">
                                  {activity.activity_type ===
                                    'TYPE_DYNAMIC' && (
                                      <>
                                        <Link
                                          className="flex grow pl-2 text-gray-500"
                                          href={
                                            getUriWithOrg(orgslug, '') +
                                            `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
                                              'activity_',
                                              ''
                                            )}`
                                          }
                                          rel="noopener noreferrer"
                                        >
                                          <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                            <p>Page</p>
                                            <ArrowRight size={13} />
                                          </div>
                                        </Link>
                                      </>
                                    )}
                                  {activity.activity_type === 'TYPE_VIDEO' && (
                                    <>
                                      <Link
                                        className="flex grow pl-2 text-gray-500"
                                        href={
                                          getUriWithOrg(orgslug, '') +
                                          `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
                                            'activity_',
                                            ''
                                          )}`
                                        }
                                        rel="noopener noreferrer"
                                      >
                                        <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                          <p>Video</p>
                                          <ArrowRight size={13} />
                                        </div>
                                      </Link>
                                    </>
                                  )}
                                  {activity.activity_type ===
                                    'TYPE_DOCUMENT' && (
                                      <>
                                        <Link
                                          className="flex grow pl-2 text-gray-500"
                                          href={
                                            getUriWithOrg(orgslug, '') +
                                            `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
                                              'activity_',
                                              ''
                                            )}`
                                          }
                                          rel="noopener noreferrer"
                                        >
                                          <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                            <p>Document</p>
                                            <ArrowRight size={13} />
                                          </div>
                                        </Link>
                                      </>
                                    )}
                                    {activity.activity_type ===
                                    'TYPE_ASSIGNMENT' && (
                                      <>
                                        <Link
                                          className="flex grow pl-2 text-gray-500"
                                          href={
                                            getUriWithOrg(orgslug, '') +
                                            `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
                                              'activity_',
                                              ''
                                            )}`
                                          }
                                          rel="noopener noreferrer"
                                        >
                                          <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                            <p>Assignment</p>
                                            <ArrowRight size={13} />
                                          </div>
                                        </Link>
                                      </>
                                    )}
                                </div>
                              </div>
                            </>
                          )
                        })}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
            <div className="course_metadata_right space-y-3 w-full md:w-72 antialiased flex flex-col md:ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden mt-6 md:mt-0">
              {user && (
                <div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
                  <UserAvatar
                    border="border-8"
                    avatar_url={course.authors[0].avatar_image ? getUserAvatarMediaDirectory(course.authors[0].user_uuid, course.authors[0].avatar_image) : ''}
                    predefined_avatar={course.authors[0].avatar_image ? undefined : 'empty'}
                    width={isMobile ? 60 : 100}
                  />
                  <div className="md:-space-y-2">
                    <div className="text-[12px] text-neutral-400 font-semibold">
                      Author
                    </div>
                    <div className="text-lg md:text-xl font-bold text-neutral-800">
                      {course.authors[0].first_name &&
                        course.authors[0].last_name && (
                          <div className="flex space-x-2 items-center">
                            <p>
                              {course.authors[0].first_name +
                                ' ' +
                                course.authors[0].last_name}
                            </p>
                            <span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold">
                              {' '}
                              @{course.authors[0].username}
                            </span>
                          </div>
                        )}
                      {!course.authors[0].first_name &&
                        !course.authors[0].last_name && (
                          <div className="flex space-x-2 items-center">
                            <p>@{course.authors[0].username}</p>
                          </div>
                        )}
                    </div>
                  </div>
                </div>
              )}

              {isCourseStarted() ? (
                <button
                  className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
                  onClick={quitCourse}
                >
                  Quit Course
                </button>
              ) : (
                <button
                  className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
                  onClick={startCourseUI}
                >
                  Start Course
                </button>
              )}
            </div>
          </div>
        </GeneralWrapperStyled>
      )}
    </>
  )
}

export default CourseClient
