import { Gem } from "@/components/brand/Gem";
import { Card } from "@/components/ui/Card";
import { formatRubisToHours } from "@/lib/format";
import { cn } from "@/lib/utils";

/**
 * RubisHero — la pièce centrale du dashboard.
 * Cf. wireframe 4.1 : ◆ géant + "X rubis gagnés ce mois" + verbalisation
 * de la conversion en heures + barre de progression vers l'objectif mensuel.
 *
 * Layout asymétrique :
 *  - Mobile : centré, gem en haut
 *  - Desktop : gem à gauche (XL), texte au milieu, progression à droite
 *
 * Pas une carte plate "X stat" : c'est l'identité émotionnelle de l'app.
 */
type RubisHeroProps = {
  rubisThisMonth: number;
  /** Pourcentage 0-100 vers l'objectif. */
  monthlyGoalProgress: number;
  /** Top X% des utilisateurs sur le mois (si disponible). */
  percentile?: number;
  className?: string;
};

export function RubisHero({
  rubisThisMonth,
  monthlyGoalProgress,
  percentile,
  className,
}: RubisHeroProps) {
  const progress = Math.min(100, Math.max(0, monthlyGoalProgress));
  const hoursLabel = formatRubisToHours(rubisThisMonth);

  return (
    <Card variant="hero" padding="md" className={cn("relative overflow-hidden", className)}>
      {/* Halo rubis-glow en arrière-plan, très discret */}
      <div
        aria-hidden="true"
        className="absolute -top-20 -right-16 size-64 rounded-full pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(251,228,234,0.7), transparent 65%)",
        }}
      />

      <div className="relative z-10 flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8">
        <div className="flex shrink-0 items-center gap-4 sm:flex-col sm:items-center sm:gap-1">
          <Gem size={56} glow aria-label="Compteur de rubis" />
          <p className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-ink-3 sm:mt-1">
            Rubis
          </p>
        </div>

        <div className="flex-1 min-w-0">
          <p className="font-display text-[28px] font-bold leading-[1.1] tracking-[-0.022em] text-ink sm:text-[26px]">
            <span className="tabular-nums">{rubisThisMonth}</span> rubis{" "}
            <em className="not-italic text-rubis">gagnés</em> ce mois
          </p>
          <p className="mt-1.5 text-[13.5px] leading-relaxed text-ink-2">
            ≈{" "}
            <span className="font-semibold text-ink tabular-nums">{hoursLabel}</span>{" "}
            que vous n&apos;avez pas passées à relancer.
            {percentile !== undefined && (
              <>
                {" "}
                Vous êtes dans le <strong>top {percentile}&nbsp;%</strong> ce mois-ci.
              </>
            )}
          </p>
        </div>

        <div className="shrink-0 sm:w-[160px]">
          <div
            className="h-1.5 w-full overflow-hidden rounded-full bg-cream-2"
            role="progressbar"
            aria-valuenow={progress}
            aria-valuemin={0}
            aria-valuemax={100}
          >
            <div
              className="h-full bg-rubis transition-[width] duration-500"
              style={{ width: `${progress}%` }}
            />
          </div>
          <p className="mt-2 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-ink-3">
            Objectif mensuel · <span className="tabular-nums">{progress}&nbsp;%</span>
          </p>
        </div>
      </div>
    </Card>
  );
}