import { Box, Grid, Heading, Text, VStack } from '@chakra-ui/react'; // Importing Chakra UI components
import React, { useEffect, useState } from 'react'; // Importing React and hooks
import { useDispatch, useSelector } from 'react-redux'; // For accessing Redux state and dispatch
import { Navigate, useParams } from 'react-router-dom'; // For routing and accessing URL parameters
import { getCourseLectures } from '../../redux/actions/course'; // Action to fetch course lectures
import Loader from '../Layout/Loader/Loader'; // Loader component for loading state

const CoursePage = ({ user }) => {
  const [lectureNumber, setLectureNumber] = useState(0); // State to track the current lecture number

  const { lectures, loading } = useSelector(state => state.course); // Accessing lectures and loading state from Redux

  const dispatch = useDispatch(); // Accessing dispatch function
  const params = useParams(); // Accessing URL parameters

  // Effect to fetch course lectures when component mounts or params.id changes
  useEffect(() => {
    dispatch(getCourseLectures(params.id)); // Fetching lectures based on course ID
  }, [dispatch, params.id]);

  // Redirect to subscription page if user is not an admin and has no active subscription
  if (
    user.role !== 'admin' &&
    (user.subscription === undefined || user.subscription.status !== 'active')
  ) {
    return <Navigate to={'/subscribe'} />; // Navigate to subscription page
  }

  // Show loader while fetching data
  if (loading) {
    return <Loader />;
  }

  return (
    <Grid minH={'90vh'} templateColumns={['1fr', '3fr 1fr']}>
      {lectures && lectures.length > 0 ? ( // Check if lectures are available
        <>
          <Box>
            <video
              width={'100%'}
              controls
              controlsList="nodownload noremoteplayback"
              disablePictureInPicture
              disableRemotePlayback
              src={lectures[lectureNumber].video.url} // Source for the video based on current lecture
            ></video>

            <Heading
              m="4"
              children={`#${lectureNumber + 1} ${lectures[lectureNumber].title}`} // Display current lecture title
            />

            <Heading m="4" children="Description" />
            <Text m="4" children={lectures[lectureNumber].description} /> {/* Display current lecture description */}
          </Box>

          <VStack>
            {lectures.map((element, index) => ( // Mapping through lectures to create buttons
              <button
                onClick={() => setLectureNumber(index)} // Update current lecture number on click
                key={element._id} // Unique key for each button
                style={{
                  width: '100%',
                  padding: '1rem',
                  textAlign: 'center',
                  margin: 0,
                  borderBottom: '1px solid rgba(0,0,0,0.2)', // Styling for buttons
                }}
              >
                <Text noOfLines={1}>
                  #{index + 1} {element.title} {/* Display lecture number and title */}
                </Text>
              </button>
            ))}
          </VStack>
        </>
      ) : (
        <Heading children="No Lectures" /> // Message when no lectures are found
      )}
    </Grid>
  );
};

export default CoursePage; // Exporting CoursePage component