import React from "react";

const PROVIDERS = [
  { id: "github", label: "使用 GitHub 继续" },
  { id: "gitea", label: "使用 Gitea 继续" },
  { id: "google", label: "使用 Google 继续" },
  { id: "microsoft", label: "使用 Microsoft 继续" },
  { id: "linuxdo", label: "使用 Linux DO 继续" }
];

/**
 * @param {Record<string, string>} [oauthLogos] 各 provider id → 管理后台填写的 Logo 图片 URL（https）
 */
export default function OAuthPillButtons({
  githubOAuthEnabled = false,
  giteaOAuthEnabled = false,
  googleOAuthEnabled = false,
  microsoftOAuthEnabled = false,
  linuxdoOAuthEnabled = false,
  oauthLogos = {},
  onOAuthLogin,
  disabled = false,
  variant = "default"
}) {
  if (!onOAuthLogin) return null;
  const enabled = (p) => {
    switch (p) {
      case "github": return githubOAuthEnabled;
      case "gitea": return giteaOAuthEnabled;
      case "google": return googleOAuthEnabled;
      case "microsoft": return microsoftOAuthEnabled;
      case "linuxdo": return linuxdoOAuthEnabled;
      default: return false;
    }
  };

  const list = PROVIDERS.filter((p) => enabled(p.id));
  if (list.length === 0) return null;

  return (
    <div className={`auth-oauth-stack${variant === "underLead" ? " auth-oauth-stack--under-lead" : ""}`}>
      <span className="auth-oauth-label">第三方登录</span>
      {list.map((p) => {
        const logo = (typeof oauthLogos?.[p.id] === "string" ? oauthLogos[p.id] : "").trim();
        return (
          <button
            key={p.id}
            type="button"
            className={`auth-oauth-pill${logo ? "" : " auth-oauth-pill--no-logo"}`}
            onClick={() => onOAuthLogin(p.id)}
            disabled={disabled}
          >
            <span className="auth-oauth-pill-inner">
              {logo ? (
                <span className="auth-oauth-pill-icon" aria-hidden>
                  <img
                    className="auth-oauth-pill-logo"
                    src={logo}
                    alt=""
                    loading="lazy"
                    decoding="async"
                    onError={(e) => {
                      const btn = e.currentTarget.closest("button");
                      e.currentTarget.closest(".auth-oauth-pill-icon")?.remove();
                      if (btn) btn.classList.add("auth-oauth-pill--no-logo");
                    }}
                  />
                </span>
              ) : null}
              <span className="auth-oauth-pill-text">{p.label}</span>
            </span>
          </button>
        );
      })}
    </div>
  );
}
