import { useState } from 'react'
import { Box, IconButton, Tooltip, Typography } from '@mui/material'
import { MapPin, Map } from 'lucide-react'

interface Props {
  imageUrl?: string
  lat?: number
  lng?: number
  address?: string
  cityLabel?: string
  height?: number
  overlayTypeLabel?: string
  overlayLocationLabel?: string
}

function buildMapsUrl(lat?: number, lng?: number, address?: string): string {
  if (lat != null && lng != null) {
    return `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`
  }
  if (address) {
    return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`
  }
  return 'https://www.google.com/maps'
}

export function LocationPreview({ imageUrl, lat, lng, address, cityLabel, height = 180, overlayTypeLabel, overlayLocationLabel }: Props) {
  const [imgError, setImgError] = useState(false)
  const mapsUrl = buildMapsUrl(lat, lng, address)
  const showImage = !!imageUrl && !imgError

  return (
    <Box sx={{ position: 'relative', width: '100%', height, overflow: 'hidden', flexShrink: 0 }}>
      {showImage ? (
        <img
          src={imageUrl}
          alt={cityLabel ?? 'Standort'}
          onError={() => setImgError(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      ) : (
        <Box
          sx={{
            width: '100%',
            height: '100%',
            background: 'linear-gradient(160deg,#dce8f2 0%,#b8cfe0 100%)',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 0.5,
          }}
        >
          <MapPin size={28} color="#7ba3bf" />
          {cityLabel && (
            <Typography variant="body2" sx={{ color: '#5a87a3', fontWeight: 600, letterSpacing: 0.5 }}>
              {cityLabel}
            </Typography>
          )}
        </Box>
      )}

      {/* Bottom-left overlay: type + location */}
      {(overlayTypeLabel || overlayLocationLabel) && (
        <Box
          sx={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            px: 1.25,
            py: 0.75,
            background: 'linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0) 100%)',
            display: 'flex',
            alignItems: 'flex-end',
            gap: 0.75,
          }}
        >
          {overlayTypeLabel && (
            <Typography
              sx={{
                fontSize: '0.68rem', fontWeight: 700, color: 'white',
                bgcolor: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(4px)',
                px: 0.75, py: 0.25, borderRadius: 0.75, lineHeight: 1.4,
                letterSpacing: 0.3,
              }}
            >
              {overlayTypeLabel}
            </Typography>
          )}
          {overlayLocationLabel && (
            <Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.9)', fontWeight: 500, lineHeight: 1.4 }}>
              {overlayLocationLabel}
            </Typography>
          )}
        </Box>
      )}

      {/* Google Maps button */}
      <Tooltip title="In Google Maps öffnen" placement="top">
        <IconButton
          component="a"
          href={mapsUrl}
          target="_blank"
          rel="noopener noreferrer"
          size="small"
          sx={{
            position: 'absolute',
            bottom: 8,
            right: 8,
            bgcolor: 'rgba(255,255,255,0.88)',
            backdropFilter: 'blur(4px)',
            width: 28,
            height: 28,
            '&:hover': { bgcolor: 'white' },
          }}
        >
          <Map size={14} color="#152642" />
        </IconButton>
      </Tooltip>
    </Box>
  )
}
