"use client";

import { useMemo } from "react";

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

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

import type {
  MeetingSummaryRow,
  MeetingSummaryStatus,
} from "../meeting-summary-data";
import type { UiLang } from "../meeting-summary-i18n";
import { meetingSummaryI18n } from "../meeting-summary-i18n";
import { getMeetingSummaryTableColumns } from "./table/meeting-summary-table-columns";
import { MEETING_SUMMARY_TABLE_CONFIG } from "./table/meeting-summary-table-config";

type Props = {
  lang?: UiLang;
  rows: MeetingSummaryRow[];
  onSubmitReportSuccess?: () => void;
  onRowUpdated?: (id: number, status: MeetingSummaryStatus) => void;
};

export function MeetingSummaryTable({
  lang = "en",
  rows,
  onSubmitReportSuccess,
  onRowUpdated,
}: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const text = meetingSummaryI18n[lang];

  const columns = useMemo(
    () =>
      getMeetingSummaryTableColumns(lang, {
        onSubmitReportSuccess,
        onRowUpdated,
      }),
    [lang, onRowUpdated, onSubmitReportSuccess],
  );

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

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



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

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

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

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

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

      "& .MuiDataGrid-columnHeader[data-field='status'] .MuiDataGrid-columnHeaderTitleContainer":
        {
          justifyContent: "flex-start",
        },

      "& .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-row": {
        bgcolor: bodyBg,
      },

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

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

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

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

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

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

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

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

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

  return (
    <DataTable
      fillAvailableHeight
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      emptyMessage={text.emptySummaries}
      paginationLabels={{
        previous: text.previous,
        next: text.next,
      }}
      pageSize={MEETING_SUMMARY_TABLE_CONFIG.pageSize}
      rowHeight={MEETING_SUMMARY_TABLE_CONFIG.rowHeight}
      columnHeaderHeight={MEETING_SUMMARY_TABLE_CONFIG.headerHeight}
      enableColumnMenu
      dataGridSx={dataGridSx}
      paperSx={{
        width: "100%",
        minWidth: 0,
        mt: 2,
        overflow: "hidden",
        border: isDark
          ? `1px solid ${alpha("#ffffff", 0.1)}`
          : "1px solid var(--ms-border, #f5f5f5)",
      }}
    />
  );
}