/**
 * @ai-summary Queue of pending community station submissions for admin review
 */

import React from 'react';
import {
  Box,
  CircularProgress,
  Alert,
  Grid,
  Pagination,
  Typography,
} from '@mui/material';
import { CommunityStation } from '../../stations/types/community-stations.types';
import { CommunityStationReviewCard } from './CommunityStationReviewCard';

interface CommunityStationReviewQueueProps {
  stations: CommunityStation[];
  loading?: boolean;
  error?: string | null;
  onApprove: (id: string) => void;
  onReject: (id: string, reason: string) => void;
  page?: number;
  onPageChange?: (page: number) => void;
  totalPages?: number;
  isReviewLoading?: boolean;
}

/**
 * Review queue for pending community station submissions
 * Responsive grid layout with pagination
 */
export const CommunityStationReviewQueue: React.FC<CommunityStationReviewQueueProps> = ({
  stations,
  loading = false,
  error = null,
  onApprove,
  onReject,
  page = 0,
  onPageChange,
  totalPages = 1,
  isReviewLoading = false,
}) => {
  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '300px' }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Alert severity="error">
        {error}
      </Alert>
    );
  }

  if (stations.length === 0) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '300px',
          flexDirection: 'column',
          gap: 1,
        }}
      >
        <Typography variant="h6" color="textSecondary">
          No pending submissions
        </Typography>
        <Typography variant="body2" color="textSecondary">
          All community stations have been reviewed
        </Typography>
      </Box>
    );
  }

  return (
    <Box>
      {/* Stats header */}
      <Box sx={{ mb: 2 }}>
        <Typography variant="body2" color="textSecondary">
          Pending review: {stations.length} submission{stations.length !== 1 ? 's' : ''}
        </Typography>
      </Box>

      {/* Grid of cards */}
      <Grid container spacing={2}>
        {stations.map((station) => (
          <Grid item xs={12} sm={6} md={4} key={station.id}>
            <CommunityStationReviewCard
              station={station}
              onApprove={onApprove}
              onReject={onReject}
              isLoading={isReviewLoading}
            />
          </Grid>
        ))}
      </Grid>

      {/* Pagination */}
      {onPageChange && totalPages > 1 && (
        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
          <Pagination
            count={totalPages}
            page={page + 1}
            onChange={(_, newPage) => onPageChange(newPage - 1)}
          />
        </Box>
      )}
    </Box>
  );
};

export default CommunityStationReviewQueue;
