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

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 [isLoading, setIsLoading] = useState(false);

  const handleSearch = async (query: string, page: number) => {
    setIsLoading(true);

    const data = await TMDB.search({
      query,
      page,
    });
    setResponse(data);
    setIsLoading(false);
  };

  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} filmów znaleziono dla Twojego wyszukiwania
        </p>

        <div className="relative">
          {isLoading && (
            <div className="absolute -inset-10 flex pt-60 justify-center bg-gradient-to-t from-slate-900/90 via-slate-800/50 to-transparent z-10">
              <Spinner />
            </div>
          )}
          <MovieList
            showFilters={false}
            overrideDisplayType="grid"
            overrideMovies={results?.map((m) => ({
              ...m,
              favorite: false,
              seen: false,
              genre_ids: JSON.stringify(m.genre_ids),
            }))}
            fluid
          />
        </div>

        <Pagination
          totalPages={total_pages}
          currentPage={page}
          onPageChange={handlePageChange}
        />
      </div>
    </section>
  );
};