import React from 'react';
import { useTranslation } from 'react-i18next';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import MobileStepper from '@mui/material/MobileStepper';

import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
import CategoryRoundedIcon from '@mui/icons-material/CategoryRounded';
import Inventory2RoundedIcon from '@mui/icons-material/Inventory2Rounded';
import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
import MonetizationOnRoundedIcon from '@mui/icons-material/MonetizationOnRounded';
import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
import PhotoCameraRoundedIcon from '@mui/icons-material/PhotoCameraRounded';
import PublishRoundedIcon from '@mui/icons-material/PublishRounded';

/**
 * Icon map – one MUI icon per step slug
 */
const STEP_ICONS = {
  welcome: HomeRoundedIcon,
  offerType: CategoryRoundedIcon,
  inventory: Inventory2RoundedIcon,
  availability: CalendarMonthRoundedIcon,
  pricing: MonetizationOnRoundedIcon,
  payment: PaymentRoundedIcon,
  media: PhotoCameraRoundedIcon,
  publish: PublishRoundedIcon,
};

/**
 * StepperNav – renders a desktop Stepper or a mobile MobileStepper.
 *
 * @param {string[]}  steps       – ordered step slug array
 * @param {number}    currentStep – zero-based active index
 * @param {function}  onStepClick – called with index (only past steps)
 * @param {boolean}   isMobile    – when true, show compact mobile view
 */
export default function StepperNav({ steps, currentStep, onStepClick, isMobile }) {
  const { t } = useTranslation();
  useTheme(); // keep theme context active

  /* ── Mobile layout ─────────────────────────────────────────── */
  if (isMobile) {
    const StepIcon = STEP_ICONS[steps[currentStep]];

    return (
      <Box sx={{ width: '100%' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
          {StepIcon && (
            <StepIcon sx={{ mr: 1, color: 'primary.main', fontSize: 28 }} />
          )}
          <Box>
            <Typography variant="caption" color="text.secondary">
              {t('wizard.steps.step')} {currentStep + 1}/{steps.length}
            </Typography>
            <Typography variant="h6" fontWeight="600">
              {t(`wizard.steps.${steps[currentStep]}`)}
            </Typography>
          </Box>
        </Box>

        <MobileStepper
          variant="progress"
          steps={steps.length}
          position="static"
          activeStep={currentStep}
          sx={{
            flexGrow: 1,
            backgroundColor: 'transparent',
            '& .MuiLinearProgress-root': {
              width: '100%',
              height: 8,
              borderRadius: 4,
              backgroundColor: 'grey.200',
            },
            '& .MuiLinearProgress-bar': {
              borderRadius: 4,
              backgroundColor: 'primary.main',
            },
          }}
          nextButton={null}
          backButton={null}
        />
      </Box>
    );
  }

  /* ── Desktop layout ────────────────────────────────────────── */
  return (
    <Stepper
      activeStep={currentStep}
      alternativeLabel
      sx={{
        '& .MuiStepConnector-line': { borderTopWidth: 3, borderRadius: 1 },
        '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': {
          borderColor: 'primary.main',
        },
        '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': {
          borderColor: 'success.main',
        },
      }}
    >
      {steps.map((slug, index) => {
        const StepIcon = STEP_ICONS[slug];
        const isCompleted = index < currentStep;
        const isActive = index === currentStep;
        const isClickable = index <= currentStep;

        return (
          <Step key={slug} completed={isCompleted} sx={{ cursor: isClickable ? 'pointer' : 'default' }}>
            <StepLabel
              onClick={() => isClickable && onStepClick(index)}
              disabled={!isClickable}
              icon={
                <Box
                  sx={{
                    width: 48,
                    height: 48,
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: isCompleted
                      ? 'success.main'
                      : isActive
                        ? 'primary.main'
                        : 'grey.300',
                    color: isCompleted || isActive ? 'white' : 'grey.600',
                    transition: 'all 0.3s ease',
                  }}
                >
                  {StepIcon && <StepIcon sx={{ fontSize: 24 }} />}
                </Box>
              }
            >
              <Typography
                sx={{
                  '& .MuiStepLabel-label': {
                    mt: 1,
                    fontWeight: isActive ? 600 : 400,
                    color: isActive ? 'primary.main' : 'text.secondary',
                  },
                }}
              >
                {t(`wizard.steps.${slug}`)}
              </Typography>
            </StepLabel>
          </Step>
        );
      })}
    </Stepper>
  );
}
