// src/components/VideoPlayerPage.tsx
import React, { useState, useEffect } from 'react';
import { Box, Grid, List, ListItem, ListItemText, Typography, Button, Paper, LinearProgress } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import VideoPlayer from './VideoPlayer';
import { Video } from 'pages/Education/Education';


interface VideoPlayerPageProps {
  categoryName: string;
  videos: Video[];
  onBack: () => void;
  // You might pass a function to update video status/progress here
  // onVideoProgressUpdate: (videoId: string, progress: number, status: 'completed' | 'in-progress') => void;
}

const VideoPlayerPage: React.FC<VideoPlayerPageProps> = ({ categoryName, videos, onBack }) => {
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);

  // Default to the first video in the category
  useEffect(() => {
    if (videos.length > 0) {
      setSelectedVideo(videos[0]);
    }
  }, [videos]);

  const handleVideoSelect = (video: Video) => {
    setSelectedVideo(video);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <Button
        startIcon={<ArrowBackIcon />}
        onClick={onBack}
        sx={{ mb: 2 }}
      >
        Back to Categories
      </Button>
      <Typography variant="h5" component="h2" gutterBottom>
        {categoryName} Videos
      </Typography>
      <Grid container spacing={3}>
        <Grid item xs={12} md={4}>
          <Paper elevation={2} sx={{ p: 2, height: '100%', maxHeight: '70vh', overflowY: 'auto' }}>
            <Typography variant="h6" gutterBottom>Video List</Typography>
            <List>
              {videos.map((video) => (
                <ListItem
                  key={video.title} // Use a unique ID if available, otherwise title
                  button
                  selected={selectedVideo?.title === video.title}
                  onClick={() => handleVideoSelect(video)}
                  sx={{ borderBottom: '1px solid #eee' }}
                >
                  <ListItemText
                    primary={video.title}
                    secondary={
                      <Box>
                        <Typography variant="body2" color="text.secondary">
                          {video.description}
                        </Typography>
                        <LinearProgress variant="determinate" value={video.progress} sx={{ height: 5, borderRadius: 5, mt: 0.5 }} />
                        <Typography variant="caption" display="block" align="right">
                          {`${video.progress.toFixed(0)}% ${video.status === 'completed' ? '(Completed)' : ''}`}
                        </Typography>
                      </Box>
                    }
                  />
                </ListItem>
              ))}
            </List>
          </Paper>
        </Grid>
        <Grid item xs={12} md={8}>
          {selectedVideo ? (
            <VideoPlayer video={selectedVideo} />
          ) : (
            <Paper elevation={2} sx={{ p: 3, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Typography variant="h6" color="text.secondary">Select a video to play</Typography>
            </Paper>
          )}
        </Grid>
      </Grid>
    </Box>
  );
};

export default VideoPlayerPage;