"use client";

import { SearchResult } from "@/lib/tmdb/types";
import { MovieCard } from "@/components/atoms/MovieCard";
import { FC, useState } from "react";
import { FaChevronLeft, FaChevronRight, FaStar } from "react-icons/fa";

type Props = {
  movies: SearchResult;
};

export const RecommendedMovies: FC<Props> = ({ movies }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const moviesPerPage = 4;
  const totalPages = Math.ceil(movies.results.length / moviesPerPage);

  if (!movies.results.length) return null;

  const currentMovies = movies.results.slice(
    currentPage * moviesPerPage,
    (currentPage + 1) * moviesPerPage
  );

  const nextPage = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages);
  };

  const prevPage = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
  };

  return (
    <section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50">
      <div className="px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500">
                <FaStar className="text-white" size={20} />
              </div>
              <h2 className="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
                Rekomendowane filmy
              </h2>
            </div>

            {totalPages > 1 && (
              <div className="flex gap-2">
                <button
                  onClick={prevPage}
                  className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
                >
                  <FaChevronLeft size={16} />
                </button>
                <button
                  onClick={nextPage}
                  className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
                >
                  <FaChevronRight size={16} />
                </button>
              </div>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {currentMovies.map((movie) => (
              <MovieCard
                key={movie.id}
                layout="aurora"
                id={movie.id}
                title={movie.title}
                overview={movie.overview}
                poster_path={movie.poster_path}
                release_date={movie.release_date}
                vote_average={movie.vote_average}
                popularity={movie.popularity}
                adult={movie.adult}
                backdrop_path={movie.backdrop_path}
                genre_ids={movie.genre_ids.join(",")}
                original_language={movie.original_language}
                original_title={movie.original_title}
                video={movie.video}
                vote_count={movie.vote_count}
                seen={false}
                favorite={false}
              />
            ))}
          </div>

          {totalPages > 1 && (
            <div className="flex justify-center mt-8">
              <div className="flex gap-2">
                {Array.from({ length: totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => setCurrentPage(i)}
                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
                      currentPage === i
                        ? "bg-gradient-to-r from-yellow-500 to-orange-500 scale-110"
                        : "bg-white/30 hover:bg-white/50"
                    }`}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};