import clsx from "clsx";

/** Platform brand icon + color mapping */
const PLATFORM_META: Record<string, { icon: string; color: string }> = {
  Facebook: { icon: "fa-brands fa-facebook", color: "#1877f2" },
  Instagram: { icon: "fa-brands fa-instagram", color: "#e4405f" },
  TikTok: { icon: "fa-brands fa-tiktok", color: "#000" },
  Twitter: { icon: "fa-brands fa-x-twitter", color: "#000" },
  LinkedIn: { icon: "fa-brands fa-linkedin", color: "#0a66c2" },
  Pinterest: { icon: "fa-brands fa-pinterest", color: "#bd081c" },
  YouTube: { icon: "fa-brands fa-youtube", color: "#ff0000" },
  Threads: { icon: "fa-brands fa-threads", color: "#000" },
  Bluesky: { icon: "fa-brands fa-bluesky", color: "#0085ff" },
  Mastodon: { icon: "fa-brands fa-mastodon", color: "#6364ff" },
};

export { PLATFORM_META };

export interface Channel {
  id: string;
  name: string;
  type: string;
  status: string;
  pictureUrl?: string;
  username?: string;
}

interface Props {
  channels: Channel[];
  selected: Set<string> | string[];
  onToggle: (channelId: string) => void;
  /** Show channel name below avatar (default: false — tooltip only) */
  showNames?: boolean;
}

/**
 * Shared channel/profile selector matching the Viraly SPA style.
 *
 * Renders profile avatars with a small platform-brand badge in the bottom-right.
 * Selected = full color + platform-colored ring.
 * Unselected = grayscale + no ring.
 */
export default function ChannelSelector({ channels, selected, onToggle, showNames }: Props) {
  const selectedSet = selected instanceof Set ? selected : new Set(selected);

  return (
    <div className="vr-flex vr-flex-wrap vr-gap-3">
      {channels.map((ch) => {
        const isSelected = selectedSet.has(ch.id);
        const meta = PLATFORM_META[ch.type] || { icon: "fa-solid fa-globe", color: "#666" };

        return (
          <button
            key={ch.id}
            type="button"
            onClick={() => onToggle(ch.id)}
            title={`${ch.name} (${ch.type})`}
            className={clsx(
              "vr-flex vr-flex-col vr-items-center vr-gap-1.5 vr-p-0 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-transition-all",
              isSelected ? "vr-grayscale-0" : "vr-grayscale hover:vr-grayscale-0"
            )}
          >
            {/* Avatar wrapper with ring */}
            <span
              className={clsx(
                "vr-relative vr-rounded-full vr-transition-all",
                isSelected
                  ? "vr-ring-2 vr-ring-offset-2"
                  : "vr-ring-0"
              )}
              style={isSelected ? { ["--tw-ring-color" as string]: meta.color } : undefined}
            >
              {/* Profile picture or fallback */}
              {ch.pictureUrl ? (
                <img
                  src={ch.pictureUrl}
                  alt=""
                  className="vr-w-10 vr-h-10 vr-rounded-full vr-object-cover vr-bg-gray-100"
                />
              ) : (
                <span className="vr-w-10 vr-h-10 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-bg-gray-100">
                  <i className={meta.icon} style={{ fontSize: "18px", color: meta.color }} />
                </span>
              )}

              {/* Platform badge — bottom right */}
              <span
                className="vr-absolute vr--bottom-0.5 vr--right-0.5 vr-w-4.5 vr-h-4.5 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-border-2 vr-border-white"
                style={{ backgroundColor: meta.color, width: "18px", height: "18px" }}
              >
                <i className={meta.icon} style={{ fontSize: "8px", color: "#fff" }} />
              </span>
            </span>

            {/* Optional name */}
            {showNames && (
              <span className={clsx(
                "vr-text-xs vr-font-medium vr-max-w-[56px] vr-truncate vr-text-center",
                isSelected ? "vr-text-gray-900" : "vr-text-gray-400"
              )}>
                {ch.name}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}