"use client";

import { useTranslation } from "react-i18next";
import {
  buildInstagramAuthorizeUrl,
  type InstagramAuthMode,
} from "@/config/instagramAuth";

type InstagramSignInButtonProps = {
  mode?: InstagramAuthMode;
  clientId?: string;
};

function InstagramIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
      <defs>
        <linearGradient id="ig-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#FFDD55" />
          <stop offset="50%" stopColor="#E1306C" />
          <stop offset="100%" stopColor="#5851DB" />
        </linearGradient>
      </defs>
      <path
        fill="url(#ig-gradient)"
        d="M12 2c2.7 0 3.06.01 4.12.06 1.06.05 1.79.22 2.43.46.66.26 1.22.6 1.77 1.15.55.55.89 1.11 1.15 1.77.24.64.41 1.37.46 2.43.05 1.06.06 1.42.06 4.13s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.46 2.43a4.9 4.9 0 01-1.15 1.77c-.55.55-1.11.89-1.77 1.15-.64.24-1.37.41-2.43.46-1.06.05-1.42.06-4.12.06s-3.07-.01-4.13-.06c-1.06-.05-1.79-.22-2.43-.46a4.9 4.9 0 01-1.77-1.15 4.9 4.9 0 01-1.15-1.77c-.24-.64-.41-1.37-.46-2.43C2.01 15.07 2 14.7 2 12s.01-3.07.06-4.13c.05-1.06.22-1.79.46-2.43.26-.66.6-1.22 1.15-1.77.55-.55 1.11-.89 1.77-1.15.64-.24 1.37-.41 2.43-.46C8.93 2.01 9.3 2 12 2zm0 1.8c-2.67 0-2.99.01-4.04.06-.97.04-1.5.2-1.85.34-.47.18-.8.4-1.15.75s-.57.68-.75 1.15c-.14.35-.3.88-.34 1.85C3.81 9 3.8 9.33 3.8 12s.01 2.99.06 4.04c.04.97.2 1.5.34 1.85.18.47.4.8.75 1.15s.68.57 1.15.75c.35.14.88.3 1.85.34 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.97-.04 1.5-.2 1.85-.34.47-.18.8-.4 1.15-.75s.57-.68.75-1.15c.14-.35.3-.88.34-1.85.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.97-.2-1.5-.34-1.85a3.1 3.1 0 00-.75-1.15 3.1 3.1 0 00-1.15-.75c-.35-.14-.88-.3-1.85-.34C14.99 3.81 14.67 3.8 12 3.8zm0 3.05a5.15 5.15 0 110 10.3 5.15 5.15 0 010-10.3zm0 1.8a3.35 3.35 0 100 6.7 3.35 3.35 0 000-6.7zm5.35-1.99a1.2 1.2 0 11-2.4 0 1.2 1.2 0 012.4 0z"
      />
    </svg>
  );
}

function generateNonce(): string {
  if (typeof window !== "undefined" && window.crypto?.randomUUID) {
    return window.crypto.randomUUID();
  }
  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
}

export default function InstagramSignInButton({
  mode = "login",
  clientId = "",
}: InstagramSignInButtonProps) {
  const { t } = useTranslation("common");

  const effectiveClientId = clientId.trim();

  const label =
    mode === "register"
      ? t("auth.instagramRegister")
      : mode === "link"
        ? t("settings.edit.instagramImport.linkButton")
        : t("auth.instagramLogin");

  const dividerLabel =
    mode === "register"
      ? t("auth.orRegisterWithInstagram")
      : mode === "link"
        ? t("settings.edit.instagramImport.orLinkWith")
        : t("auth.orLoginWithInstagram");

  const handleClick = () => {
    const nonce = generateNonce();
    sessionStorage.setItem("ig_oauth_mode", mode);
    sessionStorage.setItem("ig_oauth_nonce", nonce);
    window.location.assign(
      buildInstagramAuthorizeUrl({ clientId: effectiveClientId, mode, nonce })
    );
  };

  if (!effectiveClientId) return null;

  return (
    <div className="w-full max-w-[290px] mt-5 flex flex-col items-center">
      <div className="relative flex items-center justify-center mb-4 w-full">
        <span className="absolute inset-x-0 h-px bg-gray-200 dark:bg-gray-700" />
        <span className="relative bg-white dark:bg-[#1a1a1a] px-3 text-xs text-gray-500">
          {dividerLabel}
        </span>
      </div>

      <button
        type="button"
        onClick={handleClick}
        className="flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-gray-200 bg-white p-3 text-center text-base font-bold text-gray-800 shadow-sm dark:bg-white dark:text-gray-900"
      >
        <InstagramIcon />
        <span>{label}</span>
      </button>
    </div>
  );
}
