import type { LucideIcon } from "@/components/ui/icons";
import { cn } from "@/lib/utils";
import { Delta } from "./delta";

// KpiHero : KPI editorial featured pour les dashboards portail + admin.
// Audit huashu-design : la grille uniforme "8 stat cards mur de chiffres" est
// un template SaaS sans story. Promouvoir 1 KPI hero (Fraunces 6xl tabular +
// delta + libelle) creuse la hierarchie et donne le ton "atelier" jusque dans
// le produit (pas seulement marketing).
//
// Usage :
//   <KpiHero
//     eyebrow="Clics organiques · 28 derniers jours"
//     value={formatNumber(gsc.clicks)}
//     delta={gsc.deltas.clicks}
//     deltaSuffix="vs periode precedente"
//     icon={MousePointerClick}
//     secondary={[
//       { label: "Impressions", value: formatNumber(gsc.impressions) },
//       { label: "CTR", value: `${(gsc.ctr * 100).toFixed(2)}%` },
//       { label: "Position", value: gsc.position.toFixed(1) },
//     ]}
//   />

type SecondaryStat = {
  label: string;
  value: React.ReactNode;
};

type Props = {
  /** Petit label uppercase au-dessus de la valeur (ex: "Revenu mensuel recurrent"). */
  eyebrow: React.ReactNode;
  /** Valeur principale en gros Fraunces tabular. */
  value: React.ReactNode;
  /** Delta optionnel (pourcentage signe). */
  delta?: number;
  deltaInverted?: boolean;
  deltaSuffix?: string;
  /** Sous-texte sous la valeur (ex: "sur 12 sites · 8 clients actifs"). */
  subtitle?: React.ReactNode;
  /** Icone discrete en haut a droite. */
  icon?: LucideIcon;
  /** Strip de 2-3 KPI secondaires inline a droite/dessous (selon viewport). */
  secondary?: SecondaryStat[];
  className?: string;
};

export function KpiHero({
  eyebrow,
  value,
  delta,
  deltaInverted,
  deltaSuffix,
  subtitle,
  icon: Icon,
  secondary,
  className,
}: Props) {
  return (
    <div
      className={cn(
        "panel relative overflow-hidden p-6 md:p-8",
        // Texture papier locale + soft glow accent pour ancrer la signature
        // atelier. Pas de gradient/halo, juste une bordure accent renforcee.
        "border-accent/30",
        className,
      )}
    >
      <div className="flex flex-col gap-6 md:flex-row md:items-stretch md:justify-between md:gap-10">
        {/* Bloc principal : eyebrow + valeur Fraunces + delta */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-4">
            <div className="text-xxs uppercase tracking-[0.18em] font-semibold text-text-muted">
              {eyebrow}
            </div>
            {Icon && (
              <span
                aria-hidden
                className="size-9 rounded-md bg-accent-soft border border-accent/40 flex items-center justify-center text-accent shrink-0"
              >
                <Icon className="size-[18px]" strokeWidth={1.6} />
              </span>
            )}
          </div>

          <div className="mt-3 font-editorial text-5xl sm:text-6xl md:text-7xl font-medium text-text leading-[0.95] tabular-nums tracking-tight">
            {value}
          </div>

          {(delta !== undefined || subtitle) && (
            <div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-text-muted">
              {delta !== undefined && (
                <Delta value={delta} inverted={deltaInverted} suffix={deltaSuffix} />
              )}
              {subtitle && (
                <>
                  {delta !== undefined && (
                    <span aria-hidden className="text-text-faint">
                      ·
                    </span>
                  )}
                  <span>{subtitle}</span>
                </>
              )}
            </div>
          )}
        </div>

        {/* Strip KPI secondaires : vertical sur desktop, horizontal sur mobile */}
        {secondary && secondary.length > 0 && (
          <div className="md:border-l md:border-border md:pl-10 md:flex md:flex-col md:justify-center md:gap-5 md:min-w-[14rem]">
            <ul className="grid grid-cols-3 gap-4 md:grid-cols-1 md:gap-4">
              {secondary.map((s) => (
                <li key={s.label} className="min-w-0">
                  <div className="text-xxs uppercase tracking-wider text-text-faint truncate">
                    {s.label}
                  </div>
                  <div className="mt-1 font-editorial text-2xl font-medium text-text tabular-nums">
                    {s.value}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}