import { useState } from 'react'
import { Box, Chip, CircularProgress, Stack, Tooltip, Typography } from '@mui/material'
import {
  Activity,
  Bot,
  Bookmark,
  BookmarkCheck,
  Building2,
  AlertTriangle,
  CheckCircle,
  ClipboardList,
  Edit,
  FileText,
  GitMerge,
  Radar,
  Search,
  ServerCog,
  TrendingUp,
  User,
  XCircle,
} from 'lucide-react'
import { useQuery } from '@tanstack/react-query'
import { governanceService, type ActivityCategory, type ActivityEvent, type ActivityEventType } from '../../services/governanceService'
import { EmptyState } from '../../components/ui'

// ── Labels & colours ──────────────────────────────────────────────────────────

const EVENT_LABELS: Record<ActivityEventType, string> = {
  PROPERTY_CREATED: 'Objekt erstellt',
  PROPERTY_UPDATED: 'Objekt aktualisiert',
  MATCH_APPROVED: 'Match genehmigt',
  MATCH_REJECTED: 'Match abgelehnt',
  SIGNAL_VERIFIED: 'Signal verifiziert',
  NEED_CREATED: 'Bedarf erstellt',
  REVIEW_REQUESTED: 'Überprüfung angefordert',
  AI_PARSE_COMPLETED: 'KI-Analyse abgeschlossen',
  AI_OUTPUT_REVIEWED: 'KI-Output geprüft',
  MATCH_GENERATED: 'Matches generiert',
  FUTURE_SIGNAL_DETECTED: 'Zukunftssignal erkannt',
  FUTURE_SIGNAL_CONVERTED: 'Signal konvertiert',
  SHORTLIST_CREATED: 'Shortlist erstellt',
  SHORTLIST_FINALIZED: 'Shortlist finalisiert',
  DECISION_BRIEF_CREATED: 'Entscheidungsbriefing erstellt',
  SOURCE_CRAWLED: 'Quelle gecrawlt',
  DATA_QUALITY_FLAGGED: 'Datenqualität markiert',
  REVIEW_COMPLETED: 'Prüfung abgeschlossen',
}

const EVENT_COLORS: Record<ActivityEventType, string> = {
  PROPERTY_CREATED: '#1e3a5f',
  PROPERTY_UPDATED: '#1e3a5f',
  MATCH_APPROVED: '#1a7a4a',
  MATCH_REJECTED: '#c0392b',
  SIGNAL_VERIFIED: '#7c3aed',
  NEED_CREATED: '#0891b2',
  REVIEW_REQUESTED: '#d97706',
  AI_PARSE_COMPLETED: '#0891b2',
  AI_OUTPUT_REVIEWED: '#1a7a4a',
  MATCH_GENERATED: '#0891b2',
  FUTURE_SIGNAL_DETECTED: '#7c3aed',
  FUTURE_SIGNAL_CONVERTED: '#7c3aed',
  SHORTLIST_CREATED: '#0f766e',
  SHORTLIST_FINALIZED: '#0f766e',
  DECISION_BRIEF_CREATED: '#0f766e',
  SOURCE_CRAWLED: '#6366f1',
  DATA_QUALITY_FLAGGED: '#ea580c',
  REVIEW_COMPLETED: '#1a7a4a',
}

const CATEGORY_META: Record<ActivityCategory, { label: string; color: string }> = {
  SUCHE:        { label: 'Suche',        color: '#0891b2' },
  MATCHING:     { label: 'Matching',     color: '#1a7a4a' },
  INTELLIGENCE: { label: 'Intelligence', color: '#7c3aed' },
  REVIEW:       { label: 'Review',       color: '#d97706' },
  GOVERNANCE:   { label: 'Governance',   color: '#1e3a5f' },
}

const ALL_CATEGORIES: ActivityCategory[] = ['SUCHE', 'MATCHING', 'INTELLIGENCE', 'REVIEW', 'GOVERNANCE']

function getEventIcon(type: ActivityEventType) {
  const s = 13
  switch (type) {
    case 'PROPERTY_CREATED': return <Building2 size={s} color="white" />
    case 'PROPERTY_UPDATED': return <Edit size={s} color="white" />
    case 'MATCH_APPROVED': return <CheckCircle size={s} color="white" />
    case 'MATCH_REJECTED': return <XCircle size={s} color="white" />
    case 'SIGNAL_VERIFIED': return <TrendingUp size={s} color="white" />
    case 'NEED_CREATED': return <Search size={s} color="white" />
    case 'REVIEW_REQUESTED': return <ClipboardList size={s} color="white" />
    case 'AI_PARSE_COMPLETED':
    case 'AI_OUTPUT_REVIEWED':
    case 'MATCH_GENERATED':
    case 'DECISION_BRIEF_CREATED': return <Bot size={s} color="white" />
    case 'FUTURE_SIGNAL_DETECTED':
    case 'FUTURE_SIGNAL_CONVERTED': return <Radar size={s} color="white" />
    case 'SHORTLIST_CREATED': return <Bookmark size={s} color="white" />
    case 'SHORTLIST_FINALIZED': return <BookmarkCheck size={s} color="white" />
    case 'SOURCE_CRAWLED': return <ServerCog size={s} color="white" />
    case 'DATA_QUALITY_FLAGGED': return <AlertTriangle size={s} color="white" />
    case 'REVIEW_COMPLETED': return <GitMerge size={s} color="white" />
    default: return <FileText size={s} color="white" />
  }
}

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('de-CH', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' })
}

function formatTime(iso: string): string {
  return new Date(iso).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' })
}

function dateKey(iso: string): string {
  return iso.slice(0, 10)
}

function isToday(iso: string): boolean {
  return dateKey(iso) === new Date().toISOString().slice(0, 10)
}

function groupByDate(events: ActivityEvent[]): { key: string; label: string; events: ActivityEvent[] }[] {
  const map = new Map<string, ActivityEvent[]>()
  for (const e of events) {
    const k = dateKey(e.createdAt)
    if (!map.has(k)) map.set(k, [])
    map.get(k)!.push(e)
  }
  return [...map.entries()]
    .sort(([a], [b]) => b.localeCompare(a))
    .map(([key, evts]) => ({
      key,
      label: isToday(evts[0].createdAt) ? 'Heute' : formatDate(evts[0].createdAt),
      events: evts,
    }))
}

// ── EventRow ──────────────────────────────────────────────────────────────────

function EventRow({ event, isLast }: { event: ActivityEvent; isLast: boolean }) {
  const color = EVENT_COLORS[event.type] ?? '#64748b'
  const catMeta = CATEGORY_META[event.category]

  return (
    <Box sx={{ display: 'flex', gap: 1.5, position: 'relative' }}>
      {/* Vertical connector */}
      {!isLast && (
        <Box sx={{ position: 'absolute', left: 14, top: 32, bottom: -4, width: 2, bgcolor: '#e2e8f0', zIndex: 0 }} />
      )}

      {/* Icon dot */}
      <Box
        sx={{
          width: 30, height: 30, borderRadius: '50%', bgcolor: color,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, zIndex: 1, boxShadow: '0 0 0 3px white',
          mt: 0.25,
        }}
      >
        {getEventIcon(event.type)}
      </Box>

      {/* Content */}
      <Box sx={{ flex: 1, minWidth: 0, pb: isLast ? 0 : 2 }}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
          <Box sx={{ flex: 1, minWidth: 0 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
              <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.8125rem' }}>
                {EVENT_LABELS[event.type]}
              </Typography>
              <Chip
                label={catMeta.label}
                size="small"
                sx={{ height: 16, fontSize: '0.65rem', bgcolor: catMeta.color + '18', color: catMeta.color, fontWeight: 600 }}
              />
              {event.isAiAction && (
                <Tooltip title="Automatisch durch KI-System ausgeführt">
                  <Chip
                    label="KI"
                    size="small"
                    sx={{ height: 16, fontSize: '0.65rem', bgcolor: '#f1f5f9', color: '#6366f1', fontWeight: 700, cursor: 'default' }}
                  />
                </Tooltip>
              )}
            </Box>
            {event.notes && (
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25, lineHeight: 1.5 }}>
                {event.notes}
              </Typography>
            )}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
              {event.isAiAction
                ? <Bot size={11} color="#6366f1" />
                : <User size={11} color="#94a3b8" />
              }
              <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
                {event.isAiAction ? 'KI-System' : event.performedBy}
              </Typography>
            </Box>
          </Box>
          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem', flexShrink: 0, pt: 0.25 }}>
            {formatTime(event.createdAt)}
          </Typography>
        </Box>
      </Box>
    </Box>
  )
}

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

export default function ActivityTimeline() {
  const [filterCategory, setFilterCategory] = useState<ActivityCategory | 'ALL'>('ALL')

  const { data: resp, isLoading, error } = useQuery({
    queryKey: ['activityTimeline', 'org-wincasa'],
    queryFn: () => governanceService.getActivityLog('org-wincasa'),
    staleTime: 30_000,
  })

  const allEvents = resp?.data ?? []

  const filtered = filterCategory === 'ALL'
    ? allEvents
    : allEvents.filter(e => e.category === filterCategory)

  const grouped = groupByDate(filtered)

  const aiCount = allEvents.filter(e => e.isAiAction).length
  const humanCount = allEvents.length - aiCount
  const uniqueActors = new Set(allEvents.map(e => e.performedBy)).size
  const todayCount = allEvents.filter(e => isToday(e.createdAt)).length

  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100vh - 56px)' }}>
        <CircularProgress />
      </Box>
    )
  }

  if (error) {
    return (
      <Box sx={{ p: 3 }}>
        <Typography color="error">Aktivitätsverlauf konnte nicht geladen werden.</Typography>
      </Box>
    )
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
      {/* Header */}
      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 2.5, py: 1.5, flexShrink: 0 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
          <Activity size={18} color="#1e3a5f" />
          <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem', color: '#1e293b' }}>
            Aktivitäts-Timeline
          </Typography>
          {/* KPI chips */}
          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
            <Chip label={`${allEvents.length} Ereignisse`} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.7rem' }} />
            {todayCount > 0 && (
              <Chip label={`${todayCount} heute`} size="small" sx={{ bgcolor: '#eff6ff', color: '#1e40af', fontWeight: 600, fontSize: '0.7rem' }} />
            )}
            <Chip label={`${aiCount} KI-Aktionen`} size="small" sx={{ bgcolor: '#ede9fe', color: '#6366f1', fontWeight: 600, fontSize: '0.7rem' }} />
            <Chip label={`${humanCount} Menschlich`} size="small" sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', fontWeight: 600, fontSize: '0.7rem' }} />
            <Chip label={`${uniqueActors} Akteure`} size="small" sx={{ bgcolor: '#f8fafc', color: '#64748b', fontSize: '0.7rem' }} />
          </Box>
        </Box>
        <Typography variant="caption" color="text.secondary">
          End-to-End Aktivitätsverlauf — KI-Aktionen und Menschliche Entscheidungen im Überblick
        </Typography>
      </Box>

      {/* Filter bar */}
      <Box sx={{ px: 2.5, py: 0.875, borderBottom: '1px solid #e2e8f0', bgcolor: '#fafafa', flexShrink: 0 }}>
        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
          <Chip
            label="Alle"
            size="small"
            clickable
            onClick={() => setFilterCategory('ALL')}
            sx={{
              bgcolor: filterCategory === 'ALL' ? '#1e3a5f' : 'transparent',
              color: filterCategory === 'ALL' ? 'white' : '#64748b',
              border: `1px solid ${filterCategory === 'ALL' ? '#1e3a5f' : '#e2e8f0'}`,
              fontWeight: filterCategory === 'ALL' ? 700 : 400,
              fontSize: '0.75rem',
            }}
          />
          {ALL_CATEGORIES.map(cat => {
            const meta = CATEGORY_META[cat]
            const active = filterCategory === cat
            return (
              <Chip
                key={cat}
                label={meta.label}
                size="small"
                clickable
                onClick={() => setFilterCategory(cat)}
                sx={{
                  bgcolor: active ? meta.color : 'transparent',
                  color: active ? 'white' : meta.color,
                  border: `1px solid ${active ? meta.color : meta.color + '40'}`,
                  fontWeight: active ? 700 : 400,
                  fontSize: '0.75rem',
                }}
              />
            )
          })}
          {filterCategory !== 'ALL' && (
            <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto', alignSelf: 'center' }}>
              {filtered.length} von {allEvents.length}
            </Typography>
          )}
        </Stack>
      </Box>

      {/* Timeline body */}
      <Box sx={{ flex: 1, overflowY: 'auto', px: 2.5, py: 2 }}>
        {grouped.length === 0 ? (
          <EmptyState
            title="Keine Ereignisse"
            description="Für diesen Filter wurden keine Aktivitäten gefunden."
          />
        ) : (
          <Box sx={{ maxWidth: 760, mx: 'auto' }}>
            {grouped.map(({ key, label, events: dayEvents }) => (
              <Box key={key} sx={{ mb: 3 }}>
                {/* Day header */}
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1.5 }}>
                  <Typography
                    variant="caption"
                    sx={{
                      fontWeight: 700,
                      fontSize: '0.75rem',
                      color: isToday(dayEvents[0].createdAt) ? '#1e3a5f' : '#64748b',
                      textTransform: 'uppercase',
                      letterSpacing: 0.5,
                    }}
                  >
                    {label}
                  </Typography>
                  <Box sx={{ flex: 1, height: 1, bgcolor: '#e2e8f0' }} />
                  <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
                    {dayEvents.length} Ereignisse
                  </Typography>
                </Box>

                {/* Events */}
                <Box sx={{ pl: 0 }}>
                  {dayEvents.map((evt, idx) => (
                    <EventRow key={evt.id} event={evt} isLast={idx === dayEvents.length - 1} />
                  ))}
                </Box>
              </Box>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  )
}
