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 {
  meetingSummaryText,
  type MeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-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 MeetingSummaryTableFooterProps = {
  page: number;
  pageCount: number;
  language: MeetingSummaryLanguage;
  onPrevious: () => void;
  onNext: () => void;
  onSelectPage: (pageIndex: number) => void;
};

export function MeetingSummaryTableFooter({
  page,
  pageCount,
  language,
  onPrevious,
  onNext,
  onSelectPage,
}: MeetingSummaryTableFooterProps) {
  const theme = useTheme();
  const text = meetingSummaryText[language] ?? meetingSummaryText.en;

  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 ${theme.palette.divider}`,
    boxShadow:
      theme.palette.mode === "dark"
        ? "none"
        : "0px 1px 2px 0px rgba(10, 13, 18, 0.05)",
    display: "inline-flex",
    alignItems: "center",
    gap: 0.5,
    color: theme.palette.text.secondary,
    backgroundColor: theme.palette.background.paper,

    "&:hover": {
      backgroundColor: theme.palette.action.hover,
    },

    "&.Mui-disabled": {
      color: theme.palette.text.disabled,
      borderColor: theme.palette.divider,
      opacity: 0.5,
    },
  };

  return (
    <Box
      sx={{
        borderTop: `1px solid ${theme.palette.divider}`,
        backgroundColor: theme.palette.background.paper,
        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 }}>
            {text.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: theme.palette.text.secondary,
                  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",
                backgroundColor: active
                  ? alpha(theme.palette.primary.main, 0.12)
                  : "transparent",
                color: active
                  ? theme.palette.text.primary
                  : theme.palette.text.secondary,
                fontSize: 14,
                fontWeight: 500,

                "&:hover": {
                  backgroundColor: active
                    ? alpha(theme.palette.primary.main, 0.16)
                    : theme.palette.action.hover,
                },
              }}
            >
              {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 }}>
            {text.next}
          </Typography>
          <DashboardAssetIcon
            src={dashboardAssets.paginationArrowRight}
            alt=""
            width={20}
            height={20}
          />
        </ButtonBase>
      </Box>
    </Box>
  );
}