"use client";

import { useMemo, type ReactNode } from "react";

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

import { DataTable } from "@/components/ui/data-table";
import { PrintButton } from "@/components/ui/print-button";

import { getMinistryProgressReportIssueColumns } from "./progress-report-issues-columns";
import {
  MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG,
  type MinistryProgressReportIssueRow,
} from "./progress-report-issues-data";

type ProgressReportIssuesSectionProps = {
  rows: MinistryProgressReportIssueRow[];
  onUpdateIssue?: (row: MinistryProgressReportIssueRow) => void;
  onViewComment?: (row: MinistryProgressReportIssueRow) => void;
  renderAction?: (row: MinistryProgressReportIssueRow) => ReactNode;
  renderStatus?: (row: MinistryProgressReportIssueRow) => ReactNode;
  onPrint?: () => void;
};

export function ProgressReportIssuesSection({
  rows,
  onUpdateIssue,
  onViewComment,
  renderAction,
  renderStatus,
  onPrint,
}: ProgressReportIssuesSectionProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const columns = useMemo(
    () =>
      getMinistryProgressReportIssueColumns({
        onUpdateIssue,
        onViewComment,
        renderAction,
        renderStatus,
      }),
    [onUpdateIssue, onViewComment, renderAction, renderStatus],
  );
  const tableMinWidth =
    MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.minWidth -
    (onUpdateIssue || renderAction ? 0 : 149);

  const tableHeight = useMemo(() => {
    const visibleRows = Math.max(rows.length, 1);

    return (
      MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.headerHeight +
      visibleRows * MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.rowHeight
    );
  }, [rows.length]);

  const dataGridSx = useMemo<SxProps<Theme>>(() => {
    const headerBg = isDark ? alpha("#ffffff", 0.06) : "#ddedfb";
    const bodyBg = isDark ? "#101828" : "#ffffff";
    const borderColor = isDark ? "#263244" : "#f5f5f5";

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

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

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

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

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

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

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

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

      "& .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}`,
        bgcolor: bodyBg,
        display: "flex",
        alignItems: "center",
      },

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

      "& .MuiDataGrid-row": {
        bgcolor: bodyBg,
      },

      "& .MuiDataGrid-row:hover": {
        bgcolor: bodyBg,
      },

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

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

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

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

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

  return (
    <Box sx={{ minWidth: 0, width: "100%" }}>
      <Box
        sx={{
          mb: 1.5,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 2,
        }}
      >
        <Typography
          sx={{
            fontSize: 13,
            fontWeight: 500,
            color: isDark ? "#d0d5dd" : "#414651",
            lineHeight: 1.2,
          }}
        >
          List of Issues
        </Typography>

        <PrintButton onClick={onPrint}>Print</PrintButton>
      </Box>

      <DataTable
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        emptyMessage="No issues found."
        emptyOverlayInsetTop={
          MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.headerHeight
        }
        hidePagination
        height={tableHeight}
        rowHeight={MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.rowHeight}
        columnHeaderHeight={
          MINISTRY_PROGRESS_REPORT_ISSUE_TABLE_CONFIG.headerHeight
        }
        enableColumnMenu
        dataGridSx={dataGridSx}
        paperSx={{
          width: "100%",
          minWidth: 0,
          border: isDark
            ? `1px solid ${alpha("#ffffff", 0.1)}`
            : "1px solid #e9eaeb",
          borderRadius: "12px",
          overflow: "hidden",
          bgcolor: isDark ? "#101828" : "#ffffff",
        }}
      />
    </Box>
  );
}