import type { ReactNode } from 'react'
import {
  Alert,
  Box,
  Button,
  Card,
  Chip,
  LinearProgress,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material'
import { Trophy, AlertTriangle, AlertOctagon, Zap, CheckCircle2, XCircle } from 'lucide-react'
import { useNavigate } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { useCompareStore } from '../../stores/compareStore'
import { aiService } from '../../services/aiService'
import {
  CompareEmptyState,
  CompareColumnHeader,
  CompareCell,
  MissingDataCell,
  AICompareSummary,
} from '../../components/compare'
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
import type { VerifiedPortfolioResult, ExternalMarketResult, FutureAvailabilityResult } from '../../domain/unifiedResult'

// ── Helpers ───────────────────────────────────────────────────────────────────

const HARD_CRITERIA = new Set(['area', 'location', 'budget', 'timing'])
const SCORE_COLOR = (s: number) => s >= 78 ? '#1a7a4a' : s >= 52 ? '#d97706' : '#c0392b'

function getProp(item: UnifiedMatchResult) {
  return item.resultType !== 'FUTURE_AVAILABILITY'
    ? (item as VerifiedPortfolioResult | ExternalMarketResult).property
    : null
}

function getSig(item: UnifiedMatchResult) {
  return item.resultType === 'FUTURE_AVAILABILITY'
    ? (item as FutureAvailabilityResult).signal
    : null
}

const 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' },
}

const RISK_LEVEL_ORDER: Record<string, number> = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 }

// ── Row label cell ────────────────────────────────────────────────────────────

const LABEL_SX = {
  position: 'sticky' as const,
  left: 0,
  bgcolor: 'white',
  zIndex: 1,
  width: 200,
  minWidth: 200,
  color: '#64748b',
  fontSize: 13,
  fontWeight: 600,
  borderRight: '1px solid #e2e8f0',
  verticalAlign: 'top',
  py: 1.5,
}

const DATA_SX = {
  borderLeft: '1px solid #f1f5f9',
  minWidth: 220,
  verticalAlign: 'top',
  py: 1.5,
}

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

export default function Compare() {
  const navigate = useNavigate()
  const { compareItems, removeFromCompare, clearCompare } = useCompareStore()

  const { data: aiSummary, isLoading: aiLoading } = useQuery({
    queryKey: ['ai-compare', compareItems.map(i => i.matchId)],
    queryFn: () => aiService.summarizeComparison(compareItems),
    enabled: compareItems.length >= 2,
    select: r => r.data,
    staleTime: Infinity,
  })

  if (compareItems.length === 0) {
    return (
      <Box>
        <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2 }}>
          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
        </Box>
        <CompareEmptyState />
      </Box>
    )
  }

  // ── Highlight indices ──────────────────────────────────────────────────────

  const bestScoreIdx = compareItems.reduce(
    (best, item, i) => item.matchScore > compareItems[best].matchScore ? i : best, 0
  )
  const worstConfIdx = compareItems.reduce(
    (worst, item, i) => item.match.confidenceLevel < compareItems[worst].match.confidenceLevel ? i : worst, 0
  )
  const dqScores = compareItems.map(item => getProp(item)?.dataQuality.score ?? 1)
  const worstDQIdx = dqScores.indexOf(Math.min(...dqScores))

  const missingCriticalCounts = compareItems.map(
    item => item.match.missingData?.filter(m => m.importance === 'CRITICAL').length ?? 0
  )
  const maxMissingCritical = Math.max(...missingCriticalCounts)

  // ── Shared render helpers ─────────────────────────────────────────────────

  function row(label: string, cells: ReactNode[]) {
    return (
      <TableRow hover key={label}>
        <TableCell sx={LABEL_SX}>{label}</TableCell>
        {cells.map((cell, i) => (
          <TableCell key={i} sx={DATA_SX}>{cell}</TableCell>
        ))}
      </TableRow>
    )
  }

  function scoreBar(value: number, label?: string) {
    const color = value >= 0.8 ? '#1a7a4a' : value >= 0.6 ? '#d97706' : '#c0392b'
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Box sx={{ width: 70 }}>
          <LinearProgress variant="determinate" value={value * 100}
            sx={{ height: 6, borderRadius: 3, '& .MuiLinearProgress-bar': { bgcolor: color } }} />
        </Box>
        <Typography variant="caption" sx={{ color }}>{label ?? `${Math.round(value * 100)}%`}</Typography>
      </Box>
    )
  }

  return (
    <Box>
      {/* Page header */}
      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
          <Chip label={`${compareItems.length} Ergebnisse`} size="small" />
        </Box>
        <Button variant="outlined" size="small" color="error" onClick={clearCompare}>
          Vergleich leeren
        </Button>
      </Box>

      {/* Mobile notice */}
      <Box sx={{ display: { xs: 'block', md: 'none' }, p: 3 }}>
        <Alert severity="info">
          Die Vergleichsansicht ist für Desktop optimiert. Für beste Erfahrung auf einem grösseren Bildschirm öffnen.
        </Alert>
      </Box>

      {/* Desktop table */}
      <Box sx={{ display: { xs: 'none', md: 'block' }, px: 3, py: 3 }}>

        {/* AI Summary */}
        <AICompareSummary summary={aiSummary} isLoading={aiLoading && compareItems.length >= 2} />

        <Card sx={{ overflowX: 'auto' }}>
          <Table sx={{ tableLayout: 'auto' }}>

            {/* Column headers */}
            <TableHead>
              <TableRow sx={{ bgcolor: '#f8fafc' }}>
                <TableCell sx={{ ...LABEL_SX, bgcolor: '#f8fafc', zIndex: 2, fontSize: 11, color: '#64748b', fontWeight: 600 }}>
                  Kriterium
                </TableCell>
                {compareItems.map(item => (
                  <TableCell key={item.matchId} sx={{ ...DATA_SX, bgcolor: '#f8fafc', verticalAlign: 'top' }}>
                    <CompareColumnHeader item={item} onRemove={() => removeFromCompare(item.matchId)} />
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>

            <TableBody>

              {/* 1. Result Type */}
              {row('1. Result-Typ', compareItems.map(item => {
                const m = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
                return <Chip label={m.label} size="small" sx={{ bgcolor: m.color, color: 'white', fontWeight: 600, fontSize: 11 }} />
              }))}

              {/* 2. Source / Provenance */}
              {row('2. Quelle / Provenienz', compareItems.map(item => {
                const prop = getProp(item)
                const sig  = getSig(item)
                const label = prop?.sourceLabel ?? sig?.source?.type ?? null
                return label
                  ? <Typography variant="body2">{label}</Typography>
                  : <MissingDataCell reason="Quellenangabe fehlt — Datenverlässlichkeit unklar" />
              }))}

              {/* 3. Match Score */}
              {row('3. Match Score', compareItems.map((item, idx) => (
                <CompareCell
                  highlight={idx === bestScoreIdx ? 'best' : 'none'}
                  icon={idx === bestScoreIdx ? <Trophy size={14} color="#1a7a4a" /> : undefined}
                  iconTooltip="Höchster Match Score"
                >
                  <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
                    <Typography variant="h5" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
                      {item.matchScore}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">/100</Typography>
                  </Box>
                </CompareCell>
              )))}

              {/* 4. Confidence Score */}
              {row('4. Konfidenz', compareItems.map((item, idx) => (
                <CompareCell
                  highlight={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? 'worst' : 'none'}
                  icon={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
                  iconTooltip="Niedrigste Konfidenz"
                >
                  {scoreBar(item.match.confidenceLevel)}
                </CompareCell>
              )))}

              {/* 5. Data Quality Score */}
              {row('5. Datenqualität', compareItems.map((item, idx) => {
                const prop = getProp(item)
                const dq = prop?.dataQuality.score ?? null
                if (dq === null) return <MissingDataCell reason="Keine Datenqualitätsinformation verfügbar" />
                return (
                  <CompareCell
                    highlight={idx === worstDQIdx && dq < 0.6 ? 'worst' : 'none'}
                    icon={idx === worstDQIdx && dq < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
                    iconTooltip="Niedrigste Datenqualität"
                  >
                    {scoreBar(dq)}
                  </CompareCell>
                )
              }))}

              {/* 6. Asset Type */}
              {row('6. Nutzungstyp', compareItems.map(item => {
                const prop = getProp(item)
                const label = prop?.assetType ?? null
                return label
                  ? <Chip label={label} size="small" variant="outlined" />
                  : <MissingDataCell />
              }))}

              {/* 7. Location */}
              {row('7. Standort', compareItems.map(item => {
                const prop = getProp(item)
                const sig  = getSig(item)
                const city = prop?.location?.city ?? sig?.locationHint ?? null
                const district = prop?.location?.district
                return city
                  ? <Typography variant="body2">{city}{district ? `, ${district}` : ''}</Typography>
                  : <MissingDataCell />
              }))}

              {/* 8. Area */}
              {row('8. Fläche', compareItems.map(item => {
                const prop = getProp(item)
                const sig  = getSig(item)
                const area = prop?.areaSqm ?? sig?.areaSqmEstimate ?? null
                return area !== null
                  ? <Typography variant="body2">{area.toLocaleString('de-CH')} m²{sig ? ' (Schätzung)' : ''}</Typography>
                  : <MissingDataCell />
              }))}

              {/* 9. Rent / Budget Fit */}
              {row('9. Miete / Budget', compareItems.map(item => {
                const prop = getProp(item)
                if (!prop) return <MissingDataCell reason="Mietpreis nur für bestätigte Objekte verfügbar" />
                return (
                  <Box>
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
                      CHF {prop.rentPricePerSqm}/m²
                    </Typography>
                    {prop.totalRentMonthly && (
                      <Typography variant="caption" color="text.secondary">
                        {prop.totalRentMonthly.toLocaleString('de-CH')} CHF/Monat
                      </Typography>
                    )}
                  </Box>
                )
              }))}

              {/* 10. Availability / Time Horizon */}
              {row('10. Verfügbarkeit', compareItems.map(item => {
                const prop = getProp(item)
                const sig  = getSig(item)
                if (prop) return <Typography variant="body2">{prop.availabilityDate}</Typography>
                if (sig) return (
                  <CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Signal — keine bestätigte Verfügbarkeit">
                    <Typography variant="body2">~{sig.timeHorizonMonths} Monate</Typography>
                    <Typography variant="caption" sx={{ color: '#7c3aed' }}>
                      {Math.round(sig.probability * 100)}% Wahrscheinlichkeit
                    </Typography>
                  </CompareCell>
                )
                return <MissingDataCell />
              }))}

              {/* 11. Hard Criteria Fit */}
              {row('11. Hardkriterien', compareItems.map(item => {
                const hardMatches = item.match.positiveFactors.filter(f => HARD_CRITERIA.has(f.criterion))
                const total = 4
                const count = hardMatches.length
                const color = count >= 3 ? '#1a7a4a' : count >= 2 ? '#d97706' : '#c0392b'
                return (
                  <Box>
                    <Typography variant="body2" sx={{ fontWeight: 700, color }}>
                      {count}/{total} erfüllt
                    </Typography>
                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
                      {hardMatches.map(f => (
                        <Chip key={f.criterion} label={f.criterion} size="small"
                          icon={<CheckCircle2 size={10} />}
                          sx={{ fontSize: 10, bgcolor: '#f0fdf4', color: '#166534', '& .MuiChip-icon': { color: '#1a7a4a' } }} />
                      ))}
                    </Box>
                  </Box>
                )
              }))}

              {/* 12. Top Soft Factors */}
              {row('12. Soft Factors', compareItems.map(item => {
                const softFactors = item.match.positiveFactors
                  .filter(f => !HARD_CRITERIA.has(f.criterion))
                  .slice(0, 3)
                if (softFactors.length === 0) return <MissingDataCell />
                return (
                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                    {softFactors.map(f => (
                      <Chip key={f.criterion} label={f.criterion} size="small"
                        sx={{ fontSize: 10, bgcolor: '#eff6ff', color: '#1e40af' }} />
                    ))}
                  </Box>
                )
              }))}

              {/* 13. Main Strengths */}
              {row('13. Stärken', compareItems.map(item => {
                const top = item.match.positiveFactors.slice(0, 2)
                if (top.length === 0) return <MissingDataCell />
                return (
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                    {top.map((f, i) => (
                      <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
                        <CheckCircle2 size={13} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
                        <Typography variant="caption" sx={{ lineHeight: 1.4 }}>{f.explanation}</Typography>
                      </Box>
                    ))}
                  </Box>
                )
              }))}

              {/* 14. Main Tradeoffs */}
              {row('14. Abwägungen', compareItems.map(item => {
                const tradeoffs = item.match.tradeoffs?.slice(0, 2) ?? []
                if (tradeoffs.length === 0) return (
                  <Typography variant="body2" color="text.secondary">Keine signifikanten Abwägungen</Typography>
                )
                return (
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                    {tradeoffs.map((t, i) => (
                      <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
                        <AlertTriangle size={13} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
                        <Typography variant="caption" sx={{ lineHeight: 1.4 }}>{t.criterion}: {t.concern}</Typography>
                      </Box>
                    ))}
                  </Box>
                )
              }))}

              {/* 15. Main Risks */}
              {row('15. Risiken', compareItems.map(item => {
                const risks = [...(item.match.risks ?? [])].sort(
                  (a, b) => (RISK_LEVEL_ORDER[a.level] ?? 4) - (RISK_LEVEL_ORDER[b.level] ?? 4)
                ).slice(0, 2)
                if (risks.length === 0) return (
                  <Typography variant="body2" color="text.secondary">Keine identifizierten Risiken</Typography>
                )
                return (
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                    {risks.map((r, i) => (
                      <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
                        <XCircle size={13} color={r.level === 'CRITICAL' || r.level === 'HIGH' ? '#c0392b' : '#d97706'} style={{ flexShrink: 0, marginTop: 2 }} />
                        <Typography variant="caption" sx={{ lineHeight: 1.4 }}>{r.description}</Typography>
                      </Box>
                    ))}
                  </Box>
                )
              }))}

              {/* 16. Missing Data */}
              {row('16. Fehlende Daten', compareItems.map((item, idx) => {
                const total    = item.match.missingData?.length ?? 0
                const critical = missingCriticalCounts[idx]
                if (total === 0) return (
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <CheckCircle2 size={14} color="#1a7a4a" />
                    <Typography variant="body2" sx={{ color: '#1a7a4a' }}>Vollständig</Typography>
                  </Box>
                )
                return (
                  <CompareCell
                    highlight={critical > 0 && critical === maxMissingCritical ? 'critical' : critical > 0 ? 'worst' : 'none'}
                    icon={critical > 0 ? <AlertOctagon size={14} color="#c0392b" /> : <AlertTriangle size={14} color="#d97706" />}
                    iconTooltip={critical > 0 ? 'Kritische Pflichtfelder fehlen' : 'Optionale Felder fehlen'}
                  >
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{total} fehlend</Typography>
                    {critical > 0 && (
                      <Typography variant="caption" color="error">{critical} kritisch</Typography>
                    )}
                  </CompareCell>
                )
              }))}

              {/* 17. Future Availability Context */}
              {row('17. Zukunftskontext', compareItems.map(item => {
                const sig = getSig(item)
                if (!sig) return (
                  <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>Nicht anwendbar</Typography>
                )
                return (
                  <CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Zukunftssignal">
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
                      <Typography variant="caption" sx={{ fontWeight: 600, color: '#7c3aed' }}>
                        {Math.round(sig.probability * 100)}% Wahrscheinlichkeit
                      </Typography>
                      <Typography variant="caption" color="text.secondary">
                        Sensitivität: {sig.sensitivityLevel}
                      </Typography>
                      <Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                        {sig.disclaimer}
                      </Typography>
                    </Box>
                  </CompareCell>
                )
              }))}

              {/* 18. Recommended Next Action */}
              {row('18. Nächste Aktion', compareItems.map(item => {
                const action = item.match.nextBestActions?.[0]
                if (!action) return <MissingDataCell />
                return (
                  <Box>
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{action.label}</Typography>
                    {action.description && (
                      <Typography variant="caption" color="text.secondary">{action.description}</Typography>
                    )}
                  </Box>
                )
              }))}

            </TableBody>
          </Table>
        </Card>

        {/* Add more prompt */}
        {compareItems.length < 4 && (
          <Card sx={{ p: 2.5, mt: 2, border: '2px dashed #e2e8f0', boxShadow: 'none' }}>
            <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
              <Box>
                <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Weiteres Ergebnis hinzufügen</Typography>
                <Typography variant="caption" color="text.secondary">
                  Bis zu {4 - compareItems.length} weitere{4 - compareItems.length === 1 ? 's' : ''} Ergebnis{4 - compareItems.length === 1 ? '' : 'se'} möglich
                </Typography>
              </Box>
              <Button variant="outlined" size="small" onClick={() => navigate('/demand/results')}>
                Zur Suche
              </Button>
            </Stack>
          </Card>
        )}
      </Box>
    </Box>
  )
}