frontend/src/app/movies/page.js

'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import apiClient from '@/api/apiClient';
import MovieCard from '@/components/MovieCard';
import { useFilmContext } from '@/context/FilmContext';
import './filmsPage.css';

import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';

const FILMS_PER_PAGE = 3;

export default function FilmsPage() {
  const { films, setFilms } = useFilmContext();
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    if (films.length === 0) {
      apiClient.getAllMovies()
        .then(response => {
          setFilms(response.map(film => film.replace('films/', '')));
        })
        .catch(error => {
          console.error('Failed to get all films:', error);
        });
    }
  }, [films, setFilms]);

  const startIndex = (currentPage - 1) * FILMS_PER_PAGE;
  const currentFilms = films.slice(startIndex, startIndex + FILMS_PER_PAGE);

  const handleNextPage = () => {
    setCurrentPage(prevPage => prevPage + 1);
  };

  const handlePrevPage = () => {
    setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
  };

  const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);
  const isPrevButtonEnabled = currentPage > 1;
  const isNextButtonEnabled = currentPage < totalPages;

  return (
    <div className="films-page-container">
      <div className="films-page">
        {currentFilms.map((title, index) => (
          <Link key={index} href={`/movie/${title}`}>
            <MovieCard title={title} />
          </Link>
        ))}
      </div>
      <div className="pagination-controls">
        <button 
          onClick={handlePrevPage} 
          disabled={!isPrevButtonEnabled}
          className={`pagination-button ${isPrevButtonEnabled ? 'enabled' : 'disabled'}`}
        >
          <FontAwesomeIcon 
            icon={faChevronLeft}
            size="xl"
          />
        </button>
        <span className="page-info">
          {currentPage} of {totalPages}
        </span>
        <button 
          onClick={handleNextPage} 
          disabled={!isNextButtonEnabled}
          className={`pagination-button ${isNextButtonEnabled ? 'enabled' : 'disabled'}`}
        >
          <FontAwesomeIcon 
            icon={faChevronRight}
            size="xl"
          />
        </button>
      </div>
    </div>
  );
}