import {
  Box,
  Dialog,
  IconButton,
  Step,
  StepLabel,
  Stepper,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material'
import { X } from 'lucide-react'
import { useOfferWizardStore, type OfferStep } from '../../stores/offerWizardStore'
import { OfferPropertySelectionStep } from './OfferPropertySelectionStep'
import { OfferFieldSelectionStep } from './OfferFieldSelectionStep'
import { OfferPdfReviewStep } from './OfferPdfReviewStep'
import { OfferCheckedAction } from './OfferCheckedAction'
import { OfferChatComposer } from './OfferChatComposer'

// 'checked' is internal — merged into pdf_review step; 4 visible steps
const STEPS: { key: OfferStep; label: string }[] = [
  { key: 'select_properties', label: 'Objekte wählen' },
  { key: 'select_fields',     label: 'Felder wählen' },
  { key: 'pdf_review',        label: 'Vorschau & Prüfen' },
  { key: 'send',              label: 'Senden' },
]

const STEP_DISPLAY_INDEX: Record<OfferStep, number> = {
  select_properties: 0,
  select_fields: 1,
  pdf_review: 2,
  checked: 2, // same visual step as pdf_review
  send: 3,
}

export function OfferWizard() {
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

  const isOpen = useOfferWizardStore(s => s.isOpen)
  const close = useOfferWizardStore(s => s.close)
  const currentStep = useOfferWizardStore(s => s.currentStep)
  const needTitle = useOfferWizardStore(s => s.needTitle)

  const activeIndex = STEP_DISPLAY_INDEX[currentStep] ?? 0

  return (
    <Dialog
      open={isOpen}
      onClose={close}
      fullScreen={fullScreen}
      maxWidth="lg"
      fullWidth
      slotProps={{
        paper: {
          sx: {
            height: fullScreen ? '100vh' : '85vh',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
          },
        },
      }}
    >
      {/* Header */}
      <Box
        sx={{
          px: 3,
          py: 1.5,
          borderBottom: '1px solid #e2e8f0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexShrink: 0,
        }}
      >
        <Box sx={{ minWidth: 0 }}>
          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
            Angebot erstellen
          </Typography>
          <Typography
            variant="body1"
            sx={{
              fontWeight: 700,
              color: '#0f172a',
              fontSize: '0.95rem',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {needTitle}
          </Typography>
        </Box>
        <IconButton onClick={close} size="small">
          <X size={18} />
        </IconButton>
      </Box>

      {/* Stepper */}
      <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
        <Stepper activeStep={activeIndex} alternativeLabel>
          {STEPS.map(s => (
            <Step key={s.key}>
              <StepLabel
                slotProps={{
                  label: { sx: { fontSize: '0.8rem', fontWeight: 500 } },
                }}
              >
                {s.label}
              </StepLabel>
            </Step>
          ))}
        </Stepper>
      </Box>

      {/* Step content */}
      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {currentStep === 'select_properties' && <OfferPropertySelectionStep />}
        {currentStep === 'select_fields' && <OfferFieldSelectionStep />}
        {currentStep === 'pdf_review' && <OfferPdfReviewStep />}
        {currentStep === 'checked' && <OfferCheckedAction />}
        {currentStep === 'send' && <OfferChatComposer />}
      </Box>
    </Dialog>
  )
}