property-match/.claude/worktrees/agent-a82a3716/src/components/compare/CompareColumnHeader.tsx

import { Box, Chip, IconButton, Tooltip, Typography } from '@mui/material'
import { X, AlertTriangle } from 'lucide-react'
import type { UnifiedMatchResult } from '../../domain/unifiedResult'

const TYPE_META: Record<string, { label: string; color: string }> = {
  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
  EXTERNAL_MARKET:     { label: 'Marktinserat',       color: '#d97706' },
  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
}

const SCORE_COLOR = (s: number) => s >= 78 ? '#1a7a4a' : s >= 52 ? '#d97706' : '#c0392b'

interface Props {
  item: UnifiedMatchResult
  onRemove: () => void
}

export function CompareColumnHeader({ item, onRemove }: Props) {
  const meta = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
  const prop = item.resultType !== 'FUTURE_AVAILABILITY' ? (item as any).property : null
  const sig  = item.resultType === 'FUTURE_AVAILABILITY' ? (item as any).signal  : null

  const title       = prop?.title ?? sig?.companyName ?? sig?.locationHint ?? '–'
  const subtitle    = prop?.location?.city ?? sig?.locationHint ?? '–'
  const availability = prop?.availabilityDate ?? (sig ? `~${sig.timeHorizonMonths} Monate` : null)
  const confidence  = Math.round(item.match.confidenceLevel * 100)
  const source      = prop?.sourceLabel ?? sig?.source?.type ?? '–'

  return (
    <Box sx={{ p: 0.5 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
        <Chip label={meta.label} size="small" sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 10 }} />
        <IconButton size="small" onClick={onRemove} sx={{ p: 0.25, ml: 1 }}>
          <X size={14} />
        </IconButton>
      </Box>

      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
        {title}
      </Typography>
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
        {subtitle}
      </Typography>

      <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.5 }}>
        <Typography variant="h4" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
          {item.matchScore}
        </Typography>
        <Typography variant="caption" color="text.secondary">/100</Typography>
      </Box>

      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
        <Tooltip title="Konfidenz">
          <Chip
            label={`${confidence}% Konfidenz`}
            size="small"
            icon={confidence < 60 ? <AlertTriangle size={10} /> : undefined}
            sx={{
              fontSize: 10,
              bgcolor: confidence < 60 ? '#fef3c7' : '#f0fdf4',
              color: confidence < 60 ? '#92400e' : '#166534',
            }}
          />
        </Tooltip>
        {source && source !== '–' && (
          <Chip label={source} size="small" sx={{ fontSize: 10 }} />
        )}
        {availability && (
          <Chip label={availability} size="small" sx={{ fontSize: 10 }} />
        )}
      </Box>

      {item.resultType === 'FUTURE_AVAILABILITY' && sig && (
        <Box sx={{ mt: 1, p: 0.75, bgcolor: '#faf5ff', borderRadius: 1, border: '1px solid #e9d5ff' }}>
          <Typography variant="caption" sx={{ color: '#7c3aed', fontWeight: 600, display: 'block' }}>
            Probabilistisches Signal
          </Typography>
          <Typography variant="caption" color="text.secondary">
            {Math.round(sig.probability * 100)}% Wahrscheinlichkeit
          </Typography>
        </Box>
      )}
    </Box>
  )
}