"use client";

// The progress-report table: wires the shared DataTable (MUI DataGrid wrapper)
// to our columns and gives it the blue header styling from the design.

import { 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 { DataTable } from "@/components/ui/data-table";

import type { ProgressReportRow } from "../../progress-report-data";
import type {
  ProgressReportActionsMenuLabels,
  ProgressReportCreateDialogLabels,
  ProgressReportCreateMeetingDialogLabels,
  ProgressReportSetDeadlineDialogLabels,
  ProgressReportUploadDraftSemesterDialogLabels,
} from "../../progress-report-i18n";
import {
  getProgressReportTableColumns,
  type ProgressReportColumnLabels,
} from "./progress-report-table-columns";
import type { ProgressReportRowActions } from "./progress-report-actions-menu";
import { PROGRESS_REPORT_TABLE_CONFIG } from "./progress-report-table-config";
import {
  ProgressReportEmptyState,
  type ProgressReportEmptyStateLabels,
} from "./progress-report-empty-state";

type ProgressReportTableProps = {
  rows: ProgressReportRow[];
  columnLabels: ProgressReportColumnLabels;
  actionsMenuLabels: ProgressReportActionsMenuLabels;
  editReportLabels: ProgressReportCreateDialogLabels;
  uploadDraftSemesterLabels: ProgressReportUploadDraftSemesterDialogLabels;
  createMeetingLabels: ProgressReportCreateMeetingDialogLabels;
  setDeadlineLabels: ProgressReportSetDeadlineDialogLabels;
  emptyStateLabels: ProgressReportEmptyStateLabels;
  translateValue: (value: string) => string;
  loading: boolean;
  error: string | null;
  rowActions: ProgressReportRowActions;
};

export function ProgressReportTable({
  rows,
  columnLabels,
  actionsMenuLabels,
  editReportLabels,
  uploadDraftSemesterLabels,
  createMeetingLabels,
  setDeadlineLabels,
  emptyStateLabels,
  translateValue,
  loading,
  error,
  rowActions,
}: ProgressReportTableProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const columns = useMemo(
    () =>
      getProgressReportTableColumns(
        columnLabels,
        translateValue,
        actionsMenuLabels,
        editReportLabels,
        uploadDraftSemesterLabels,
        createMeetingLabels,
        setDeadlineLabels,
        rowActions,
      ),
    [
      actionsMenuLabels,
      columnLabels,
      createMeetingLabels,
      editReportLabels,
      setDeadlineLabels,
      rowActions,
      translateValue,
      uploadDraftSemesterLabels,
    ],
  );

  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-columnHeadersInner": {
        minWidth: PROGRESS_REPORT_TABLE_CONFIG.minWidth,
      },

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

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

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

      // Let header text render in full instead of getting cut with "...".
      "& .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}`,
        bgcolor: bodyBg,
        display: "flex",
        alignItems: "center",
      },

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

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

      "& .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
        fillAvailableHeight
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        emptyContent={<ProgressReportEmptyState labels={emptyStateLabels} />}
        emptyOverlayInsetTop={PROGRESS_REPORT_TABLE_CONFIG.headerHeight}
        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>
  );
}