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

import { Box, Button, Chip, Divider, Typography } from '@mui/material'
import { Bookmark, Columns2 } from 'lucide-react'
import { PropertyMap } from '../shared'
import { MatchScoreDisplay } from '../match-card/MatchScoreDisplay'
import { useMatchDetail } from '../../hooks/useMatches'
import type { Property } from '../../domain/property'
import type { FutureSignal } from '../../domain/futureSignal'

type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>

interface MatchDetailHeroProps {
  match: Match
  property: Property | undefined
  signal: FutureSignal | null
  isFuture: boolean
  title: string
  location: string
  rt: { label: string; color: string }
  keyFacts: Array<{ label: string; value: string }>
  onCompare: () => void
  onShortlist: () => void
  searchCenterLat?: number
  searchCenterLng?: number
  searchRadiusKm?: number
  searchLabel?: string
}

export function MatchDetailHero({
  match,
  property,
  signal: _signal,
  isFuture,
  title,
  location,
  rt,
  keyFacts,
  onCompare,
  onShortlist,
  searchCenterLat,
  searchCenterLng,
  searchRadiusKm,
  searchLabel,
}: MatchDetailHeroProps) {
  return (
    <>
      {/* Hero: image first, map fallback */}
      {!isFuture && (
        property?.images?.[0] ? (
          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e8e7e4', flexShrink: 0 }}>
            <img
              src={property.images[0]}
              alt={property.title}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </Box>
        ) : property?.location?.coordinates ? (
          <PropertyMap
            lat={property.location.coordinates.lat}
            lng={property.location.coordinates.lng}
            label={property.title}
            height={340}
            searchCenterLat={searchCenterLat}
            searchCenterLng={searchCenterLng}
            searchRadiusKm={searchRadiusKm}
            searchLabel={searchLabel}
          />
        ) : null
      )}

      {/* Property header — white section below hero */}
      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0' }}>
        <Box sx={{ px: { xs: 2, sm: 3 }, pt: 2.5, pb: 2 }}>
          <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'flex-start' }, justifyContent: 'space-between', gap: 2 }}>
            {/* Left: title + address + chips */}
            <Box sx={{ flex: 1, minWidth: 0 }}>
              <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
                {title}
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 1.25 }}>
                {location}
              </Typography>
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, alignItems: 'center' }}>
                <Chip label={rt.label} size="small" sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: '0.72rem' }} />
                {property?.assetType && (
                  <Chip label={property.assetType} size="small" variant="outlined" sx={{ fontSize: '0.72rem' }} />
                )}
              </Box>
            </Box>

            {/* Right: score + actions */}
            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 1.5, flexShrink: 0 }}>
              <MatchScoreDisplay score={match.matchScore} size="lg" />
              <Box sx={{ display: 'flex', gap: 1 }}>
                <Button
                  variant="outlined"
                  size="small"
                  startIcon={<Bookmark size={14} />}
                  onClick={onShortlist}
                  sx={{ textTransform: 'none' }}
                >
                  Shortlist
                </Button>
                <Button
                  variant="contained"
                  size="small"
                  startIcon={<Columns2 size={14} />}
                  onClick={onCompare}
                  sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
                >
                  Vergleichen
                </Button>
              </Box>
            </Box>
          </Box>
        </Box>

        {/* Key facts strip */}
        <Divider />
        <Box sx={{ display: 'flex', flexWrap: 'wrap', px: { xs: 2, sm: 3 }, py: 1.5, gap: 0 }}>
          {keyFacts.map((fact, i) => (
            <Box key={fact.label} sx={{
              flex: '1 1 120px',
              pl: i === 0 ? 0 : { xs: 1.5, sm: 2 },
              pr: { xs: 1.5, sm: 2 },
              py: { xs: 0.5, sm: 0 },
              borderLeft: i === 0 ? 'none' : '1px solid #e2e8f0',
            }}>
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>
                {fact.label}
              </Typography>
              <Typography variant="body1" sx={{ fontWeight: 700, mt: 0.25 }}>
                {fact.value}
              </Typography>
            </Box>
          ))}
        </Box>
      </Box>
    </>
  )
}