import clsx from "clsx";
import { viralySsoUrl } from "../utils/sso";

interface Props {
  defaultSocialSetId: string | null;
  disabled?: boolean;
  hasChannels?: boolean;
}

const PLATFORMS = [
  { key: "Instagram", icon: "fa-brands fa-instagram", color: "#E4405F", oauth: "instagram", desc: "Business or Creator account" },
  { key: "Facebook", icon: "fa-brands fa-facebook", color: "#1877F2", oauth: "facebook", desc: "Facebook Page" },
  { key: "TikTok", icon: "fa-brands fa-tiktok", color: "#000000", oauth: "tiktok", desc: "Business account" },
  { key: "Twitter", icon: "fa-brands fa-x-twitter", color: "#000000", display: "X", dashboardOnly: true, desc: "Personal or Business" },
  { key: "LinkedIn", icon: "fa-brands fa-linkedin", color: "#0A66C2", oauth: "linkedin", desc: "Profile or Company Page" },
  { key: "Pinterest", icon: "fa-brands fa-pinterest", color: "#E60023", oauth: "pinterest", desc: "Business account" },
  { key: "YouTube", icon: "fa-brands fa-youtube", color: "#FF0000", oauth: "google", desc: "YouTube Channel" },
  { key: "Threads", icon: "fa-brands fa-threads", color: "#000000", oauth: "threads", desc: "Threads profile" },
  { key: "Mastodon", icon: "fa-brands fa-mastodon", color: "#6364FF", oauth: "mastodon", desc: "Any Mastodon instance" },
  { key: "Bluesky", icon: "fa-brands fa-bluesky", color: "#0085FF", dashboardOnly: true, desc: "Bluesky profile" },
];

async function openOAuthPopup(platform: string, socialSetId: string) {
  // Fetch API key from server (not stored in frontend globals for security)
  let platformKey = "";
  try {
    const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
    const nonce = (window as any).viralyWP.restNonce;
    const res = await fetch(`${baseUrl}/platform-key`, {
      credentials: "same-origin",
      headers: { "X-WP-Nonce": nonce },
    });
    const data = await res.json();
    platformKey = data.key || "";
  } catch {
    alert("Failed to initiate OAuth. Please try again.");
    return;
  }
  if (!platformKey) {
    alert("Not connected to Viraly. Please connect first.");
    return;
  }

  const params = new URLSearchParams({
    platform,
    platform_key: platformKey,
    social_set_id: socialSetId,
    wp_origin: window.location.origin,
  });

  const url = `${viralyWP.appBaseUrl}/connect/oauth?${params}`;
  const w = 600, h = 700;
  const left = window.screenX + (window.outerWidth - w) / 2;
  const top = window.screenY + (window.outerHeight - h) / 2;

  const popup = window.open(url, `viraly-oauth-${platform}`, `width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`);

  if (!popup || popup.closed) {
    alert("Popup was blocked. Please allow popups for this site and try again.");
    return;
  }

  // Listen for result
  const handler = (event: MessageEvent) => {
    try {
      const appOrigin = new URL(viralyWP.appBaseUrl).origin;
      if (event.origin !== appOrigin) return;
    } catch {
      return;
    }

    if (event.data?.type === "viraly-oauth-complete" || event.data?.type === "viraly-oauth-error") {
      window.removeEventListener("message", handler);
      // Trigger React Query refetch by dispatching custom event
      window.dispatchEvent(new CustomEvent("viraly:channels-changed"));
    }
  };

  window.addEventListener("message", handler);

  // Poll for popup closure
  const poll = setInterval(() => {
    if (popup.closed) {
      clearInterval(poll);
      window.removeEventListener("message", handler);
      window.dispatchEvent(new CustomEvent("viraly:channels-changed"));
    }
  }, 500);
}

export default function PlatformGrid({ defaultSocialSetId, disabled, hasChannels }: Props) {
  return (
    <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-overflow-hidden">
      {/* Header */}
      <div className="vr-px-5 vr-py-4 vr-border-b vr-border-gray-200">
        <h3 className="vr-text-sm vr-font-bold vr-text-gray-900 vr-flex vr-items-center vr-gap-2">
          <i className="fa-solid fa-plus vr-text-primary-600" style={{ fontSize: "11px" }} />
          {hasChannels ? "Connect a New Social Profile" : "Connect Your Social Profiles"}
        </h3>
      </div>

      {/* Platform list */}
      <div className="vr-divide-y vr-divide-gray-100">
        {PLATFORMS.map((p) => {
          const name = p.display || p.key;

          if (disabled) {
            return (
              <div
                key={p.key}
                className="vr-flex vr-items-center vr-justify-between vr-px-5 vr-py-3.5 vr-opacity-50"
              >
                <div className="vr-flex vr-items-center vr-gap-3.5">
                  <span
                    className="vr-w-9 vr-h-9 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-flex-shrink-0"
                    style={{ backgroundColor: p.color + "14" }}
                  >
                    <i className={p.icon} style={{ color: p.color, fontSize: "16px" }} />
                  </span>
                  <div>
                    <p className="vr-text-sm vr-font-medium vr-text-gray-400">{name}</p>
                    <p className="vr-text-xs vr-text-gray-300">{p.desc}</p>
                  </div>
                </div>
                <span className="vr-text-xs vr-text-gray-400 vr-font-medium vr-uppercase vr-tracking-wide">Upgrade</span>
              </div>
            );
          }

          if (p.dashboardOnly) {
            const connectUrl = defaultSocialSetId
              ? viralySsoUrl(`/social-sets/${defaultSocialSetId}/channels?connect=${p.key}`)
              : viralySsoUrl("/channels");

            return (
              <a
                key={p.key}
                href={connectUrl}
                target="_blank"
                className="vr-flex vr-items-center vr-justify-between vr-px-5 vr-py-3.5 hover:vr-bg-gray-50 vr-transition-colors vr-no-underline"
              >
                <div className="vr-flex vr-items-center vr-gap-3.5">
                  <span
                    className="vr-w-9 vr-h-9 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-flex-shrink-0"
                    style={{ backgroundColor: p.color + "14" }}
                  >
                    <i className={p.icon} style={{ color: p.color, fontSize: "16px" }} />
                  </span>
                  <div>
                    <p className="vr-text-sm vr-font-medium vr-text-gray-900">{name}</p>
                    <p className="vr-text-xs vr-text-gray-400">{p.desc}</p>
                  </div>
                </div>
                <span className="vr-inline-flex vr-items-center vr-gap-1 vr-px-3.5 vr-py-1.5 vr-rounded-lg vr-text-xs vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors">
                  Connect
                </span>
              </a>
            );
          }

          return (
            <button
              key={p.key}
              onClick={() => openOAuthPopup(p.oauth!, defaultSocialSetId || "")}
              className="vr-flex vr-items-center vr-justify-between vr-px-5 vr-py-3.5 vr-w-full vr-text-left hover:vr-bg-gray-50 vr-transition-colors vr-border-0 vr-bg-transparent vr-cursor-pointer"
            >
              <div className="vr-flex vr-items-center vr-gap-3.5">
                <span
                  className="vr-w-9 vr-h-9 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-flex-shrink-0"
                  style={{ backgroundColor: p.color + "14" }}
                >
                  <i className={p.icon} style={{ color: p.color, fontSize: "16px" }} />
                </span>
                <div>
                  <p className="vr-text-sm vr-font-medium vr-text-gray-900">{name}</p>
                  <p className="vr-text-xs vr-text-gray-400">{p.desc}</p>
                </div>
              </div>
              <span className="vr-inline-flex vr-items-center vr-gap-1 vr-px-3.5 vr-py-1.5 vr-rounded-lg vr-text-xs vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors">
                Connect
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}