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

const config = {
  Host: 'http://192.168.31.121:4444',
};

const Main = () => {
  const [pagination, setPagination] = useState({
    movies: [],
    page: 1,
    total: 1,
    length: 1,
  });

  const [loading, setLoading] = useState(false);

  const limit = 8;

  const fetchMovies = async (page) => {
    setLoading(true);
    try {
      const response = await axios.get(
        `${config.Host}/movie/?page=${page}&limit=${limit}`
      );

      if (response.status === 200) {
        const data = response.data.data;
        setPagination({
          movies: data.items,
          page: page,
          total: data.total,
          length: Math.ceil(data.total / limit),
        });
        localStorage.setItem('lastPage', page);
      }
    } catch (error) {
      console.error('Error fetching movies:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const lastPage = localStorage.getItem('lastPage') || 1;
    fetchMovies(lastPage);
  }, []);

  const handlePageChange = (event, value) => {
    fetchMovies(value);
  };

  const truncateFilename = (filename, maxLength) => {
    return filename.length > maxLength
      ? filename.substring(0, maxLength - 3) + '...'
      : filename;
  };

  return (
    <Container>
      <div>
        {loading ? (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              height: '50vh',
            }}
          >
            <CircularProgress />
          </div>
        ) : (
          <Grid container spacing={2}>
            {pagination.movies.map((item) => (
              <Grid
                item
                xs={6}
                sm={4}
                md={3}
                lg={2}
                style={{ display: 'flex', justifyContent: 'space-between' }}
                key={item.filename}
              >
                <Link to={`/res/${item.filename}`} style={{ textDecoration: 'none' }}>
                  <Card
                    style={{
                      width: '100%',
                      height: 200,
                      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                      transition: 'box-shadow 0.3s ease-in-out',
                      '&:hover': {
                        boxShadow: '0 8px 12px rgba(0, 0, 0, 0.2)',
                      },
                    }}
                  >
                    <CardMedia
                      component="img"
                      height="120"
                      image={`${config.Host}/res/${item.image}`}
                    />
                    <CardContent>
                      <Typography>
                        {truncateFilename(item.filename, 20)}
                      </Typography>
                    </CardContent>
                  </Card>
                </Link>
              </Grid>
            ))}
          </Grid>
        )}
      </div>

      <div style={{ textAlign: 'center', marginTop: 2 }}>
        <Pagination
          count={pagination.length}
          page={pagination.page}
          onChange={handlePageChange}
          shape="rounded"
          color="primary"
          size="large"
        />
      </div>
    </Container>
  );
};

export default Main;