"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 {
    MeetingRequest,
    MeetingRequestStatus,
} from "../../meeting-request-data";
import type { MeetingRequestTableLabels } from "./meeting-requests-table-columns";
import { getMeetingRequestTableColumns } from "./meeting-requests-table-columns";
import { MEETING_REQUESTS_TABLE_CONFIG } from "./meeting-requests-table-config";

type Props = {
    rows: MeetingRequest[];
    labels: MeetingRequestTableLabels;
    statusLabels: Record<MeetingRequestStatus, string>;
    onView?: (row: MeetingRequest) => void;
    onCreateMeeting?: (row: MeetingRequest) => void;
};

export function MeetingRequestsTable({
    rows,
    labels,
    statusLabels,
    onView,
    onCreateMeeting,
}: Props) {
    const theme = useTheme();
    const isDark = theme.palette.mode === "dark";

    const columns = useMemo(
        () =>
            getMeetingRequestTableColumns(labels, statusLabels, {
                onView,
                onCreateMeeting,
            }),
        [labels, statusLabels, onView, onCreateMeeting]
    );

    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%",
            minWidth: 0,

            "& .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='documentName'] .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-cell[data-field='documentName']": {
                display: "flex",
                alignItems: "center",
                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 (
        <DataTable
            fillAvailableHeight
            rows={rows}
            columns={columns}
            getRowId={(row) => row.id}
            emptyMessage="No meeting requests match the selected filters."
            pageSize={MEETING_REQUESTS_TABLE_CONFIG.pageSize}
            rowHeight={MEETING_REQUESTS_TABLE_CONFIG.rowHeight}
            columnHeaderHeight={MEETING_REQUESTS_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(--mr-border, #f5f5f5)",
            }}
        />
    );
}