import { memo, useState, useEffect, useCallback, useMemo } from 'react'
import { useNavigate } from 'react-router'
import {
  Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle,
  Divider, FormControl, FormControlLabel, IconButton,
  InputLabel, MenuItem, Select as MuiSelect,
  Skeleton, Switch, Tab, Tabs, TextField, ToggleButton, ToggleButtonGroup,
  Tooltip, Typography,
} from '@mui/material'
import {
  AlertCircle, Bell, Building2, CheckCircle2, Copy,
  ExternalLink, Globe, Linkedin, Lock, Mail, MapPin, Phone,
  Plus, Ruler, Search, Sparkles, TrendingUp, User, Users,
} from 'lucide-react'
import { useMarketLeads } from '../../hooks/useMarketLeads'
import type { MarketLead } from '../../hooks/useMarketLeads'
import { useMarktHinweise, useCreateMarktHinweis } from '../../hooks/useMarktHinweise'
import type { MarktHinweis, HinweisVisibility, HinweisDirection, HinweisQuelle, CreateMarktHinweisInput } from '../../domain/marktHinweis'
import { useProperties } from '../../hooks/useProperties'
import type { Property } from '../../domain/property'
import type { ExtractedContact } from '../../domain/futureSignal'

// ── Constants ────────────────────────────────────────────────────────────────

const OWN_VERWALTUNG_ID = 'v-001'

const SOURCE_LABELS: Record<string, string> = {
  JOB_POSTING: 'Stelleninserate',
  PRESS: 'Pressebericht',
  COMPANY_REPORT: 'Geschäftsbericht',
  MARKET_DATA: 'Marktdaten',
  MANUAL: 'Manuell',
  CONSTRUCTION_PERMIT: 'Baugenehmigung',
  LEASE_CONTRACT: 'Mietvertrag',
}

const QUELLE_LABELS: Record<string, string> = {
  NETZWERKEVENT: 'Netzwerkevent',
  TELEFONAT: 'Telefonat',
  BESICHTIGUNG: 'Besichtigung',
  MESSE: 'Messe',
  EMAIL: 'E-Mail',
  SONSTIGES: 'Sonstiges',
}

const ASSET_TYPE_LABELS: Record<string, string> = {
  OFFICE: 'Büro',
  RETAIL: 'Einzelhandel',
  LIGHT_INDUSTRIAL: 'Gewerbe',
  LOGISTICS: 'Logistik',
  PRODUCTION: 'Produktion',
  MIXED: 'Gemischt',
}

const CONTACT_ICONS: Record<string, React.ReactNode> = {
  EMAIL:          <Mail size={13} />,
  PHONE:          <Phone size={13} />,
  WEBSITE:        <Globe size={13} />,
  LINKEDIN:       <Linkedin size={13} />,
  CONTACT_PERSON: <User size={13} />,
}

const CONF_COLOR: Record<string, string> = {
  HIGH:   '#16a34a',
  MEDIUM: '#d97706',
  LOW:    '#94a3b8',
}

const CONF_LABEL: Record<string, string> = {
  HIGH:   'Bestätigt',
  MEDIUM: 'Wahrscheinlich',
  LOW:    'Spekulativ',
}

function probColor(p: number): string {
  if (p >= 0.70) return '#1a7a4a'
  if (p >= 0.50) return '#d97706'
  return '#dc2626'
}

function areaFitPct(propArea: number, signalArea: number): number {
  return Math.max(0, Math.round(100 - (Math.abs(propArea - signalArea) / signalArea) * 100))
}

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('de-CH')
}

function buildAnschreiben(company: string, location: string, p: Property, areaSqmEstimate?: number): string {
  const areaLine = areaSqmEstimate
    ? `Fläche: ${p.areaSqm.toLocaleString('de-CH')} m² (Sie suchen ca. ${areaSqmEstimate.toLocaleString('de-CH')} m²)`
    : `Fläche: ${p.areaSqm.toLocaleString('de-CH')} m²`
  return `Sehr geehrte Damen und Herren,

wir haben erkannt, dass ${company} nach Gewerbeflächen im Raum ${location} sucht. Gerne möchten wir Ihnen eine passende Option aus unserem Portfolio vorstellen:

Objekt: ${p.title}
Lage: ${p.location.city}
${areaLine}
Mietpreis: CHF ${p.rentPricePerSqm.toLocaleString('de-CH')} / m² / Jahr

Wir würden uns freuen, Ihnen das Objekt in einer unverbindlichen Besichtigung vorzustellen und Ihre konkreten Anforderungen zu besprechen.

Mit freundlichen Grüssen
Wincasa AG
Immobilienverwaltung`
}

// ── Left pane list item ──────────────────────────────────────────────────────

const LeadListItem = memo(function LeadListItem({
  lead, selected, onClick,
}: {
  lead: MarketLead
  selected: boolean
  onClick: () => void
}) {
  const { signal, matchingProperties } = lead
  const prob = Math.round(signal.probability * 100)
  const color = probColor(signal.probability)

  return (
    <Box
      onClick={onClick}
      sx={{
        px: 2, py: 1.5,
        borderBottom: '1px solid #f1f5f9',
        borderLeft: `3px solid ${selected ? '#1e3a5f' : 'transparent'}`,
        bgcolor: selected ? '#f0f9ff' : 'white',
        cursor: 'pointer',
        '&:hover': { bgcolor: selected ? '#f0f9ff' : '#f8fafc' },
        transition: 'background 0.1s',
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, mb: 0.25 }}>
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.3 }}>
          {signal.companyName ?? signal.locationHint}
        </Typography>
        <Chip
          label={`${prob}%`}
          size="small"
          sx={{ height: 18, fontSize: '0.65rem', fontWeight: 700, bgcolor: `${color}18`, color, flexShrink: 0 }}
        />
      </Box>
      {signal.title && (
        <Typography variant="caption" sx={{ color: '#64748b', display: 'block', mb: 0.5, lineHeight: 1.3 }}>
          {signal.title}
        </Typography>
      )}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.65rem' }}>
          {signal.locationHint} · {signal.timeHorizonMonths} Mo.
        </Typography>
        {matchingProperties.length > 0 && (
          <Chip
            label={`${matchingProperties.length} Obj.`}
            size="small"
            sx={{ ml: 'auto', height: 16, fontSize: '0.6rem', fontWeight: 600, bgcolor: '#dcfce7', color: '#16a34a' }}
          />
        )}
      </Box>
    </Box>
  )
})

// ── Contact row ──────────────────────────────────────────────────────────────

function ContactRow({ contact }: { contact: ExtractedContact }) {
  const icon = CONTACT_ICONS[contact.type]
  const confColor = CONF_COLOR[contact.confidence]
  const isClickable = contact.type === 'WEBSITE' || contact.type === 'LINKEDIN' || contact.type === 'EMAIL'
  const href = contact.type === 'EMAIL' ? `mailto:${contact.value}` : contact.type === 'WEBSITE' || contact.type === 'LINKEDIN' ? `https://${contact.value.replace(/^https?:\/\//, '')}` : undefined

  return (
    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.25, py: 0.75, borderBottom: '1px solid #f8fafc' }}>
      <Box sx={{ color: confColor, mt: 0.125, flexShrink: 0 }}>{icon}</Box>
      <Box sx={{ flex: 1, minWidth: 0 }}>
        {isClickable && href ? (
          <Box
            component="a"
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            sx={{ color: '#1e3a5f', fontWeight: 500, fontSize: '0.8125rem', textDecoration: 'none', '&:hover': { textDecoration: 'underline' }, display: 'flex', alignItems: 'center', gap: 0.5 }}
          >
            {contact.value}
            <ExternalLink size={11} />
          </Box>
        ) : (
          <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '0.8125rem', color: '#0f172a' }}>
            {contact.value}
          </Typography>
        )}
        {contact.label && (
          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
            {contact.label}
          </Typography>
        )}
      </Box>
      <Tooltip title={CONF_LABEL[contact.confidence]}>
        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: confColor, flexShrink: 0, mt: 0.5 }} />
      </Tooltip>
    </Box>
  )
}

// ── Property match card with Anschreiben composer ────────────────────────────

function PropertyMatchCard({
  p, signal, companyName,
}: {
  p: Property
  signal: MarketLead['signal']
  companyName: string
}) {
  const navigate = useNavigate()
  const [open, setOpen] = useState(false)
  const [copied, setCopied] = useState(false)
  const [draft, setDraft] = useState(() =>
    buildAnschreiben(companyName, signal.locationHint, p, signal.areaSqmEstimate)
  )

  const fit = signal.areaSqmEstimate ? areaFitPct(p.areaSqm, signal.areaSqmEstimate) : null

  const handleCopy = useCallback(() => {
    navigator.clipboard.writeText(draft)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }, [draft])

  return (
    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 1 }}>
      {/* Property header */}
      <Box
        sx={{
          display: 'flex', alignItems: 'center', gap: 1.5,
          px: 1.75, py: 1.25,
          bgcolor: '#f8fafc',
          cursor: 'pointer',
          '&:hover': { bgcolor: '#f1f5f9' },
        }}
        onClick={() => navigate('/supply/properties')}
      >
        <Building2 size={14} color="#1e3a5f" style={{ flexShrink: 0 }} />
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {p.title}
          </Typography>
          <Typography variant="caption" sx={{ color: '#64748b' }}>
            {p.location.city} · {p.areaSqm.toLocaleString('de-CH')} m² · CHF {p.rentPricePerSqm}/m²/J
          </Typography>
        </Box>
        {fit !== null && (
          <Chip
            label={`${fit}% Flächenmatch`}
            size="small"
            sx={{
              height: 20, fontSize: '0.65rem', fontWeight: 700, flexShrink: 0,
              bgcolor: fit >= 75 ? '#dcfce7' : fit >= 50 ? '#fef9c3' : '#fee2e2',
              color: fit >= 75 ? '#16a34a' : fit >= 50 ? '#92400e' : '#dc2626',
            }}
          />
        )}
      </Box>

      {/* Anschreiben toggle */}
      <Box sx={{ px: 1.75, py: 1, display: 'flex', alignItems: 'center', gap: 1, borderTop: '1px solid #f1f5f9' }}>
        <Button
          size="small"
          variant={open ? 'contained' : 'outlined'}
          onClick={() => setOpen(v => !v)}
          sx={{
            textTransform: 'none', fontSize: '0.75rem',
            bgcolor: open ? '#1e3a5f' : undefined,
            borderColor: open ? '#1e3a5f' : undefined,
            '&:hover': { bgcolor: open ? '#162d4a' : undefined },
          }}
        >
          {open ? 'Schliessen' : 'Anschreiben erstellen'}
        </Button>
        <Button
          size="small"
          variant="text"
          onClick={() => navigate('/supply/reminder-manager')}
          startIcon={<Bell size={13} />}
          sx={{ textTransform: 'none', fontSize: '0.75rem', color: '#64748b' }}
        >
          Reminder
        </Button>
      </Box>

      {/* Anschreiben composer */}
      {open && (
        <Box sx={{ px: 1.75, pb: 1.75, pt: 0.5, borderTop: '1px solid #f1f5f9', bgcolor: '#fafafa' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
              Anschreiben-Entwurf
            </Typography>
            <Button
              size="small"
              startIcon={copied ? <CheckCircle2 size={13} /> : <Copy size={13} />}
              onClick={handleCopy}
              sx={{
                textTransform: 'none', fontSize: '0.72rem',
                color: copied ? '#16a34a' : '#1e3a5f',
              }}
            >
              {copied ? 'Kopiert!' : 'Kopieren'}
            </Button>
          </Box>
          <TextField
            multiline
            minRows={8}
            fullWidth
            value={draft}
            onChange={e => setDraft(e.target.value)}
            sx={{
              '& .MuiOutlinedInput-root': { fontSize: '0.8rem', bgcolor: 'white' },
              '& textarea': { lineHeight: 1.6 },
            }}
          />
          <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mt: 0.75 }}>
            Text bearbeitbar — dann kopieren und per E-Mail versenden
          </Typography>
        </Box>
      )}
    </Box>
  )
}

// ── Right pane detail ────────────────────────────────────────────────────────

function LeadDetail({ lead }: { lead: MarketLead }) {
  const { signal, matchingProperties } = lead
  const prob = Math.round(signal.probability * 100)
  const color = probColor(signal.probability)
  const sourceLabel = SOURCE_LABELS[signal.source.type] ?? signal.source.type
  const companyName = signal.companyName ?? signal.locationHint

  return (
    <Box sx={{ height: '100%', overflowY: 'auto' }}>
      {/* Header */}
      <Box sx={{ p: 3, borderBottom: '1px solid #e2e8f0' }}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.5 }}>
          <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.3 }}>
            {companyName}
          </Typography>
          <Chip label={`${prob}% Wahrscheinlichkeit`} size="small" sx={{ bgcolor: `${color}18`, color, fontWeight: 700, flexShrink: 0 }} />
        </Box>
        {signal.title && (
          <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
            {signal.title}
          </Typography>
        )}
        {/* Stats row */}
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mb: 1.25 }}>
          <Chip icon={<MapPin size={11} />} label={signal.locationHint} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />
          <Chip icon={<Ruler size={11} />} label={signal.areaSqmEstimate ? `~${signal.areaSqmEstimate.toLocaleString('de-CH')} m²` : 'Fläche unbekannt'} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />
          <Chip label={`${signal.timeHorizonMonths} Monate`} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />
        </Box>
        {/* Source link */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, py: 0.75, px: 1.25, bgcolor: '#f8fafc', borderRadius: 1, border: '1px solid #e2e8f0' }}>
          <Typography variant="caption" sx={{ color: '#64748b', flexShrink: 0 }}>
            Quelle: <strong>{sourceLabel}</strong>
            {signal.source.publishedAt && ` · ${new Date(signal.source.publishedAt).toLocaleDateString('de-CH')}`}
          </Typography>
          {signal.source.url && (
            <Box
              component="a"
              href={signal.source.url}
              target="_blank"
              rel="noopener noreferrer"
              sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 'auto', color: '#1e3a5f', fontSize: '0.75rem', fontWeight: 600, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
            >
              Quelle öffnen <ExternalLink size={11} />
            </Box>
          )}
        </Box>
      </Box>

      <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
        {/* KI summary */}
        {(signal.aiSummary ?? signal.strategicInterpretation) && (
          <Box sx={{ bgcolor: '#eff6ff', border: '1px solid #bfdbfe', borderRadius: 1.5, p: 2 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.75 }}>
              <Sparkles size={13} color="#1d4ed8" />
              <Typography variant="caption" sx={{ fontWeight: 700, color: '#1d4ed8', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
                KI-Analyse
              </Typography>
            </Box>
            <Typography variant="body2" sx={{ color: '#1e3a8a', lineHeight: 1.6 }}>
              {signal.aiSummary ?? signal.strategicInterpretation}
            </Typography>
          </Box>
        )}

        {/* Market indicators */}
        {(signal.marketIndicators?.length ?? 0) > 0 && (
          <Box>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', 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={12} color="#1e3a5f" style={{ marginTop: 3, flexShrink: 0 }} />
                  <Typography variant="body2" sx={{ lineHeight: 1.5, color: '#1e293b' }}>{ind}</Typography>
                </Box>
              ))}
            </Box>
          </Box>
        )}

        {/* Facts */}
        {((signal.confirmedFacts?.length ?? 0) + (signal.unconfirmedFacts?.length ?? 0)) > 0 && (
          <Box>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}>
              Faktencheck
            </Typography>
            <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={13} color="#16a34a" style={{ flexShrink: 0 }} />
                  <Typography variant="caption" sx={{ color: '#15803d', fontWeight: 500 }}>{f}</Typography>
                </Box>
              ))}
              {(signal.unconfirmedFacts ?? []).map((f, i) => (
                <Box key={`u-${i}`} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
                  <AlertCircle size={13} color="#d97706" style={{ flexShrink: 0 }} />
                  <Typography variant="caption" sx={{ color: '#92400e', fontWeight: 500 }}>{f}</Typography>
                </Box>
              ))}
            </Box>
          </Box>
        )}

        <Divider />

        {/* KI contact extraction */}
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
            <Sparkles size={13} color="#7c3aed" />
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
              KI-Kontaktdaten
            </Typography>
            <Box sx={{ display: 'flex', gap: 0.5, ml: 'auto' }}>
              {(['HIGH','MEDIUM','LOW'] as const).map(c => (
                <Box key={c} sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
                  <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: CONF_COLOR[c] }} />
                  <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.6rem' }}>{CONF_LABEL[c]}</Typography>
                </Box>
              ))}
            </Box>
          </Box>
          {(signal.extractedContacts?.length ?? 0) === 0 ? (
            <Alert severity="info" sx={{ fontSize: '0.8rem', py: 0.5 }}>
              Keine Kontaktdaten aus Crawler-Quellen extrahiert — manuelle Recherche empfohlen
            </Alert>
          ) : (
            <Box sx={{ bgcolor: '#faf5ff', border: '1px solid #ede9fe', borderRadius: 1.5, px: 1.75, pt: 0.5, pb: 0.25 }}>
              {signal.extractedContacts!.map((c, i) => <ContactRow key={i} contact={c} />)}
            </Box>
          )}
        </Box>

        <Divider />

        {/* Portfolio matches */}
        <Box>
          <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 1 }}>
            Passende Objekte im Portfolio ({matchingProperties.length})
          </Typography>
          {matchingProperties.length === 0 ? (
            <Alert severity="warning" sx={{ fontSize: '0.8rem', py: 0.5 }}>
              Kein passendes Portfolioobjekt gefunden — manuelle Prüfung empfohlen
            </Alert>
          ) : (
            matchingProperties.map(p => (
              <PropertyMatchCard
                key={p.id}
                p={p}
                signal={signal}
                companyName={companyName}
              />
            ))
          )}
        </Box>

        {signal.disclaimer && (
          <Typography variant="caption" color="text.disabled" sx={{ lineHeight: 1.4 }}>
            {signal.disclaimer}
          </Typography>
        )}
      </Box>
    </Box>
  )
}

// ── Netzwerk: HinweisPropertyCard ────────────────────────────────────────────

const HinweisPropertyCard = memo(function HinweisPropertyCard({
  p,
  hinweis,
}: {
  p: Property
  hinweis: MarktHinweis
}) {
  const [open, setOpen] = useState(false)
  const [copied, setCopied] = useState(false)
  const companyName = hinweis.isAnonymized ? 'Interessent' : (hinweis.companyName ?? 'Interessent')
  const areaEstimate = hinweis.areaSqmMax ?? hinweis.areaSqmMin
  const [draft, setDraft] = useState(() =>
    buildAnschreiben(companyName, hinweis.locationHint, p, areaEstimate)
  )
  const fit = areaEstimate != null ? areaFitPct(p.areaSqm, areaEstimate) : null

  const handleCopy = useCallback(() => {
    navigator.clipboard.writeText(draft)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }, [draft])

  return (
    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 1 }}>
      {/* Property header */}
      <Box
        sx={{
          display: 'flex', alignItems: 'center', gap: 1.5,
          px: 1.75, py: 1.25,
          bgcolor: '#f8fafc',
          cursor: 'default',
        }}
      >
        <Building2 size={14} color="#1e3a5f" style={{ flexShrink: 0 }} />
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {p.title}
          </Typography>
          <Typography variant="caption" sx={{ color: '#64748b' }}>
            {p.location.city} · {p.areaSqm.toLocaleString('de-CH')} m² · CHF {p.rentPricePerSqm}/m²/J
          </Typography>
        </Box>
        {fit !== null && (
          <Chip
            label={`${fit}% Flächenmatch`}
            size="small"
            sx={{
              height: 20, fontSize: '0.65rem', fontWeight: 700, flexShrink: 0,
              bgcolor: fit >= 75 ? '#dcfce7' : fit >= 50 ? '#fef9c3' : '#fee2e2',
              color: fit >= 75 ? '#16a34a' : fit >= 50 ? '#92400e' : '#dc2626',
            }}
          />
        )}
      </Box>

      {/* Anschreiben toggle */}
      <Box sx={{ px: 1.75, py: 1, display: 'flex', alignItems: 'center', gap: 1, borderTop: '1px solid #f1f5f9' }}>
        <Button
          size="small"
          variant={open ? 'contained' : 'outlined'}
          onClick={() => setOpen(v => !v)}
          sx={{
            textTransform: 'none', fontSize: '0.75rem',
            bgcolor: open ? '#1e3a5f' : undefined,
            borderColor: open ? '#1e3a5f' : undefined,
            '&:hover': { bgcolor: open ? '#162d4a' : undefined },
          }}
        >
          {open ? 'Schliessen' : 'Anschreiben erstellen'}
        </Button>
      </Box>

      {/* Anschreiben composer */}
      {open && (
        <Box sx={{ px: 1.75, pb: 1.75, pt: 0.5, borderTop: '1px solid #f1f5f9', bgcolor: '#fafafa' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
              Anschreiben-Entwurf
            </Typography>
            <Button
              size="small"
              startIcon={copied ? <CheckCircle2 size={13} /> : <Copy size={13} />}
              onClick={handleCopy}
              sx={{ textTransform: 'none', fontSize: '0.72rem', color: copied ? '#16a34a' : '#1e3a5f' }}
            >
              {copied ? 'Kopiert!' : 'Kopieren'}
            </Button>
          </Box>
          <TextField
            multiline
            minRows={8}
            fullWidth
            value={draft}
            onChange={e => setDraft(e.target.value)}
            sx={{
              '& .MuiOutlinedInput-root': { fontSize: '0.8rem', bgcolor: 'white' },
              '& textarea': { lineHeight: 1.6 },
            }}
          />
          <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mt: 0.75 }}>
            Text bearbeitbar — dann kopieren und per E-Mail versenden
          </Typography>
        </Box>
      )}
    </Box>
  )
})

// ── Netzwerk: HinweisListItem ────────────────────────────────────────────────

const HinweisListItem = memo(function HinweisListItem({
  hinweis, selected, onClick,
}: {
  hinweis: MarktHinweis
  selected: boolean
  onClick: () => void
}) {
  const displayName = !hinweis.isAnonymized && hinweis.companyName
    ? hinweis.companyName
    : `Anonym · ${ASSET_TYPE_LABELS[hinweis.assetType] ?? hinweis.assetType}`

  const areaStr = useMemo(() => {
    if (hinweis.areaSqmMin != null && hinweis.areaSqmMax != null && hinweis.areaSqmMin !== hinweis.areaSqmMax) {
      return ` · ${hinweis.areaSqmMin}–${hinweis.areaSqmMax} m²`
    }
    if (hinweis.areaSqmMax != null) return ` · ${hinweis.areaSqmMax} m²`
    if (hinweis.areaSqmMin != null) return ` · ${hinweis.areaSqmMin} m²`
    return ''
  }, [hinweis.areaSqmMin, hinweis.areaSqmMax])

  const visibilityBadge = useMemo(() => {
    if (hinweis.visibility === 'INTERN') {
      return <Chip label="Intern" size="small" sx={{ bgcolor: '#eef2ff', color: '#4338ca', height: 18, fontSize: '0.6rem' }} />
    }
    if (hinweis.verwaltungId === OWN_VERWALTUNG_ID) {
      return <Chip label="Geteilt" size="small" sx={{ bgcolor: '#faf5ff', color: '#7c3aed', height: 18, fontSize: '0.6rem' }} />
    }
    return <Chip label={hinweis.verwaltungName} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', height: 18, fontSize: '0.6rem' }} />
  }, [hinweis.visibility, hinweis.verwaltungId, hinweis.verwaltungName])

  return (
    <Box
      onClick={onClick}
      sx={{
        px: 2, py: 1.5,
        borderBottom: '1px solid #f1f5f9',
        borderLeft: `3px solid ${selected ? '#1e3a5f' : 'transparent'}`,
        bgcolor: selected ? '#f0f9ff' : 'white',
        cursor: 'pointer',
        '&:hover': { bgcolor: selected ? '#f0f9ff' : '#f8fafc' },
        transition: 'background 0.1s',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.25 }}>
        <Box sx={{ mt: 0.25, flexShrink: 0 }}>
          {hinweis.direction === 'SUCHE'
            ? <Search size={14} color="#1e3a5f" />
            : <Building2 size={14} color="#7c3aed" />
          }
        </Box>
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.3, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {displayName}
        </Typography>
        <Box sx={{ flexShrink: 0 }}>{visibilityBadge}</Box>
      </Box>
      <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.65rem', display: 'block', mb: 0.5, pl: 2.75 }}>
        {hinweis.locationHint}{areaStr}
      </Typography>
      <Box sx={{ pl: 2.75 }}>
        {hinweis.direction === 'SUCHE'
          ? <Chip label="Suche" size="small" sx={{ bgcolor: '#dbeafe', color: '#1d4ed8', height: 16, fontSize: '0.6rem' }} />
          : <Chip label="Wird frei" size="small" sx={{ bgcolor: '#dcfce7', color: '#16a34a', height: 16, fontSize: '0.6rem' }} />
        }
      </Box>
    </Box>
  )
})

// ── Netzwerk: HinweisDetail ──────────────────────────────────────────────────

function HinweisDetail({ hinweis }: { hinweis: MarktHinweis }) {
  const { data: properties = [] } = useProperties()

  const matchingProperties = useMemo(
    () => properties.filter(p => p.assetType === hinweis.assetType).slice(0, 3),
    [properties, hinweis.assetType],
  )

  const displayName = !hinweis.isAnonymized && hinweis.companyName ? hinweis.companyName : 'Anonym'

  const areaStr = useMemo(() => {
    if (hinweis.areaSqmMin != null && hinweis.areaSqmMax != null && hinweis.areaSqmMin !== hinweis.areaSqmMax) {
      return `${hinweis.areaSqmMin}–${hinweis.areaSqmMax} m²`
    }
    if (hinweis.areaSqmMax != null) return `${hinweis.areaSqmMax} m²`
    if (hinweis.areaSqmMin != null) return `${hinweis.areaSqmMin} m²`
    return null
  }, [hinweis.areaSqmMin, hinweis.areaSqmMax])

  return (
    <Box sx={{ height: '100%', overflowY: 'auto' }}>
      {/* Header */}
      <Box sx={{ p: 3, borderBottom: '1px solid #e2e8f0' }}>
        <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.3, mb: 1 }}>
          {displayName}
        </Typography>

        {/* Badge row */}
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mb: 1.25 }}>
          {hinweis.direction === 'SUCHE'
            ? <Chip label="Suche" size="small" sx={{ bgcolor: '#dbeafe', color: '#1d4ed8', fontWeight: 600, fontSize: '0.75rem' }} />
            : <Chip label="Wird verfügbar" size="small" sx={{ bgcolor: '#dcfce7', color: '#16a34a', fontWeight: 600, fontSize: '0.75rem' }} />
          }
          {hinweis.visibility === 'INTERN'
            ? <Chip label="Intern" size="small" sx={{ bgcolor: '#eef2ff', color: '#4338ca', fontWeight: 600, fontSize: '0.75rem' }} />
            : hinweis.verwaltungId === OWN_VERWALTUNG_ID
              ? <Chip label="Geteilt" size="small" sx={{ bgcolor: '#faf5ff', color: '#7c3aed', fontWeight: 600, fontSize: '0.75rem' }} />
              : <Chip label={hinweis.verwaltungName} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontWeight: 600, fontSize: '0.75rem' }} />
          }
        </Box>

        {/* Stat chips */}
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mb: 1.25 }}>
          <Chip icon={<MapPin size={11} />} label={hinweis.locationHint} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />
          {areaStr && <Chip icon={<Ruler size={11} />} label={areaStr} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />}
          <Chip label={ASSET_TYPE_LABELS[hinweis.assetType] ?? hinweis.assetType} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.75rem' }} />
        </Box>

        {/* Quelle row */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, py: 0.75, px: 1.25, bgcolor: '#f8fafc', borderRadius: 1, border: '1px solid #e2e8f0' }}>
          <Typography variant="caption" sx={{ color: '#64748b' }}>
            Quelle: <strong>{QUELLE_LABELS[hinweis.quelle] ?? hinweis.quelle}</strong>
            {' · '}{hinweis.createdBy}
            {' · '}{formatDate(hinweis.createdAt)}
          </Typography>
        </Box>
      </Box>

      {/* Body */}
      <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
        {hinweis.note && (
          <Box sx={{ bgcolor: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 1.5, p: 2 }}>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.5, fontSize: '0.65rem' }}>
              Notiz
            </Typography>
            <Typography variant="body2" sx={{ color: '#1e293b', lineHeight: 1.6 }}>
              {hinweis.note}
            </Typography>
          </Box>
        )}

        <Divider />

        {hinweis.direction === 'SUCHE' ? (
          <Box>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 1 }}>
              Passende Objekte im Portfolio ({matchingProperties.length})
            </Typography>
            {matchingProperties.length === 0 ? (
              <Alert severity="warning" sx={{ fontSize: '0.8rem', py: 0.5 }}>
                Kein passendes Portfolioobjekt gefunden
              </Alert>
            ) : (
              matchingProperties.map(p => (
                <HinweisPropertyCard key={p.id} p={p} hinweis={hinweis} />
              ))
            )}
          </Box>
        ) : (
          <Alert severity="info" sx={{ fontSize: '0.8rem' }}>
            Verfügbarkeitssignal — wird auf der Plattform für andere Verwaltungen sichtbar gemacht
          </Alert>
        )}
      </Box>
    </Box>
  )
}

// ── Netzwerk: HinweisErfassenDialog ─────────────────────────────────────────

function HinweisErfassenDialog({
  open,
  onClose,
  onCreated,
}: {
  open: boolean
  onClose: () => void
  onCreated: (id: string) => void
}) {
  const mutation = useCreateMarktHinweis()

  const [direction, setDirection] = useState<HinweisDirection>('SUCHE')
  const [assetType, setAssetType] = useState<string>('')
  const [locationHint, setLocationHint] = useState<string>('')
  const [areaSqmMin, setAreaSqmMin] = useState<string>('')
  const [areaSqmMax, setAreaSqmMax] = useState<string>('')
  const [companyName, setCompanyName] = useState<string>('')
  const [isAnonymized, setIsAnonymized] = useState<boolean>(false)
  const [quelle, setQuelle] = useState<HinweisQuelle>('NETZWERKEVENT')
  const [note, setNote] = useState<string>('')
  const [visibility, setVisibility] = useState<HinweisVisibility>('INTERN')

  const isValid = assetType.trim() !== '' && locationHint.trim() !== ''

  function resetForm() {
    setDirection('SUCHE')
    setAssetType('')
    setLocationHint('')
    setAreaSqmMin('')
    setAreaSqmMax('')
    setCompanyName('')
    setIsAnonymized(false)
    setQuelle('NETZWERKEVENT')
    setNote('')
    setVisibility('INTERN')
  }

  function handleSave() {
    if (!isValid) return
    const input: CreateMarktHinweisInput = {
      direction,
      assetType: assetType as MarktHinweis['assetType'],
      locationHint,
      areaSqmMin: areaSqmMin ? Number(areaSqmMin) : undefined,
      areaSqmMax: areaSqmMax ? Number(areaSqmMax) : undefined,
      companyName: companyName.trim() || undefined,
      isAnonymized,
      quelle,
      note: note.trim() || undefined,
      visibility,
      status: 'OFFEN',
    }
    mutation.mutate(input, {
      onSuccess: (result) => {
        onCreated(result.id)
        resetForm()
      },
    })
  }

  function handleClose() {
    resetForm()
    onClose()
  }

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
      <DialogTitle>Hinweis erfassen</DialogTitle>
      <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
        {/* Richtung */}
        <Box>
          <Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', display: 'block', mb: 0.75 }}>
            Richtung
          </Typography>
          <ToggleButtonGroup
            value={direction}
            exclusive
            onChange={(_, v) => { if (v) setDirection(v as HinweisDirection) }}
            size="small"
            sx={{ '& .MuiToggleButton-root': { textTransform: 'none', fontSize: '0.8rem' } }}
          >
            <ToggleButton value="SUCHE">
              <Search size={14} style={{ marginRight: 6 }} /> Jemand sucht
            </ToggleButton>
            <ToggleButton value="VERFUEGBARKEIT">
              <Building2 size={14} style={{ marginRight: 6 }} /> Wird verfügbar
            </ToggleButton>
          </ToggleButtonGroup>
        </Box>

        {/* Asset-Typ */}
        <FormControl fullWidth required>
          <InputLabel>Asset-Typ *</InputLabel>
          <MuiSelect
            value={assetType}
            label="Asset-Typ *"
            onChange={e => setAssetType(e.target.value)}
          >
            <MenuItem value="OFFICE">Büro</MenuItem>
            <MenuItem value="RETAIL">Einzelhandel</MenuItem>
            <MenuItem value="LIGHT_INDUSTRIAL">Gewerbe</MenuItem>
            <MenuItem value="LOGISTICS">Logistik</MenuItem>
            <MenuItem value="PRODUCTION">Produktion</MenuItem>
          </MuiSelect>
        </FormControl>

        {/* Stadt / Region */}
        <TextField
          fullWidth
          required
          label="Stadt / Region"
          value={locationHint}
          onChange={e => setLocationHint(e.target.value)}
        />

        {/* Fläche */}
        <Box sx={{ display: 'flex', gap: 1 }}>
          <TextField
            label="Von (m²)"
            type="number"
            value={areaSqmMin}
            onChange={e => setAreaSqmMin(e.target.value)}
            sx={{ flex: 1 }}
          />
          <TextField
            label="Bis (m²)"
            type="number"
            value={areaSqmMax}
            onChange={e => setAreaSqmMax(e.target.value)}
            sx={{ flex: 1 }}
          />
        </Box>

        {/* Firma / Name */}
        <TextField
          fullWidth
          label="Firma / Name (optional)"
          value={companyName}
          onChange={e => setCompanyName(e.target.value)}
        />

        {/* Quelle */}
        <FormControl fullWidth>
          <InputLabel>Quelle</InputLabel>
          <MuiSelect
            value={quelle}
            label="Quelle"
            onChange={e => setQuelle(e.target.value as HinweisQuelle)}
          >
            {Object.entries(QUELLE_LABELS).map(([k, v]) => (
              <MenuItem key={k} value={k}>{v}</MenuItem>
            ))}
          </MuiSelect>
        </FormControl>

        {/* Notiz */}
        <TextField
          fullWidth
          multiline
          minRows={3}
          label="Notiz (optional)"
          value={note}
          onChange={e => setNote(e.target.value)}
        />

        {/* Sichtbarkeit */}
        <Box>
          <Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', display: 'block', mb: 0.75 }}>
            Sichtbarkeit
          </Typography>
          <Box sx={{ display: 'flex', gap: 1 }}>
            <Box
              onClick={() => setVisibility('INTERN')}
              sx={{
                flex: 1, borderRadius: 1.5, p: 1.5, cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 0.5,
                border: visibility === 'INTERN' ? '2px solid #4338ca' : '1px solid #e2e8f0',
                bgcolor: visibility === 'INTERN' ? '#eef2ff' : 'white',
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                <Lock size={14} color={visibility === 'INTERN' ? '#4338ca' : '#64748b'} />
                <Typography variant="caption" sx={{ fontWeight: 700, color: visibility === 'INTERN' ? '#4338ca' : '#0f172a' }}>Intern</Typography>
              </Box>
              <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem' }}>Nur für Ihr Team sichtbar</Typography>
            </Box>
            <Box
              onClick={() => setVisibility('PLATTFORM')}
              sx={{
                flex: 1, borderRadius: 1.5, p: 1.5, cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 0.5,
                border: visibility === 'PLATTFORM' ? '2px solid #7c3aed' : '1px solid #e2e8f0',
                bgcolor: visibility === 'PLATTFORM' ? '#faf5ff' : 'white',
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                <Globe size={14} color={visibility === 'PLATTFORM' ? '#7c3aed' : '#64748b'} />
                <Typography variant="caption" sx={{ fontWeight: 700, color: visibility === 'PLATTFORM' ? '#7c3aed' : '#0f172a' }}>Plattform</Typography>
              </Box>
              <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem' }}>Für alle Verwaltungen auf Property Match sichtbar</Typography>
            </Box>
          </Box>
        </Box>

        {/* Anonymisieren (only for PLATTFORM) */}
        {visibility === 'PLATTFORM' && (
          <FormControlLabel
            control={
              <Switch
                checked={isAnonymized}
                onChange={e => setIsAnonymized(e.target.checked)}
                size="small"
              />
            }
            label={<Typography variant="body2">Firmenname anonymisieren</Typography>}
          />
        )}
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button onClick={handleClose} sx={{ textTransform: 'none' }}>Abbrechen</Button>
        <Button
          variant="contained"
          onClick={handleSave}
          disabled={mutation.isPending || !isValid}
          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
        >
          Speichern
        </Button>
      </DialogActions>
    </Dialog>
  )
}

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

export default function MarketIntelligence() {
  const [activeTab, setActiveTab] = useState(0)
  const [selectedSignalId, setSelectedSignalId] = useState<string | null>(null)
  const [selectedHinweisId, setSelectedHinweisId] = useState<string | null>(null)
  const [erfassenOpen, setErfassenOpen] = useState(false)
  const [hinweisFilter, setHinweisFilter] = useState<'ALL' | 'INTERN' | 'PLATTFORM'>('ALL')

  const { data: leads, isLoading: leadsLoading } = useMarketLeads()
  const { data: hinweise = [], isLoading: hinweiseLoading } = useMarktHinweise()

  // auto-select first signal
  useEffect(() => {
    if (!selectedSignalId && leads.length > 0) setSelectedSignalId(leads[0].signal.id)
  }, [leads, selectedSignalId])

  // auto-select first hinweis
  useEffect(() => {
    if (!selectedHinweisId && hinweise.length > 0) setSelectedHinweisId(hinweise[0].id)
  }, [hinweise, selectedHinweisId])

  const selectedLead = leads.find(l => l.signal.id === selectedSignalId) ?? null

  const filteredHinweise = useMemo(() => {
    if (hinweisFilter === 'ALL') return hinweise
    return hinweise.filter(h => h.visibility === hinweisFilter)
  }, [hinweise, hinweisFilter])

  const selectedHinweis = hinweise.find(h => h.id === selectedHinweisId) ?? null

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      {/* Page header */}
      <Box sx={{ px: 3, py: 2, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
        <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>Marktchancen</Typography>
        <Typography variant="caption" color="text.secondary">
          KI-Signale aus Web-Quellen und menschliche Netzwerk-Hinweise — mit Portfolio-Match
        </Typography>
      </Box>

      {/* Tabs */}
      <Tabs
        value={activeTab}
        onChange={(_, v: number) => setActiveTab(v)}
        sx={{
          borderBottom: '1px solid #e2e8f0',
          flexShrink: 0,
          bgcolor: 'white',
          '& .MuiTab-root': { textTransform: 'none', fontSize: '0.85rem', minHeight: 44, px: 3 },
        }}
      >
        <Tab icon={<Sparkles size={14} />} iconPosition="start" label="KI-Signale" />
        <Tab icon={<Users size={14} />} iconPosition="start" label="Netzwerk" />
      </Tabs>

      {/* Tab 0: KI-Signale */}
      {activeTab === 0 && (
        <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          {/* Left pane */}
          <Box sx={{ width: 360, flexShrink: 0, borderRight: '1px solid #e2e8f0', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <Box sx={{ px: 2, py: 1.25, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 600, flex: 1 }}>Erkannte Signale</Typography>
              <Chip label={leadsLoading ? '…' : leads.length} size="small" sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }} />
            </Box>
            <Box sx={{ flex: 1, overflowY: 'auto' }}>
              {leadsLoading
                ? [1, 2, 3, 4].map(i => (
                    <Box key={i} sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f1f5f9' }}>
                      <Skeleton variant="text" width="55%" sx={{ mb: 0.25 }} />
                      <Skeleton variant="text" width="80%" height={14} />
                      <Skeleton variant="text" width="40%" height={12} />
                    </Box>
                  ))
                : leads.map(lead => (
                    <LeadListItem
                      key={lead.signal.id}
                      lead={lead}
                      selected={lead.signal.id === selectedSignalId}
                      onClick={() => setSelectedSignalId(lead.signal.id)}
                    />
                  ))}
            </Box>
          </Box>

          {/* Right pane */}
          <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            {selectedLead ? (
              <LeadDetail lead={selectedLead} />
            ) : (
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                <Typography variant="body2" color="text.disabled">Signal aus der Liste auswählen</Typography>
              </Box>
            )}
          </Box>
        </Box>
      )}

      {/* Tab 1: Netzwerk */}
      {activeTab === 1 && (
        <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          {/* Left pane */}
          <Box sx={{ width: 360, flexShrink: 0, borderRight: '1px solid #e2e8f0', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <Box sx={{ px: 2, py: 1.25, borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                <Typography variant="subtitle2" sx={{ fontWeight: 600, flex: 1 }}>Netzwerk-Hinweise</Typography>
                <Chip
                  label={hinweiseLoading ? '…' : filteredHinweise.length}
                  size="small"
                  sx={{ bgcolor: '#7c3aed', color: '#fff', fontSize: '0.7rem', height: 20 }}
                />
                <Button
                  size="small"
                  variant="contained"
                  startIcon={<Plus size={13} />}
                  onClick={() => setErfassenOpen(true)}
                  sx={{
                    textTransform: 'none', fontSize: '0.72rem',
                    bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' },
                    minWidth: 'auto',
                  }}
                >
                  Erfassen
                </Button>
              </Box>
              {/* Filter chips */}
              <Box sx={{ display: 'flex', gap: 0.5 }}>
                {(['ALL', 'INTERN', 'PLATTFORM'] as const).map(f => (
                  <Chip
                    key={f}
                    label={f === 'ALL' ? 'Alle' : f === 'INTERN' ? 'Intern' : 'Plattform'}
                    size="small"
                    onClick={() => setHinweisFilter(f)}
                    sx={{
                      height: 22, fontSize: '0.68rem', cursor: 'pointer',
                      bgcolor: hinweisFilter === f ? '#1e3a5f' : '#f1f5f9',
                      color: hinweisFilter === f ? 'white' : '#475569',
                    }}
                  />
                ))}
              </Box>
            </Box>

            {/* List */}
            <Box sx={{ flex: 1, overflowY: 'auto' }}>
              {hinweiseLoading
                ? [1, 2, 3].map(i => (
                    <Box key={i} sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f1f5f9' }}>
                      <Skeleton variant="text" width="60%" />
                      <Skeleton variant="text" width="80%" height={12} />
                    </Box>
                  ))
                : filteredHinweise.map(h => (
                    <HinweisListItem
                      key={h.id}
                      hinweis={h}
                      selected={h.id === selectedHinweisId}
                      onClick={() => setSelectedHinweisId(h.id)}
                    />
                  ))
              }
            </Box>
          </Box>

          {/* Right pane */}
          <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            {selectedHinweis ? (
              <HinweisDetail hinweis={selectedHinweis} />
            ) : (
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                <Typography variant="body2" color="text.disabled">Hinweis aus der Liste auswählen</Typography>
              </Box>
            )}
          </Box>
        </Box>
      )}

      {/* Dialog */}
      <HinweisErfassenDialog
        open={erfassenOpen}
        onClose={() => setErfassenOpen(false)}
        onCreated={(id) => {
          setSelectedHinweisId(id)
          setErfassenOpen(false)
          setActiveTab(1)
        }}
      />
    </Box>
  )
}