biblical-guide.com/components/admin/users/user-data-grid.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import {
  Box,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Card,
  CardContent,
  Alert,
  Chip,
  Avatar,
  IconButton,
  Tooltip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography
} from '@mui/material';
import {
  DataGrid,
  GridColDef,
  GridActionsCellItem,
  GridRowParams,
  GridPaginationModel
} from '@mui/x-data-grid';
import {
  Visibility,
  Block,
  Delete,
  AdminPanelSettings,
  Person,
  PersonOff
} from '@mui/icons-material';

interface User {
  id: string;
  email: string;
  name: string | null;
  role: string;
  createdAt: string;
  lastLoginAt: string | null;
  _count: {
    chatConversations: number;
    prayerRequests: number;
    bookmarks: number;
  };
}

interface UserDetailModalProps {
  userId: string | null;
  open: boolean;
  onClose: () => void;
  onUserUpdate: (userId: string, action: string) => void;
}

function UserDetailModal({ userId, open, onClose, onUserUpdate }: UserDetailModalProps) {
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (userId && open) {
      const fetchUser = async () => {
        setLoading(true);
        try {
          const response = await fetch(`/api/admin/users/${userId}`, {
            credentials: 'include'
          });
          if (response.ok) {
            const data = await response.json();
            setUser(data.user);
          }
        } catch (error) {
          console.error('Error fetching user:', error);
        } finally {
          setLoading(false);
        }
      };
      fetchUser();
    }
  }, [userId, open]);

  const handleAction = async (action: string) => {
    if (!userId) return;

    try {
      const response = await fetch(`/api/admin/users/${userId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ action })
      });

      if (response.ok) {
        onUserUpdate(userId, action);
        onClose();
      }
    } catch (error) {
      console.error('Error updating user:', error);
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>User Details</DialogTitle>
      <DialogContent>
        {loading ? (
          <Typography>Loading...</Typography>
        ) : user ? (
          <Box sx={{ py: 2 }}>
            <Box sx={{ mb: 3 }}>
              <Typography variant="h6" gutterBottom>
                {user.name || 'Unknown User'}
              </Typography>
              <Typography color="text.secondary">{user.email}</Typography>
              <Chip
                label={user.role}
                color={
                  user.role === 'admin' ? 'error' :
                  user.role === 'moderator' ? 'warning' :
                  user.role === 'suspended' ? 'default' : 'primary'
                }
                sx={{ mt: 1 }}
              />
            </Box>

            <Box sx={{ mb: 3 }}>
              <Typography variant="subtitle1" gutterBottom>Account Information</Typography>
              <Typography variant="body2">
                <strong>Joined:</strong> {new Date(user.createdAt).toLocaleDateString()}
              </Typography>
              <Typography variant="body2">
                <strong>Last Login:</strong> {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
              </Typography>
            </Box>

            <Box sx={{ mb: 3 }}>
              <Typography variant="subtitle1" gutterBottom>Activity Summary</Typography>
              <Typography variant="body2">
                <strong>Conversations:</strong> {user._count.chatConversations}
              </Typography>
              <Typography variant="body2">
                <strong>Prayer Requests:</strong> {user._count.prayerRequests}
              </Typography>
              <Typography variant="body2">
                <strong>Bookmarks:</strong> {user._count.bookmarks}
              </Typography>
              <Typography variant="body2">
                <strong>Notes:</strong> {user._count.notes}
              </Typography>
            </Box>

            {user.role !== 'admin' && (
              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                {user.role === 'suspended' ? (
                  <Button
                    variant="contained"
                    color="success"
                    onClick={() => handleAction('activate')}
                  >
                    Activate User
                  </Button>
                ) : (
                  <Button
                    variant="outlined"
                    color="warning"
                    onClick={() => handleAction('suspend')}
                  >
                    Suspend User
                  </Button>
                )}

                {user.role === 'user' && (
                  <Button
                    variant="outlined"
                    color="primary"
                    onClick={() => handleAction('make_moderator')}
                  >
                    Make Moderator
                  </Button>
                )}
              </Box>
            )}
          </Box>
        ) : (
          <Typography>User not found</Typography>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
}

export function UserDataGrid() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
    page: 0,
    pageSize: 10,
  });
  const [rowCount, setRowCount] = useState(0);
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [userToDelete, setUserToDelete] = useState<User | null>(null);

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: paginationModel.page.toString(),
        pageSize: paginationModel.pageSize.toString(),
        search,
        role: roleFilter
      });

      const response = await fetch(`/api/admin/users?${params}`, {
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        setUsers(data.users);
        setRowCount(data.pagination.total);
      } else {
        setError('Failed to load users');
      }
    } catch (error) {
      setError('Network error loading users');
    } finally {
      setLoading(false);
    }
  }, [paginationModel, search, roleFilter]);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  const handleUserUpdate = useCallback((userId: string, action: string) => {
    // Refresh the data after user update
    fetchUsers();
  }, [fetchUsers]);

  const handleViewUser = (params: GridRowParams) => {
    setSelectedUserId(params.id as string);
    setModalOpen(true);
  };

  const handleDeleteUser = (params: GridRowParams) => {
    setUserToDelete(params.row as User);
    setDeleteDialogOpen(true);
  };

  const confirmDeleteUser = async () => {
    if (!userToDelete) return;

    try {
      const response = await fetch(`/api/admin/users/${userToDelete.id}`, {
        method: 'DELETE',
        credentials: 'include'
      });

      if (response.ok) {
        fetchUsers();
        setDeleteDialogOpen(false);
        setUserToDelete(null);
      }
    } catch (error) {
      console.error('Error deleting user:', error);
    }
  };

  const getRoleChip = (role: string) => {
    const colors: Record<string, any> = {
      admin: 'error',
      moderator: 'warning',
      user: 'primary',
      suspended: 'default'
    };

    return (
      <Chip
        label={role}
        color={colors[role] || 'default'}
        size="small"
        variant="outlined"
      />
    );
  };

  const columns: GridColDef[] = [
    {
      field: 'name',
      headerName: 'User',
      flex: 1,
      minWidth: 200,
      renderCell: (params) => (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Avatar sx={{ width: 32, height: 32 }}>
            {(params.row.name || params.row.email)[0].toUpperCase()}
          </Avatar>
          <Box>
            <Typography variant="body2" fontWeight="medium">
              {params.row.name || 'Unknown User'}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              {params.row.email}
            </Typography>
          </Box>
        </Box>
      )
    },
    {
      field: 'role',
      headerName: 'Role',
      width: 120,
      renderCell: (params) => getRoleChip(params.value)
    },
    {
      field: 'createdAt',
      headerName: 'Joined',
      width: 120,
      renderCell: (params) => new Date(params.value).toLocaleDateString()
    },
    {
      field: 'lastLoginAt',
      headerName: 'Last Login',
      width: 120,
      renderCell: (params) =>
        params.value ? new Date(params.value).toLocaleDateString() : 'Never'
    },
    {
      field: 'activity',
      headerName: 'Activity',
      width: 120,
      renderCell: (params) => (
        <Box>
          <Typography variant="caption" display="block">
            {params.row._count.chatConversations} chats
          </Typography>
          <Typography variant="caption" display="block">
            {params.row._count.prayerRequests} prayers
          </Typography>
        </Box>
      )
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 120,
      getActions: (params) => {
        const actions = [
          <GridActionsCellItem
            key="view"
            icon={
              <Tooltip title="View Details">
                <Visibility />
              </Tooltip>
            }
            label="View"
            onClick={() => handleViewUser(params)}
          />
        ];

        // Only show delete for non-admin users
        if (params.row.role !== 'admin') {
          actions.push(
            <GridActionsCellItem
              key="delete"
              icon={
                <Tooltip title="Delete User">
                  <Delete />
                </Tooltip>
              }
              label="Delete"
              onClick={() => handleDeleteUser(params)}
            />
          );
        }

        return actions;
      }
    }
  ];

  return (
    <Box>
      {/* Filters */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
            <TextField
              label="Search users"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              size="small"
              sx={{ minWidth: 250 }}
            />
            <FormControl size="small" sx={{ minWidth: 150 }}>
              <InputLabel>Role</InputLabel>
              <Select
                value={roleFilter}
                label="Role"
                onChange={(e) => setRoleFilter(e.target.value)}
              >
                <MenuItem value="all">All Roles</MenuItem>
                <MenuItem value="admin">Admin</MenuItem>
                <MenuItem value="moderator">Moderator</MenuItem>
                <MenuItem value="user">User</MenuItem>
                <MenuItem value="suspended">Suspended</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </CardContent>
      </Card>

      {error && (
        <Alert severity="error" sx={{ mb: 3 }}>
          {error}
        </Alert>
      )}

      {/* Data Grid */}
      <Card>
        <Box sx={{ height: 600 }}>
          <DataGrid
            rows={users}
            columns={columns}
            loading={loading}
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            rowCount={rowCount}
            paginationMode="server"
            pageSizeOptions={[10, 25, 50]}
            disableRowSelectionOnClick
            sx={{
              border: 'none',
              '& .MuiDataGrid-cell': {
                borderBottom: '1px solid #f0f0f0'
              }
            }}
          />
        </Box>
      </Card>

      {/* User Detail Modal */}
      <UserDetailModal
        userId={selectedUserId}
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onUserUpdate={handleUserUpdate}
      />

      {/* Delete Confirmation Dialog */}
      <Dialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Delete User</DialogTitle>
        <DialogContent>
          <Typography>
            Are you sure you want to delete user <strong>{userToDelete?.name || userToDelete?.email}</strong>?
          </Typography>
          <Typography variant="body2" color="error" sx={{ mt: 2 }}>
            This action cannot be undone. All user data including conversations, prayer requests, and bookmarks will be permanently deleted.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
          <Button
            onClick={confirmDeleteUser}
            color="error"
            variant="contained"
          >
            Delete User
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}