import React from 'react';
import { useTranslation } from 'react-i18next';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent';
import Chip from '@mui/material/Chip';
import Grid from '@mui/material/Grid';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';

/**
 * Step 0 – Welcome screen.
 *
 * Shows a "New Offer" action card and, when an existing draft is
 * detected, a banner inviting the vendor to continue where they left off.
 */
export default function Step0Welcome({ onNext, hasDraft, draftData, onContinueDraft, isMobile }) {
  const { t } = useTranslation();

  const actions = [
    {
      key: 'new',
      icon: AddCircleOutlineRoundedIcon,
      title: t('step0.newOffer'),
      description: t('step0.subtitle'),
      color: 'primary',
      onClick: onNext,
    },
  ];

  return (
    <Box sx={{ textAlign: 'center', py: { xs: 2, md: 4 } }}>
      {/* Heading */}
      <Typography variant="h4" component="h1" fontWeight="bold" sx={{ mb: 2 }}>
        {t('step0.title')}
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 4, maxWidth: 500, mx: 'auto' }}>
        {t('step0.subtitle')}
      </Typography>

      {/* Draft continuation banner */}
      {hasDraft && draftData && (
        <Card sx={{ mb: 4, mx: 'auto', maxWidth: 500, backgroundColor: 'info.light', border: '1px solid', borderColor: 'info.main' }}>
          <CardActionArea onClick={onContinueDraft}>
            <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <EditNoteRoundedIcon sx={{ fontSize: 40, color: 'info.dark' }} />
              <Box sx={{ textAlign: 'left', flex: 1 }}>
                <Typography variant="subtitle1" fontWeight="600">
                  {t('step0.draftFound')}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {t('step0.lastModified')}:{' '}
                  {format(new Date(draftData.updated_at), 'PPp', { locale: fr })}
                </Typography>
              </Box>
              <Chip label={t('step0.continueDraft')} color="info" size="small" />
            </CardContent>
          </CardActionArea>
        </Card>
      )}

      {/* Action cards */}
      <Grid container spacing={3} justifyContent="center" sx={{ maxWidth: 700, mx: 'auto' }}>
        {actions.map((action) => {
          const Icon = action.icon;
          return (
            <Grid item xs={12} sm={6} key={action.key}>
              <Card
                sx={{
                  height: '100%',
                  cursor: action.disabled ? 'not-allowed' : 'pointer',
                  opacity: action.disabled ? 0.6 : 1,
                  transition: 'all 0.2s ease',
                  '&:hover': {
                    transform: action.disabled ? 'none' : 'translateY(-4px)',
                    boxShadow: action.disabled ? 1 : 4,
                  },
                }}
              >
                <CardActionArea onClick={action.onClick} disabled={action.disabled} sx={{ height: '100%', p: 3 }}>
                  <CardContent sx={{ textAlign: 'center' }}>
                    <Box
                      sx={{
                        width: 80,
                        height: 80,
                        borderRadius: '50%',
                        backgroundColor: action.color === 'primary' ? '#eff6ff' : '#f1f5f9',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        mx: 'auto',
                        mb: 2,
                      }}
                    >
                      <Icon sx={{ fontSize: 40, color: action.color === 'primary' ? '#2563eb' : '#64748b' }} />
                    </Box>
                    <Typography variant="h6" fontWeight="600" gutterBottom>
                      {action.title}
                    </Typography>
                    {action.description && (
                      <Typography variant="body2" color="text.secondary">
                        {action.description}
                      </Typography>
                    )}
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
}
