// src/components/projects/ProjectMetaCard.tsx
// Input: project (Project), sensorsOnline/Total (number), anomaliesCount (number)
// Output: card horizontale avec 5 stats résumant le projet
// Rationale: row d'info sous le PageHeader, full width

import { Card } from '@/components/ui/Card'
import { Stat } from '@/components/ui/Stat'
import { Badge } from '@/components/ui/Badge'
import { relativeTime } from '@/lib/utils'
import type { Project } from '@/types'

const criticalityLabel: Record<string, string> = {
  low:      'Faible',
  medium:   'Modérée',
  high:     'Élevée',
  critical: 'Critique',
}

const criticalityVariant: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
  low:      'success',
  medium:   'info',
  high:     'warning',
  critical: 'danger',
}

const typeLabel: Record<string, string> = {
  bridge:   'Pont',
  building: 'Bâtiment',
}

export interface ProjectMetaCardProps {
  project: Project
}

export function ProjectMetaCard({ project }: ProjectMetaCardProps) {
  return (
    <Card padding="md" className="mb-6">
      <div className="flex items-start gap-8 flex-wrap">
        {/* Type */}
        <div className="flex flex-col gap-1 min-w-[80px]">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">Type</span>
          <span className="text-body text-text-primary font-medium">
            {typeLabel[project.type] ?? project.type}
          </span>
        </div>

        {/* Séparateur */}
        <div className="w-px self-stretch bg-bg-border" />

        {/* Capteurs */}
        <div className="flex flex-col gap-1 min-w-[100px]">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">Capteurs en ligne</span>
          <div className="flex items-baseline gap-1">
            <Stat
              label=""
              value={project.sensorsOnline}
              unit={`/ ${project.sensorsCount}`}
              digits={0}
              className="!gap-0"
            />
          </div>
        </div>

        {/* Séparateur */}
        <div className="w-px self-stretch bg-bg-border" />

        {/* Anomalies */}
        <div className="flex flex-col gap-1 min-w-[80px]">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">Anomalies</span>
          <Stat
            label=""
            value={project.anomaliesCount}
            digits={0}
            className="!gap-0"
          />
        </div>

        {/* Séparateur */}
        <div className="w-px self-stretch bg-bg-border" />

        {/* Criticité */}
        <div className="flex flex-col gap-2 min-w-[90px]">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">Criticité</span>
          <Badge variant={criticalityVariant[project.criticality] ?? 'neutral'}>
            {criticalityLabel[project.criticality] ?? project.criticality}
          </Badge>
        </div>

        {/* Séparateur */}
        <div className="w-px self-stretch bg-bg-border" />

        {/* Dernière mesure */}
        <div className="flex flex-col gap-1 min-w-[120px]">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">Dernière mesure</span>
          <span className="text-body text-text-secondary font-mono text-sm">
            {relativeTime(project.lastMeasurementAt)}
          </span>
        </div>
      </div>
    </Card>
  )
}