import { Box, Button, Chip, Divider, Paper, Typography } from '@mui/material'
import {
  BarChart2,
  Briefcase,
  ExternalLink,
  FileCheck,
  FileText,
  Newspaper,
  ShieldCheck,
  User,
  Zap,
} from 'lucide-react'
import type { Match } from '../../domain/match'
import type { FutureSignal } from '../../domain/futureSignal'

const SIGNAL_TYPE_LABELS: Record<string, string> = {
  EXPANSION:            'Expansion',
  POSSIBLE_MOVE_OUT:    'Möglicher Auszug',
  CONSTRUCTION_PROJECT: 'Bauvorhaben',
  RESTRUCTURING:        'Restrukturierung',
  PROJECT_DEVELOPMENT:  'Projektentwicklung',
  SPACE_CONSOLIDATION:  'Flächenkonsolidierung',
  LEASE_EXPIRY:         'Vertragsende (Schattenmarkt)',
}

const SIGNAL_RELEVANCE_BRIDGE: Record<string, string> = {
  EXPANSION:           'Ein Unternehmen sucht neue Flächen — Ihr Angebot könnte gefragt sein.',
  POSSIBLE_MOVE_OUT:   'Dieses Unternehmen könnte seinen Standort aufgeben — die Fläche wird für Sie verfügbar.',
  CONSTRUCTION_PROJECT:'Ein Neubau entsteht — neue Flächen könnten zur Vermietung angeboten werden.',
  RESTRUCTURING:       'Restrukturierung deutet auf Flächenänderungen hin.',
  PROJECT_DEVELOPMENT: 'Projektentwicklung könnte neue Gewerbeflächen schaffen.',
  SPACE_CONSOLIDATION: 'Konsolidierung — Teilflächen könnten frei werden.',
  LEASE_EXPIRY:        'Die Verwaltung hat dieses Objekt für den Markt freigegeben — Vertragsende bekannt und bestätigt.',
}

const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
  JOB_POSTING:         { label: 'Stelleninserate',  icon: <Briefcase size={13} /> },
  PRESS:               { label: 'Pressebericht',    icon: <Newspaper size={13} /> },
  CONSTRUCTION_PERMIT: { label: 'Baubewilligung',   icon: <FileCheck size={13} /> },
  COMPANY_REPORT:      { label: 'Geschäftsbericht', icon: <FileText size={13} /> },
  MARKET_DATA:         { label: 'Marktdaten',       icon: <BarChart2 size={13} /> },
  MANUAL:              { label: 'Analyst',          icon: <User size={13} /> },
  LEASE_CONTRACT:      { label: 'Vertrag verifiziert (ERP)', icon: <ShieldCheck size={13} /> },
}

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

const SENSITIVITY_META: Record<string, { label: string; color: 'error' | 'warning' | 'default' }> = {
  CONFIDENTIAL: { label: 'Vertraulich', color: 'error' },
  INTERNAL:     { label: 'Intern',      color: 'warning' },
  PUBLIC:       { label: 'Öffentlich',  color: 'default' },
}

interface Props {
  match: Match
  signal: FutureSignal | null
}

export function FutureAvailabilityContextPanel({ match: _match, signal }: Props) {
  if (!signal) return null

  const sourceMeta = SOURCE_META[signal.source.type] ?? null
  const credMeta = CREDIBILITY_META[signal.source.credibility] ?? null
  const sensitiveMeta = SENSITIVITY_META[signal.sensitivityLevel] ?? SENSITIVITY_META.PUBLIC
  const relevanceBridge = signal.signalType ? (SIGNAL_RELEVANCE_BRIDGE[signal.signalType] ?? null) : null
  const probPct = Math.round(signal.probability * 100)
  const isVerifiedContract = signal.isVerified && signal.source.type === 'LEASE_CONTRACT'

  return (
    <Paper sx={{ p: 2.5, mb: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
        <Zap size={16} color="#7c3aed" />
        <Typography variant="h6" sx={{ fontWeight: 700 }}>Schattenmarkt-Signal</Typography>
        {signal.isVerified && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: '#f0fdf4', border: '1px solid #86efac', borderRadius: 1, px: 0.75, py: 0.2 }}>
            <ShieldCheck size={11} color="#1a7a4a" />
            <Typography sx={{ fontSize: '0.68rem', color: '#1a7a4a', fontWeight: 700 }}>Verifiziert</Typography>
          </Box>
        )}
      </Box>

      {/* 1. Quelle & Verlässlichkeit — FIRST */}
      <Box sx={{ mb: 2 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1, fontSize: '0.8125rem' }}>Quelle &amp; Verlässlichkeit</Typography>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap', mb: isVerifiedContract ? 1 : 0 }}>
          {sourceMeta && (
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, bgcolor: isVerifiedContract ? '#f0fdf4' : '#ede9fe', color: isVerifiedContract ? '#1a7a4a' : '#6d28d9', borderRadius: 1, px: 1, py: 0.5 }}>
              {sourceMeta.icon}
              <Typography sx={{ fontSize: '0.8rem', fontWeight: 600 }}>{sourceMeta.label}</Typography>
            </Box>
          )}
          {credMeta && (
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: credMeta.color }} />
              <Typography variant="body2" sx={{ color: credMeta.color, fontWeight: 600 }}>{credMeta.label}</Typography>
            </Box>
          )}
          {signal.source.publishedAt && (
            <Typography variant="caption" color="text.secondary">
              Publiziert: {new Date(signal.source.publishedAt).toLocaleDateString('de-CH', { day: '2-digit', month: 'long', year: 'numeric' })}
            </Typography>
          )}
        </Box>

        {isVerifiedContract && (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, bgcolor: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 1, px: 1.25, py: 1, mt: 0.75 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
              <ShieldCheck size={13} color="#1a7a4a" />
              <Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 600 }}>Vertragsende aus internem ERP bestätigt</Typography>
            </Box>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
              <ShieldCheck size={13} color="#1a7a4a" />
              <Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 600 }}>Verwaltung hat Marktfreigabe erteilt</Typography>
            </Box>
          </Box>
        )}

        {signal.source.url && (
          <Box sx={{ mt: 1 }}>
            <Button
              component="a"
              href={signal.source.url}
              target="_blank"
              rel="noopener noreferrer"
              size="small"
              variant="outlined"
              startIcon={<ExternalLink size={13} />}
              sx={{ textTransform: 'none', color: '#7c3aed', borderColor: '#c4b5fd', '&:hover': { borderColor: '#7c3aed', bgcolor: '#faf5ff' } }}
            >
              Originalquelle öffnen
            </Button>
          </Box>
        )}

        {signal.evidence?.sourceUrls && signal.evidence.sourceUrls.length > 0 && (
          <Box sx={{ mt: 1 }}>
            <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>
              Weitere Belege ({signal.evidence.sourceUrls.length})
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
              {signal.evidence.sourceUrls.map((url, i) => (
                <Box
                  key={i}
                  component="a"
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#7c3aed', fontSize: '0.75rem', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
                >
                  <ExternalLink size={11} />
                  <Typography variant="caption" sx={{ color: 'inherit' }}>{url}</Typography>
                </Box>
              ))}
            </Box>
          </Box>
        )}
      </Box>

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

      {/* 2. Signal-Kenndaten */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5, mb: 2 }}>
        {signal.signalType && (
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Signaltyp</Typography>
            <Chip label={SIGNAL_TYPE_LABELS[signal.signalType] ?? signal.signalType} size="small" sx={{ bgcolor: '#ede9fe', color: '#6d28d9', fontWeight: 600 }} />
          </Box>
        )}
        <Box>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Wahrscheinlichkeit</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700, color: probPct >= 70 ? '#1a7a4a' : probPct >= 50 ? '#d97706' : '#c0392b' }}>{probPct}%</Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Zeithorizont</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.timeHorizonMonths} Monate</Typography>
        </Box>
        {signal.areaSqmEstimate && (
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Flächenschätzung</Typography>
            <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.areaSqmEstimate.toLocaleString('de-CH')} m²</Typography>
          </Box>
        )}
      </Box>

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

      {/* 3. KI-Analyse */}
      {signal.aiSummary && (
        <Box sx={{ mb: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
            <Zap size={14} color="#7c3aed" />
            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#4c1d95' }}>KI-Analyse</Typography>
          </Box>
          <Box sx={{ bgcolor: '#faf5ff', border: '1px solid #e9d5ff', borderRadius: 1, p: 1.5 }}>
            <Typography variant="body2" sx={{ color: '#1e1b4b', lineHeight: 1.65 }}>
              {signal.aiSummary}
            </Typography>
          </Box>
        </Box>
      )}

      {/* 4. Relevance bridge */}
      {relevanceBridge && (
        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, bgcolor: '#faf5ff', border: '1px solid #e9d5ff', borderRadius: 1, px: 1.5, py: 1.25, mb: 2 }}>
          <Zap size={14} color="#7c3aed" style={{ flexShrink: 0, marginTop: 2 }} />
          <Box>
            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#4c1d95', mb: 0.25 }}>Warum erscheint dieses Signal in Ihrer Suche?</Typography>
            <Typography sx={{ fontSize: '0.8rem', color: '#4c1d95', lineHeight: 1.5 }}>{relevanceBridge}</Typography>
          </Box>
        </Box>
      )}

      {/* 5. Evidence */}
      {signal.evidence?.summary && (
        <Box sx={{ mb: 2 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.75 }}>Evidenz</Typography>
          <Box sx={{ bgcolor: '#f8fafc', borderRadius: 1, p: 1.5 }}>
            <Typography variant="body2" color="text.secondary">{signal.evidence.summary}</Typography>
          </Box>
        </Box>
      )}

      {/* 6. Vertraulichkeit */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
        <Typography variant="caption" color="text.secondary">Vertraulichkeit:</Typography>
        <Chip label={sensitiveMeta.label} size="small" color={sensitiveMeta.color} variant="outlined" />
      </Box>

      {/* 7. Disclaimer — grey footnote */}
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.5, borderTop: '1px solid #f1f5f9', pt: 1.5 }}>
        {signal.disclaimer}
      </Typography>
    </Paper>
  )
}