// src/components/backlink/source-badges.tsx
import {
  ChartNoAxesColumnIncreasingIcon,
  ShieldAlertIcon,
  SlashIcon,
} from "lucide-react";
import { Flag } from "@/components/ui/flag";
import { ACCENT, PILL, SwatchPill } from "@/components/ui/pill";
import type { Effort, LinkType, SourceKind } from "@/lib/backlink/types";
import { SOURCE_KIND_LABEL } from "@/lib/backlink/types";
import { cn } from "@/lib/utils";

/** All Kind badges share the primary tint (uniform, like community/subreddit). */
export function KindBadge({ kind }: { kind: SourceKind }) {
  return (
    <span className={cn(PILL, ACCENT.primary)}>
      {SOURCE_KIND_LABEL.get(kind) ?? kind}
    </span>
  );
}

const LINK_TYPE_ACCENT: Record<LinkType, keyof typeof ACCENT> = {
  dofollow: "emerald",
  nofollow: "rose",
  mixed: "amber",
};

export function LinkTypeBadge({ value }: { value: LinkType }) {
  return <SwatchPill accent={LINK_TYPE_ACCENT[value]}>{value}</SwatchPill>;
}

/** Effort = a colored "increasing bars" icon + label (low→green, high→red). */
const EFFORT_META: Record<Effort, { label: string; className: string }> = {
  low: { label: "Low", className: "text-emerald-400" },
  medium: { label: "Medium", className: "text-amber-400" },
  high: { label: "High", className: "text-rose-400" },
};

export function EffortBadge({ value }: { value: Effort }) {
  const m = EFFORT_META[value];
  return (
    <span
      className={cn("inline-flex items-center justify-center", m.className)}
      title={`Effort : ${m.label}`}
    >
      <ChartNoAxesColumnIncreasingIcon
        className="size-4"
        aria-label={`Effort ${m.label}`}
      />
    </span>
  );
}

export function FlagIcons({
  flags,
}: {
  flags: { toxic: boolean; disavow: boolean };
}) {
  if (!flags.toxic && !flags.disavow)
    return <span className="text-muted-foreground">—</span>;
  return (
    <span className="inline-flex items-center gap-1">
      {flags.toxic ? (
        <ShieldAlertIcon className="size-4 text-red-600" aria-label="toxic" />
      ) : null}
      {flags.disavow ? (
        <SlashIcon className="size-4 text-amber-600" aria-label="disavow" />
      ) : null}
    </span>
  );
}

/** Language -> flag country (editorial choice: en -> GB, the language not US). */
const LANGUAGE_COUNTRY: Record<string, string> = {
  en: "GB",
  fr: "FR",
  de: "DE",
  es: "ES",
  it: "IT",
  pt: "PT",
  nl: "NL",
  pl: "PL",
  sv: "SE",
  da: "DK",
  no: "NO",
  fi: "FI",
  ru: "RU",
  ja: "JP",
  zh: "CN",
  ko: "KR",
};

/** Simple flag for a source's language; <Flag> falls back to a neutral globe. */
export function LanguageFlag({ code }: { code: string }) {
  const country = LANGUAGE_COUNTRY[code.toLowerCase()];
  return <Flag code={country} title={code.toUpperCase()} className="h-3.5" />;
}