import { useState } from 'react'
import { Box, Drawer } from '@mui/material'
import { useNavigate } from 'react-router'
import { PageHeader } from '../../components/layout'
import { DecisionContextPanel } from '../../components/ui'
import { useProperties } from '../../hooks/useProperties'
import { PropertyFilterBar, PropertyTable, PropertyDetailView } from '../../components/supply'
import type { PropertyTableFilters } from '../../components/supply'
import type { Property } from '../../domain/property'

function applyFilters(properties: Property[], filters: PropertyTableFilters): Property[] {
  let result = [...properties]

  if (filters.search) {
    const q = filters.search.toLowerCase()
    result = result.filter(
      p =>
        p.title.toLowerCase().includes(q) ||
        p.location.city.toLowerCase().includes(q) ||
        p.address.street.toLowerCase().includes(q),
    )
  }

  if (filters.assetTypes && filters.assetTypes.length > 0) {
    result = result.filter(p => filters.assetTypes!.includes(p.assetType))
  }

  if (filters.availabilityStatus) {
    result = result.filter(p => p.availabilityStatus === filters.availabilityStatus)
  }

  if (filters.sortBy) {
    const dir = filters.sortDir === 'asc' ? 1 : -1
    result.sort((a, b) => {
      switch (filters.sortBy) {
        case 'dataQuality': return dir * (a.dataQuality.score - b.dataQuality.score)
        case 'area': return dir * (a.areaSqm - b.areaSqm)
        case 'rent': return dir * (a.rentPricePerSqm - b.rentPricePerSqm)
        case 'confidence': return dir * (a.confidenceScore - b.confidenceScore)
        case 'availability': return dir * a.availabilityStatus.localeCompare(b.availabilityStatus)
        default: return 0
      }
    })
  }

  return result
}

export default function Properties() {
  const navigate = useNavigate()
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [filters, setFilters] = useState<PropertyTableFilters>({})

  const { data: properties = [], isLoading, isError } = useProperties()
  const filtered = applyFilters(properties, filters)

  // Decision-relevant aggregates
  const matchReady = properties.filter(
    p => (p.availabilityStatus === 'AVAILABLE_NOW' || p.availabilityStatus === 'AVAILABLE_SOON') &&
      p.confidenceScore >= 0.7 && p.dataQuality.missingCriticalFields.length === 0
  )
  const criticalGaps = properties.filter(p => p.dataQuality.missingCriticalFields.length > 0)
  const lowConfidence = properties.filter(p => p.confidenceScore < 0.55)
  const staleOrOutdated = properties.filter(
    p => p.dataQuality.freshness === 'STALE' || p.dataQuality.freshness === 'OUTDATED'
  )

  // Unique missing fields across all objects
  const allMissingFields = [...new Set(
    properties.flatMap(p => p.dataQuality.missingCriticalFields)
  )].slice(0, 4)

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <PageHeader
        title="Objektverwaltung"
        subtitle={`${filtered.length} von ${properties.length} Objekten`}
      />

      {!isLoading && properties.length > 0 && (
        <DecisionContextPanel
          decision="Welche Objekte sind matchbereit — und wo blockieren Datenlücken Matches?"
          context="Objekte mit fehlenden Pflichtfeldern oder Konfidenz < 55% erscheinen im Match-Center nicht oder mit niedrigem Rang."
          metrics={[
            { label: 'matchbereit', value: matchReady.length, severity: matchReady.length > 0 ? 'positive' : 'warning' },
            ...(criticalGaps.length > 0
              ? [{ label: 'kritische Datenlücken', value: criticalGaps.length, severity: 'critical' as const }]
              : []
            ),
            ...(lowConfidence.length > 0
              ? [{ label: 'Konfidenz < 55%', value: lowConfidence.length, severity: 'warning' as const }]
              : []
            ),
            ...(staleOrOutdated.length > 0
              ? [{ label: 'veraltete Daten', value: staleOrOutdated.length, severity: 'warning' as const }]
              : []
            ),
          ]}
          missing={allMissingFields.length > 0
            ? [`Fehlende Pflichtfelder bei ${criticalGaps.length} Objekten: ${allMissingFields.join(', ')}`]
            : []
          }
          risks={[
            ...(criticalGaps.length > 0
              ? [`${criticalGaps.length} Objekte werden potenziellen Mietern nicht angezeigt`]
              : []
            ),
            ...(staleOrOutdated.length > 0
              ? [`${staleOrOutdated.length} Objekte mit veralteten Preisen oder Verfügbarkeiten`]
              : []
            ),
          ]}
          actions={[
            {
              label: 'Datenpflege starten',
              primary: criticalGaps.length > 0 || staleOrOutdated.length > 0,
              onClick: () => navigate('/supply/data-quality'),
            },
          ]}
        />
      )}

      <PropertyFilterBar filters={filters} onFiltersChange={setFilters} />

      <Box sx={{ flex: 1, overflowY: 'auto' }}>
        <PropertyTable
          properties={filtered}
          isLoading={isLoading}
          isError={isError}
          selectedId={selectedId}
          onSelect={setSelectedId}
          filters={filters}
          onFiltersChange={setFilters}
        />
      </Box>

      <Drawer
        anchor="right"
        open={!!selectedId}
        onClose={() => setSelectedId(null)}
        slotProps={{ paper: { sx: { width: 650, boxShadow: '-4px 0 24px rgba(0,0,0,0.10)' } } }}
      >
        {selectedId && (
          <PropertyDetailView propertyId={selectedId} onClose={() => setSelectedId(null)} />
        )}
      </Drawer>
    </Box>
  )
}
