"use client";

import { useMemo } from "react";

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

import { DataTable } from "@/components/ui/data-table";
import {
  USER_HEADER_HEIGHT,
  USER_PAGE_SIZE,
  USER_ROW_HEIGHT,
} from "@/features/admin/user-management/components/table/user-table-config";
import {
  getUserTableColumns,
  type UserTableLabels,
} from "@/features/admin/user-management/components/table/user-columns";
import type { UserRow } from "@/features/admin/user-management/hook/use-user-management";

const TABLE_BORDER_COLOR = "#E9EAEB";
const TABLE_HEADER_BACKGROUND = "#EDF8FD";
const TABLE_HOVER_BACKGROUND = "#F8FAFC";

type UserTableProps = {
  users: UserRow[];
  isLoading: boolean;
  error: string | null;
  emptyMessage: string;
  labels: UserTableLabels;
  isProtectedUser: (user: UserRow) => boolean;
  onEdit: (user: UserRow) => void;
  onOpenLoginTrails: (user: UserRow) => void;
  onToggleStatus: (user: UserRow) => void;
  onDelete: (user: UserRow) => void;
};

export function UserTable({
  users,
  isLoading,
  error,
  emptyMessage,
  labels,
  isProtectedUser,
  onEdit,
  onOpenLoginTrails,
  onToggleStatus,
  onDelete,
}: UserTableProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const columns = useMemo(
    () =>
      getUserTableColumns({
        labels,
        isProtectedUser,
        onEdit,
        onOpenLoginTrails,
        onToggleStatus,
        onDelete,
      }),
    [
      labels,
      isProtectedUser,
      onEdit,
      onOpenLoginTrails,
      onToggleStatus,
      onDelete,
    ],
  );

  return (
    <DataTable
      fillAvailableHeight
      rows={users}
      columns={columns}
      getRowId={(row) => row.id}
      enableColumnMenu
      loading={isLoading}
      error={error}
      emptyMessage={emptyMessage}
      pageSize={USER_PAGE_SIZE}
      rowHeight={USER_ROW_HEIGHT}
      columnHeaderHeight={USER_HEADER_HEIGHT}
      paperSx={{
        border: `1px solid ${isDark ? alpha("#ffffff", 0.1) : TABLE_BORDER_COLOR}`,
        borderRadius: "8px",
        backgroundColor: isDark ? "#101828" : "#ffffff",
        overflow: "hidden",
      }}
      dataGridSx={{
        backgroundColor: isDark ? "#101828" : "#ffffff",
        "& .MuiDataGrid-columnHeaders": {
          backgroundColor: isDark
            ? alpha("#ffffff", 0.06)
            : TABLE_HEADER_BACKGROUND,
          borderBottom: `1px solid ${isDark ? alpha("#ffffff", 0.1) : TABLE_BORDER_COLOR}`,
        },
        "& .MuiDataGrid-columnHeader": {
          px: 2.25,
          backgroundColor: isDark
            ? alpha("#ffffff", 0.06)
            : TABLE_HEADER_BACKGROUND,
        },
        "& .MuiDataGrid-columnHeaderTitle": {
          fontSize: 14,
          fontWeight: 500,
          color: isDark ? alpha("#ffffff", 0.72) : "#717680",
        },
        "& .MuiDataGrid-row": {
          backgroundColor: isDark ? "#101828" : "#ffffff",
        },
        "& .MuiDataGrid-cell": {
          px: 2.25,
          backgroundColor: isDark ? "#101828" : "#ffffff",
          borderColor: isDark ? alpha("#ffffff", 0.1) : TABLE_BORDER_COLOR,
        },
        "& .MuiDataGrid-row:hover .MuiDataGrid-cell": {
          backgroundColor: isDark
            ? alpha("#ffffff", 0.04)
            : TABLE_HOVER_BACKGROUND,
        },
        "& .MuiDataGrid-withBorderColor": {
          borderColor: isDark ? alpha("#ffffff", 0.1) : TABLE_BORDER_COLOR,
        },
        "& .MuiDataGrid-virtualScroller": {
          backgroundColor: isDark ? "#101828" : "#ffffff",
        },
      }}
    />
  );
}