import { useState } from 'react';
import {
  Box,
  Container,
  Typography,
  Card,
  CardContent,
  Button,
  Grid,
  Radio,
  RadioGroup,
  FormControlLabel,
} from '@mui/material';
import { AutoAwesome, TrendingUp, Replay, Store, Campaign } from '@mui/icons-material';
import { EventObjective } from '../page';

interface ObjectiveOption {
  id: EventObjective;
  icon: React.ReactNode;
  title: string;
  description: string;
}

const objectives: ObjectiveOption[] = [
  {
    id: 'new_customer',
    icon: <Store sx={{ fontSize: 40 }} />,
    title: '신규 고객 유치',
    description: '새로운 고객을 확보하여 매장을 성장시키고 싶어요',
  },
  {
    id: 'revisit',
    icon: <Replay sx={{ fontSize: 40 }} />,
    title: '재방문 유도',
    description: '기존 고객의 재방문을 촉진하고 싶어요',
  },
  {
    id: 'sales',
    icon: <TrendingUp sx={{ fontSize: 40 }} />,
    title: '매출 증대',
    description: '단기간에 매출을 높이고 싶어요',
  },
  {
    id: 'awareness',
    icon: <Campaign sx={{ fontSize: 40 }} />,
    title: '인지도 향상',
    description: '브랜드나 매장 인지도를 높이고 싶어요',
  },
];

interface ObjectiveStepProps {
  onNext: (objective: EventObjective) => void;
}

export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
  const [selected, setSelected] = useState<EventObjective | null>(null);

  const handleNext = () => {
    if (selected) {
      onNext(selected);
    }
  };

  return (
    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
      <Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
        {/* Title Section */}
        <Box sx={{ mb: 5, textAlign: 'center' }}>
          <AutoAwesome sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
          <Typography variant="h4" sx={{ fontWeight: 700, mb: 1 }}>
            이벤트 목적을 선택해주세요
          </Typography>
          <Typography variant="body1" color="text.secondary">
            AI가 목적에 맞는 최적의 이벤트를 추천해드립니다
          </Typography>
        </Box>

        {/* Purpose Options */}
        <RadioGroup value={selected} onChange={(e) => setSelected(e.target.value as EventObjective)}>
          <Grid container spacing={3} sx={{ mb: 5 }}>
            {objectives.map((objective) => (
              <Grid item xs={12} sm={6} key={objective.id}>
                <Card
                  elevation={0}
                  sx={{
                    cursor: 'pointer',
                    borderRadius: 3,
                    border: selected === objective.id ? 2 : 1,
                    borderColor: selected === objective.id ? 'primary.main' : 'divider',
                    bgcolor: selected === objective.id ? 'action.selected' : 'background.paper',
                    transition: 'all 0.2s',
                    '&:hover': {
                      borderColor: 'primary.main',
                      boxShadow: selected === objective.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.1)',
                    },
                  }}
                  onClick={() => setSelected(objective.id)}
                >
                  <CardContent sx={{ p: 4 }}>
                    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, mb: 2 }}>
                      <Box sx={{ color: 'primary.main' }}>{objective.icon}</Box>
                      <Box sx={{ flex: 1 }}>
                        <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
                          {objective.title}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {objective.description}
                        </Typography>
                      </Box>
                      <FormControlLabel
                        value={objective.id}
                        control={<Radio />}
                        label=""
                        sx={{ m: 0 }}
                      />
                    </Box>
                  </CardContent>
                </Card>
              </Grid>
            ))}
          </Grid>
        </RadioGroup>

        {/* Info Box */}
        <Card
          elevation={0}
          sx={{
            mb: 5,
            bgcolor: 'primary.light',
            borderRadius: 3,
          }}
        >
          <CardContent sx={{ display: 'flex', gap: 2, p: 3 }}>
            <AutoAwesome sx={{ color: 'primary.main' }} />
            <Typography variant="body2" color="text.secondary">
              선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
            </Typography>
          </CardContent>
        </Card>

        {/* Action Buttons */}
        <Box>
          <Button
            fullWidth
            variant="contained"
            size="large"
            disabled={!selected}
            onClick={handleNext}
            sx={{ py: 1.5 }}
          >
            다음
          </Button>
        </Box>
      </Container>
    </Box>
  );
}