import type { Channel } from "../types/channel";

function getProfileUrl(channel: Channel): string | null {
  const u = channel.username;
  const eid = channel.externalId;
  switch (channel.type) {
    case "Instagram": return u ? `https://instagram.com/${u}` : null;
    case "Facebook": return eid ? `https://facebook.com/${eid}` : null;
    case "Twitter": return u ? `https://x.com/${u}` : null;
    case "LinkedIn": return u ? `https://linkedin.com/in/${u}` : (eid ? `https://linkedin.com/company/${eid}` : null);
    case "TikTok": return u ? `https://tiktok.com/@${u}` : null;
    case "YouTube": return eid ? `https://youtube.com/channel/${eid}` : null;
    case "Pinterest": return u ? `https://pinterest.com/${u}` : null;
    case "Threads": return u ? `https://threads.net/@${u}` : null;
    case "Bluesky": return u ? `https://bsky.app/profile/${u}` : null;
    case "Mastodon": return u ? `https://${u}` : null;
    default: return null;
  }
}

const PLATFORM_ICONS: 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: "#000000" },
  Twitter: { icon: "fa-brands fa-x-twitter", color: "#000000" },
  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: "#000000" },
  Bluesky: { icon: "fa-brands fa-bluesky", color: "#0085ff" },
  Mastodon: { icon: "fa-brands fa-mastodon", color: "#6364ff" },
};

interface Props {
  channel: Channel;
  onDisconnect: (id: string, name: string) => void;
  disconnecting?: boolean;
}

export default function ChannelCard({ channel, onDisconnect, disconnecting }: Props) {
  const meta = PLATFORM_ICONS[channel.type] || { icon: "fa-solid fa-globe", color: "#666" };
  const isActive = channel.status === "Active";

  return (
    <div
      className={`vr-flex vr-items-center vr-gap-3 vr-p-4 vr-bg-white vr-border vr-border-gray-200 vr-rounded-lg vr-transition-all hover:vr-shadow-sm ${disconnecting ? "vr-opacity-50 vr-pointer-events-none" : ""}`}
    >
      {/* Avatar or icon */}
      {channel.pictureUrl ? (
        <div className="vr-relative vr-flex-shrink-0">
          <img
            src={channel.pictureUrl}
            alt=""
            className="vr-w-10 vr-h-10 vr-rounded-full vr-object-cover vr-border-2 vr-border-gray-200"
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = "none";
              (e.target as HTMLImageElement).nextElementSibling!.classList.remove("vr-hidden");
            }}
          />
          <div className="vr-hidden vr-w-10 vr-h-10 vr-flex vr-items-center vr-justify-center" style={{ color: meta.color }}>
            <i className={`${meta.icon} vr-text-xl`} />
          </div>
          <span
            className="vr-absolute vr--bottom-0.5 vr--right-0.5 vr-w-4 vr-h-4 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-border-[1.5px] vr-border-white"
            style={{ background: meta.color }}
          >
            <i className={`${meta.icon} vr-text-white`} style={{ fontSize: "8px" }} />
          </span>
        </div>
      ) : (
        <div className="vr-w-10 vr-h-10 vr-flex vr-items-center vr-justify-center vr-flex-shrink-0" style={{ color: meta.color }}>
          <i className={`${meta.icon} vr-text-xl`} />
        </div>
      )}

      {/* Info */}
      <div className="vr-flex-1 vr-min-w-0">
        {(() => {
          const url = getProfileUrl(channel);
          return url ? (
            <a
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-truncate vr-flex vr-items-center vr-gap-1 hover:vr-text-primary-600 vr-transition-colors vr-no-underline"
            >
              <span className="vr-truncate">{channel.name}</span>
              <i className="fa-solid fa-arrow-up-right-from-square vr-text-gray-300 vr-flex-shrink-0" style={{ fontSize: "9px" }} />
            </a>
          ) : (
            <p className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-truncate">{channel.name}</p>
          );
        })()}
        {channel.username && (
          <p className="vr-text-xs vr-text-gray-400 vr-truncate">@{channel.username}</p>
        )}
      </div>

      {/* Status + actions */}
      <div className="vr-flex vr-items-center vr-gap-2.5 vr-flex-shrink-0">
        <span
          className={`vr-inline-flex vr-items-center vr-gap-1 vr-px-2.5 vr-py-0.5 vr-rounded-full vr-text-xs vr-font-semibold vr-uppercase vr-tracking-wide ${
            isActive
              ? "vr-bg-emerald-50 vr-text-emerald-600"
              : "vr-bg-red-50 vr-text-red-500"
          }`}
        >
          <span className={`vr-w-1.5 vr-h-1.5 vr-rounded-full ${isActive ? "vr-bg-emerald-500" : "vr-bg-red-400"}`} />
          {channel.status}
        </span>

        <button
          onClick={() => onDisconnect(channel.id, channel.name)}
          className="vr-w-7 vr-h-7 vr-flex vr-items-center vr-justify-center vr-rounded-md vr-text-gray-300 hover:vr-text-red-500 hover:vr-bg-red-50 vr-transition-colors vr-border-0"
          title="Disconnect"
        >
          <i className="fa-solid fa-xmark vr-text-sm" />
        </button>
      </div>
    </div>
  );
}