'use client'
// src/components/home/ActiveProjectsWidget.tsx
// Input: aucun — projets actifs/monitoring depuis mock
// Output: liste des 5 projets les plus récents avec statut + sparkline
// Rationale: accès rapide aux projets clés depuis le dashboard

import { useMemo } from 'react'
import { motion } from 'framer-motion'
import Link from 'next/link'
import { ArrowRight, Waypoints, Building2 } from 'lucide-react'
import { Card } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { StatusDot } from '@/components/ui/StatusDot'
import { SparkLine } from '@/components/charts/SparkLine'
import { Button } from '@/components/ui/Button'
import { projects } from '@/lib/mock'
import type { Project, ProjectStatus } from '@/types'
import type { DotStatus } from '@/components/ui/StatusDot'

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

function statusToDot(s: ProjectStatus): DotStatus {
  switch (s) {
    case 'active':     return 'online'
    case 'monitoring': return 'info'
    case 'alert':      return 'critical'
    case 'archived':   return 'offline'
  }
}

function statusLabel(s: ProjectStatus): string {
  switch (s) {
    case 'active':     return 'Actif'
    case 'monitoring': return 'Monitoring'
    case 'alert':      return 'Alerte'
    case 'archived':   return 'Archivé'
  }
}

function statusBadge(s: ProjectStatus) {
  switch (s) {
    case 'active':     return 'success' as const
    case 'monitoring': return 'info' as const
    case 'alert':      return 'danger' as const
    case 'archived':   return 'neutral' as const
  }
}

// Sparkline déterministe basé sur sensorsOnline du projet
function makeSparkline(seed: number, len = 12): number[] {
  const out: number[] = []
  let v = seed
  for (let i = 0; i < len; i++) {
    v += Math.sin(i * 1.2 + seed * 0.1) * 3 + (Math.random() - 0.5) * 2
    out.push(Math.max(1, v))
  }
  return out
}

function ProjectRow({ project, index }: { project: Project; index: number }) {
  const Icon = project.type === 'bridge' ? Waypoints : Building2
  const dotStatus = statusToDot(project.status)
  const badgeVariant = statusBadge(project.status)
  const sparkPoints = useMemo(
    () => makeSparkline(project.sensorsOnline + index),
    [project.sensorsOnline, index],
  )

  // Couleur sparkline selon statut
  const sparkColor =
    project.status === 'alert' ? '#F87171'
    : project.status === 'monitoring' ? '#60A5FA'
    : '#34D399'

  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: index * 0.055, ease: EASE_OUT }}
    >
      <Link href={`/projects/${project.id}`}>
        <div
          className="
            flex items-center gap-3 px-4 py-3
            border-b border-bg-border last:border-b-0
            hover:bg-bg-subtle transition-colors duration-fast
            cursor-pointer
          "
        >
          {/* Icône type */}
          <span
            className="flex-shrink-0 p-1.5 rounded-md"
            style={{ background: 'rgba(61,184,232,0.1)' }}
          >
            <Icon size={14} strokeWidth={1.5} className="text-accent" />
          </span>

          {/* Nom + localisation */}
          <div className="flex-1 min-w-0">
            <p className="text-body text-text-primary font-medium truncate">
              {project.name}
            </p>
            <p className="text-caption text-text-muted truncate">{project.location}</p>
          </div>

          {/* Badge statut */}
          <Badge variant={badgeVariant} size="xs">
            {statusLabel(project.status)}
          </Badge>

          {/* StatusDot */}
          <StatusDot status={dotStatus} size="md" />

          {/* SparkLine */}
          <div className="flex-shrink-0">
            <SparkLine
              points={sparkPoints}
              width={64}
              height={22}
              color={sparkColor}
            />
          </div>
        </div>
      </Link>
    </motion.div>
  )
}

export function ActiveProjectsWidget() {
  const activeProjects = useMemo(
    () =>
      projects
        .filter((p) => p.status !== 'archived')
        .sort(
          (a, b) =>
            new Date(b.lastMeasurementAt).getTime() -
            new Date(a.lastMeasurementAt).getTime(),
        )
        .slice(0, 5),
    [],
  )

  const count = activeProjects.length

  return (
    <Card
      header={
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-h3 text-text-primary font-medium">Projets actifs</span>
            <Badge variant="accent" size="xs">
              {count}
            </Badge>
          </div>
        </div>
      }
      padding="sm"
      className="h-full"
    >
      <div className="-m-3">
        {activeProjects.map((p, i) => (
          <ProjectRow key={p.id} project={p} index={i} />
        ))}
      </div>

      {/* Lien vers tous les projets */}
      <div className="mt-3 flex justify-end pt-3 border-t border-bg-border">
        <Link href="/projects">
          <Button
            variant="ghost"
            size="sm"
            iconRight={<ArrowRight size={12} strokeWidth={1.5} />}
          >
            Voir tous les projets
          </Button>
        </Link>
      </div>
    </Card>
  )
}