import Image from "next/image";
import { OTHERS, party, partyVar, partyLabel, partyName } from "@/lib/parties";
import { cls } from "@/lib/format";

/** Logo officiel du parti, jamais déformé ni recoloré. Le PCQ (logo blanc) est posé sur sa pastille marine officielle. */
export function PartyLogo({ id, height = 20, className, white = false }: { id: string | null | undefined; height?: number; className?: string; white?: boolean }) {
  const p = party(id);
  if (!p) return <PartyBadge id={id} className={className} />;
  const width = Math.round(height * p.logoRatio);
  const src = white && p.logoWhite ? p.logoWhite : p.logo;
  // thème sombre : variante blanche officielle quand elle existe (le marine du PQ disparaît sur fond noir)
  const img = p.logoWhite && !white ? (
    <>
      <Image src={p.logo} alt={`Logo officiel — ${p.officialName}`} width={width} height={height} className="object-contain dark:hidden" style={{ height, width: "auto", maxWidth: width }} unoptimized />
      <Image src={p.logoWhite} alt="" aria-hidden width={width} height={height} className="object-contain hidden dark:inline" style={{ height, width: "auto", maxWidth: width }} unoptimized />
    </>
  ) : (
    <Image src={src} alt={`Logo officiel — ${p.officialName}`} width={width} height={height} className="object-contain" style={{ height, width: "auto", maxWidth: width }} unoptimized />
  );
  if (p.logoBackdrop && !white) {
    return (
      <span className={cls("inline-flex items-center rounded-[6px] px-2 py-1", className)} style={{ background: p.logoBackdrop }} title={p.officialName}>
        {img}
      </span>
    );
  }
  return <span className={cls("inline-flex items-center", className)} title={p.officialName}>{img}</span>;
}

/** Pastille sigle + couleur (accessibilité : texte toujours présent). */
export function PartyBadge({ id, className, size = "md" }: { id: string | null | undefined; className?: string; size?: "sm" | "md" | "lg" }) {
  const color = partyVar(id);
  const label = partyLabel(id);
  const sz = size === "sm" ? "text-[10px] px-1.5 py-[2px]" : size === "lg" ? "text-sm px-2.5 py-1" : "text-[11px] px-2 py-[3px]";
  return (
    <span className={cls("inline-flex items-center gap-1.5 rounded-[6px] font-semibold tracking-wide text-white num", sz, className)} style={{ background: color }} title={partyName(id)} aria-label={partyName(id)}>
      {label}
    </span>
  );
}

export function PartyDot({ id, size = 8, className }: { id: string | null | undefined; size?: number; className?: string }) {
  return <span aria-hidden className={cls("inline-block rounded-full shrink-0", className)} style={{ width: size, height: size, background: partyVar(id) }} />;
}

export function PartyText({ id, full = false, className }: { id: string | null | undefined; full?: boolean; className?: string }) {
  return (
    <span className={cls("inline-flex items-center gap-1.5", className)}>
      <PartyDot id={id} />
      <span className="font-semibold">{full ? partyName(id) : partyLabel(id)}</span>
    </span>
  );
}

export { OTHERS };