import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Typography, Card, CardMedia, CardContent, CircularProgress } from '@mui/material';
import { useParams } from 'react-router-dom';

const AnimeInfo = () => {
  const { id } = useParams(); 
  const [anime, setAnime] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    console.log(`Extracted ID from URL: ${id}`); // Log the ID

    if (id) {
      const fetchAnimeInfo = async () => {
        try {
          const response = await axios.get(`https://mellieapi2.vercel.app/anime/info?id=${id}`);
          setAnime(response.data);
          setLoading(false);
        } catch (error) {
          setError(error);
          setLoading(false);
        }
      };

      fetchAnimeInfo();
    } else {
      setLoading(false);
      setError('Invalid ID');
    }
  }, [id]);

  if (loading) return <CircularProgress />;
  if (error) return <Typography variant="body1" color="error">Error fetching anime info: {error.toString()}</Typography>;
  if (!anime) return null;

  return (
    <Card>
      <CardMedia
        component="img"
        height="auto"
        image={anime.poster}
        alt={`${anime.name} poster`}
      />
      <CardContent>
        <Typography variant="h4">{anime.name}</Typography>
        <Typography variant="body1" paragraph>
          {anime.description}
        </Typography>
        <Typography variant="body2">Rating: {anime.stats.rating}</Typography>
        <Typography variant="body2">Sub Episodes: {anime.stats.episodes.sub}</Typography>
        <Typography variant="body2">Dub Episodes: {anime.stats.episodes.dub}</Typography>
        <Typography variant="body2">Duration: {anime.stats.duration}</Typography>
      </CardContent>
    </Card>
  );
};

export default AnimeInfo;