import React from 'react';
import { useAgent } from '../contexts/AgentContext';
import {
  Container,
  Typography,
  Grid,
  Card,
  CardActionArea,
  Box,
  Chip,
} from '@mui/material';

const AgentSelector: React.FC = () => {
  const { availableAgents, setSelectedAgent } = useAgent();

  return (
    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
      {/* Hero Section */}
      <Box
        sx={{
          py: { xs: 4, md: 6 },
          px: 2,
          background: 'linear-gradient(135deg, rgba(25,118,210,0.1) 0%, rgba(220,0,78,0.06) 100%)',
          borderBottom: theme => `1px solid ${theme.palette.divider}`,
        }}
      >
        <Container maxWidth="lg">
          {/* Logo Section */}
          <Box sx={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            mb: 4,
            flexWrap: 'wrap',
            gap: 2
          }}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <img 
                src="/yugensys.png" 
                alt="YugenSys" 
                style={{ height: '40px', marginRight: '16px' }} 
              />
            </Box>
          </Box>
          
          <Typography variant="h2" component="h1" align="center" gutterBottom sx={{ fontWeight: 700, mt: 2 }}>
            Agent Marketplace
          </Typography>
          <Typography variant="h6" color="text.secondary" align="center" sx={{ maxWidth: 800, mx: 'auto' }}>
            Your AI copilot for insights. Choose an agent to get started.
          </Typography>
        </Container>
      </Box>

      {/* Agents Grid */}
      <Container maxWidth="lg" sx={{ mt: { xs: 3, md: 6 }, pb: 6 }}>
        <Grid container spacing={4}>
          {availableAgents.map((agent) => (
            <Grid item xs={12} sm={6} md={4} key={agent.id}>
              <Card
                elevation={2}
                sx={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  borderRadius: 3,
                  border: theme => `1px solid ${theme.palette.divider}`,
                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
                  position: 'relative',
                  '&:hover': {
                    transform: 'translateY(-6px)',
                    boxShadow: 8,
                  },
                }}
              >
                {agent.upcoming && (
                  <Box sx={{ position: 'absolute', top: 12, right: 12 }}>
                    <Chip size="small" color="secondary" label="Upcoming" />
                  </Box>
                )}

                <CardActionArea
                  disabled={agent.upcoming}
                  onClick={() => !agent.upcoming && setSelectedAgent(agent)}
                  sx={{
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    textAlign: 'center',
                    p: 3,
                    opacity: agent.upcoming ? 0.7 : 1,
                    cursor: agent.upcoming ? 'not-allowed' : 'pointer',
                  }}
                >
                  {/* Logo without circular crop or border */}
                  <Box
                    component="img"
                    src={agent.avatar}
                    alt={agent.name}
                    sx={{
                      height: 88,
                      width: 'auto',
                      mb: 2,
                      display: 'block',
                      objectFit: 'contain',
                    }}
                  />
                  <Typography variant="h6" component="div" gutterBottom>
                    {agent.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {agent.description}
                  </Typography>
                </CardActionArea>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  );
};

export default AgentSelector;