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

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

/**
 * Banner d'enforcement plan Free.
 *
 *  - Hidden : plan Pro/Business OU période de grâce active
 *  - "Approche" : 4-5 factures sur 5 → ton conseil
 *  - "Atteinte" : ≥ 5 factures sur 5 → 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();
  if (!sub) return null;
  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 5 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>
  );
}
