import { useNavigate, useLocation } from 'react-router'
import { Box, Button, IconButton, Typography } from '@mui/material'
import { X } from 'lucide-react'
import { useCompareStore } from '../../stores/compareStore'

const TYPE_DOT: Record<string, string> = {
  VERIFIED_PORTFOLIO:  '#152642',
  MAISON_WORK:         '#0369a1',
  FUTURE_AVAILABILITY: '#7c3aed',
}

export function CompareTray() {
  const { compareItems, removeFromCompare, clearCompare } = useCompareStore()
  const navigate = useNavigate()
  const location = useLocation()
  const isDemand = location.pathname.startsWith('/demand')

  if (!isDemand) return null

  const getTitle = (item: (typeof compareItems)[number]) => {
    if (item.resultType === 'FUTURE_AVAILABILITY') {
      return (item as any).signal?.companyName ?? (item as any).signal?.locationHint ?? 'Signal'
    }
    return (item as any).property?.title ?? `Score ${item.matchScore}`
  }

  return (
    <Box
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1300,
        height: 56,
        bgcolor: '#0f1923',
        display: 'flex',
        alignItems: 'center',
        px: 3,
        gap: 2,
        transform: compareItems.length > 0 ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 0.25s ease',
      }}
    >
      <Typography variant="caption" sx={{ color: '#fff', flexShrink: 0 }}>
        Vergleich ({compareItems.length}/4)
      </Typography>

      <Box sx={{ flex: 1, display: 'flex', gap: 1, overflow: 'hidden' }}>
        {compareItems.map((item) => (
          <Box
            key={item.matchId}
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 0.75,
              bgcolor: 'rgba(255,255,255,0.1)',
              borderRadius: 1,
              px: 1,
              py: 0.25,
              flexShrink: 0,
            }}
          >
            <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: TYPE_DOT[item.resultType] ?? '#64748b', flexShrink: 0 }} />
            <Typography variant="caption" sx={{ color: '#fff', maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {getTitle(item)}
            </Typography>
            <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', flexShrink: 0 }}>
              {item.matchScore}
            </Typography>
            <IconButton
              size="small"
              onClick={() => removeFromCompare(item.matchId)}
              sx={{ p: 0.25, color: 'rgba(255,255,255,0.5)', '&:hover': { color: '#fff' } }}
            >
              <X size={12} />
            </IconButton>
          </Box>
        ))}
      </Box>

      <Button
        variant="text"
        size="small"
        onClick={clearCompare}
        sx={{ color: 'rgba(255,255,255,0.5)', textTransform: 'none', flexShrink: 0 }}
      >
        Alle entfernen
      </Button>

      <Button
        variant="contained"
        size="small"
        onClick={() => navigate('/demand/compare')}
        sx={{ bgcolor: '#152642', textTransform: 'none', flexShrink: 0, '&:hover': { bgcolor: '#162d4a' } }}
      >
        Vergleich starten
      </Button>
    </Box>
  )
}