"use client";

import {
  useCallback,
  useMemo,
} from "react";

import Box from "@mui/material/Box";
import {
  alpha,
  useTheme,
} from "@mui/material/styles";
import type {
  SxProps,
  Theme,
} from "@mui/material/styles";

import { useAppLanguage } from
  "@/components/providers/app-language-provider";
import { DataTable } from
  "@/components/ui/data-table";

import {
  normalizeProgressReportLanguage,
  progressReportText,
  translateProgressReportValue,
} from "@/features/cdc-gpsf/progress-report/progress-report-i18n";

import type { ProgressReportRow } from
  "../../progress-report-data";

import {
  getProgressReportTableColumns,
} from "./progress-report-table-columns";

import {
  PROGRESS_REPORT_TABLE_CONFIG,
} from "./progress-report-table-config";

type Props = {
  rows: ProgressReportRow[];
  loading?: boolean;
  error?: string | null;
  onView?: (
    row: ProgressReportRow,
  ) => void;
};

export function ProgressReportTable({
  rows,
  loading = false,
  error = null,
  onView,
}: Props) {
  const theme = useTheme();

  const isDark =
    theme.palette.mode === "dark";

  const { language } =
    useAppLanguage();

  const tableLanguage =
    normalizeProgressReportLanguage(
      language,
    );

  const text =
    progressReportText[tableLanguage];

  const translateValue = useCallback(
    (value: string) =>
      translateProgressReportValue(
        value,
        tableLanguage,
      ),
    [tableLanguage],
  );

  const columns = useMemo(
    () =>
      getProgressReportTableColumns(
        text.columns,
        translateValue,
        text.actionsMenu.viewDetail,
        {
          onView,
        },
      ),
    [
      onView,
      text.actionsMenu.viewDetail,
      text.columns,
      translateValue,
    ],
  );

  const dataGridSx =
    useMemo<SxProps<Theme>>(() => {
      const headerBackground = isDark
        ? alpha("#ffffff", 0.06)
        : "#ddedfb";

      const bodyBackground = isDark
        ? "#101828"
        : "#ffffff";

      const hoverBackground = isDark
        ? alpha("#ffffff", 0.04)
        : "#f9fafb";

      const borderColor = isDark
        ? "#263244"
        : "#f5f5f5";

      return {
        border: "none",
        width: "100%",

        "& .MuiDataGrid-columnHeadersInner":
          {
            minWidth:
              PROGRESS_REPORT_TABLE_CONFIG
                .minWidth,
          },

        "& .MuiDataGrid-virtualScrollerContent":
          {
            minWidth:
              PROGRESS_REPORT_TABLE_CONFIG
                .minWidth,
          },

        "& .MuiDataGrid-columnHeaders":
          {
            backgroundColor:
              headerBackground,
            borderBottom:
              `1px solid ${borderColor}`,
          },

        "& .MuiDataGrid-columnHeader": {
          px: 2,
          backgroundColor:
            headerBackground,
        },

        "& .MuiDataGrid-columnHeaderTitleContainer":
          {
            overflow: "visible",
          },

        "& .MuiDataGrid-columnHeaderTitle":
          {
            fontSize: 12,
            fontWeight: 400,
            whiteSpace: "nowrap",
            overflow: "visible",
            textOverflow: "clip",
            color: isDark
              ? alpha(
                  "#ffffff",
                  0.72,
                )
              : "#717680",
          },

        "& .MuiDataGrid-cell": {
          px: 2,
          py: 0,
          color: isDark
            ? "#ffffff"
            : "#181d27",
          borderColor,
          borderBottom:
            `1px solid ${borderColor}`,
          backgroundColor:
            bodyBackground,
          display: "flex",
          alignItems: "center",
        },

        "& .MuiDataGrid-row": {
          backgroundColor:
            bodyBackground,
        },

        "& .MuiDataGrid-row:hover": {
          backgroundColor:
            hoverBackground,
        },

        "& .MuiDataGrid-cell[data-field='actions']":
          {
            justifyContent: "center",
          },

        "& .MuiDataGrid-withBorderColor":
          {
            borderColor,
          },

        "& .MuiDataGrid-main": {
          overflow: "hidden",
        },

        "& .MuiDataGrid-virtualScroller":
          {
            overflowX:
              "auto !important",
            overflowY:
              "auto !important",
          },

        "& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-within":
          {
            outline: "none",
          },

        "& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within":
          {
            outline: "none",
          },
      };
    }, [isDark]);

  return (
    <Box
      sx={{
        flex: 1,
        minHeight: 0,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <DataTable
        enableColumnMenu
        fillAvailableHeight
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        loading={loading}
        error={error}
        pageSize={
          PROGRESS_REPORT_TABLE_CONFIG
            .pageSize
        }
        rowHeight={
          PROGRESS_REPORT_TABLE_CONFIG
            .rowHeight
        }
        columnHeaderHeight={
          PROGRESS_REPORT_TABLE_CONFIG
            .headerHeight
        }
        dataGridSx={dataGridSx}
        paperSx={{
          width: "100%",
          minWidth: 0,
          flex: 1,
          overflow: "hidden",
          borderRadius: "12px",
          border: isDark
            ? `1px solid ${alpha(
                "#ffffff",
                0.1,
              )}`
            : "1px solid #e9eaeb",
        }}
      />
    </Box>
  );
}