import type { ReactNode } from "react";

import { cn, formatScore, formatVoteCount } from "@/lib/utils";

/**
 * Rating pill.
 *
 * The colour ramp is a single hue so a shelf of cards reads as one object:
 *   ≥ 7.5  strong green
 *   ≥ 6.5  amber
 *   < 6.5  muted rose
 *   0 / N/A neutral
 */
export function RatingBadge({
  score,
  votes,
  size = "md",
  showVotes = false,
  className,
}: {
  score: number;
  votes?: number;
  size?: "sm" | "md" | "lg";
  showVotes?: boolean;
  className?: string;
}) {
  const label = formatScore(score);
  // Score colour scales the star with the rating, matching the reference sites.
  const tone =
    score >= 7.5
      ? "text-emerald-300"
      : score >= 6.5
        ? "text-amber-300"
        : score > 0
          ? "text-rose-300"
          : "text-white/70";

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-xs bg-black/65 font-bold text-white backdrop-blur-sm ring-1 ring-white/10",
        size === "sm" && "px-1.5 py-0.5 text-[10px]",
        size === "md" && "px-2 py-1 text-[11px]",
        size === "lg" && "px-2.5 py-1.5 text-sm",
        className,
      )}
      title={
        votes
          ? `${label} / 10 · ${formatVoteCount(votes)} votes`
          : `${label} / 10`
      }
    >
      <svg viewBox="0 0 24 24" className={cn("h-3 w-3", tone)} aria-hidden>
        <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.6 6.1 20.7l1.2-6.6L2.5 9.5l6.6-.9L12 2.5z" fill="currentColor" />
      </svg>
      {label}
      {showVotes && votes ? (
        <span className="font-normal text-white/50">({formatVoteCount(votes)})</span>
      ) : null}
    </span>
  );
}

export function MetaDot() {
  return (
    <span aria-hidden className="text-ink-faint">
      •
    </span>
  );
}

export function MediaTypeBadge({ type, className }: { type: "movie" | "tv"; className?: string }) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-xs px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.08em]",
        type === "movie"
          ? "bg-white/12 text-white/85 ring-1 ring-white/15"
          : "bg-brand-500/18 text-brand-300 ring-1 ring-brand-500/30",
        className,
      )}
    >
      {type === "movie" ? "Film" : "Series"}
    </span>
  );
}

export function Pill({
  children,
  tone = "neutral",
  className,
}: {
  children: ReactNode;
  tone?: "neutral" | "brand" | "gold" | "success";
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-pill px-2.5 py-1 text-[11px] font-semibold ring-1",
        tone === "neutral" && "bg-white/8 text-ink-soft ring-white/10",
        tone === "brand" && "bg-brand-500/15 text-brand-300 ring-brand-500/25",
        tone === "gold" && "bg-amber-400/12 text-amber-300 ring-amber-400/25",
        tone === "success" && "bg-emerald-400/12 text-emerald-300 ring-emerald-400/25",
        className,
      )}
    >
      {children}
    </span>
  );
}