import {
  Bird,
  Camera,
  Globe,
  Music2,
  Play,
  Send,
  ThumbsUp,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * lucide-react v1 dropped its brand glyphs, and CONVENTIONS pins us to lucide only,
 * so each platform gets a neutral glyph plus its own tint instead of a copied logo.
 */
const PLATFORMS: Record<
  string,
  { label: string; icon: LucideIcon; tint: string }
> = {
  INSTAGRAM: {
    label: "Instagram",
    icon: Camera,
    tint: "bg-fuchsia-100 text-fuchsia-600 dark:bg-fuchsia-500/15 dark:text-fuchsia-400",
  },
  TIKTOK: {
    label: "TikTok",
    icon: Music2,
    tint: "bg-cyan-100 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-400",
  },
  YOUTUBE: {
    label: "YouTube",
    icon: Play,
    tint: "bg-red-100 text-red-600 dark:bg-red-500/15 dark:text-red-400",
  },
  FACEBOOK: {
    label: "Facebook",
    icon: ThumbsUp,
    tint: "bg-blue-100 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400",
  },
  TELEGRAM: {
    label: "Telegram",
    icon: Send,
    tint: "bg-sky-100 text-sky-600 dark:bg-sky-500/15 dark:text-sky-400",
  },
  TWITTER: {
    label: "X (Twitter)",
    icon: Bird,
    tint: "bg-slate-200 text-slate-700 dark:bg-slate-500/20 dark:text-slate-300",
  },
  OTHER: {
    label: "Other",
    icon: Globe,
    tint: "bg-violet-100 text-violet-600 dark:bg-violet-500/15 dark:text-violet-400",
  },
};

export function platformLabel(platform: string | null | undefined): string {
  if (!platform) return PLATFORMS.OTHER.label;
  return (PLATFORMS[platform] ?? PLATFORMS.OTHER).label;
}

export function platformTint(platform: string | null | undefined): string {
  if (!platform) return PLATFORMS.OTHER.tint;
  return (PLATFORMS[platform] ?? PLATFORMS.OTHER).tint;
}

/** Tinted rounded square holding the platform glyph. */
export function PlatformIcon({
  platform,
  className,
  iconClassName,
}: {
  platform: string | null | undefined;
  className?: string;
  iconClassName?: string;
}) {
  const entry = (platform && PLATFORMS[platform]) || PLATFORMS.OTHER;
  const Icon = entry.icon;
  return (
    <span
      aria-hidden
      className={cn(
        "flex size-10 shrink-0 items-center justify-center rounded-xl",
        entry.tint,
        className,
      )}
    >
      <Icon className={cn("size-5", iconClassName)} strokeWidth={2} />
    </span>
  );
}

export default PlatformIcon;