"use client";

import type {
  ReactNode,
} from "react";

import {
  Box,
  Button,
  CircularProgress,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  useTheme,
} from "@mui/material";

import type {
  TranslationMeta,
} from "../types/translation-types";
import { formatTranslationPageNumber, getTranslationPaginationItems } from "./translation-pagination";

type Props = {
  loading: boolean;
  empty: boolean;
  hierarchyMode?: boolean;
  rows: ReactNode;
  meta: TranslationMeta;
  locale: "en" | "km";
  labels: {
    no: string;
    module: string;
    page: string;
    englishText: string;
    khmerText: string;
    status: string;
    createdAt: string;
    updatedAt: string;
    actions: string;
    noPages: string;
    previous: string;
    next: string;
  };
  onPageChange: (
    page: number,
  ) => void;
};

export default function TranslationManagementTable({
  loading,
  empty,
  rows,
  meta,
  locale,
  labels,
  onPageChange,
}: Props) {
  const theme = useTheme();

  return (
    <Paper
      variant="outlined"
      sx={{
        overflow: "hidden",
        borderRadius: 3,
        minHeight: {
          xs: 420,
          md: "calc(100vh - 390px)",
        },
        display: "flex",
        flexDirection: "column",
      }}
    >
      <TableContainer
        sx={{
          flex: 1,
          overflowX: "auto",
        }}
      >
        <Table
          sx={{
            minWidth: 1700,
          }}
        >
          <TableHead>
            <TableRow
              sx={{
                bgcolor:
                  theme.palette.mode ===
                  "dark"
                    ? "rgba(148,163,184,.08)"
                    : "#eaf2fc",
              }}
            >
              <TableCell sx={{ minWidth: 70 }}>
                {labels.no}
              </TableCell>

              <TableCell sx={{ minWidth: 120 }}>
                {labels.module}
              </TableCell>

              <TableCell sx={{ minWidth: 190 }}>
                {labels.page}
              </TableCell>

              <TableCell sx={{ minWidth: 250 }}>
                {labels.englishText}
              </TableCell>

              <TableCell sx={{ minWidth: 280 }}>
                {labels.khmerText}
              </TableCell>

              <TableCell sx={{ minWidth: 120 }}>
                {labels.status}
              </TableCell>

              <TableCell sx={{ minWidth: 190 }}>
                {labels.createdAt}
              </TableCell>

              <TableCell sx={{ minWidth: 190 }}>
                {labels.updatedAt}
              </TableCell>

              <TableCell
                align="right"
                sx={{ minWidth: 160 }}
              >
                {labels.actions}
              </TableCell>
            </TableRow>
          </TableHead>

          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell
                  colSpan={9}
                  align="center"
                  sx={{ py: 8 }}
                >
                  <CircularProgress
                    size={26}
                  />
                </TableCell>
              </TableRow>
            ) : empty ? (
              <TableRow>
                <TableCell
                  colSpan={9}
                  align="center"
                  sx={{
                    py: 8,
                    color:
                      "text.secondary",
                  }}
                >
                  {labels.noPages}
                </TableCell>
              </TableRow>
            ) : (
              rows
            )}
          </TableBody>
        </Table>
      </TableContainer>

      <Box
        sx={{
          mt: "auto",
          px: 2,
          py: 1.5,
          borderTop: "1px solid",
          borderColor: "divider",
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            sm: "1fr auto 1fr",
          },
          alignItems: "center",
          gap: 1.5,
        }}
      >
        <Box
          sx={{
            justifySelf: {
              xs: "center",
              sm: "start",
            },
          }}
        >
          <Button
            size="small"
            variant="outlined"
            disabled={
              !meta.hasPreviousPage
            }
            onClick={() =>
              onPageChange(
                Math.max(
                  1,
                  meta.page - 1,
                ),
              )
            }
            sx={{
              textTransform: "none",
            }}
          >
            ‹&nbsp;{labels.previous}
          </Button>
        </Box>

        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            gap: 0.5,
            alignItems: "center",
            flexWrap: "wrap",
          }}
        >
          {getTranslationPaginationItems(meta.page, meta.totalPages).map((pageNumber, index) =>
            pageNumber === "ellipsis" ? (
              <Box component="span" aria-hidden="true" key={`gap-${index}`} sx={{ px: 0.5, color: "text.secondary" }}>…</Box>
            ) : (
            <Button
              key={pageNumber}
              size="small"
              aria-label={`${labels.page} ${formatTranslationPageNumber(pageNumber, locale)}`}
              aria-current={pageNumber === meta.page ? "page" : undefined}
              variant={
                pageNumber ===
                meta.page
                  ? "contained"
                  : "text"
              }
              onClick={() =>
                onPageChange(
                  pageNumber,
                )
              }
              sx={{
                minWidth: 32,
                width: 32,
                height: 32,
              }}
            >
              {formatTranslationPageNumber(pageNumber, locale)}
            </Button>
            ))}
        </Box>

        <Box
          sx={{
            justifySelf: {
              xs: "center",
              sm: "end",
            },
          }}
        >
          <Button
            size="small"
            variant="outlined"
            disabled={
              !meta.hasNextPage
            }
            onClick={() =>
              onPageChange(
                meta.page + 1,
              )
            }
            sx={{
              textTransform: "none",
            }}
          >
            {labels.next}&nbsp;›
          </Button>
        </Box>
      </Box>
    </Paper>
  );
}