// Main.js
import React, { useState, useEffect, useContext, useCallback } from 'react';
import axios from 'axios';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Pagination from '@mui/material/Pagination';
import { Link } from 'react-router-dom';
import CircularProgress from '@mui/material/CircularProgress';

import ConfigContext from './Config';
import MovieCard from './components/MovieCard';
import CategoryNav from './components/CategoryNav';

const Main = () => {
  const config = useContext(ConfigContext);
  const [loading, setLoading] = useState(false);
  const categories = [
    { label: '15min', idx: 0 },
    { label: '30min', idx: 1 },
    { label: '60min', idx: 2 },
    { label: '大于60min', idx: 3 },
  ];


  const limit = 20;
 
  const [currentCategory, setCurrentCategory] = useState(parseInt(localStorage.getItem('lastCategory'), 10) || 0);


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

 
  const fetchMovies = useCallback(async (category, page) => {

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

      if (response.status === 200) {
        const data = response.data.data;

        if (data.items.length === 0 && page > 1) {
          // 如果返回的数据为空且请求的页码大于1，则尝试获取上一页的数据
          fetchMovies(category, page - 1);
        } else {
          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);
    }
  }, [config.Host, limit]);

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

  const handlePageChange = useCallback(async (event, page) => {
    // console.log("handlePageChange");
    fetchMovies(currentCategory, page);
  }, [fetchMovies, currentCategory]);

  const handleCategoryChange = useCallback(async (category) => {
    // console.log("handleCategoryChange");
    setCurrentCategory(category);
    localStorage.setItem('lastCategory', category);
    fetchMovies(category, 1);
  }, [fetchMovies]);

  return (
    <Container style={{ marginTop: 20 }}>
      <CategoryNav
        categories={categories}
        currentCategory={currentCategory}
        onCategoryChange={handleCategoryChange}
      />

      <div style={{ textAlign: 'center', marginBottom: 20 }}>

        <Pagination
          count={pagination.length}
          page={pagination.page}
          onChange={handlePageChange}
          shape="rounded"
          color="primary"
          size="large"
        />

      </div>

      <div>
        {loading ? (
          <div
            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
          >
            <CircularProgress />
          </div>
        ) : (

          <Grid container spacing={2} style={{ marginTop: 3 }}>
            {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', paddingBottom: 10 }}
                >
                  <MovieCard movie={item} config={config} />
                </Link>
              </Grid>
            ))}
          </Grid>
        )}
      </div>

      <div style={{ textAlign: 'center', marginBottom: 20 }}>

        <Pagination

          count={pagination.length}
          page={pagination.page}
          onChange={handlePageChange}
          shape="rounded"
          color="primary"
          size="large"
        />

      </div>
    </Container>
  );
};

export default Main;