import {
  Box,
  Button,
  Chip,
  Paper,
  Typography,
} from '@mui/material'
import {
  Building2,
  Clock,
  ExternalLink,
  Info,
  Layers,
  ShieldCheck,
  Tag,
  Train,
  TrendingUp,
} from 'lucide-react'
import type { Property } from '../../domain/property'
import {
  ASSET_LABELS,
  FLOOR_LABEL,
  KeyFactRow,
  PASSERBY_LABELS,
  RISK_LABELS,
  SOURCE_LABELS,
  UnitRow,
} from './MatchDetailPropertyDetails'
import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER, DS_MARKET_SIGNAL } from '../../lib/ds'

interface PropertyDetailPublicSectionsProps {
  property: Property
  highlightUnitId?: string | null
}

export function PropertyDetailPublicSections({ property, highlightUnitId }: PropertyDetailPublicSectionsProps) {
  const preMarketUnits = (property.units ?? []).filter(u => u.schattenmarktRelease?.enabled)
  const otherUnits = (property.units ?? []).filter(u => !u.schattenmarktRelease?.enabled)
  const flexibleUnits = (property.units ?? []).filter(u => u.isFlexible && u.minLettableSqm !== undefined)

  const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
  const rawMonthlyPerSqm = property.rentPricePerSqm / 12
  const monthlyPerSqmLabel = Number.isInteger(rawMonthlyPerSqm)
    ? `CHF ${rawMonthlyPerSqm}.–`
    : `CHF ${rawMonthlyPerSqm.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
  const minLettable = property.areaSqmMin
    ?? (flexibleUnits.length > 0
      ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!))
      : undefined)

  const sourceLabel = property.sourceLabel
    ?? property.sourceMeta?.sourceLabel
    ?? SOURCE_LABELS[property.sourceType]
    ?? property.sourceType

  return (
    <>
      {/* ── Preis ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
          <Tag size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
        </Box>
        <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
        <KeyFactRow label="Pro m²/Monat" value={monthlyPerSqmLabel} />
        <KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
        {property.ancillaryCosts != null && (
          <KeyFactRow
            label="Nebenkosten"
            value={`CHF ${Math.round(property.areaSqm * property.ancillaryCosts / 12).toLocaleString('de-CH')}/Mt. (CHF ${property.ancillaryCosts}/m²/a)`}
          />
        )}
      </Paper>

      {/* ── Hauptangaben ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
        </Box>
        <KeyFactRow
          label="Verfügbarkeit"
          value={
            property.availabilityDate
              ? new Date(property.availabilityDate).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })
              : 'Auf Anfrage'
          }
        />
        <KeyFactRow label="Objekttyp" value={ASSET_LABELS[property.assetType] ?? property.assetType} />
        <KeyFactRow label="Nutzfläche" value={`${property.areaSqm.toLocaleString('de-CH')} m²`} />
        {minLettable != null && (
          <KeyFactRow label="Mindestnutzfläche" value={`${minLettable.toLocaleString('de-CH')} m²`} />
        )}
        {property.contractDurationMonths != null && (
          <KeyFactRow label="Mietdauer" value={`${property.contractDurationMonths} Monate`} />
        )}
        {property.floorLevel != null && (
          <KeyFactRow label="Stockwerk" value={FLOOR_LABEL(property.floorLevel)} />
        )}
        {property.currentTenant && (
          <KeyFactRow label="Aktueller Mieter" value={property.currentTenant} />
        )}
        {property.leaseEndDate && (
          <KeyFactRow
            label="Mietvertragsende"
            value={new Date(property.leaseEndDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })}
          />
        )}
        {property.breakoutOption && (
          <KeyFactRow
            label="Break-out Option"
            value={
              property.breakoutOptionDate
                ? new Date(property.breakoutOptionDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })
                : 'Ja'
            }
          />
        )}
        {property.riskLevel && (
          <KeyFactRow label="Risikoeinschätzung" value={RISK_LABELS[property.riskLevel] ?? property.riskLevel} />
        )}
        {property.expansionPotentialSqm != null && (
          <KeyFactRow label="Ausbaupotenzial" value={`+${property.expansionPotentialSqm.toLocaleString('de-CH')} m²`} />
        )}
      </Paper>

      {/* ── Eigenschaften ── */}
      {property.softFactors && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
            <TrendingUp size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
          </Box>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
            {property.softFactors.publicTransportMinutes != null && (
              <Chip
                size="small"
                icon={<Train size={11} />}
                label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`}
                sx={{ bgcolor: DS_SURFACE.blue.bg, color: DS_MARKET_SIGNAL.accent, border: `1px solid ${DS_SURFACE.blue.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
              <Chip
                size="small"
                label={`${property.softFactors.parkingSpots} Parkplätze`}
                sx={{ bgcolor: DS_BG.page, color: DS_TEXT.primary, border: `1px solid ${DS_BORDER.default}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
              <Chip
                size="small"
                label="Prestigestandort"
                sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
              <Chip
                size="small"
                label="Hohe Sichtbarkeit"
                sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.passerbyFrequency && (
              <Chip
                size="small"
                label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`}
                sx={{ bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.success, border: `1px solid ${DS_SURFACE.success.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
              <Chip
                size="small"
                label="Hoher Talentzugang"
                sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }}
              />
            )}
            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
              <Chip
                size="small"
                label={`Talentindex: ${property.softFactors.talentAccess}`}
                sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }}
              />
            )}
          </Box>
        </Paper>
      )}

      {/* ── Wegzeit ── */}
      {property.softFactors?.publicTransportMinutes != null && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
            <Clock size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: DS_SURFACE.blue.bg, border: `1px solid ${DS_SURFACE.blue.border}`, flexShrink: 0 }}>
              <Train size={18} color={DS_MARKET_SIGNAL.accent} />
            </Box>
            <Box>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                {property.softFactors.publicTransportMinutes} Min. zu Fuss
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Nächster ÖV-Anschluss — {property.location.city}
              </Typography>
            </Box>
          </Box>
          {property.softFactors.infrastructureNotes && (
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, fontStyle: 'italic' }}>
              {property.softFactors.infrastructureNotes}
            </Typography>
          )}
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
            Die Zeiten beziehen sich auf die Strecke zu Fuss.
          </Typography>
        </Paper>
      )}

      {/* ── Einheiten ── */}
      {(property.units ?? []).length > 0 && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
            <Layers size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
          </Box>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
            {['Einheit', 'Fläche', 'Miete', 'Verfügbar ab', 'Status'].map(h => (
              <Typography key={h} variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>{h}</Typography>
            ))}
          </Box>
          {preMarketUnits.map(u => (
            <UnitRow key={u.id} unit={u} highlighted={u.id === highlightUnitId || preMarketUnits.length === 1} />
          ))}
          {otherUnits.map(u => (
            <UnitRow key={u.id} unit={u} highlighted={u.id === highlightUnitId} />
          ))}
        </Paper>
      )}

      {/* ── Beschreibung ── */}
      {property.description && (
        <Paper sx={{ mb: 2, p: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
            <Building2 size={15} color={DS_TEXT.secondary} />
            <Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
          </Box>
          <Typography variant="body2" sx={{ lineHeight: 1.75, color: DS_TEXT.primary, whiteSpace: 'pre-wrap' }}>
            {property.description}
          </Typography>
        </Paper>
      )}

      {/* ── Quelle & Referenz ── */}
      <Paper sx={{ mb: 2, p: 2.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
          <Info size={15} color={DS_TEXT.secondary} />
          <Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
        </Box>
        <KeyFactRow label="Datenquelle" value={sourceLabel} />
        {property.propertyNumber && (
          <KeyFactRow label="Objektnummer" value={property.propertyNumber} />
        )}
        {property.importedFrom && (
          <KeyFactRow label="Importiert aus" value={property.importedFrom} />
        )}
        {property.dataQuality.lastVerifiedAt && (
          <KeyFactRow
            label="Zuletzt verifiziert"
            value={new Date(property.dataQuality.lastVerifiedAt).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })}
          />
        )}
        {property.sourceUrl && (
          <Box sx={{ mt: 1.25 }}>
            <Button
              size="small"
              variant="outlined"
              endIcon={<ExternalLink size={12} />}
              href={property.sourceUrl}
              target="_blank"
              rel="noopener noreferrer"
              sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: DS_BORDER.strong, color: DS_TEXT.primary }}
            >
              Zum Originalinserat
            </Button>
          </Box>
        )}
      </Paper>
    </>
  )
}