'use client';

import type { LucideIcon } from 'lucide-react';

import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export function formatDateHeure(valeur: string | null | undefined): string {
  if (!valeur) {
    return '—';
  }

  const date = new Date(valeur);

  return Number.isNaN(date.getTime())
    ? '—'
    : new Intl.DateTimeFormat('fr-FR', {
        dateStyle: 'short',
        timeStyle: 'short',
      }).format(date);
}

export function formatOctets(valeur: number | null | undefined): string {
  if (valeur == null) {
    return '—';
  }

  const unites = ['o', 'Ko', 'Mo', 'Go'];
  let taille = valeur;
  let unite = 0;

  while (taille >= 1024 && unite < unites.length - 1) {
    taille /= 1024;
    unite += 1;
  }

  return `${taille.toFixed(unite === 0 ? 0 : 1)} ${unites[unite]}`;
}

const TONES = {
  brand: 'bg-brand-50 text-brand-600',
  neutre: 'bg-muted text-muted-foreground',
  alerte: 'bg-destructive/10 text-destructive',
} as const;

export function StatCard({
  label,
  value,
  icon: Icon,
  hint,
  tone = 'brand',
}: {
  label: string;
  value: number | string;
  icon: LucideIcon;
  hint?: string;
  tone?: keyof typeof TONES;
}) {
  return (
    <Card className="relative overflow-hidden transition-shadow duration-200 hover:shadow-md">
      <span
        aria-hidden
        className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand-400/60 to-transparent"
      />

      <CardContent className="p-5">
        <div className="flex items-start justify-between gap-3">
          <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
            {label}
          </p>
          <span
            aria-hidden
            className={cn(
              'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',
              TONES[tone],
            )}
          >
            <Icon className="h-[18px] w-[18px]" strokeWidth={1.9} />
          </span>
        </div>

        <p className="mt-3 text-3xl font-bold leading-none tracking-tight tabular-nums">
          {value}
        </p>

        {hint ? (
          <p className="mt-2 text-xs text-muted-foreground">{hint}</p>
        ) : null}
      </CardContent>
    </Card>
  );
}

export function SectionCard({
  title,
  description,
  action,
  children,
  className,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <Card className={cn('overflow-hidden', className)}>
      <div className="flex items-start justify-between gap-4 border-b bg-muted/40 px-5 py-4">
        <div className="min-w-0 space-y-0.5">
          <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
          {description ? (
            <p className="text-xs text-muted-foreground">{description}</p>
          ) : null}
        </div>
        {action}
      </div>

      <CardContent className="p-5">{children}</CardContent>
    </Card>
  );
}

export function ListeVide({ message }: { message: string }) {
  return (
    <p className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
      {message}
    </p>
  );
}