import { Box, Button, Card, CardContent, Chip, Typography } from '@mui/material'
import { useNavigate } from 'react-router'
import type { StrongMatchItem } from '../../domain/dashboard'
import { matchScoreHex } from '../../lib/utils'

interface StrongMatchMiniCardProps {
  match: StrongMatchItem
}

export function StrongMatchMiniCard({ match }: StrongMatchMiniCardProps) {
  const navigate = useNavigate()

  return (
    <Card variant="outlined" sx={{ mb: 1 }}>
      <CardContent sx={{ p: 2, '&:last-child': { pb: 1.5 } }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
          <Typography variant="body2" sx={{ fontWeight: 600, flex: 1 }}>
            {match.propertyTitle}
          </Typography>
          <Chip
            label={`${match.matchScore}`}
            size="small"
            sx={{
              ml: 1,
              fontWeight: 700,
              bgcolor: matchScoreHex(match.matchScore),
              color: 'white',
              flexShrink: 0,
            }}
          />
        </Box>

        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
          {match.propertyAddress}
        </Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mt: 0.5 }}>
          {match.topReason}
        </Typography>

        <Box sx={{ display: 'flex', gap: 0.75, mt: 1, flexWrap: 'wrap', alignItems: 'center' }}>
          {match.missingDataCount > 0 && (
            <Chip
              label={`${match.missingDataCount} Felder fehlen`}
              size="small"
              color="warning"
            />
          )}
        </Box>

        <Box sx={{ display: 'flex', gap: 0.75, mt: 1.25, flexWrap: 'wrap' }}>
          <Button
            size="small"
            variant="contained"
            sx={{ textTransform: 'none', fontSize: '0.75rem', py: 0.25 }}
            onClick={() => navigate('/supply/match-center')}
          >
            Match Center
          </Button>
          <Button
            size="small"
            variant="outlined"
            sx={{ textTransform: 'none', fontSize: '0.75rem', py: 0.25 }}
            onClick={() => navigate('/ops/review-queue')}
          >
            Zur Prüfung
          </Button>
        </Box>
      </CardContent>
    </Card>
  )
}