import { useState } from 'react'
import {
  Alert,
  Box,
  Chip,
  Divider,
  IconButton,
  LinearProgress,
  Tab,
  Tabs,
  Typography,
} from '@mui/material'
import { X } from 'lucide-react'
import { NegotiationInsightsPanel } from './NegotiationInsightsPanel'
import { DataQualityPanel as DQPanel, ProvenancePanel } from '../data-quality'
import type { Property } from '../../domain/property'
import type { Match } from '../../domain/match'
import type { FutureSignal } from '../../domain/futureSignal'
import { usePropertyById, usePropertyMatches, usePropertySignals } from '../../hooks/useProperties'
import { PropertyDetailSkeleton } from './PropertyDetailSkeleton'
import {
  getAssetTypeColor,
  getAssetTypeLabel,
  getAvailabilityChipColor,
  getAvailabilityLabel,
  getResultTypeColor,
  getResultTypeLabel,
  qualityColor,
} from './propertyHelpers'

interface PropertyDetailViewProps {
  propertyId: string
  onClose?: () => void
}

// ── Sub-components ────────────────────────────────────────────────────────────

function Field({ label, value }: { label: string; value?: string | number | boolean | null }) {
  return (
    <Box sx={{ mb: 1.5 }}>
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1 }}>
        {label}
      </Typography>
      {value !== undefined && value !== null && value !== '' ? (
        <Typography variant="body2" sx={{ fontWeight: 500, mt: 0.25 }}>
          {typeof value === 'boolean' ? (value ? 'Ja' : 'Nein') : String(value)}
        </Typography>
      ) : (
        <Typography variant="body2" color="text.disabled" sx={{ mt: 0.25 }}>—</Typography>
      )}
    </Box>
  )
}

function FieldGrid({ children }: { children: React.ReactNode }) {
  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0.5 }}>
      {children}
    </Box>
  )
}

function SectionTitle({ title }: { title: string }) {
  return (
    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1.5, mt: 0.5 }}>
      {title}
    </Typography>
  )
}

function ScoreRow({ label, value }: { label: string; value?: number }) {
  if (value === undefined || value === null) {
    return (
      <Box sx={{ mb: 1 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
          <Typography variant="caption" color="text.secondary">{label}</Typography>
          <Typography variant="caption" color="text.disabled">—</Typography>
        </Box>
        <LinearProgress variant="determinate" value={0} sx={{ height: 4, borderRadius: 2, opacity: 0.3 }} />
      </Box>
    )
  }
  const pct = value > 1 ? value : value * 100
  return (
    <Box sx={{ mb: 1 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
        <Typography variant="caption" color="text.secondary">{label}</Typography>
        <Typography variant="caption" sx={{ fontWeight: 600 }}>{Math.round(pct)}</Typography>
      </Box>
      <LinearProgress
        variant="determinate"
        value={Math.min(100, pct)}
        color={pct >= 70 ? 'success' : pct >= 40 ? 'warning' : 'error'}
        sx={{ height: 4, borderRadius: 2 }}
      />
    </Box>
  )
}

// ── Tab panels ────────────────────────────────────────────────────────────────

function OverviewPanel({ p }: { p: Property }) {
  return (
    <Box>
      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5, mb: 2.5 }}>
        {[
          { label: 'Fläche', value: `${p.areaSqm.toLocaleString('de-CH')} m²` },
          { label: 'Miete/m²/Jahr', value: p.rentPricePerSqm > 0 ? `CHF ${p.rentPricePerSqm}` : undefined },
          { label: 'Verfügbar ab', value: p.availabilityDate ? new Date(p.availabilityDate).toLocaleDateString('de-CH') : undefined },
        ].map(({ label, value }) => (
          <Box key={label} sx={{ p: 1.5, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
            <Typography variant="caption" color="text.secondary">{label}</Typography>
            <Typography variant="body1" sx={{ fontWeight: 700, mt: 0.25 }}>
              {value ?? <span style={{ color: '#94a3b8' }}>k.A.</span>}
            </Typography>
          </Box>
        ))}
      </Box>
      {p.description && (
        <>
          <SectionTitle title="Beschreibung" />
          <Typography variant="body2" sx={{ lineHeight: 1.6, color: 'text.secondary', mb: 2 }}>
            {p.description}
          </Typography>
        </>
      )}
      <SectionTitle title="Datenqualität" />
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
        <Typography variant="body2" color="text.secondary">Score</Typography>
        <Typography variant="body2" sx={{ fontWeight: 600 }}>{Math.round(p.dataQuality.score * 100)}%</Typography>
      </Box>
      <LinearProgress
        variant="determinate"
        value={p.dataQuality.score * 100}
        color={qualityColor(p.dataQuality.score)}
        sx={{ height: 8, borderRadius: 4, mb: 1 }}
      />
      {p.dataQuality.warnings.length > 0 && (
        <Box sx={{ mt: 1 }}>
          {p.dataQuality.warnings.map((w, i) => (
            <Typography key={i} variant="caption" sx={{ display: 'block', color: 'warning.main' }}>⚠ {w}</Typography>
          ))}
        </Box>
      )}
    </Box>
  )
}

function HardFactsPanel({ p }: { p: Property }) {
  const hf = p.hardFacts
  return (
    <Box>
      <SectionTitle title="Standort & Objekt" />
      <FieldGrid>
        <Field label="Titel" value={p.title} />
        <Field label="Objekttyp" value={getAssetTypeLabel(p.assetType)} />
        <Field label="Strasse" value={`${p.address.street} ${p.address.houseNumber}`} />
        <Field label="PLZ / Stadt" value={`${p.address.postalCode} ${p.address.city}`} />
        <Field label="Kanton" value={p.location.canton} />
        <Field label="Region" value={p.location.region} />
        <Field label="Land" value={p.address.country} />
        <Field label="Nutzungsart" value={hf?.usageType} />
      </FieldGrid>
      <Divider sx={{ my: 2 }} />
      <SectionTitle title="Fläche & Miete" />
      <FieldGrid>
        <Field label="Fläche (m²)" value={`${p.areaSqm.toLocaleString('de-CH')} m²`} />
        <Field label="Fläche Min (m²)" value={p.areaSqmMin ? `${p.areaSqmMin.toLocaleString('de-CH')} m²` : undefined} />
        <Field label="Fläche Max (m²)" value={p.areaSqmMax ? `${p.areaSqmMax.toLocaleString('de-CH')} m²` : undefined} />
        <Field label="Miete/m²/Jahr" value={p.rentPricePerSqm > 0 ? `CHF ${p.rentPricePerSqm}` : undefined} />
        <Field label="Jahresmiete (CHF/m²)" value={p.rentChfSqmYear ? `CHF ${p.rentChfSqmYear}` : undefined} />
        <Field label="Monatsmiete gesamt" value={p.totalRentMonthly ? `CHF ${p.totalRentMonthly.toLocaleString('de-CH')}` : undefined} />
        <Field label="Nebenkosten/m²" value={p.ancillaryCosts ? `CHF ${p.ancillaryCosts}` : undefined} />
        <Field label="Vertragsdauer" value={p.contractDurationMonths ? `${p.contractDurationMonths} Monate` : undefined} />
      </FieldGrid>
      <Divider sx={{ my: 2 }} />
      <SectionTitle title="Verfügbarkeit" />
      <FieldGrid>
        <Field label="Status" value={getAvailabilityLabel(p.availabilityStatus)} />
        <Field label="Verfügbar ab" value={p.availabilityDate ? new Date(p.availabilityDate).toLocaleDateString('de-CH') : undefined} />
        <Field label="Verfügbarkeitstyp" value={p.availabilityType} />
      </FieldGrid>
      {hf && (
        <>
          <Divider sx={{ my: 2 }} />
          <SectionTitle title="Technische Details" />
          <FieldGrid>
            <Field label="Etage" value={hf.floor ?? p.floorLevel} />
            <Field label="Ausbaustandard" value={hf.fitOut} />
            <Field label="Parkplätze" value={hf.parking} />
            <Field label="ÖV-Score" value={hf.publicTransportScore} />
            <Field label="Deckenhöhe (m)" value={hf.ceilingHeightM} />
            <Field label="Laderampen" value={hf.loadingDocksCount} />
            <Field label="Stromanschluss (kVA)" value={hf.powerSupplyKva} />
            <Field label="Serverraum" value={hf.hasServerRoom} />
            <Field label="Barrierefrei" value={hf.isBarrierFree} />
          </FieldGrid>
        </>
      )}
    </Box>
  )
}

function SoftFactorsPanel({ p }: { p: Property }) {
  const sf = p.softFactors
  if (!sf) {
    return <Typography variant="body2" color="text.secondary">Keine Soft Factors vorhanden.</Typography>
  }
  const prestige = sf.prestigeScore ?? sf.prestige
  const visibility = sf.visibilityScore
  const footfall = sf.footfallScore
  const commuter = sf.commuterAccessScore ?? sf.accessibility
  const talent = sf.talentAccessScore ?? sf.talentAccess
  const esg = sf.esgScore
  const flex = sf.flexibilityScore
  const expansion = sf.expansionPotentialScore
  const tax = sf.taxEnvironmentScore

  return (
    <Box>
      <SectionTitle title="Weiche Faktoren" />
      <ScoreRow label="Prestige / Lage" value={prestige} />
      <ScoreRow label="Sichtbarkeit" value={visibility} />
      <ScoreRow label="Passantenfrequenz" value={footfall} />
      <ScoreRow label="Pendlerzugang" value={commuter} />
      <ScoreRow label="Talentpool-Zugang" value={talent} />
      <ScoreRow label="ESG-Score" value={esg} />
      <ScoreRow label="Flexibilität" value={flex} />
      <ScoreRow label="Expansionspotenzial" value={expansion} />
      <ScoreRow label="Steuerumfeld" value={tax} />
      {sf.parkingSpots !== undefined && (
        <Field label="Parkplätze" value={sf.parkingSpots} />
      )}
      {sf.publicTransportMinutes !== undefined && (
        <Field label="ÖV-Erreichbarkeit (Min.)" value={sf.publicTransportMinutes} />
      )}
      {sf.infrastructureNotes && (
        <Field label="Infrastruktur-Notizen" value={sf.infrastructureNotes} />
      )}
    </Box>
  )
}

function MatchabilityPanel({ matches }: { matches: Match[] }) {
  if (matches.length === 0) {
    return (
      <Typography variant="body2" color="text.secondary">
        Keine Matches für dieses Objekt vorhanden.
      </Typography>
    )
  }
  return (
    <Box>
      <SectionTitle title={`${matches.length} Matches gefunden`} />
      {matches.map(m => (
        <Box key={m.id} sx={{ p: 1.5, border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 1.5 }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
            <Typography variant="body2" sx={{ fontWeight: 600 }}>Bedarf: {m.needId}</Typography>
            <Chip
              label={`Score ${m.matchScore}`}
              size="small"
              sx={{
                fontWeight: 700,
                bgcolor: m.matchScore >= 80 ? '#1a7a4a' : m.matchScore >= 60 ? '#d97706' : '#c0392b',
                color: 'white',
              }}
            />
          </Box>
          {m.positiveFactors?.slice(0, 3).map((f, i) => (
            <Typography key={i} variant="caption" sx={{ display: 'block', color: '#1a7a4a' }}>✓ {f.explanation ?? f.criterion}</Typography>
          ))}
          {m.missingData && m.missingData.length > 0 && (
            <Typography variant="caption" sx={{ color: 'warning.main', display: 'block', mt: 0.5 }}>
              ⚠ {m.missingData.length} fehlende Datenfelder
            </Typography>
          )}
        </Box>
      ))}
    </Box>
  )
}


function SignalsPanel({ signals }: { signals: FutureSignal[] }) {
  if (signals.length === 0) {
    return <Typography variant="body2" color="text.secondary">Keine Zukunftssignale für dieses Objekt.</Typography>
  }
  return (
    <Box>
      <SectionTitle title={`${signals.length} Zukunftssignale`} />
      {signals.map(s => (
        <Box key={s.id} sx={{ p: 1.5, border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 1.5 }}>
          <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.25 }}>
            {s.title ?? s.signalType}
          </Typography>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
            {s.locationHint} · Konfidenz {Math.round(s.confidenceScore * 100)}% · {s.timeHorizonMonths} Monate
          </Typography>
          {s.disclaimer && (
            <Typography variant="caption" sx={{ color: 'text.disabled', display: 'block', mt: 0.5 }}>
              {s.disclaimer}
            </Typography>
          )}
        </Box>
      ))}
    </Box>
  )
}

// ── Main component ────────────────────────────────────────────────────────────

const TABS = ['Übersicht', 'Verhandlung & Markt', 'Hard Facts', 'Soft Factors', 'Matchability', 'Datenqualität', 'Quelle', 'Signale'] as const

export function PropertyDetailView({ propertyId, onClose }: PropertyDetailViewProps) {
  const [tab, setTab] = useState(0)
  const { data: property, isLoading } = usePropertyById(propertyId)
  const { data: matches = [] } = usePropertyMatches(propertyId)
  const { data: signals = [] } = usePropertySignals(propertyId)

  if (isLoading) return <PropertyDetailSkeleton />
  if (!property) {
    return (
      <Box sx={{ p: 3 }}>
        <Alert severity="error">Objekt nicht gefunden.</Alert>
      </Box>
    )
  }

  const isLowQuality = property.dataQuality.score < 0.6
  const hasCriticalGaps = property.dataQuality.missingCriticalFields.length > 0

  return (
    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Header */}
      <Box sx={{ p: 2.5, borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
            <Chip label={getAssetTypeLabel(property.assetType)} size="small" sx={{ bgcolor: getAssetTypeColor(property.assetType), color: 'white', fontSize: '0.68rem' }} />
            <Chip label={getResultTypeLabel(property.resultType)} size="small" sx={{ bgcolor: getResultTypeColor(property.resultType), color: 'white', fontSize: '0.68rem' }} />
            <Chip label={getAvailabilityLabel(property.availabilityStatus)} size="small" color={getAvailabilityChipColor(property.availabilityStatus)} variant="outlined" />
          </Box>
          {onClose && (
            <IconButton size="small" onClick={onClose} sx={{ flexShrink: 0, ml: 1 }}>
              <X size={16} />
            </IconButton>
          )}
        </Box>
        <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3, mb: 0.25 }}>
          {property.title}
        </Typography>
        <Typography variant="caption" color="text.secondary">
          {property.address.street} {property.address.houseNumber}, {property.address.postalCode} {property.address.city}
        </Typography>

        {isLowQuality && (
          <Alert severity="warning" sx={{ mt: 1, py: 0.25, fontSize: '0.75rem' }}>
            Niedrige Datenqualität ({Math.round(property.dataQuality.score * 100)}%) — Angaben können unvollständig sein.
          </Alert>
        )}
        {hasCriticalGaps && !isLowQuality && (
          <Alert severity="warning" sx={{ mt: 1, py: 0.25, fontSize: '0.75rem' }}>
            Kritische Felder fehlen: {property.dataQuality.missingCriticalFields.slice(0, 3).join(', ')}
          </Alert>
        )}
      </Box>

      {/* Tabs */}
      <Tabs
        value={tab}
        onChange={(_, v) => setTab(v)}
        variant="scrollable"
        scrollButtons="auto"
        sx={{
          borderBottom: '1px solid #e2e8f0',
          flexShrink: 0,
          '& .MuiTab-root': { textTransform: 'none', fontSize: '0.8rem', minWidth: 'auto', px: 1.5 },
        }}
      >
        {TABS.map(label => (
          <Tab key={label} label={label} />
        ))}
      </Tabs>

      {/* Tab content */}
      <Box sx={{ flex: 1, overflowY: 'auto', p: 2.5 }}>
        {tab === 0 && <OverviewPanel p={property} />}
        {tab === 1 && <NegotiationInsightsPanel property={property} />}
        {tab === 2 && <HardFactsPanel p={property} />}
        {tab === 3 && <SoftFactorsPanel p={property} />}
        {tab === 4 && <MatchabilityPanel matches={matches} />}
        {tab === 5 && <DQPanel property={property} />}
        {tab === 6 && <ProvenancePanel property={property} />}
        {tab === 7 && <SignalsPanel signals={signals} />}
      </Box>
    </Box>
  )
}
