import { Box, Chip } from '@mui/material'
import { Building2 } from 'lucide-react'
import { MatchScoreDisplay } from './MatchScoreDisplay'
import { useSessionStore } from '../../stores/sessionStore'
import type { MatchCardViewModel } from './MatchCardViewModel'

const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
  EXTERNAL_MARKET:     { label: 'Direktinserat',      color: '#d97706' },
  MAISON_WORK:         { label: 'Maison Work',        color: '#0369a1' },
  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
}

function confidenceColor(score: number): string {
  if (score >= 0.75) return '#1a7a4a'
  if (score >= 0.55) return '#d97706'
  return '#c0392b'
}

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: resultType → assetType → confidence → availability → risk */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
        <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="#1e3a5f" />}
            label="Ihr Objekt"
            size="small"
            sx={{ bgcolor: 'rgba(30,58,95,0.12)', color: '#1e3a5f', 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: confidenceColor(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>
  )
}