import { Box, Chip } from '@mui/material'
import { Building2 } from 'lucide-react'
import { MatchScoreDisplay } from './MatchScoreDisplay'
import { HeatBadge } from '../shared'
import { useSessionStore } from '../../stores/sessionStore'
import { RESULT_TYPE_META } from '../../lib/ds'
import { confidenceHex } from '../../lib/utils'
import type { MatchCardViewModel } from './MatchCardViewModel'

interface Props {
  vm: MatchCardViewModel
  compact?: boolean
}

export function MatchCardHeader({ vm, compact }: Props) {
  const { currentUser } = useSessionStore()
  const isPortfolioOwner = currentUser?.role === 'PROPERTY_MANAGER' || currentUser?.role === 'ORGANIZATION_ADMIN'
  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#64748b' }
  const confPct = Math.round(vm.confidenceScore * 100)

  const topRisk = vm.risks.length > 0 ? vm.risks[0].level : undefined
  const showRiskBadge = topRisk && topRisk !== 'LOW'
  const riskLabel = topRisk === 'CRITICAL' ? 'Kritisch' : topRisk === 'HIGH' ? 'Hohes Risiko' : 'Mittleres Risiko'
  const riskColor: 'error' | 'warning' = (topRisk === 'HIGH' || topRisk === 'CRITICAL') ? 'error' : 'warning'

  return (
    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, flexWrap: 'wrap' }}>
      {/* Score — leftmost, most prominent */}
      <MatchScoreDisplay score={vm.matchScore} size={compact ? 'sm' : 'md'} />

      {/* Badges: heat → resultType → assetType → confidence → availability → risk */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
        <HeatBadge propertyId={vm.propertyId} />
        <Chip
          label={rt.label}
          size="small"
          sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: 11 }}
        />
        {vm.resultType === 'VERIFIED_PORTFOLIO' && isPortfolioOwner && (
          <Chip
            icon={<Building2 size={10} color="#152642" />}
            label="Ihr Objekt"
            size="small"
            sx={{ bgcolor: 'rgba(30,58,95,0.12)', color: '#152642', fontWeight: 700, fontSize: 11, '& .MuiChip-icon': { ml: 0.5 } }}
          />
        )}
        {vm.assetType && (
          <Chip label={vm.assetType} size="small" variant="outlined" sx={{ fontSize: 11 }} />
        )}
        <Chip
          label={`${confPct}% Konfidenz`}
          size="small"
          sx={{ bgcolor: confidenceHex(vm.confidenceScore), color: 'white', fontSize: 11 }}
        />
        {vm.availabilityLabel && (
          <Chip label={vm.availabilityLabel} size="small" variant="outlined" sx={{ fontSize: 11 }} />
        )}
        {showRiskBadge && (
          <Chip label={riskLabel} size="small" color={riskColor} variant="outlined" />
        )}
      </Box>
    </Box>
  )
}