"use client";

import { useMemo } from "react";

import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import type {
  GridFilterModel,
  GridPaginationModel,
  GridSortModel,
} from "@mui/x-data-grid";

import { DataTable } from "@/components/ui/data-table";
import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
import { StakeholderGridCard } from "@/features/stakeholder/components/table/stakeholder-grid-card";
import {
  STAKEHOLDER_PAGE_SIZE,
  STAKEHOLDER_ROW_HEIGHT,
  type StakeholderViewMode,
} from "@/features/stakeholder/components/table/stakeholder-table-config";
import { getStakeholderTableColumns } from "@/features/stakeholder/components/table/stakeholder-table-columns";
import type { Stakeholder } from "@/features/stakeholder/stakeholder-data";

type StakeholderTableProps = {
  stakeholders: Stakeholder[];
  rowCount: number;
  paginationModel: GridPaginationModel;
  onPaginationModelChange: (model: GridPaginationModel) => void;
  sortModel: GridSortModel;
  onSortModelChange: (model: GridSortModel) => void;
  filterModel: GridFilterModel;
  onFilterModelChange: (model: GridFilterModel) => void;
  viewMode?: StakeholderViewMode;
  isLoading: boolean;
  error: string | null;
  onView: (stakeholder: Stakeholder) => void;
  onAddUser: (stakeholder: Stakeholder) => void;
  onEdit: (stakeholder: Stakeholder) => void;
  onDelete: (stakeholder: Stakeholder) => void;
};

export function StakeholderTable({
  stakeholders,
  rowCount,
  paginationModel,
  onPaginationModelChange,
  sortModel,
  onSortModelChange,
  filterModel,
  onFilterModelChange,
  viewMode = "list",
  isLoading,
  error,
  onView,
  onAddUser,
  onEdit,
  onDelete,
}: StakeholderTableProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const columns = useMemo(
    () => getStakeholderTableColumns({ onView, onAddUser, onEdit, onDelete }),
    [onView, onAddUser, onEdit, onDelete],
  );

  const pageSize = paginationModel.pageSize || STAKEHOLDER_PAGE_SIZE;
  const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
  const page = Math.min(paginationModel.page, pageCount - 1);

  const paginationFooter = (
    <DataTablePagination
      page={page}
      pageCount={pageCount}
      onPrevious={() =>
        onPaginationModelChange({
          ...paginationModel,
          page: Math.max(0, page - 1),
        })
      }
      onNext={() =>
        onPaginationModelChange({
          ...paginationModel,
          page: Math.min(pageCount - 1, page + 1),
        })
      }
      onSelectPage={(pageIndex) =>
        onPaginationModelChange({
          ...paginationModel,
          page: pageIndex,
        })
      }
    />
  );

  if (viewMode === "grid") {
    return (
      <Box>
        {isLoading ? (
          <Box
            sx={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              minHeight: 240,
            }}
          >
            <CircularProgress size={32} />
          </Box>
        ) : error ? (
          <Typography sx={{ color: "#DC2626", fontSize: 13, py: 2 }}>
            {error}
          </Typography>
        ) : stakeholders.length === 0 ? (
          <Typography
            sx={{
              py: 4,
              textAlign: "center",
              color: isDark ? alpha("#ffffff", 0.56) : "#717680",
              fontSize: 14,
            }}
          >
            No stakeholders found.
          </Typography>
        ) : (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              gap: 2.5,
            }}
          >
            {stakeholders.map((stakeholder) => (
              <StakeholderGridCard
                key={stakeholder.id}
                stakeholder={stakeholder}
                onView={onView}
                onAddUser={onAddUser}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </Box>
        )}

        {!isLoading && rowCount > 0 ? (
          <Paper
            elevation={0}
            sx={{
              mt: 2,
              borderRadius: "12px",
              border: `1px solid ${isDark ? alpha("#ffffff", 0.12) : "#e9eaeb"}`,
              overflow: "hidden",
              bgcolor: isDark ? "#111827" : "#ffffff",
            }}
          >
            {paginationFooter}
          </Paper>
        ) : null}
      </Box>
    );
  }

  return (
    <DataTable
      fillAvailableHeight
      rows={stakeholders}
      columns={columns}
      getRowId={(row) => row.id}
      enableColumnMenu
      loading={isLoading}
      error={error}
      emptyMessage="No stakeholders found."
      pageSize={STAKEHOLDER_PAGE_SIZE}
      rowHeight={STAKEHOLDER_ROW_HEIGHT}
      paginationMode="server"
      sortingMode="server"
      filterMode="server"
      rowCount={rowCount}
      paginationModel={paginationModel}
      onPaginationModelChange={onPaginationModelChange}
      sortModel={sortModel}
      onSortModelChange={onSortModelChange}
      filterModel={filterModel}
      onFilterModelChange={onFilterModelChange}
    />
  );
}