'use client'
// Alertes globales — agrège les anomalies de tous les projets
import { AppShell } from '@/components/shell/AppShell'
import { Breadcrumbs } from '@/components/shell/Breadcrumbs'
import { PageHeader } from '@/components/shell/PageHeader'
import { Card } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { StatusDot } from '@/components/ui/StatusDot'
import { getOpenAnomalies } from '@/lib/mock/anomalies'
import { projects } from '@/lib/mock/projects'
import { relativeTime } from '@/lib/utils'
import { motion } from 'framer-motion'
import Link from 'next/link'
import { TriangleAlert } from 'lucide-react'

export default function Page() {
  const anomalies = getOpenAnomalies()
  const byProject = (pid: string) => projects.find((p) => p.id === pid)
  const sev = (s: string) => (s === 'critical' ? 'danger' : s === 'warning' ? 'warning' : 'info') as 'danger' | 'warning' | 'info'

  return (
    <AppShell topbarContent={<Breadcrumbs items={[{ label: 'Alertes' }]} />}>
      <PageHeader title="Alertes" description={`${anomalies.length} anomalies ouvertes sur l'ensemble des projets`} />

      {anomalies.length === 0 ? (
        <Card padding="lg">
          <div className="flex items-center gap-2 text-text-secondary">
            <TriangleAlert size={18} strokeWidth={1.5} />
            Aucune anomalie ouverte. Tout fonctionne.
          </div>
        </Card>
      ) : (
        <div className="flex flex-col gap-2">
          {anomalies.map((a, idx) => {
            const p = byProject(a.projectId)
            return (
              <motion.div
                key={a.id}
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: idx * 0.03, ease: [0.16, 1, 0.3, 1] }}
              >
                <Link href={p ? `/projects/${p.id}` : '/projects'}>
                  <Card padding="md" interactive>
                    <div className="flex items-center gap-4">
                      <StatusDot status={a.severity === 'critical' ? 'critical' : a.severity === 'warning' ? 'warning' : 'info'} size="md" />
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <span className="text-body text-text-primary font-medium">{a.type.replace(/_/g, ' ')}</span>
                          <Badge variant={sev(a.severity)} size="xs">
                            {a.severity === 'critical' ? 'Critique' : a.severity === 'warning' ? 'Attention' : 'Info'}
                          </Badge>
                          {p && <span className="text-caption text-text-muted">· {p.name}</span>}
                        </div>
                        <p className="text-caption text-text-secondary mt-1 line-clamp-1">{a.description}</p>
                      </div>
                      <span className="text-caption text-text-muted font-mono flex-shrink-0">{relativeTime(a.detectedAt)}</span>
                    </div>
                  </Card>
                </Link>
              </motion.div>
            )
          })}
        </div>
      )}
    </AppShell>
  )
}