import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  Box,
  Typography,
  MobileStepper,
  Button,
} from '@mui/material'
import {
  Building2,
  CheckCircle2,
  Zap,
  Search,
  Mic,
  Sparkles,
  Newspaper,
  FileCheck,
  ArrowLeft,
  ArrowRight,
} from 'lucide-react'

function FeatureRow({
  icon,
  color,
  text,
}: {
  icon: React.ReactNode
  color: string
  text: string
}) {
  return (
    <Box className="flex items-center gap-2 mt-2">
      <Box sx={{ color, flexShrink: 0 }}>{icon}</Box>
      <Typography variant="body2">{text}</Typography>
    </Box>
  )
}

function Slide0() {
  return (
    <Box className="flex flex-col items-center text-center px-2">
      <Box className="mb-4">
        <Building2 size={48} color="#152642" />
      </Box>
      <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
        Willkommen bei Property Match
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        Die KI-gestützte Plattform für gewerbliche Immobilien
      </Typography>
      <Box className="w-full text-left">
        <FeatureRow
          icon={<CheckCircle2 size={18} />}
          color="#1a7a4a"
          text="Verifizierte Portfolio-Objekte"
        />
        <FeatureRow
          icon={<CheckCircle2 size={18} />}
          color="#1a7a4a"
          text="Externer Markt & Inserate"
        />
        <FeatureRow
          icon={<Zap size={18} />}
          color="#7c3aed"
          text="Future Availability Intelligence"
        />
      </Box>
    </Box>
  )
}

function Slide1() {
  return (
    <Box className="flex flex-col items-center text-center px-2">
      <Box className="mb-4">
        <Search size={48} color="#152642" />
      </Box>
      <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
        Bedarf beschreiben — KI findet Matches
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        Schreiben Sie Ihren Flächenbedarf in natürlicher Sprache. Die KI extrahiert alle Kriterien
        und findet die besten Matches aus Portfolio, Markt und Future Availability.
      </Typography>
      <Box className="w-full text-left">
        <FeatureRow
          icon={<Mic size={18} />}
          color="#d97706"
          text="Spracheingabe auf Deutsch"
        />
        <FeatureRow
          icon={<Sparkles size={18} />}
          color="#7c3aed"
          text="KI analysiert und gewichtet automatisch"
        />
      </Box>
    </Box>
  )
}

function Slide2() {
  return (
    <Box className="flex flex-col items-center text-center px-2">
      <Box className="mb-4">
        <Zap size={48} color="#7c3aed" />
      </Box>
      <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
        Future Availability Intelligence
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        Frühzeitige Marktintelligenz zu potenziell verfügbaren Flächen — verifizierte
        Vertragsenden und erkannte Marktsignale, bevor sie öffentlich werden.
      </Typography>
      <Box className="w-full text-left">
        <FeatureRow
          icon={<Newspaper size={18} />}
          color="#d97706"
          text="Presse & Stelleninserate"
        />
        <FeatureRow
          icon={<FileCheck size={18} />}
          color="#1a7a4a"
          text="Baubewilligungen & Berichte"
        />
      </Box>
    </Box>
  )
}

const SLIDES = [<Slide0 />, <Slide1 />, <Slide2 />]

export function WelcomeDialog() {
  const [open, setOpen] = useState(() => {
    return localStorage.getItem('property_match_welcomed') === null
  })
  const [activeStep, setActiveStep] = useState(0)

  function dismiss() {
    localStorage.setItem('property_match_welcomed', '1')
    setOpen(false)
  }

  return (
    <Dialog
      open={open}
      maxWidth="sm"
      fullWidth
    >
      <DialogContent sx={{ pt: 4, pb: 2 }}>
        {SLIDES[activeStep]}
        <MobileStepper
          variant="dots"
          steps={3}
          position="static"
          activeStep={activeStep}
          sx={{ mt: 3, background: 'transparent' }}
          backButton={
            <Button
              size="small"
              onClick={() => setActiveStep((s) => s - 1)}
              disabled={activeStep === 0}
              startIcon={<ArrowLeft size={16} />}
            >
              Zurück
            </Button>
          }
          nextButton={
            activeStep === 2 ? (
              <Button size="small" variant="contained" onClick={dismiss}>
                Los geht's
              </Button>
            ) : (
              <Button
                size="small"
                onClick={() => setActiveStep((s) => s + 1)}
                endIcon={<ArrowRight size={16} />}
              >
                Weiter
              </Button>
            )
          }
        />
      </DialogContent>
    </Dialog>
  )
}
