property-match/src/components/match-detail/MatchDetailPropertyDetails.tsx

import { Box, Chip, Typography } from '@mui/material'
import { ShieldCheck } from 'lucide-react'
import type { PropertyUnit } from '../../domain/property'

// ── Property detail helpers ────────────────────────────────────────────────────

export const FLOOR_LABEL = (level: number) =>
  level === 0 ? 'EG' : level < 0 ? `UG ${Math.abs(level)}` : `${level}.OG`

export const ASSET_LABELS: Record<string, string> = {
  OFFICE: 'Büro', LOGISTICS: 'Lager / Logistik', RETAIL: 'Retail / Laden',
  PRODUCTION: 'Produktion', MIXED: 'Gewerbe (gemischt)',
}
export const RISK_LABELS: Record<string, string> = { LOW: 'Niedrig', MEDIUM: 'Mittel', HIGH: 'Hoch' }
export const SOURCE_LABELS: Record<string, string> = {
  ERP_IMPORT: 'ERP-Import (intern)', IMMOSCOUT_SCRAPE: 'ImmoScout24',
  HOMEGATE_SCRAPE: 'Homegate', MATCHOFFICE_SCRAPE: 'MatchOffice',
  NEWHOME_SCRAPE: 'newhome.ch', AI_SIGNAL: 'KI-Signal', MANUAL: 'Manuell erfasst',
}
export const PASSERBY_LABELS: Record<string, string> = {
  LOW: 'Gering', MEDIUM: 'Mittel', HIGH: 'Hoch', VERY_HIGH: 'Sehr hoch',
}

export function KeyFactRow({ label, value }: { label: string; value?: string | null }) {
  if (!value) return null
  return (
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', py: 0.875, borderBottom: '1px solid #f1f5f9', '&:last-of-type': { borderBottom: 0 } }}>
      <Typography variant="body2" color="text.secondary" sx={{ flexShrink: 0, mr: 2 }}>{label}</Typography>
      <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'right' }}>{value}</Typography>
    </Box>
  )
}

export function UnitStatusChip({ unit }: { unit: PropertyUnit }) {
  if (unit.schattenmarktRelease?.enabled) {
    return <Chip size="small" icon={<ShieldCheck size={11} />} label="PRE-MARKET" sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #86efac', fontWeight: 700, fontSize: '0.68rem', height: 20 }} />
  }
  if (unit.available) {
    return <Chip size="small" label="Verfügbar" sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', fontWeight: 600, fontSize: '0.68rem', height: 20 }} />
  }
  return <Chip size="small" label="Belegt" sx={{ bgcolor: '#f8fafc', color: '#64748b', fontWeight: 500, fontSize: '0.68rem', height: 20 }} />
}

export function UnitRow({ unit, highlighted }: { unit: PropertyUnit; highlighted: boolean }) {
  const availableFrom = unit.schattenmarktRelease?.availableFrom ?? unit.leaseEndDate
  const monthlyRent = unit.rentPricePerSqm ? Math.round(unit.rentPricePerSqm / 12) : undefined
  return (
    <Box sx={{
      display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto',
      gap: 1.5, alignItems: 'center', px: 2, py: 1.5, borderRadius: 1, mb: 1,
      bgcolor: highlighted ? '#faf5ff' : '#f8fafc',
      border: highlighted ? '1px solid #e9d5ff' : '1px solid #e2e8f0',
    }}>
      <Box>
        <Typography variant="body2" sx={{ fontWeight: 600 }}>
          {FLOOR_LABEL(unit.floorLevel)}{unit.unitLabel ? ` · ${unit.unitLabel}` : ''}
        </Typography>
        {unit.currentTenant && <Typography variant="caption" color="text.secondary">{unit.currentTenant}</Typography>}
      </Box>
      <Typography variant="body2" sx={{ fontWeight: 600 }}>{unit.areaSqm.toLocaleString('de-CH')} m²</Typography>
      <Typography variant="body2" color="text.secondary">{monthlyRent ? `CHF ${monthlyRent}/m²/Mt.` : '–'}</Typography>
      <Typography variant="body2" color="text.secondary">
        {availableFrom ? new Date(availableFrom).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' }) : '–'}
      </Typography>
      <UnitStatusChip unit={unit} />
    </Box>
  )
}