import { useNavigate, type LinkProps } from "@tanstack/react-router";
import type { FC } from "react";

interface PaginationControlsProps {
  urlName: LinkProps["to"];
  hasNextPage: boolean;
  hasPrevPage: boolean;
  page: number;
  perPage: number;
  total: number;
  keyword?: string;
}

type NavigationOptions = {
  to: string;
  search?: Record<string, any>;
  params?: Record<string, any>;
  reloadDocument?: boolean;
};

export function getPaginationNavigation(
  urlName: string,
  keyword: string | undefined,
  page: number,
  perPage: number
): NavigationOptions {
  const encodedKeyword = keyword?.replaceAll(" ", "-");

  switch (urlName) {
    case "/search":
      return {
        to: "/search",
        search: {
          keyword: encodedKeyword,
          page,
          perPage,
        },
        // reloadDocument: true,
      };

    case "/c/$slug":
      return {
        to: "/c/$slug",
        params: { slug: `${encodedKeyword}-ai-porn` },
        search: {
          page,
          perPage,
        },
        // reloadDocument: true,
      };

    default:
      throw new Error(`Unhandled route: ${urlName}`);
  }
}

export const PaginationControls: FC<PaginationControlsProps> = ({
  urlName,
  hasNextPage,
  hasPrevPage,
  page = 1,
  perPage = 10,
  total = perPage,
  keyword,
}) => {
  const navigate = useNavigate();
  const currentPage = page;
  const lastPage = Math.ceil(total / Number(perPage));
  let beforePage = page - 1;
  let afterPage = page + 1;
  if (page == lastPage) {
    beforePage = beforePage - 2;
  } else if (page == lastPage - 1) {
    beforePage = beforePage - 1;
  }
  if (page == 1) {
    afterPage = afterPage + 2;
  } else if (page == 2) {
    afterPage = afterPage + 1;
  }

  return (
    <nav className="paginationBox">
      <ul className="pages">
        {hasPrevPage && (
          <li
            onClick={() =>
              navigate(
                getPaginationNavigation(
                  urlName as string,
                  keyword,
                  Number(page) - 1,
                  perPage
                )
              )
            }
            title="Go to previous page. (Prev)"
          >
            <span className="hidden">Go to previous page</span>
            <span className="hidden">Prev</span>
            {"<"}
          </li>
        )}

        {page > 2 && (
          <>
            <li
              onClick={() =>
                navigate(
                  getPaginationNavigation(
                    urlName as string,
                    keyword,
                    1,
                    perPage
                  )
                )
              }
            >
              <span className="hidden">Go to page </span>1
            </li>
            {page > 3 && <li>...</li>}
          </>
        )}

        {beforePage <= afterPage && (
          <>
            {currentPage - 1 >= 1 && (
              <li
                title={`Go to page ${currentPage - 1}`}
                onClick={() =>
                  navigate(
                    getPaginationNavigation(
                      urlName as string,
                      keyword,
                      currentPage - 1,
                      perPage
                    )
                  )
                }
              >
                <span className="hidden">Go to page </span>
                {currentPage - 1}
              </li>
            )}

            <li
              className={page === currentPage ? "active" : ""}
              title={`You are currently on page ${currentPage}`}
            >
              <span className="hidden">You are currently on page </span>
              {currentPage}
            </li>
            {currentPage + 1 <= lastPage && (
              <li
                title={`Go to page ${currentPage + 1}`}
                onClick={() =>
                  navigate(
                    getPaginationNavigation(
                      urlName as string,
                      keyword,
                      currentPage + 1,
                      perPage
                    )
                  )
                }
              >
                <span className="hidden">Go to page </span>
                {currentPage + 1}
              </li>
            )}
          </>
        )}

        {page < lastPage - 1 && (
          <>
            {page < lastPage - 2 && <li>...</li>}
            <li
              onClick={() =>
                navigate(
                  getPaginationNavigation(
                    urlName as string,
                    keyword,
                    lastPage,
                    perPage
                  )
                )
              }
            >
              <span className="hidden">Go to page </span>
              {lastPage}
            </li>
          </>
        )}

        {/*<a>1</a>*/}
        {/* Go to page || You are currently on page*/}
        {/*{currentPage < 4 && (*/}
        {/*  <a href="#" className={page === 2 ? "active" : ""}>*/}
        {/*    {currentPage}*/}
        {/*  </a>*/}
        {/*)}*/}

        {/*{total > perPage && (*/}
        {/*  <a href="#" className={page === lastPage ? "active" : ""}>*/}
        {/*    <span className="hidden">Go to page </span>*/}
        {/*    {lastPage}*/}
        {/*  </a>*/}
        {/*)}*/}

        {hasNextPage && (
          <li
            onClick={() =>
              navigate(
                getPaginationNavigation(
                  urlName as string,
                  keyword,
                  Number(page) + 1,
                  perPage
                )
              )
            }
            title="Go to next page. (Next)"
          >
            <span className="hidden">Go to next page</span>
            <span className="hidden">Next</span>
            {">"}
          </li>
        )}
      </ul>
    </nav>
  );
};