property-match/src/components/supply/NeedMatchCard.tsx

import { Box, Card, Chip, Stack, Typography } from '@mui/material'
import { MapPin, Ruler, Wallet, Calendar, CheckCircle } from 'lucide-react'
import type { PropertyNeedMatch } from '../../domain/match'
import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER } from '../../lib/ds'

interface Props {
  match: PropertyNeedMatch
  onClick?: () => void
}

function ScoreBadge({ score }: { score: number }) {
  const isGold = score >= 90
  const bg = isGold ? DS_SURFACE.warning.bg : DS_BG.subtle
  const color = isGold ? DS_TEXT.warning : DS_TEXT.muted
  const borderColor = isGold ? DS_SURFACE.warning.border : DS_BORDER.default

  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 48,
        height: 48,
        borderRadius: '50%',
        bgcolor: bg,
        border: `2px solid ${borderColor}`,
        flexShrink: 0,
      }}
    >
      <Typography variant="body2" sx={{ fontWeight: 700, color, fontSize: '0.95rem' }}>
        {score}
      </Typography>
    </Box>
  )
}

function InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
      <Box sx={{ color: DS_TEXT.disabled, display: 'flex', alignItems: 'center' }}>{icon}</Box>
      <Typography variant="caption" sx={{ color: DS_TEXT.muted, minWidth: 70 }}>{label}</Typography>
      <Typography variant="caption" sx={{ color: DS_TEXT.primary, fontWeight: 500 }}>{value}</Typography>
    </Box>
  )
}

export function NeedMatchCard({ match, onClick }: Props) {
  return (
    <Card
      elevation={0}
      onClick={onClick}
      sx={{
        p: 2,
        mb: 1.5,
        border: `1px solid ${DS_BORDER.default}`,
        borderRadius: 1.5,
        cursor: onClick ? 'pointer' : 'default',
        '&:hover': onClick ? { borderColor: DS_TEXT.brand, bgcolor: DS_BG.page, boxShadow: '0 2px 8px rgba(30,58,95,0.08)' } : { borderColor: DS_BORDER.strong, bgcolor: DS_BG.page },
        transition: 'border-color 0.15s, background-color 0.15s, box-shadow 0.15s',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
        <ScoreBadge score={match.score} />

        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
            <Typography variant="body2" sx={{ fontWeight: 700, color: DS_TEXT.primary }}>
              {match.company}
            </Typography>
            <Chip
              label={match.score >= 90 ? 'Gold Match' : 'Starker Match'}
              size="small"
              sx={{
                fontSize: '0.65rem',
                height: 18,
                bgcolor: match.score >= 90 ? DS_SURFACE.warning.bg : DS_BG.subtle,
                color: match.score >= 90 ? DS_TEXT.warningDark : DS_TEXT.secondary,
                border: '1px solid',
                borderColor: match.score >= 90 ? DS_SURFACE.warning.border : DS_BORDER.default,
              }}
            />
          </Box>

          <Stack spacing={0.4} sx={{ mb: 1 }}>
            <InfoRow icon={<Ruler size={12} />} label="Fläche" value={match.areaRequired} />
            <InfoRow icon={<Wallet size={12} />} label="Budget" value={match.budget} />
            <InfoRow
              icon={<MapPin size={12} />}
              label="Standorte"
              value={match.locations.slice(0, 3).join(', ') + (match.locations.length > 3 ? ' …' : '')}
            />
            <InfoRow icon={<Calendar size={12} />} label="Einzug ab" value={match.timing} />
          </Stack>

          {match.matchHighlights.length > 0 && (
            <Box sx={{ mb: 1 }}>
              {match.matchHighlights.slice(0, 2).map((h, i) => (
                <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mb: 0.25 }}>
                  <CheckCircle size={11} color={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
                  <Typography variant="caption" sx={{ color: DS_TEXT.primary, lineHeight: 1.4 }}>{h}</Typography>
                </Box>
              ))}
            </Box>
          )}

          {match.mustHaves.length > 0 && (
            <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
              {match.mustHaves.slice(0, 3).map(mh => (
                <Chip
                  key={mh}
                  label={mh}
                  size="small"
                  sx={{ fontSize: '0.62rem', height: 18, bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.successDark, border: `1px solid ${DS_SURFACE.success.border}` }}
                />
              ))}
              {match.mustHaves.length > 3 && (
                <Typography variant="caption" sx={{ color: DS_TEXT.disabled, alignSelf: 'center' }}>
                  +{match.mustHaves.length - 3}
                </Typography>
              )}
            </Stack>
          )}
        </Box>
      </Box>
    </Card>
  )
}