import React, { useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent';

import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
import Inventory2RoundedIcon from '@mui/icons-material/Inventory2Rounded';

/**
 * Icon & colour mapping per offer type
 */
const TYPE_ICONS = {
  day: CalendarMonthRoundedIcon,
  slot: AccessTimeRoundedIcon,
  service: HandymanRoundedIcon,
  product: Inventory2RoundedIcon,
};

const TYPE_PALETTE = {
  day:     { color: '#1976d2', bgColor: '#e3f2fd' },
  slot:    { color: '#7b1fa2', bgColor: '#f3e5f5' },
  service: { color: '#388e3c', bgColor: '#e8f5e9' },
  product: { color: '#ed6c02', bgColor: '#fff3e0' },
};

/**
 * Step 1 – Offer type selection.
 *
 * Reads available types from `wahrbWizardConfig.serviceTypes`.
 * Auto-advances 300 ms after the vendor clicks a card.
 */
export default function Step1OfferType({ wizardData, updateStepData, onNext, isMobile }) {
  const { t } = useTranslation();
  const stepData = wizardData.step_1 || {};
  const selected = stepData.offer_type;

  const types = useMemo(() => {
    const serviceTypes = window.wahrbWizardConfig?.serviceTypes || {};
    return Object.entries(serviceTypes).map(([key, cfg]) => ({
      key,
      icon: TYPE_ICONS[key] || HandymanRoundedIcon,
      color: TYPE_PALETTE[key]?.color || '#64748b',
      bgColor: TYPE_PALETTE[key]?.bgColor || '#f1f5f9',
      title: cfg.title || t(`step1.${key}.title`),
      description: cfg.description || t(`step1.${key}.description`),
    }));
  }, [t]);

  const handleSelect = useCallback(
    (key) => {
      updateStepData('step_1', { ...stepData, offer_type: key });
      setTimeout(onNext, 300);
    },
    [stepData, updateStepData, onNext],
  );

  if (types.length === 0) {
    return (
      <Box sx={{ py: 4, textAlign: 'center' }}>
        <Typography variant="h6" color="text.secondary">
          {t('step1.noTypesAvailable')}
        </Typography>
      </Box>
    );
  }

  return (
    <Box sx={{ py: { xs: 2, md: 4 } }}>
      <Typography variant="h5" component="h2" fontWeight="bold" textAlign="center" sx={{ mb: 4, px: 2 }}>
        {t('step1.title')}
      </Typography>

      <Grid container spacing={3} justifyContent="center" sx={{ maxWidth: 900, mx: 'auto', px: isMobile ? 2 : 0 }}>
        {types.map((item) => {
          const Icon = item.icon;
          const isSelected = selected === item.key;

          return (
            <Grid item xs={12} sm={6} md={types.length > 2 ? 4 : 6} key={item.key}>
              <Card
                sx={{
                  height: '100%',
                  minHeight: 280,
                  cursor: 'pointer',
                  border: '3px solid',
                  borderColor: isSelected ? item.color : 'transparent',
                  transform: isSelected ? 'scale(1.02)' : 'scale(1)',
                  transition: 'all 0.3s ease',
                  boxShadow: isSelected ? 8 : 2,
                  '&:hover': { transform: 'scale(1.03)', boxShadow: 8, borderColor: item.color },
                }}
              >
                <CardActionArea
                  onClick={() => handleSelect(item.key)}
                  sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
                >
                  <CardContent
                    sx={{
                      textAlign: 'center',
                      py: 5,
                      px: 3,
                      flex: 1,
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Box
                      sx={{
                        width: 110,
                        height: 110,
                        borderRadius: '50%',
                        backgroundColor: item.bgColor,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        mb: 3,
                      }}
                    >
                      <Icon sx={{ fontSize: 56, color: item.color }} />
                    </Box>
                    <Typography variant="h5" fontWeight="800" sx={{ mb: 2, color: '#334155' }}>
                      {item.title}
                    </Typography>
                    <Typography variant="body1" color="text.secondary" sx={{ lineHeight: 1.5, fontSize: '1.05rem' }}>
                      {item.description}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
}
