"use client";

import React, { useState } from "react";
import { ListX } from "lucide-react";
import { useGetEarlyAccess } from "@/state/profile/profile.action";
import EmptyState from "../../CommonComponents/empty";
import MyListItemSkeleton from "./mylist-item-skeletin";
import HistorySeriesCard from "@/components/CommonComponents/history-series-card";
import PaginationComponent from "@/pagination/pagination";

const EarlyAccessTab: React.FC = () => {
  const [page, setPage] = useState(1); // pagination state
  const limit = 6; // items per page
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { data: myList, isLoading } = useGetEarlyAccess({ page, limit }) as any;

  if (isLoading) {
    return (
      <div className="bg-[#1A1A1A] p-5 rounded-xl mt-3">
        {Array.from({ length: 3 })?.map((_, index) => (
          <MyListItemSkeleton key={index} />
        ))}
      </div>
    );
  }

  if (!myList?.items || myList.items.length === 0) {
    return (
      <div className="mt-3">
        <EmptyState
          title="Your List is Empty"
          description="You haven't added any series or movies to your list yet. "
          icon={<ListX className="w-24 h-24" />}
        />
      </div>
    );
  }

  return (
    <div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
        {myList.items?.map(
          (
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            item: any
          ) => (
            <HistorySeriesCard item={item} key={item?.id} />
          )
        )}
      </div>

      {/* Pagination */}
      {myList?.meta?.lastPage > 1 && (
        <div className="mt-5">
          <PaginationComponent
            currentPage={page}
            totalPages={myList.meta.lastPage}
            onPageChange={(p) => setPage(p)}
          />
        </div>
      )}
    </div>
  );
};

export default EarlyAccessTab;