'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import apiClient from '@/api/apiClient'; // Updated for Next.js absolute import
import FilmCard from '@/components/film/card'; // Updated for Next.js absolute import
import { useFilmContext } from '@/context/FilmContext'; // Updated for Next.js absolute import
import './filmsPage.css'; // Updated for Next.js absolute import

import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
import { faCaretRight } from '@fortawesome/free-solid-svg-icons';

const FILMS_PER_PAGE = 2;

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

    useEffect(() => {
        if (films.length === 0) {
            apiClient.getAllFilms()
                .then(response => {
                    console.log('All films:', 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));
    };

    // Calculate total number of pages
    const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);

    // Determine if the previous and next buttons should be enabled
    const isPrevButtonEnabled = currentPage > 1;
    const isNextButtonEnabled = currentPage < totalPages;

    return (
        <div className="films-page-container">
            <div className="pagination-controls">
                <button 
                    onClick={handlePrevPage} 
                    disabled={!isPrevButtonEnabled}
                    className="pagination-button"
                >
                    <FontAwesomeIcon 
                        icon={faCaretLeft}
                        size="2xl"
                        color='#3f5fd2'
                        bounce={isPrevButtonEnabled}
                    />
                </button>
                <span className="page-info">
                    {currentPage} - {totalPages} 
                </span>
                <button 
                    onClick={handleNextPage} 
                    disabled={!isNextButtonEnabled}
                    className="pagination-button"
                >
                    <FontAwesomeIcon 
                        icon={faCaretRight}
                        size="2xl"
                        color='#3f5fd2'
                        bounce={isNextButtonEnabled} 
                    />
                </button>
            </div>
            <div className="films-page">
                {currentFilms.map(title => (
                    <FilmCard key={title} title={title} />
                ))}
            </div>
        </div>
    );
}