'use client'
// src/components/home/EventsFeed.tsx
// Input: anomalies via getOpenAnomalies() + events factices inline
// Output: feed scrollable des derniers événements, stagger fade-in
// Rationale: US2 — l'ingénieur voit immédiatement ce qui a changé

import { useMemo } from 'react'
import { motion } from 'framer-motion'
import Link from 'next/link'
import {
  TriangleAlert,
  FolderOpen,
  Rocket,
  Signal,
  RefreshCw,
} from 'lucide-react'
import { Card } from '@/components/ui/Card'
import { StatusDot } from '@/components/ui/StatusDot'
import { Badge } from '@/components/ui/Badge'
import { relativeTime } from '@/lib/utils'
import { getOpenAnomalies } from '@/lib/mock'
import type { DotStatus } from '@/components/ui/StatusDot'

const EASE_OUT = [0.16, 1, 0.3, 1]

// Type interne
interface FeedEvent {
  id: string
  ts: string
  severity: 'critical' | 'warning' | 'info' | 'success'
  icon: React.ReactNode
  label: string
  sub?: string
  href?: string
}

// Mapper severity → DotStatus
function severityToStatus(s: FeedEvent['severity']): DotStatus {
  switch (s) {
    case 'critical': return 'critical'
    case 'warning':  return 'warning'
    case 'info':     return 'info'
    case 'success':  return 'online'
  }
}

// Mapper severity → BadgeVariant
function severityToBadge(s: FeedEvent['severity']) {
  switch (s) {
    case 'critical': return 'danger' as const
    case 'warning':  return 'warning' as const
    case 'info':     return 'info' as const
    case 'success':  return 'success' as const
  }
}

// Événements factices (projets, déploiements, sync)
const STATIC_EVENTS: FeedEvent[] = [
  {
    id: 'ev-static-1',
    ts: '2026-04-15T10:30:00Z',
    severity: 'success',
    icon: <Rocket size={13} strokeWidth={1.5} />,
    label: 'Déploiement Bureau Études Lambda terminé',
    sub: 'v2.4.1 — Structura chiffré déployé avec succès',
    href: '/partners',
  },
  {
    id: 'ev-static-2',
    ts: '2026-04-15T09:12:00Z',
    severity: 'info',
    icon: <FolderOpen size={13} strokeWidth={1.5} />,
    label: 'Nouveau projet ajouté',
    sub: 'Pont de la Confluence Grenoble — proj-009',
    href: '/projects/proj-009',
  },
  {
    id: 'ev-static-3',
    ts: '2026-04-14T23:50:00Z',
    severity: 'info',
    icon: <RefreshCw size={13} strokeWidth={1.5} />,
    label: 'Synchronisation capteurs complétée',
    sub: '156 / 158 capteurs mis à jour',
  },
  {
    id: 'ev-static-4',
    ts: '2026-04-14T18:00:00Z',
    severity: 'success',
    icon: <Signal size={13} strokeWidth={1.5} />,
    label: 'Capteur A-14 remis en ligne',
    sub: 'Batterie remplacée — Viaduc de la Vézère',
    href: '/projects/proj-001',
  },
]

function EventItem({ event, index }: { event: FeedEvent; index: number }) {
  const status = severityToStatus(event.severity)
  const badgeVariant = severityToBadge(event.severity)

  const inner = (
    <div
      className="
        flex items-start gap-3 px-4 py-3
        border-b border-bg-border last:border-b-0
        hover:bg-bg-subtle transition-colors duration-fast
      "
    >
      {/* Status dot */}
      <div className="flex-shrink-0 mt-0.5">
        <StatusDot status={status} size="md" />
      </div>

      {/* Contenu */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="text-body text-text-primary font-medium truncate">
            {event.label}
          </span>
          <Badge variant={badgeVariant} size="xs">
            {event.severity === 'critical' ? 'Critique'
              : event.severity === 'warning' ? 'Alerte'
              : event.severity === 'success' ? 'OK'
              : 'Info'}
          </Badge>
        </div>
        {event.sub && (
          <p className="text-caption text-text-muted mt-0.5 truncate">{event.sub}</p>
        )}
      </div>

      {/* Timestamp */}
      <span className="flex-shrink-0 text-caption text-text-muted font-mono">
        {relativeTime(event.ts)}
      </span>
    </div>
  )

  const wrapped = event.href ? (
    <Link href={event.href} className="block">
      {inner}
    </Link>
  ) : (
    inner
  )

  return (
    <motion.div
      initial={{ opacity: 0, x: -6 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.3, delay: index * 0.055, ease: EASE_OUT }}
    >
      {wrapped}
    </motion.div>
  )
}

export function EventsFeed() {
  const events = useMemo<FeedEvent[]>(() => {
    // Anomalies ouvertes → events
    const anomalyEvents: FeedEvent[] = getOpenAnomalies()
      .slice(0, 4)
      .map((a) => ({
        id: a.id,
        ts: a.detectedAt,
        severity: a.severity === 'critical' ? 'critical' : a.severity === 'warning' ? 'warning' : 'info',
        icon: <TriangleAlert size={13} strokeWidth={1.5} />,
        label: a.description.slice(0, 60) + (a.description.length > 60 ? '…' : ''),
        sub: `Capteur ${a.sensorId} — ${a.type.replace(/_/g, ' ')}`,
        href: `/projects/${a.projectId}`,
      }))

    // Fusionner + trier par date décroissante
    return [...anomalyEvents, ...STATIC_EVENTS]
      .sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime())
      .slice(0, 10)
  }, [])

  return (
    <Card
      header={
        <div className="flex items-center justify-between">
          <span className="text-h3 text-text-primary font-medium">Derniers événements</span>
          <span className="text-caption text-text-muted">{events.length} entrées</span>
        </div>
      }
      padding="sm"
      className="h-full"
    >
      <div className="max-h-[400px] overflow-y-auto -m-3">
        {events.map((ev, i) => (
          <EventItem key={ev.id} event={ev} index={i} />
        ))}
        {events.length === 0 && (
          <p className="text-body text-text-muted px-4 py-6 text-center">
            Aucun événement récent.
          </p>
        )}
      </div>
    </Card>
  )
}