"use client";

import dynamic from "next/dynamic";
import { useEffect, useMemo, useState, type ComponentType } from "react";

import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import type { DataGridProps, GridPaginationModel } from "@mui/x-data-grid";

import type { CdcGpsfMeetingRequestRow } from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-data";
import type { CdcGpsfMeetingRequestUiLang } from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-i18n";
import { useCdcGpsfMeetingRequests } from "@/features/cdc-gpsf/meeting-requests/hook/use-cdc-gpsf-meeting-requests";

import { buildMeetingRequestRows } from "./cdc-gpsf-meeting-requests-row-utils";
import { getCdcGpsfMeetingRequestsTableColumns } from "./cdc-gpsf-meeting-requests-table-columns";
import {
  CDC_GPSF_MEETING_REQUESTS_PAGE_SIZE,
  CDC_GPSF_MEETING_REQUESTS_TABLE_COLORS,
  CDC_GPSF_MEETING_REQUESTS_TABLE_MIN_WIDTH,
} from "./cdc-gpsf-meeting-requests-table-config";
import { CdcGpsfMeetingRequestsTableFooter } from "./cdc-gpsf-meeting-requests-table-footer";
import type { CdcGpsfMeetingRequestRowWithApi } from "./cdc-gpsf-meeting-requests-row-utils";

const DataGrid = dynamic(
  () => import("@mui/x-data-grid").then((mod) => mod.DataGrid),
  { ssr: false },
) as ComponentType<DataGridProps<CdcGpsfMeetingRequestRowWithApi>>;

type CdcGpsfMeetingRequestsTableProps = {
  language?: CdcGpsfMeetingRequestUiLang;
  refreshKey?: number;
  workingGroupFilter?: string[];
  governmentAgencyFilter?: string[];
  statusFilter?: string[];
  meetingDateFilter?: string[];
  onView?: (row: CdcGpsfMeetingRequestRow) => void;
};

export function CdcGpsfMeetingRequestsTable({
  language = "km",
  refreshKey = 0,
  workingGroupFilter = [],
  governmentAgencyFilter = [],
  statusFilter = [],
  meetingDateFilter = [],
  onView,
}: CdcGpsfMeetingRequestsTableProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const {
    data,
    workingGroups,
    loading,
    loadingWorkingGroups,
    error,
    fetchMeetingRequests,
    fetchWorkingGroups,
  } = useCdcGpsfMeetingRequests();

  useEffect(() => {
    fetchMeetingRequests();
    fetchWorkingGroups();
  }, [refreshKey, fetchMeetingRequests, fetchWorkingGroups]);

  const rows = useMemo(
    () =>
      buildMeetingRequestRows(data, workingGroups, {
        workingGroupFilter,
        governmentAgencyFilter,
        statusFilter,
        meetingDateFilter,
      }),
    [
      data,
      workingGroups,
      workingGroupFilter,
      governmentAgencyFilter,
      statusFilter,
      meetingDateFilter,
    ],
  );

  const columns = useMemo(
    () => getCdcGpsfMeetingRequestsTableColumns(language, { onView }),
    [language, onView],
  );

  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
    page: 0,
    pageSize: CDC_GPSF_MEETING_REQUESTS_PAGE_SIZE,
  });

  const pageCount = Math.max(
    1,
    Math.ceil(rows.length / paginationModel.pageSize),
  );

  const dataGridSx = useMemo(
    () => ({
      border: "none",
      color: isDark ? alpha("#ffffff", 0.86) : theme.palette.text.primary,
      backgroundColor: isDark ? "#101828" : "#ffffff",

      "& .MuiDataGrid-columnHeaders": {
        backgroundColor: isDark
          ? alpha("#ffffff", 0.06)
          : CDC_GPSF_MEETING_REQUESTS_TABLE_COLORS.headerBackground,
      },

      "& .MuiDataGrid-columnHeader": {
        px: 2,
        backgroundColor: isDark
          ? alpha("#ffffff", 0.06)
          : CDC_GPSF_MEETING_REQUESTS_TABLE_COLORS.headerBackground,
      },

      "& .MuiDataGrid-columnHeaderTitle": {
        fontSize: 12,
        fontWeight: 400,
        color: isDark
          ? alpha("#ffffff", 0.72)
          : CDC_GPSF_MEETING_REQUESTS_TABLE_COLORS.headerText,
        whiteSpace: "nowrap",
      },

      "& .MuiDataGrid-iconButtonContainer": {
        visibility: "visible",
        width: "auto",
      },

      "& .MuiDataGrid-columnSeparator": {
        visibility: "visible",
      },

      "& .MuiDataGrid-cell": {
        px: 2,
        py: 0,
        display: "flex",
        alignItems: "center",
        backgroundColor: isDark ? "#101828" : "#ffffff",
        overflow: "hidden",
      },

      "& .MuiDataGrid-cellContent": {
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        width: "100%",
      },

      "& .MuiDataGrid-row": {
        backgroundColor: isDark ? "#101828" : "#ffffff",
      },

      "& .MuiDataGrid-cell[data-field='governmentAgency']": {
        alignItems: "center",
        justifyContent: "flex-start",
      },

      "& .MuiDataGrid-cell[data-field='workingGroup']": {
        alignItems: "flex-start",
        py: 1.25,
      },

      "& .MuiDataGrid-columnHeader[data-field='meetingRequest'] .MuiDataGrid-columnHeaderTitleContainer":
        {
          justifyContent: "center",
        },

      "& .MuiDataGrid-cell[data-field='meetingRequest']": {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      },

      "& .MuiDataGrid-row:hover": {
        backgroundColor: isDark ? alpha("#ffffff", 0.04) : "#ffffff",
      },

      "& .MuiDataGrid-withBorderColor": {
        borderColor: isDark ? alpha("#ffffff", 0.08) : "#f5f5f5",
      },

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

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

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

      "& .MuiDataGrid-virtualScroller": {
        overflowX: "auto !important",
        overflowY: "auto !important",
        backgroundColor: isDark ? "#101828" : "#ffffff",
      },

      "& .MuiDataGrid-columnHeadersInner, & .MuiDataGrid-virtualScrollerContent":
        {
          minWidth: CDC_GPSF_MEETING_REQUESTS_TABLE_MIN_WIDTH,
        },

      "& .MuiDataGrid-scrollbarFiller": {
        display: "none !important",
      },
    }),
    [isDark, theme.palette.text.primary],
  );

  return (
    <Paper
      elevation={0}
      sx={{
        flex: 1,
        minHeight: 428,
        display: "flex",
        flexDirection: "column",
        borderRadius: "12px",
        border: `1px solid ${isDark ? alpha("#ffffff", 0.1) : "#f5f5f5"}`,
        overflow: "hidden",
        backgroundColor: isDark ? "#101828" : "#ffffff",
      }}
    >
      <Box sx={{ flex: 1, minHeight: 360, width: "100%" }}>
        {loading || loadingWorkingGroups ? (
          <Box sx={{ height: "100%", display: "grid", placeItems: "center" }}>
            <CircularProgress size={28} />
          </Box>
        ) : error ? (
          <Box
            sx={{
              height: "100%",
              display: "grid",
              placeItems: "center",
              px: 2,
            }}
          >
            <Typography sx={{ color: "#d92d20", fontSize: 14 }}>
              {error}
            </Typography>
          </Box>
        ) : (
          <DataGrid
            rows={rows}
            columns={columns}
            getRowId={(row) => row.id}
            pagination
            hideFooter
            disableRowSelectionOnClick
            disableColumnSelector
            disableDensitySelector
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            pageSizeOptions={[CDC_GPSF_MEETING_REQUESTS_PAGE_SIZE]}
            showCellVerticalBorder
            showColumnVerticalBorder
            rowHeight={60}
            columnHeaderHeight={50}
            sx={dataGridSx}
          />
        )}
      </Box>

      <CdcGpsfMeetingRequestsTableFooter
        language={language}
        page={paginationModel.page}
        pageCount={pageCount}
        onPrevious={() =>
          setPaginationModel((current) => ({
            ...current,
            page: Math.max(0, current.page - 1),
          }))
        }
        onNext={() =>
          setPaginationModel((current) => ({
            ...current,
            page: Math.min(pageCount - 1, current.page + 1),
          }))
        }
        onSelectPage={(pageIndex) =>
          setPaginationModel((current) => ({
            ...current,
            page: pageIndex,
          }))
        }
      />
    </Paper>
  );
}