import { Link } from "@tanstack/react-router";
import { Plus, ArrowRight, Sparkles, Copy as CopyIcon } from "lucide-react";

import type { Plan } from "@rubis/shared";
import { Card } from "@/components/ui/Card";
import { planMoodLabel } from "@/lib/plans";
import { cn } from "@/lib/utils";

/**
 * Card d'un plan dans la bibliothèque (cf. wireframe 3.1).
 *
 * Hiérarchie d'info (en accord avec le feedback retour utilisateur) :
 *  - Le titre est primaire
 *  - Une seule meta en haut-droite : soit "★ Le plus utilisé" pour LE plan
 *    le plus actif (signal utile), soit le label de tonalité (signal de
 *    différenciation pour les autres). Les deux ne coexistent pas — un seul
 *    chip par card.
 *  - Aperçu des étapes avec ◆ comme bullet (notre marqueur, pas un point neutre)
 *  - Footer : usage + lien Modifier
 *
 * Pas de "PLAN PAR DÉFAUT" affiché : tous les plans seedés sont par défaut,
 * l'info est tautologique. Quand l'utilisateur créera ses propres plans,
 * on pourra distinguer (cf. V2).
 */
type PlanCardProps = {
  plan: Plan & { usageCount?: number };
  /** Si true, affiche le badge "★ Le plus utilisé" en lieu et place du chip de ton. */
  isMostUsed?: boolean;
  className?: string;
};

const MOOD_CHIP: Record<string, string> = {
  Doux: "bg-rubis-glow text-rubis-deep border-rubis-glow/60",
  Standard: "bg-cream-2 text-ink-2 border-line",
  Ferme: "bg-cream-2 text-ink border-line",
  Strict: "bg-rubis-glow text-rubis-deep border-rubis/30",
};

export function PlanCard({ plan, isMostUsed = false, className }: PlanCardProps) {
  const mood = planMoodLabel(plan);
  const usage = plan.usageCount ?? 0;

  return (
    <Card
      padding="md"
      className={cn(
        "flex flex-col h-full min-w-0 transition-all duration-150",
        "hover:border-ink-3 hover:shadow-card",
        className,
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <p className="font-display text-[16px] font-semibold tracking-[-0.018em] text-ink truncate min-w-0">
          {plan.name}
        </p>
        {isMostUsed ? (
          <span
            className={cn(
              "shrink-0 inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5",
              "border-rubis bg-rubis-glow text-rubis-deep",
              "font-sans text-[11px] font-semibold leading-tight whitespace-nowrap",
            )}
          >
            <Sparkles size={11} aria-hidden="true" /> Le plus utilisé
          </span>
        ) : (
          <span
            className={cn(
              "shrink-0 rounded-full border px-2.5 py-0.5",
              "font-sans text-[11px] font-medium leading-tight whitespace-nowrap",
              MOOD_CHIP[mood] ?? MOOD_CHIP.Standard,
            )}
          >
            {mood}
          </span>
        )}
      </div>

      {plan.description && (
        <p className="mt-2 text-[12.5px] leading-relaxed text-ink-3 line-clamp-2">
          {plan.description}
        </p>
      )}

      <ul className="mt-4 mb-6 flex flex-col gap-1.5 text-[12.5px] text-ink-2">
        {plan.steps.slice(0, 3).map((step) => (
          <li key={step.id} className="flex items-baseline gap-2">
            <span
              className="shrink-0 size-[5px] rotate-45 bg-rubis"
              aria-hidden="true"
            />
            <span className="tabular-nums font-semibold text-ink">
              J{step.offsetDays >= 0 ? "+" : ""}
              {step.offsetDays}
            </span>
            <span className="text-ink-3">·</span>
            <span className="truncate">
              {step.requiresManualValidation ? "Mise en demeure" : labelForTone(step.tone)}
            </span>
          </li>
        ))}
        {plan.steps.length > 3 && (
          <li className="text-[11.5px] italic text-ink-3 ml-3.5">
            +{plan.steps.length - 3} étape{plan.steps.length - 3 > 1 ? "s" : ""}
          </li>
        )}
      </ul>

      <div className="mt-auto pt-4 flex items-center justify-between border-t border-line">
        <p className="text-[11.5px] text-ink-3">
          {usage > 0 ? (
            <>
              Utilisé sur <strong className="font-semibold text-ink-2 tabular-nums">{usage}</strong>{" "}
              facture{usage > 1 ? "s" : ""}
            </>
          ) : (
            <span className="italic">Aucune facture active</span>
          )}
        </p>
        <div className="flex items-center gap-3">
          {plan.slug && (
            <Link
              to="/plans/nouveau"
              search={{ from: plan.slug }}
              className="inline-flex items-center gap-1 text-[11.5px] font-medium text-ink-3 hover:text-ink-2"
              title="Créer un plan en partant de celui-ci"
            >
              <CopyIcon size={11} aria-hidden="true" /> Dupliquer
            </Link>
          )}
          {plan.slug && (
            <Link
              to="/plans/$slug"
              params={{ slug: plan.slug }}
              className="inline-flex items-center gap-1 text-[12px] font-medium text-rubis hover:underline underline-offset-4"
            >
              Modifier <ArrowRight size={12} aria-hidden="true" />
            </Link>
          )}
        </div>
      </div>
    </Card>
  );
}

function labelForTone(tone: string): string {
  switch (tone) {
    case "amical":
      return "Rappel amical";
    case "courtois":
      return "Relance courtoise";
    case "ferme":
      return "Relance ferme";
    case "mise_en_demeure":
      return "Mise en demeure";
    default:
      return "Email programmé";
  }
}

/**
 * Card "+ Créer un plan" — entrée du wizard 4 étapes.
 * Lien direct vers `/plans/nouveau`. Pour partir d'un plan existant,
 * passer par "Dupliquer" sur la card du plan source.
 */
export function CreatePlanCard() {
  return (
    <Link
      to="/plans/nouveau"
      className={cn(
        "flex flex-col items-center justify-center gap-2 w-full h-full",
        "rounded-card border-2 border-dashed border-line bg-transparent p-6 min-h-[220px]",
        "text-ink-3 transition-colors hover:border-rubis hover:text-rubis-deep hover:bg-rubis-glow/20",
        "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
      )}
    >
      <Plus size={26} strokeWidth={1.5} aria-hidden="true" />
      <span className="font-display text-[14.5px] font-semibold text-ink">
        Créer un plan
      </span>
      <span className="text-[11.5px] italic text-ink-3 max-w-[200px] text-center leading-snug">
        Wizard guidé en 4 étapes, avec assistance IA pour rédiger les emails.
      </span>
    </Link>
  );
}
