/**
 * @ai-summary List component for community gas stations
 */

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

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

/**
 * List of community stations with loading and error states
 * Responsive grid layout: 1 column on mobile, 2+ on desktop
 */
export const CommunityStationsList: React.FC<CommunityStationsListProps> = ({
  stations,
  loading = false,
  error = null,
  isAdmin = false,
  onWithdraw,
  onApprove,
  onReject,
  page = 0,
  onPageChange,
  totalPages = 1,
}) => {
  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: 2,
        }}
      >
        <Typography variant="body1" color="textSecondary">
          {isAdmin ? 'No submissions to review' : 'No community stations yet'}
        </Typography>
      </Box>
    );
  }

  return (
    <Box>
      <Grid container spacing={2}>
        {stations.map((station) => (
          <Grid item xs={12} sm={6} md={4} key={station.id}>
            <CommunityStationCard
              station={station}
              isAdmin={isAdmin}
              onWithdraw={onWithdraw}
              onApprove={onApprove}
              onReject={onReject}
            />
          </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 CommunityStationsList;
