biblical-guide.com/components/admin/content/prayer-request-data-grid.tsx

'use client';

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

interface PrayerRequest {
  id: string;
  title: string;
  description: string;
  category: string;
  author: string;
  isAnonymous: boolean;
  prayerCount: number;
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
  user: {
    id: string;
    email: string;
    name: string | null;
  } | null;
}

interface PrayerRequestDetailModalProps {
  prayerRequestId: string | null;
  open: boolean;
  onClose: () => void;
  onPrayerRequestUpdate: (prayerRequestId: string, action: string) => void;
}

function PrayerRequestDetailModal({ prayerRequestId, open, onClose, onPrayerRequestUpdate }: PrayerRequestDetailModalProps) {
  const [prayerRequest, setPrayerRequest] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (prayerRequestId && open) {
      const fetchPrayerRequest = async () => {
        setLoading(true);
        try {
          const response = await fetch(`/api/admin/content/prayer-requests/${prayerRequestId}`, {
            credentials: 'include'
          });
          if (response.ok) {
            const data = await response.json();
            setPrayerRequest(data.prayerRequest);
          }
        } catch (error) {
          console.error('Error fetching prayer request:', error);
        } finally {
          setLoading(false);
        }
      };
      fetchPrayerRequest();
    }
  }, [prayerRequestId, open]);

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

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

      if (response.ok) {
        onPrayerRequestUpdate(prayerRequestId, action);
        onClose();
      }
    } catch (error) {
      console.error('Error updating prayer request:', error);
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>Prayer Request Details</DialogTitle>
      <DialogContent>
        {loading ? (
          <Typography>Loading...</Typography>
        ) : prayerRequest ? (
          <Box sx={{ py: 2 }}>
            <Box sx={{ mb: 3 }}>
              <Typography variant="h6" gutterBottom>
                {prayerRequest.title}
              </Typography>
              <Typography variant="body1" sx={{ mb: 2 }}>
                {prayerRequest.description}
              </Typography>
              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
                <Chip
                  label={prayerRequest.category}
                  color="primary"
                  size="small"
                />
                <Chip
                  label={prayerRequest.isActive ? 'Active' : 'Inactive'}
                  color={prayerRequest.isActive ? 'success' : 'error'}
                  size="small"
                />
                <Chip
                  label={prayerRequest.isAnonymous ? 'Anonymous' : 'Public'}
                  color={prayerRequest.isAnonymous ? 'default' : 'info'}
                  size="small"
                />
              </Box>
            </Box>

            <Box sx={{ mb: 3 }}>
              <Typography variant="subtitle1" gutterBottom>Request Information</Typography>
              <Typography variant="body2">
                <strong>Author:</strong> {prayerRequest.author}
              </Typography>
              {prayerRequest.user && (
                <Typography variant="body2">
                  <strong>User:</strong> {prayerRequest.user.name || prayerRequest.user.email}
                </Typography>
              )}
              <Typography variant="body2">
                <strong>Prayer Count:</strong> {prayerRequest.prayerCount}
              </Typography>
              <Typography variant="body2">
                <strong>Created:</strong> {new Date(prayerRequest.createdAt).toLocaleString()}
              </Typography>
              <Typography variant="body2">
                <strong>Updated:</strong> {new Date(prayerRequest.updatedAt).toLocaleString()}
              </Typography>
            </Box>

            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
              {prayerRequest.isActive ? (
                <Button
                  variant="outlined"
                  color="error"
                  onClick={() => handleAction('reject')}
                >
                  Reject Request
                </Button>
              ) : (
                <Button
                  variant="contained"
                  color="success"
                  onClick={() => handleAction('approve')}
                >
                  Approve Request
                </Button>
              )}
            </Box>
          </Box>
        ) : (
          <Typography>Prayer request not found</Typography>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
}

export function PrayerRequestDataGrid() {
  const [prayerRequests, setPrayerRequests] = useState<PrayerRequest[]>([]);
  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 [categoryFilter, setCategoryFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  const [selectedPrayerRequestId, setSelectedPrayerRequestId] = useState<string | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [prayerRequestToDelete, setPrayerRequestToDelete] = useState<PrayerRequest | null>(null);

  const fetchPrayerRequests = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: paginationModel.page.toString(),
        pageSize: paginationModel.pageSize.toString(),
        search,
        category: categoryFilter,
        status: statusFilter
      });

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

      if (response.ok) {
        const data = await response.json();
        setPrayerRequests(data.prayerRequests);
        setRowCount(data.pagination.total);
      } else {
        setError('Failed to load prayer requests');
      }
    } catch (error) {
      setError('Network error loading prayer requests');
    } finally {
      setLoading(false);
    }
  }, [paginationModel, search, categoryFilter, statusFilter]);

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

  const handlePrayerRequestUpdate = useCallback((prayerRequestId: string, action: string) => {
    // Refresh the data after prayer request update
    fetchPrayerRequests();
  }, [fetchPrayerRequests]);

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

  const handleDeletePrayerRequest = (params: GridRowParams) => {
    setPrayerRequestToDelete(params.row as PrayerRequest);
    setDeleteDialogOpen(true);
  };

  const confirmDeletePrayerRequest = async () => {
    if (!prayerRequestToDelete) return;

    try {
      const response = await fetch(`/api/admin/content/prayer-requests/${prayerRequestToDelete.id}`, {
        method: 'DELETE',
        credentials: 'include'
      });

      if (response.ok) {
        fetchPrayerRequests();
        setDeleteDialogOpen(false);
        setPrayerRequestToDelete(null);
      }
    } catch (error) {
      console.error('Error deleting prayer request:', error);
    }
  };

  const getStatusChip = (isActive: boolean) => {
    return (
      <Chip
        label={isActive ? 'Active' : 'Inactive'}
        color={isActive ? 'success' : 'error'}
        size="small"
        variant="outlined"
      />
    );
  };

  const getCategoryChip = (category: string) => {
    const colors: Record<string, any> = {
      personal: 'primary',
      family: 'secondary',
      health: 'error',
      work: 'warning',
      ministry: 'info',
      world: 'success'
    };

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

  const columns: GridColDef[] = [
    {
      field: 'title',
      headerName: 'Title',
      flex: 1,
      minWidth: 200,
      renderCell: (params) => (
        <Box>
          <Typography variant="body2" fontWeight="medium">
            {params.value}
          </Typography>
          <Typography variant="caption" color="text.secondary">
            by {params.row.author}
          </Typography>
        </Box>
      )
    },
    {
      field: 'category',
      headerName: 'Category',
      width: 120,
      renderCell: (params) => getCategoryChip(params.value)
    },
    {
      field: 'prayerCount',
      headerName: 'Prayers',
      width: 80,
      align: 'center',
      headerAlign: 'center'
    },
    {
      field: 'isActive',
      headerName: 'Status',
      width: 100,
      renderCell: (params) => getStatusChip(params.value)
    },
    {
      field: 'createdAt',
      headerName: 'Created',
      width: 120,
      renderCell: (params) => new Date(params.value).toLocaleDateString()
    },
    {
      field: 'user',
      headerName: 'User',
      width: 120,
      renderCell: (params) => (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          {params.row.isAnonymous ? (
            <PersonOff fontSize="small" color="disabled" />
          ) : (
            <Person fontSize="small" color="primary" />
          )}
          <Typography variant="caption">
            {params.row.isAnonymous ? 'Anonymous' : (params.value?.name || params.value?.email || 'N/A')}
          </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={() => handleViewPrayerRequest(params)}
          />
        ];

        actions.push(
          <GridActionsCellItem
            key="delete"
            icon={
              <Tooltip title="Delete Prayer Request">
                <Delete />
              </Tooltip>
            }
            label="Delete"
            onClick={() => handleDeletePrayerRequest(params)}
          />
        );

        return actions;
      }
    }
  ];

  return (
    <Box>
      {/* Filters */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
            <TextField
              label="Search prayer requests"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              size="small"
              sx={{ minWidth: 250 }}
            />
            <FormControl size="small" sx={{ minWidth: 150 }}>
              <InputLabel>Category</InputLabel>
              <Select
                value={categoryFilter}
                label="Category"
                onChange={(e) => setCategoryFilter(e.target.value)}
              >
                <MenuItem value="all">All Categories</MenuItem>
                <MenuItem value="personal">Personal</MenuItem>
                <MenuItem value="family">Family</MenuItem>
                <MenuItem value="health">Health</MenuItem>
                <MenuItem value="work">Work</MenuItem>
                <MenuItem value="ministry">Ministry</MenuItem>
                <MenuItem value="world">World</MenuItem>
              </Select>
            </FormControl>
            <FormControl size="small" sx={{ minWidth: 150 }}>
              <InputLabel>Status</InputLabel>
              <Select
                value={statusFilter}
                label="Status"
                onChange={(e) => setStatusFilter(e.target.value)}
              >
                <MenuItem value="all">All Status</MenuItem>
                <MenuItem value="active">Active</MenuItem>
                <MenuItem value="inactive">Inactive</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </CardContent>
      </Card>

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

      {/* Data Grid */}
      <Card>
        <Box sx={{ height: 600 }}>
          <DataGrid
            rows={prayerRequests}
            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>

      {/* Prayer Request Detail Modal */}
      <PrayerRequestDetailModal
        prayerRequestId={selectedPrayerRequestId}
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onPrayerRequestUpdate={handlePrayerRequestUpdate}
      />

      {/* Delete Confirmation Dialog */}
      <Dialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Delete Prayer Request</DialogTitle>
        <DialogContent>
          <Typography>
            Are you sure you want to delete the prayer request <strong>"{prayerRequestToDelete?.title}"</strong>?
          </Typography>
          <Typography variant="body2" color="error" sx={{ mt: 2 }}>
            This action cannot be undone. All prayer data for this request will be permanently deleted.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
          <Button
            onClick={confirmDeletePrayerRequest}
            color="error"
            variant="contained"
          >
            Delete Prayer Request
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}