import React from 'react';
import { Box, Typography, Grid, Button, Menu, MenuItem } from '@mui/material';
import { ArrowForward as ArrowForwardIcon, Add as AddIcon } from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import type { IAgent } from '@/interfaces/database/agent';
import AgentCard from './AgentCard';

interface AgentGridViewProps {
  agents: IAgent[];
  maxItems?: number;
  showSeeAll?: boolean;
  onSeeAll?: () => void;
  onEdit?: (agent: IAgent) => void;
  onDelete?: (agent: IAgent) => void;
  onView?: (agent: IAgent) => void;
  loading?: boolean;
  searchTerm?: string;
  onCreateAgent?: () => void;
}

const AgentGridView: React.FC<AgentGridViewProps> = ({
  agents,
  maxItems,
  showSeeAll = false,
  onSeeAll,
  onEdit,
  onDelete,
  onView,
  loading = false,
  searchTerm = '',
  onCreateAgent,
}) => {
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [selectedAgent, setSelectedAgent] = React.useState<IAgent | null>(null);

  const handleMenuClick = (event: React.MouseEvent<HTMLElement>, agent: IAgent) => {
    setAnchorEl(event.currentTarget);
    setSelectedAgent(agent);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    setSelectedAgent(null);
  };

  const handleDelete = () => {
    if (selectedAgent && onDelete) {
      onDelete(selectedAgent);
    }
    handleMenuClose();
  };

  const handleEdit = () => {
    if (selectedAgent && onEdit) {
      onEdit(selectedAgent);
    }
    handleMenuClose();
  };

  const handleViewAgent = (agent: IAgent) => {
    if (onView) {
      onView(agent);
    }
    handleMenuClose();
  };

  const displayedAgents = maxItems ? agents.slice(0, maxItems) : agents;
  const hasMore = maxItems && agents.length > maxItems;

  if (loading) {
    return (
      <Box sx={{ textAlign: 'center', py: 4 }}>
        <Typography>{t('common.loading')}</Typography>
      </Box>
    );
  }

  if (agents.length === 0) {
    return (
      <Box sx={{ textAlign: 'center', py: 8 }}>
        <Typography variant="h6" color="text.secondary" gutterBottom>
          {searchTerm ? (t('agent.noMatchingAgents')) : (t('agent.noAgents'))}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          {searchTerm ? (t('agent.tryAdjustingFilters')) : (t('agent.createFirstAgent'))}
        </Typography>
        {(!searchTerm && onCreateAgent) && (
          <Button variant="contained" startIcon={<AddIcon />} onClick={onCreateAgent}>
            {t('agent.createAgent')}
          </Button>
        )}
      </Box>
    );
  }

  return (
    <Box>
      <Grid container spacing={3}>
        {displayedAgents.map((agent) => (
          <Grid key={agent.id} size={{ xs: 12, sm: 6, md: 4 }}>
            <AgentCard agent={agent} onMenuClick={handleMenuClick} onViewAgent={handleViewAgent} />
          </Grid>
        ))}
      </Grid>

      {showSeeAll && hasMore && (
        <Box sx={{ textAlign: 'center', mt: 3 }}>
          <Button variant="outlined" endIcon={<ArrowForwardIcon />} onClick={onSeeAll} sx={{ borderRadius: 2 }}>
            {t('common.viewAll')} ({agents.length})
          </Button>
        </Box>
      )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {onEdit && (
          <MenuItem onClick={handleEdit}>{t('agent.editAgent')}</MenuItem>
        )}
        <MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
          {t('agent.deleteAgent')}
        </MenuItem>
      </Menu>
    </Box>
  );
};

export default AgentGridView;