biblical-guide.com/components/admin/chat/conversation-monitoring.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,
  Paper,
  Divider,
  Accordion,
  AccordionSummary,
  AccordionDetails
} from '@mui/material';
import {
  DataGrid,
  GridColDef,
  GridActionsCellItem,
  GridRowParams,
  GridPaginationModel
} from '@mui/x-data-grid';
import {
  Visibility,
  Block,
  CheckCircle,
  Delete,
  Person,
  Chat,
  Schedule,
  Warning,
  ExpandMore
} from '@mui/icons-material';

interface Conversation {
  id: string;
  title: string;
  language: string;
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
  lastMessageAt: string;
  user: {
    id: string;
    email: string;
    name: string | null;
    role: string;
  } | null;
  _count: {
    messages: number;
  };
  messages: Array<{
    id: string;
    role: string;
    content: string;
    timestamp: string;
  }>;
}

interface ConversationStats {
  total: number;
  active: number;
  inactive: number;
  today: number;
  thisWeek: number;
}

interface ConversationDetailModalProps {
  conversationId: string | null;
  open: boolean;
  onClose: () => void;
  onConversationUpdate: (conversationId: string, action: string) => void;
}

function ConversationDetailModal({ conversationId, open, onClose, onConversationUpdate }: ConversationDetailModalProps) {
  const [conversation, setConversation] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (conversationId && open) {
      const fetchConversation = async () => {
        setLoading(true);
        try {
          const response = await fetch(`/api/admin/chat/conversations/${conversationId}`, {
            credentials: 'include'
          });
          if (response.ok) {
            const data = await response.json();
            setConversation(data);
          }
        } catch (error) {
          console.error('Error fetching conversation:', error);
        } finally {
          setLoading(false);
        }
      };
      fetchConversation();
    }
  }, [conversationId, open]);

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

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

      if (response.ok) {
        onConversationUpdate(conversationId, action);
        onClose();
      }
    } catch (error) {
      console.error('Error updating conversation:', error);
    }
  };

  const formatDuration = (milliseconds: number) => {
    const minutes = Math.floor(milliseconds / 60000);
    const hours = Math.floor(minutes / 60);
    if (hours > 0) {
      return `${hours}h ${minutes % 60}m`;
    }
    return `${minutes}m`;
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
      <DialogTitle>Conversation Details</DialogTitle>
      <DialogContent>
        {loading ? (
          <Typography>Loading...</Typography>
        ) : conversation ? (
          <Box sx={{ py: 2 }}>
            {/* Conversation Info */}
            <Card sx={{ mb: 3 }}>
              <CardContent>
                <Typography variant="h6" gutterBottom>
                  {conversation.conversation.title}
                </Typography>
                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
                  <Chip
                    label={conversation.conversation.language}
                    color="primary"
                    size="small"
                  />
                  <Chip
                    label={conversation.conversation.isActive ? 'Active' : 'Inactive'}
                    color={conversation.conversation.isActive ? 'success' : 'error'}
                    size="small"
                  />
                </Box>

                {conversation.conversation.user && (
                  <Box sx={{ mb: 2 }}>
                    <Typography variant="subtitle2">User Information</Typography>
                    <Typography variant="body2">
                      <strong>Name:</strong> {conversation.conversation.user.name || 'Unknown'}
                    </Typography>
                    <Typography variant="body2">
                      <strong>Email:</strong> {conversation.conversation.user.email}
                    </Typography>
                    <Typography variant="body2">
                      <strong>Role:</strong> {conversation.conversation.user.role}
                    </Typography>
                  </Box>
                )}

                {/* Analysis */}
                <Box sx={{ mb: 2 }}>
                  <Typography variant="subtitle2" gutterBottom>Conversation Analysis</Typography>
                  <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 2 }}>
                    <Box>
                      <Typography variant="caption">Total Messages</Typography>
                      <Typography variant="h6">{conversation.analysis.messageCount}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption">User Messages</Typography>
                      <Typography variant="h6">{conversation.analysis.userMessages}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption">Duration</Typography>
                      <Typography variant="h6">{formatDuration(conversation.analysis.duration)}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption">Avg Message Length</Typography>
                      <Typography variant="h6">{Math.round(conversation.analysis.averageMessageLength)}</Typography>
                    </Box>
                  </Box>
                </Box>

                {/* Potential Issues */}
                {conversation.analysis.potentialIssues.length > 0 && (
                  <Box sx={{ mb: 2 }}>
                    <Typography variant="subtitle2" gutterBottom>Potential Issues</Typography>
                    {conversation.analysis.potentialIssues.map((issue: string, index: number) => (
                      <Alert key={index} severity="warning" sx={{ mb: 1 }}>
                        {issue}
                      </Alert>
                    ))}
                  </Box>
                )}
              </CardContent>
            </Card>

            {/* Messages */}
            <Card>
              <CardContent>
                <Typography variant="h6" gutterBottom>
                  Messages ({conversation.conversation.messages.length})
                </Typography>
                <Box sx={{ maxHeight: 400, overflow: 'auto' }}>
                  {conversation.conversation.messages.map((message: any, index: number) => (
                    <Accordion key={message.id} sx={{ mb: 1 }}>
                      <AccordionSummary expandIcon={<ExpandMore />}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
                          <Chip
                            label={message.role}
                            color={message.role === 'USER' ? 'primary' : 'secondary'}
                            size="small"
                          />
                          <Typography variant="body2" sx={{ flexGrow: 1 }}>
                            {message.content.substring(0, 100)}...
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {new Date(message.timestamp).toLocaleString()}
                          </Typography>
                        </Box>
                      </AccordionSummary>
                      <AccordionDetails>
                        <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                          {message.content}
                        </Typography>
                      </AccordionDetails>
                    </Accordion>
                  ))}
                </Box>
              </CardContent>
            </Card>

            {/* Actions */}
            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mt: 3 }}>
              {conversation.conversation.isActive ? (
                <Button
                  variant="outlined"
                  color="error"
                  onClick={() => handleAction('deactivate')}
                >
                  Deactivate Conversation
                </Button>
              ) : (
                <Button
                  variant="contained"
                  color="success"
                  onClick={() => handleAction('activate')}
                >
                  Activate Conversation
                </Button>
              )}
            </Box>
          </Box>
        ) : (
          <Typography>Conversation not found</Typography>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
}

export function ConversationMonitoring() {
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [stats, setStats] = useState<ConversationStats | null>(null);
  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 [statusFilter, setStatusFilter] = useState('all');
  const [languageFilter, setLanguageFilter] = useState('all');
  const [sortBy, setSortBy] = useState('lastMessage');
  const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [conversationToDelete, setConversationToDelete] = useState<Conversation | null>(null);

  const fetchConversations = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: paginationModel.page.toString(),
        pageSize: paginationModel.pageSize.toString(),
        search,
        status: statusFilter,
        language: languageFilter,
        sortBy
      });

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

      if (response.ok) {
        const data = await response.json();
        setConversations(data.conversations);
        setStats(data.stats);
        setRowCount(data.pagination.total);
      } else {
        setError('Failed to load conversations');
      }
    } catch (error) {
      setError('Network error loading conversations');
    } finally {
      setLoading(false);
    }
  }, [paginationModel, search, statusFilter, languageFilter, sortBy]);

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

  const handleConversationUpdate = useCallback((conversationId: string, action: string) => {
    fetchConversations();
  }, [fetchConversations]);

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

  const handleDeleteConversation = (params: GridRowParams) => {
    setConversationToDelete(params.row as Conversation);
    setDeleteDialogOpen(true);
  };

  const confirmDeleteConversation = async () => {
    if (!conversationToDelete) return;

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

      if (response.ok) {
        fetchConversations();
        setDeleteDialogOpen(false);
        setConversationToDelete(null);
      }
    } catch (error) {
      console.error('Error deleting conversation:', error);
    }
  };

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

  const columns: GridColDef[] = [
    {
      field: 'title',
      headerName: 'Conversation',
      flex: 1,
      minWidth: 250,
      renderCell: (params) => (
        <Box>
          <Typography variant="body2" fontWeight="medium" noWrap>
            {params.value}
          </Typography>
          <Typography variant="caption" color="text.secondary">
            {params.row.user?.name || params.row.user?.email || 'Anonymous'}
          </Typography>
        </Box>
      )
    },
    {
      field: 'language',
      headerName: 'Language',
      width: 100,
      renderCell: (params) => (
        <Chip label={params.value} size="small" variant="outlined" />
      )
    },
    {
      field: '_count',
      headerName: 'Messages',
      width: 100,
      align: 'center',
      headerAlign: 'center',
      renderCell: (params) => params.value.messages
    },
    {
      field: 'isActive',
      headerName: 'Status',
      width: 100,
      renderCell: (params) => getStatusChip(params.value)
    },
    {
      field: 'lastMessageAt',
      headerName: 'Last Activity',
      width: 140,
      renderCell: (params) => {
        const date = new Date(params.value);
        const now = new Date();
        const diffMs = now.getTime() - date.getTime();
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMins / 60);
        const diffDays = Math.floor(diffHours / 24);

        let timeAgo = '';
        if (diffDays > 0) {
          timeAgo = `${diffDays}d ago`;
        } else if (diffHours > 0) {
          timeAgo = `${diffHours}h ago`;
        } else {
          timeAgo = `${diffMins}m ago`;
        }

        return (
          <Typography variant="caption">
            {timeAgo}
          </Typography>
        );
      }
    },
    {
      field: 'user',
      headerName: 'User',
      width: 120,
      renderCell: (params) => (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Person fontSize="small" color="primary" />
          <Typography variant="caption">
            {params.value?.role || 'Anonymous'}
          </Typography>
        </Box>
      )
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 120,
      getActions: (params) => [
        <GridActionsCellItem
          key="view"
          icon={
            <Tooltip title="View Details">
              <Visibility />
            </Tooltip>
          }
          label="View"
          onClick={() => handleViewConversation(params)}
        />,
        <GridActionsCellItem
          key="delete"
          icon={
            <Tooltip title="Delete Conversation">
              <Delete />
            </Tooltip>
          }
          label="Delete"
          onClick={() => handleDeleteConversation(params)}
        />
      ]
    }
  ];

  return (
    <Box>
      {/* Statistics Cards */}
      {stats && (
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: 3,
            mb: 3
          }}
        >
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                <Chat sx={{ fontSize: 40, color: 'primary.main', mr: 2 }} />
                <Box>
                  <Typography color="textSecondary" variant="body2">
                    Total Conversations
                  </Typography>
                  <Typography variant="h5">{stats.total}</Typography>
                </Box>
              </Box>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                <CheckCircle sx={{ fontSize: 40, color: 'success.main', mr: 2 }} />
                <Box>
                  <Typography color="textSecondary" variant="body2">
                    Active
                  </Typography>
                  <Typography variant="h5">{stats.active}</Typography>
                </Box>
              </Box>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                <Schedule sx={{ fontSize: 40, color: 'warning.main', mr: 2 }} />
                <Box>
                  <Typography color="textSecondary" variant="body2">
                    Today
                  </Typography>
                  <Typography variant="h5">{stats.today}</Typography>
                </Box>
              </Box>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                <Warning sx={{ fontSize: 40, color: 'error.main', mr: 2 }} />
                <Box>
                  <Typography color="textSecondary" variant="body2">
                    This Week
                  </Typography>
                  <Typography variant="h5">{stats.thisWeek}</Typography>
                </Box>
              </Box>
            </CardContent>
          </Card>
        </Box>
      )}

      {/* Filters */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
            <TextField
              label="Search conversations"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              size="small"
              sx={{ minWidth: 250 }}
            />
            <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>
            <FormControl size="small" sx={{ minWidth: 150 }}>
              <InputLabel>Language</InputLabel>
              <Select
                value={languageFilter}
                label="Language"
                onChange={(e) => setLanguageFilter(e.target.value)}
              >
                <MenuItem value="all">All Languages</MenuItem>
                <MenuItem value="en">English</MenuItem>
                <MenuItem value="ro">Romanian</MenuItem>
              </Select>
            </FormControl>
            <FormControl size="small" sx={{ minWidth: 150 }}>
              <InputLabel>Sort By</InputLabel>
              <Select
                value={sortBy}
                label="Sort By"
                onChange={(e) => setSortBy(e.target.value)}
              >
                <MenuItem value="lastMessage">Last Message</MenuItem>
                <MenuItem value="created">Created Date</MenuItem>
                <MenuItem value="messageCount">Message Count</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </CardContent>
      </Card>

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

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

      {/* Conversation Detail Modal */}
      <ConversationDetailModal
        conversationId={selectedConversationId}
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onConversationUpdate={handleConversationUpdate}
      />

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