'use client';

import { Typography, Box, Breadcrumbs, Link } from '@mui/material';
import { Home, Chat } from '@mui/icons-material';
import { ConversationMonitoring } from '@/components/admin/chat/conversation-monitoring';

export default function AdminChatPage() {
  return (
    <Box>
      {/* Breadcrumbs */}
      <Breadcrumbs aria-label="breadcrumb" sx={{ mb: 3 }}>
        <Link
          underline="hover"
          sx={{ display: 'flex', alignItems: 'center' }}
          color="inherit"
          href="/admin"
        >
          <Home sx={{ mr: 0.5 }} fontSize="inherit" />
          Admin
        </Link>
        <Typography color="text.primary" sx={{ display: 'flex', alignItems: 'center' }}>
          <Chat sx={{ mr: 0.5 }} fontSize="inherit" />
          Chat Monitoring
        </Typography>
      </Breadcrumbs>

      {/* Page Header */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Chat Monitoring
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Monitor and manage chat conversations, detect inappropriate content, and ensure platform safety
        </Typography>
      </Box>

      {/* Conversation Monitoring */}
      <ConversationMonitoring />
    </Box>
  );
}