import { Box, Button, Chip, CircularProgress, Divider, Paper, Typography } from '@mui/material'
import { ArrowLeft, Bookmark, Columns2 } from 'lucide-react'
import { useNavigate, useParams } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { useMatchDetail } from '../../hooks/useMatches'
import { propertyService } from '../../services/propertyService'
import { needService } from '../../services/needService'
import { futureSignalService } from '../../services/futureSignalService'
import { useCompareStore } from '../../stores/compareStore'
import { useShortlistStore } from '../../stores/shortlistStore'
import { AddToShortlistDialog } from '../../components/shortlist'
import { MatchReasonList } from '../../components/match-card/MatchReasonList'
import { MatchScoreDisplay } from '../../components/match-card/MatchScoreDisplay'
import { PropertyMap } from '../../components/shared'
import { getCityIntelligence } from '../../lib/locationIntelligence'
import {
  LocationIntelligencePanel,
  ExecutiveSummaryPanel,
  NeedAlignmentPanel,
  ScoreBreakdownPanel,
  TradeoffPanel,
  RiskPanel,
  MissingInformationPanel,
  SourceProvenancePanel,
  FutureAvailabilityContextPanel,
  NextActionsPanel,
} from '../../components/match-detail'
import type { MatchCardReason } from '../../components/match-card/MatchCardViewModel'

const HARD_CRITERIA = new Set(['area', 'location', 'budget', 'timing'])

const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
  EXTERNAL_MARKET:     { label: 'Marktinserat',       color: '#d97706' },
  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
}

function buildReasons(match: NonNullable<ReturnType<typeof useMatchDetail>['data']>): MatchCardReason[] {
  return match.positiveFactors.slice(0, 3).map(f => ({
    type: (HARD_CRITERIA.has(f.criterion) ? 'HARD_FACT' : 'SOFT_FACTOR') as MatchCardReason['type'],
    label: f.criterion.charAt(0).toUpperCase() + f.criterion.slice(1),
    explanation: f.explanation,
    score: f.score,
  }))
}

function confColor(c: number) {
  return c >= 0.75 ? '#1a7a4a' : c >= 0.55 ? '#d97706' : '#c0392b'
}
function dqColor(q: number) {
  return q >= 0.80 ? '#1a7a4a' : q >= 0.60 ? '#d97706' : '#c0392b'
}

export default function MatchDetail() {
  const { matchId } = useParams<{ matchId: string }>()
  const navigate = useNavigate()
  const { addToCompare } = useCompareStore()
  const { openAddDialog } = useShortlistStore()

  const { data: match, isLoading } = useMatchDetail(matchId ?? '')
  const isFuture = match?.resultType === 'FUTURE_AVAILABILITY'

  const { data: property = null } = useQuery({
    queryKey: ['property', match?.propertyId],
    queryFn: () => propertyService.getById(match!.propertyId),
    enabled: !!match && !isFuture,
    select: r => r.data ?? null,
  })

  const { data: need = null } = useQuery({
    queryKey: ['need', match?.needId],
    queryFn: () => needService.getById(match!.needId),
    enabled: !!match?.needId,
    select: r => r.data ?? null,
  })

  const { data: signal = null } = useQuery({
    queryKey: ['signal', match?.resultId],
    queryFn: () => futureSignalService.getById(match!.resultId!),
    enabled: !!match && isFuture && !!match.resultId,
    select: r => r.data ?? null,
  })

  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
        <CircularProgress />
      </Box>
    )
  }

  if (!match) {
    return (
      <Box sx={{ px: 3, py: 4 }}>
        <Paper sx={{ p: 4, textAlign: 'center' }}>
          <Typography variant="h6" color="text.secondary">Match nicht gefunden</Typography>
        </Paper>
      </Box>
    )
  }

  const reasons = buildReasons(match)
  const rt = RESULT_TYPE_META[match.resultType ?? 'VERIFIED_PORTFOLIO'] ?? { label: '–', color: '#64748b' }

  const title = property?.title ?? signal?.companyName ?? signal?.locationHint ?? '–'
  const city = property?.location?.city
  const location = city
    ? `${city}${property?.location?.district ? `, ${property.location.district}` : ''}`
    : signal?.locationHint ?? '–'
  const dqScore = property?.dataQuality?.score ?? signal?.confidenceScore ?? 0.5
  const confPct = Math.round(match.confidenceLevel * 100)
  const dqPct = Math.round(dqScore * 100)

  // Tax calculator — only shown when AI evaluated taxEnvironment
  const allFactors = [...match.positiveFactors, ...(match.negativeFactors ?? [])]
  const hasTaxFactor = allFactors.some(f => f.criterion === 'taxEnvironment')
  const cityIntel = city ? getCityIntelligence(city) : null
  const taxCalculatorUrl = hasTaxFactor ? (cityIntel?.taxCalculatorUrl ?? undefined) : undefined

  const handleCompare = () => {
    if (match && !isFuture && property) {
      addToCompare({
        resultType: property.resultType === 'EXTERNAL_MARKET' ? 'EXTERNAL_MARKET' : 'VERIFIED_PORTFOLIO',
        matchId: match.id, needId: match.needId, matchScore: match.matchScore, match, property,
      })
    } else if (match && isFuture && signal) {
      addToCompare({
        resultType: 'FUTURE_AVAILABILITY',
        matchId: match.id, needId: match.needId, matchScore: match.matchScore, match, signal,
      })
    }
    navigate('/demand/compare')
  }

  const handleShortlist = () => {
    openAddDialog({
      resultId: match.id,
      resultType: match.resultType ?? 'VERIFIED_PORTFOLIO',
      title: property?.title ?? signal?.companyName ?? signal?.locationHint ?? match.id,
      matchScore: match.matchScore,
      confidenceScore: match.confidenceLevel,
      sourceLabel: property?.sourceLabel ?? match.resultType ?? 'VERIFIED_PORTFOLIO',
      addedBy: 'admin@ideal-sharing.ch',
      propertyId: property?.id,
    })
  }

  // Key facts for the strip below the hero
  const keyFacts = isFuture ? [
    { label: 'Flächenschätzung', value: signal?.areaSqmEstimate ? `~${signal.areaSqmEstimate.toLocaleString('de-CH')} m²` : '–' },
    { label: 'Zeithorizont', value: signal?.timeHorizonMonths ? `~${signal.timeHorizonMonths} Monate` : '–' },
    { label: 'Wahrscheinlichkeit', value: signal?.probability ? `${Math.round(signal.probability * 100)}%` : '–' },
  ] : [
    { label: 'Nutzfläche', value: property?.areaSqm ? `${property.areaSqm.toLocaleString('de-CH')} m²` : '–' },
    { label: 'Miete/m²/Jahr', value: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}` : '–' },
    { label: 'Verfügbar ab', value: property?.availabilityDate ?? '–' },
    { label: 'Nutzungsart', value: property?.assetType ?? '–' },
  ]

  return (
    <Box sx={{ bgcolor: '#f1f5f9', minHeight: '100vh' }}>
      <AddToShortlistDialog />

      {/* Sticky back nav */}
      <Box sx={{
        px: 3, py: 1.25, bgcolor: 'white', borderBottom: '1px solid #e2e8f0',
        position: 'sticky', top: 0, zIndex: 100,
        display: 'flex', alignItems: 'center', gap: 2,
      }}>
        <Button
          startIcon={<ArrowLeft size={15} />}
          onClick={() => navigate(-1)}
          size="small"
          sx={{ color: '#64748b', fontWeight: 500, textTransform: 'none' }}
        >
          Zurück zu Resultaten
        </Button>
        <Chip
          label={`Match ${match.id.slice(-3).toUpperCase()}`}
          size="small"
          sx={{ bgcolor: '#f1f5f9', color: '#475569', fontWeight: 700, letterSpacing: 0.5 }}
        />
        {isFuture && (
          <Chip label="Probabilistisches Signal" size="small" sx={{ bgcolor: '#faf5ff', color: '#7c3aed', fontWeight: 600 }} />
        )}
      </Box>

      {/* Hero: image first, map fallback */}
      {!isFuture && (
        property?.images?.[0] ? (
          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e2e8f0', 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}
          />
        ) : 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' }} />
                )}
                <Chip
                  label={`${confPct}% Konfidenz`}
                  size="small"
                  sx={{ bgcolor: confColor(match.confidenceLevel), color: 'white', fontSize: '0.72rem' }}
                />
                <Chip
                  label={`DQ ${dqPct}%`}
                  size="small"
                  sx={{ bgcolor: dqColor(dqScore), color: 'white', 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={handleShortlist}
                  sx={{ textTransform: 'none' }}
                >
                  Shortlist
                </Button>
                <Button
                  variant="contained"
                  size="small"
                  startIcon={<Columns2 size={14} />}
                  onClick={handleCompare}
                  sx={{ bgcolor: '#1e3a5f', '&: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>

      {/* Main content */}
      <Box sx={{ px: { xs: 1.5, sm: 3 }, py: { xs: 2, sm: 3 }, display: 'flex', flexDirection: { xs: 'column', lg: 'row' }, gap: 3, alignItems: 'flex-start' }}>

        {/* Main column */}
        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <ExecutiveSummaryPanel match={match} />
          <NeedAlignmentPanel match={match} need={need} property={property} />

          {reasons.length > 0 && (
            <Paper sx={{ p: 2.5 }}>
              <Typography variant="h6" sx={{ fontWeight: 700, mb: 1.5 }}>Warum dieses Match</Typography>
              <MatchReasonList reasons={reasons} maxItems={3} />
              {match.negativeFactors.length > 0 && (
                <Box sx={{ mt: 1.5 }}>
                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
                    Schwächere Faktoren
                  </Typography>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                    {match.negativeFactors.slice(0, 3).map((f, i) => (
                      <Typography key={i} variant="body2" color="text.secondary">
                        · {f.criterion}: {f.explanation}
                      </Typography>
                    ))}
                  </Box>
                </Box>
              )}
            </Paper>
          )}

          <LocationIntelligencePanel property={property} />

          {/* Map — always show when image was the hero above */}
          {!isFuture && property?.images?.[0] && property?.location?.coordinates && (
            <Paper sx={{ overflow: 'hidden', p: 0 }}>
              <Box sx={{ px: 2.5, pt: 2, pb: 1 }}>
                <Typography variant="h6" sx={{ fontWeight: 700 }}>Standort</Typography>
                <Typography variant="caption" color="text.secondary">
                  {property.address.street} {property.address.houseNumber}, {property.address.postalCode} {property.address.city}
                </Typography>
              </Box>
              <PropertyMap
                lat={property.location.coordinates.lat}
                lng={property.location.coordinates.lng}
                label={property.title}
                height={220}
              />
            </Paper>
          )}

          <TradeoffPanel match={match} />
          <RiskPanel match={match} />
          <MissingInformationPanel match={match} />
          <SourceProvenancePanel property={property} />
          {isFuture && <FutureAvailabilityContextPanel match={match} signal={signal} />}
        </Box>

        {/* Sidebar */}
        <Box sx={{ width: { xs: '100%', lg: 320 }, flexShrink: 0, position: { xs: 'static', lg: 'sticky' }, top: 64, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <ScoreBreakdownPanel match={match} taxCalculatorUrl={taxCalculatorUrl} />
          <NextActionsPanel
            match={match}
            onCompare={handleCompare}
            onShortlist={handleShortlist}
            onReview={() => {}}
            onReject={() => {}}
          />
        </Box>
      </Box>
    </Box>
  )
}
