rubis/apps/web/src/components/billing/PlanLimitBanner.tsx

import { Link } from "@tanstack/react-router";
import { ArrowRight, Clock, Sparkles, Zap } from "lucide-react";

import { useSubscription, useTrialDaysRemaining } from "@/lib/billing";
import { cn } from "@/lib/utils";
import { formatDate } from "@/lib/format";

/**
 * Banner d'enforcement plan Free.
 *
 *  - "Essai" : essai 14 j actif → countdown rubis (toujours affiché)
 *  - Hidden : plan Pro/Business OU période de grâce active
 *  - "Approche" : ratio ≥ 80 % du quota → ton conseil
 *  - "Atteinte" : ratio ≥ 100 % du quota → ton blocant + CTA upgrade
 *
 * Posé en haut de /factures et /factures/import. Pas dans le dashboard
 * pour ne pas polluer la lecture des KPIs.
 */
export function PlanLimitBanner({ className }: { className?: string }) {
  const { data: sub } = useSubscription();
  const trialDays = useTrialDaysRemaining();
  if (!sub) return null;

  // Essai 14 j Pro actif → countdown discret rubis-glow, toujours visible
  // pendant la fenêtre. Pas blocant — l'user a accès Pro complet.
  if (sub.inTrial && trialDays !== null) {
    const dayLabel = trialDays > 1 ? "jours" : "jour";
    return (
      <div
        className={cn(
          "rounded-card border border-rubis/25 bg-rubis-glow/40 px-4 py-3",
          "flex items-center gap-3 text-[12.5px] text-ink-2",
          className,
        )}
      >
        <Clock size={14} className="text-rubis shrink-0" aria-hidden="true" />
        <p className="leading-snug flex-1 min-w-0">
          <strong className="text-ink font-semibold">Essai Pro</strong> — plus que{" "}
          <strong className="font-medium">
            {trialDays} {dayLabel}
          </strong>
          {sub.trialEndsAt ? (
            <>
              {" · prélèvement le "}
              <strong className="font-medium">{formatDate(sub.trialEndsAt)}</strong>
            </>
          ) : null}
        </p>
        <Link
          to="/parametres/abonnement"
          className="shrink-0 text-[12.5px] font-medium text-rubis hover:underline underline-offset-4"
        >
          Gérer
        </Link>
      </div>
    );
  }

  if (sub.plan !== "free") return null;
  const limit = sub.caps.activeInvoicesLimit;
  if (limit === null) return null;

  // En grace period → on affiche un mini-rappel doux, pas un blocking banner.
  if (sub.inGracePeriod && sub.gracePeriodEndsAt) {
    return (
      <div
        className={cn(
          "rounded-card border border-rubis-glow bg-rubis-glow/30 px-4 py-3",
          "flex items-center gap-3 text-[12.5px] text-ink-2",
          className,
        )}
      >
        <Sparkles size={14} className="text-rubis shrink-0" aria-hidden="true" />
        <p className="leading-snug">
          <strong className="text-ink font-semibold">Période de grâce</strong>{" "}
          — illimité jusqu'au{" "}
          <strong className="font-medium">
            {formatDate(sub.gracePeriodEndsAt)}
          </strong>
          . Au-delà, le plan Free est plafonné à {limit} factures actives.
        </p>
      </div>
    );
  }

  const ratio = sub.activeInvoicesCount / limit;
  if (ratio < 0.8) return null;

  const reached = sub.activeInvoicesCount >= limit;

  return (
    <div
      className={cn(
        "rounded-card border px-4 py-3.5 flex items-start gap-3",
        reached
          ? "border-rubis-deep bg-rubis-glow/40"
          : "border-rubis bg-rubis-glow/20",
        className,
      )}
    >
      <Zap
        size={16}
        className={cn(
          "shrink-0 mt-0.5",
          reached ? "text-rubis-deep" : "text-rubis",
        )}
        aria-hidden="true"
      />
      <div className="flex-1 min-w-0">
        <p className="font-display text-[14px] font-semibold text-ink leading-tight">
          {reached
            ? "Limite Free atteinte"
            : `Bientôt à la limite (${sub.activeInvoicesCount}/${limit})`}
        </p>
        <p className="mt-1 text-[12.5px] text-ink-2 leading-snug">
          {reached
            ? `Vous avez utilisé vos ${limit} factures actives gratuites. Passez Pro pour continuer à importer et relancer sans contrainte.`
            : "Vous approchez de la limite Free. Passer Pro maintenant évite l'interruption."}
        </p>
      </div>
      <Link
        to="/parametres/abonnement"
        className={cn(
          "shrink-0 inline-flex items-center gap-1.5 rounded-default px-3 py-2 cursor-pointer",
          "text-[12.5px] font-semibold transition-colors",
          reached
            ? "bg-rubis text-white hover:bg-rubis-deep"
            : "bg-white border border-rubis text-rubis hover:bg-rubis hover:text-white",
        )}
      >
        Passer Pro <ArrowRight size={12} aria-hidden="true" />
      </Link>
    </div>
  );
}