"use client";
import { useState } from "react";
import { TMDB } from "@/lib/tmdb";
import { MovieCard } from "@/components/atoms/MovieCard";
import { SearchResult } from "@/lib/tmdb/types";
import { FC } from "react";
import { useEffect } from "react";
import { Pagination } from "@/components/atoms/Pagination";

type Props = {
  query: string;
};

export const SearchList: FC<Props> = ({ query }) => {
  const [response, setResponse] = useState<SearchResult | null>(null);
  const {
    results,
    total_results = 0,
    total_pages = 0,
    page = 1,
  } = response ?? {};

  const handleSearch = async (query: string, page: number) => {
    const data = await TMDB.search({
      query,
      page,
    });
    setResponse(data);
  };

  const handlePageChange = (page: number) => {
    window.history.replaceState({}, "", `?s=${query}&page=${page}`);
    window.scrollTo({ top: 0, behavior: "smooth" });
    handleSearch(query, page);
  };

  useEffect(() => {
    handleSearch(query, page);
  }, [query]);

  return (
    <section className="mb-4 md:mb-10">
      <div className="container">
        <p className="text-sm text-gray-500">
          {total_results} movies found for your search
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
          {results?.map((result) => (
            <MovieCard
              key={result.id}
              layout="zeus"
              {...result}
              genre_ids={result.genre_ids.join(",")}
              seen={false}
              favorite={false}
            />
          ))}
        </div>
        <Pagination
          totalPages={total_pages}
          currentPage={page}
          onPageChange={handlePageChange}
        />
      </div>
    </section>
  );
};