import {
  getNowPlayingMovies,
  getPopularMovies,
  getTrendingMovies,
  getUpcomingMovies,
} from "@/lib/tmdb/server";
import { Hero } from "@/components/organisms/Hero";
import { FaCalendar, FaChartLine, FaFire, FaPlay } from "react-icons/fa";
import { MovieList } from "@/components/molecules/MovieList";
import { GenreList } from "@/components/molecules/GenreList";

// 12 hours
export const revalidate = 43200;

export default async function Home() {
  const lastModified = new Date().toISOString();
  const [nowPlayingData, popularData, trendingData, upcomingData] =
    await Promise.all([
      getNowPlayingMovies(),
      getPopularMovies(),
      getTrendingMovies(),
      getUpcomingMovies(),
    ]);

  // Convert TMDB movie format to our Movie type.
  const convertMovies = (movies: any[]) =>
    movies.map((movie) => ({
      ...movie,
      genre_ids: JSON.stringify(movie.genre_ids),
      seen: false,
      favorite: false,
    }));

  const heroMovies = convertMovies(trendingData.results.slice(0, 5));
  const popularMovies = convertMovies(popularData.results);
  const trendingMovies = convertMovies(trendingData.results).slice(5);
  const nowPlayingMovies = convertMovies(nowPlayingData.results);
  const upcomingMovies = convertMovies(upcomingData.results);

  return (
    <>
      <Hero movies={heroMovies} autoRotate />

      <section className="blocks">
        <MovieList
          overrideMovies={nowPlayingMovies}
          heading="Teraz w kinach"
          loadMore
          icon={<FaPlay />}
          colors="blue"
          showFilters={false}
          displayType="list"
        />
      </section>

      <section className="blocks">
        <MovieList
          overrideMovies={upcomingMovies}
          heading="Nadchodzące filmy"
          loadMore
          icon={<FaCalendar />}
          colors="blue"
          showFilters={false}
          displayType="list"
        />
      </section>

      <section className="blocks">
        <MovieList
          overrideMovies={popularMovies}
          heading="Popularne filmy"
          loadMore
          icon={<FaFire />}
          colors="red"
          showFilters={false}
          displayType="list"
        />
      </section>

      <section className="blocks">
        <MovieList
          overrideMovies={trendingMovies}
          heading="Trendy dnia"
          loadMore
          icon={<FaChartLine />}
          colors="green"
          showFilters={false}
          displayType="list"
        />
      </section>

      <GenreList heading="Odkrywaj filmy według gatunku" />

      <div className="p-2 text-center text-xs text-gray-500">
        <p>Ostatnia aktualizacja: {lastModified}</p>
      </div>
    </>
  );
}