import { memo } from 'react'
import { Box, Chip, Paper, Typography } from '@mui/material'
import { MapPin } from 'lucide-react'
import type { Need } from '../../domain/need'
import { ASSET_TYPE_LABELS } from '../../lib/constants'

interface Props {
  need: Need
  selected: boolean
  matchCount: number
  topScore: number
  onClick: () => void
}

function statusConfig(status: Need['status']): { label: string; bg: string; fg: string } {
  if (status === 'DRAFT') return { label: 'Entwurf', bg: '#fef3c7', fg: '#92400e' }
  return { label: 'Aktiv', bg: '#dcfce7', fg: '#166534' }
}

export const SavedNeedCard = memo(function SavedNeedCard({ need, selected, matchCount, topScore, onClick }: Props) {
  const statusCfg = statusConfig(need.status)
  const locationText = need.preferredLocations.slice(0, 2).join(', ')
  const scoreColor = topScore >= 80 ? '#16a34a' : topScore >= 65 ? '#d97706' : '#dc2626'

  return (
    <Paper
      onClick={onClick}
      elevation={0}
      sx={{
        p: 1.5,
        borderRadius: 1.5,
        border: '1px solid',
        borderColor: selected ? '#152642' : '#e2e8f0',
        bgcolor: selected ? '#f1f5f9' : 'white',
        cursor: 'pointer',
        transition: 'all 0.15s',
        '&:hover': { borderColor: selected ? '#152642' : '#94a3b8', boxShadow: '0 2px 6px rgba(15,23,42,0.06)' },
        display: 'flex',
        flexDirection: 'column',
        gap: 0.75,
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
          <Chip label={ASSET_TYPE_LABELS[need.assetType] ?? need.assetType} size="small"
            sx={{ bgcolor: '#e0e7ff', color: '#3730a3', fontWeight: 600, fontSize: '0.65rem', height: 20 }} />
          <Chip label={statusCfg.label} size="small"
            sx={{ bgcolor: statusCfg.bg, color: statusCfg.fg, fontWeight: 600, fontSize: '0.65rem', height: 20 }} />
        </Box>
        {matchCount > 0 && (
          <Box sx={{ bgcolor: '#dcfce7', color: '#15803d', borderRadius: 1, px: 0.75, py: 0.125, fontSize: '0.68rem', fontWeight: 700, flexShrink: 0 }}>
            {matchCount} Treffer
          </Box>
        )}
      </Box>

      <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.85rem', color: '#0f172a', lineHeight: 1.3 }}>
        {need.companyName}
      </Typography>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#64748b' }}>
        <MapPin size={11} />
        <Typography variant="caption" sx={{ fontSize: '0.75rem' }}>{locationText || '—'}</Typography>
      </Box>

      {topScore > 0 && (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Box sx={{ flex: 1, height: 4, borderRadius: 2, bgcolor: '#f1f5f9', overflow: 'hidden' }}>
            <Box sx={{ width: `${topScore}%`, height: '100%', bgcolor: scoreColor }} />
          </Box>
          <Typography variant="caption" sx={{ fontSize: '0.72rem', fontWeight: 700, color: scoreColor, flexShrink: 0 }}>
            {topScore}%
          </Typography>
        </Box>
      )}
    </Paper>
  )
})
