"use client";

import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { formatNumber } from "@/lib/number-utils";
import {
  tWgIssues,
  type WgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

type PaginationItem = number | "...";

function buildVisiblePages(page: number, pageCount: number): PaginationItem[] {
  if (pageCount <= 7) {
    return Array.from({ length: pageCount }, (_, index) => index + 1);
  }

  const currentPage = page + 1;

  if (currentPage <= 3 || currentPage >= pageCount - 2) {
    return [1, 2, 3, "...", pageCount - 2, pageCount - 1, pageCount];
  }

  return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", pageCount];
}

type WgIssuesTableFooterProps = {
  language: WgIssuesLanguage;
  page: number;
  pageCount: number;
  onPrevious: () => void;
  onNext: () => void;
  onSelectPage: (pageIndex: number) => void;
};

export function WgIssuesTableFooter({
  language,
  page,
  pageCount,
  onPrevious,
  onNext,
  onSelectPage,
}: WgIssuesTableFooterProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const visiblePages = buildVisiblePages(page, pageCount);
  const canGoPrevious = page > 0;
  const canGoNext = page + 1 < pageCount;

  const navButtonSx = {
    height: 36,
    px: 1.5,
    borderRadius: "8px",
    border: `1px solid ${isDark ? alpha("#ffffff", 0.16) : "#d5d7da"}`,
    boxShadow: isDark ? "none" : "0px 1px 2px 0px rgba(10, 13, 18, 0.05)",
    bgcolor: isDark ? alpha("#ffffff", 0.04) : "#ffffff",
    display: "inline-flex",
    alignItems: "center",
    gap: 0.5,
    color: isDark ? alpha("#ffffff", 0.86) : "#414651",
    opacity: 1,
    "&.Mui-disabled": {
      opacity: 0.45,
      color: isDark ? alpha("#ffffff", 0.45) : "#a4a7ae",
    },
    "&:hover": {
      bgcolor: isDark ? alpha("#ffffff", 0.08) : "#fafafa",
    },
  };

  return (
    <Box
      sx={{
        borderTop: `1px solid ${isDark ? alpha("#ffffff", 0.1) : "#f5f5f5"}`,
        bgcolor: isDark ? "#111827" : "#ffffff",
        px: 3,
        pt: 1.5,
        pb: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 1.5,
        flexWrap: { xs: "wrap", lg: "nowrap" },
      }}
    >
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <ButtonBase
          onClick={canGoPrevious ? onPrevious : undefined}
          disabled={!canGoPrevious}
          sx={navButtonSx}
        >
          <DashboardAssetIcon
            src={dashboardAssets.paginationArrowLeft}
            alt=""
            width={20}
            height={20}
          />
          <Typography sx={{ fontSize: 12, fontWeight: 500 }}>
            {tWgIssues(language, "previous")}
          </Typography>
        </ButtonBase>
      </Box>

      <Box sx={{ display: "flex", alignItems: "center", gap: 0.25 }}>
        {visiblePages.map((item, index) => {
          if (item === "...") {
            return (
              <Box
                key={`ellipsis-${index}`}
                sx={{
                  width: 40,
                  height: 40,
                  display: "grid",
                  placeItems: "center",
                  color: isDark ? alpha("#ffffff", 0.55) : "#717680",
                  fontSize: 14,
                  fontWeight: 500,
                }}
              >
                ...
              </Box>
            );
          }

          const active = item === page + 1;

          return (
            <ButtonBase
              key={item}
              onClick={() => onSelectPage(Number(item) - 1)}
              sx={{
                width: 40,
                height: 40,
                borderRadius: "8px",
                bgcolor: active
                  ? isDark
                    ? alpha("#ffffff", 0.1)
                    : "#fafafa"
                  : "transparent",
                color: active
                  ? isDark
                    ? "#ffffff"
                    : "#252b37"
                  : isDark
                    ? alpha("#ffffff", 0.6)
                    : "#717680",
                fontSize: 14,
                fontWeight: 500,
                "&:hover": {
                  bgcolor: isDark ? alpha("#ffffff", 0.08) : "#fafafa",
                },
              }}
            >
              {formatNumber(item, language)}
            </ButtonBase>
          );
        })}
      </Box>

      <Box sx={{ flex: 1, minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
        <ButtonBase
          onClick={canGoNext ? onNext : undefined}
          disabled={!canGoNext}
          sx={navButtonSx}
        >
          <Typography sx={{ fontSize: 12, fontWeight: 500 }}>
            {tWgIssues(language, "next")}
          </Typography>
          <DashboardAssetIcon
            src={dashboardAssets.paginationArrowRight}
            alt=""
            width={20}
            height={20}
          />
        </ButtonBase>
      </Box>
    </Box>
  );
}