import {
  Box,
  Chip,
  CircularProgress,
  Divider,
  Paper,
  Skeleton,
  Typography,
} from '@mui/material'
import {
  AlertCircle,
  BarChart2,
  Briefcase,
  Building2,
  CheckCircle2,
  FileText,
  Newspaper,
  Target,
  TrendingUp,
  Users,
} from 'lucide-react'
import { useNavigate } from 'react-router'
import { useMarketLeads } from '../../hooks/useMarketLeads'
import { DecisionContextPanel } from '../../components/ui'
import type { MarketLead } from '../../hooks/useMarketLeads'
import type { Property } from '../../domain/property'

// ── Source meta ──────────────────────────────────────────────────────────────

const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
  JOB_POSTING:    { label: 'Stelleninserate', icon: <Briefcase size={12} /> },
  PRESS:          { label: 'Pressebericht',   icon: <Newspaper size={12} /> },
  COMPANY_REPORT: { label: 'Geschäftsbericht',icon: <FileText size={12} /> },
  MARKET_DATA:    { label: 'Marktdaten',      icon: <BarChart2 size={12} /> },
}

const QUALITY_META: Record<string, { label: string; color: string }> = {
  HIGH:   { label: 'Hohe Signalqualität',    color: '#1a7a4a' },
  MEDIUM: { label: 'Mittlere Signalqualität', color: '#d97706' },
  LOW:    { label: 'Niedrige Signalqualität', color: '#c0392b' },
}

function signalQuality(probability: number): 'HIGH' | 'MEDIUM' | 'LOW' {
  return probability >= 0.70 ? 'HIGH' : probability >= 0.50 ? 'MEDIUM' : 'LOW'
}

// ── Property match chip ───────────────────────────────────────────────────────

function PropertyMatchRow({ p }: { p: Property }) {
  const navigate = useNavigate()
  return (
    <Box
      onClick={() => navigate('/supply/properties')}
      sx={{
        display: 'flex', alignItems: 'center', gap: 1,
        px: 1.25, py: 0.75, borderRadius: 1,
        bgcolor: '#f0fdf4', border: '1px solid #bbf7d0',
        cursor: 'pointer', '&:hover': { bgcolor: '#dcfce7' },
      }}
    >
      <Building2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} />
      <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {p.title}
      </Typography>
      <Typography variant="caption" sx={{ color: '#1a7a4a', flexShrink: 0 }}>
        {p.areaSqm.toLocaleString('de-CH')} m²
      </Typography>
    </Box>
  )
}

// ── Lead card ─────────────────────────────────────────────────────────────────

function LeadCard({ lead }: { lead: MarketLead }) {
  const { signal, matchingProperties } = lead
  const probPct = Math.round(signal.probability * 100)
  const qual = signalQuality(signal.probability)
  const qualMeta = QUALITY_META[qual]
  const sourceMeta = SOURCE_META[signal.source.type] ?? null

  return (
    <Paper
      sx={{
        p: 2.5, mb: 2,
        borderLeft: '3px solid #1d4ed8',
        position: 'relative',
      }}
    >
      {/* Header */}
      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 1.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.25 }}>
          <Box sx={{ mt: 0.25, flexShrink: 0 }}>
            <Target size={18} color="#1d4ed8" />
          </Box>
          <Box>
            <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.25, mb: 0.25 }}>
              {signal.companyName ?? signal.locationHint}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {signal.title}
            </Typography>
          </Box>
        </Box>
        <Chip
          label="Market Signal"
          size="small"
          sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', fontWeight: 700, fontSize: '0.68rem', flexShrink: 0 }}
        />
      </Box>

      {/* Key facts strip */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 1.75 }}>
        {signal.areaSqmEstimate && (
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>Flächenbedarf</Typography>
            <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.areaSqmEstimate.toLocaleString('de-CH')} m²</Typography>
          </Box>
        )}
        <Box>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>Zeithorizont</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.timeHorizonMonths} Monate</Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>Wahrscheinlichkeit</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700, color: qualMeta.color }}>{probPct}%</Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>Standort</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700 }}>{signal.locationHint}</Typography>
        </Box>
        {sourceMeta && (
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>Quelle</Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              {sourceMeta.icon}
              <Typography variant="body2" sx={{ fontWeight: 600 }}>{sourceMeta.label}</Typography>
            </Box>
          </Box>
        )}
      </Box>

      <Divider sx={{ mb: 1.75 }} />

      {/* Market indicators */}
      {signal.marketIndicators && signal.marketIndicators.length > 0 && (
        <Box sx={{ mb: 1.75 }}>
          <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}>
            Erkannte Nachfragesignale
          </Typography>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
            {signal.marketIndicators.map((ind, i) => (
              <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
                <TrendingUp size={11} color="#1d4ed8" style={{ marginTop: 3, flexShrink: 0 }} />
                <Typography variant="body2" sx={{ color: '#374151', lineHeight: 1.4 }}>{ind}</Typography>
              </Box>
            ))}
          </Box>
        </Box>
      )}

      {/* Confirmed / unconfirmed facts */}
      {((signal.confirmedFacts?.length ?? 0) > 0 || (signal.unconfirmedFacts?.length ?? 0) > 0) && (
        <Box sx={{ mb: 1.75 }}>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.4 }}>
            {(signal.confirmedFacts ?? []).map((f, i) => (
              <Box key={`c-${i}`} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
                <CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} />
                <Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 500 }}>{f}</Typography>
              </Box>
            ))}
            {(signal.unconfirmedFacts ?? []).map((f, i) => (
              <Box key={`u-${i}`} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
                <AlertCircle size={12} color="#d97706" style={{ flexShrink: 0 }} />
                <Typography variant="caption" sx={{ color: '#d97706', fontWeight: 500 }}>{f}</Typography>
              </Box>
            ))}
          </Box>
        </Box>
      )}

      <Divider sx={{ mb: 1.5 }} />

      {/* Portfolio matches */}
      <Box>
        <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}>
          Passende Objekte im Portfolio ({matchingProperties.length})
        </Typography>
        {matchingProperties.length === 0 ? (
          <Typography variant="caption" color="text.disabled" sx={{ fontStyle: 'italic' }}>
            Kein passendes Portfolioobjekt gefunden — manuell prüfen empfohlen
          </Typography>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
            {matchingProperties.slice(0, 3).map(p => (
              <PropertyMatchRow key={p.id} p={p} />
            ))}
            {matchingProperties.length > 3 && (
              <Typography variant="caption" color="text.secondary" sx={{ pl: 0.5 }}>
                +{matchingProperties.length - 3} weitere Objekte
              </Typography>
            )}
          </Box>
        )}
      </Box>

      {/* Disclaimer */}
      <Typography variant="caption" color="text.disabled" sx={{ display: 'block', mt: 1.5, pt: 1.25, borderTop: '1px solid #f1f5f9', lineHeight: 1.4 }}>
        {signal.disclaimer}
      </Typography>
    </Paper>
  )
}

// ── Loading skeleton ──────────────────────────────────────────────────────────

function LeadSkeleton() {
  return (
    <Paper sx={{ p: 2.5, mb: 2, borderLeft: '3px solid #e2e8f0' }}>
      <Skeleton variant="text" width="60%" height={24} sx={{ mb: 0.5 }} />
      <Skeleton variant="text" width="80%" height={18} sx={{ mb: 2 }} />
      <Skeleton variant="rectangular" height={48} sx={{ borderRadius: 1, mb: 2 }} />
      <Skeleton variant="rectangular" height={64} sx={{ borderRadius: 1 }} />
    </Paper>
  )
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function MarketLeads() {
  const { data: leads, isLoading } = useMarketLeads()

  const leadsWithMatch = leads.filter(l => l.matchingProperties.length > 0)

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>

      {/* Header */}
      <Box sx={{ px: 3, py: 2, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
          <Users size={20} color="#1d4ed8" />
          <Box>
            <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>Markt-Leads</Typography>
            <Typography variant="caption" color="text.secondary">
              Erkannte Unternehmen mit aktivem Flächenbedarf — potenzielle Mieter für Ihr Portfolio
            </Typography>
          </Box>
          {!isLoading && (
            <Chip
              label={`${leads.length} aktive Leads`}
              size="small"
              sx={{ ml: 'auto', bgcolor: '#eff6ff', color: '#1d4ed8', fontWeight: 700 }}
            />
          )}
        </Box>
      </Box>

      <Box sx={{ flex: 1, overflowY: 'auto', px: 3, py: 3 }}>

        {/* Decision context */}
        {!isLoading && leads.length > 0 && (
          <DecisionContextPanel
            decision="Welche Unternehmen könnten als Nachmieter für Ihre Objekte in Frage kommen?"
            context={`${leads.length} erkannte Nachfragesignale · ${leadsWithMatch.length} mit passendem Portfolioobjekt`}
            metrics={[
              { label: 'aktive Markt-Leads', value: leads.length, severity: 'positive' },
              ...(leadsWithMatch.length > 0
                ? [{ label: 'mit passendem Objekt', value: leadsWithMatch.length, severity: 'positive' as const }]
                : []),
            ]}
            risks={leads.length - leadsWithMatch.length > 0
              ? [`${leads.length - leadsWithMatch.length} Leads ohne direkten Portfolio-Match — Leerstandsanalyse empfohlen`]
              : []
            }
            actions={[]}
          />
        )}

        {isLoading ? (
          <>
            <LeadSkeleton />
            <LeadSkeleton />
            <LeadSkeleton />
          </>
        ) : leads.length === 0 ? (
          <Paper sx={{ p: 4, textAlign: 'center' }}>
            <CircularProgress size={24} sx={{ mb: 2, color: '#94a3b8' }} />
            <Typography variant="body1" color="text.secondary">Keine aktiven Markt-Leads gefunden.</Typography>
            <Typography variant="caption" color="text.disabled">Signale werden laufend aus öffentlichen Quellen erkannt.</Typography>
          </Paper>
        ) : (
          leads.map(lead => <LeadCard key={lead.signal.id} lead={lead} />)
        )}
      </Box>
    </Box>
  )
}