import Button from "@/components/common/Button";
import React, { useState } from "react";
import { connectSocialAccount } from "@/lib/actions/accountSettingsActions";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useAppDispatch } from "@/app/store/hooks";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "react-toastify";

interface SocialMediaAccountsProps {
  accounts?: {
    google?: { connected?: boolean; id?: string };
    facebook?: { connected?: boolean; id?: string };
    apple?: { connected?: boolean; id?: string };
  };
  token?: string;
}

const SocialMediaAccounts = ({ accounts, token }: SocialMediaAccountsProps) => {
  const t = useTranslations();
  const dispatch = useAppDispatch();
  const router = useRouter();
  const [localAccounts, setLocalAccounts] = useState(accounts);
  const [connecting, setConnecting] = useState<null | string>(null);
  const handleConnect = async (provider: "google" | "facebook" | "apple") => {
    try {
      const response = await connectSocialAccount(provider, provider, token);

      // ✅ Check the correct success flag
      if (response?.status) {
        toast.success(response?.message || t("account_success_connect"));

        // ✅ Update state with correct nested object
        setLocalAccounts(response?.data?.social_media_accounts);
      } else {
        // Handle unexpected backend responses
        toast.error(response?.message || t("failed_to_connect_account"));
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;

      const message =
        error?.response?.data?.message ||
        error?.message ||
        "An unexpected error occurred.";

      toast.error(message);
    }
  };


  const platforms = [
    {
      name: t("account_settings.social_media_accounts.google"),
      icon: "/google-icon.svg",
      key: "google",
      class: "object-contain google",
    },
    {
      name: t("account_settings.social_media_accounts.facebook"),
      icon: "/facebook-icon.svg",
      key: "facebook",
      class: "object-contain facebook",
    },
    {
      name: t("connect_With_apple"),
      icon: "/apple-icon.png",
      key: "apple",
      class: "object-contain apple dark:invert dark:brightness-0 dark:contrast-100",
    },
  ];

  return (
    <div className="py-2.5 px-10 max-md:px-4 bg-white dark:bg-darkbg">
      <div className="py-2.5">
        <p className="text-sm text-neutrals500 mb-4 dark:text-neutrals400">
          {t("account_settings.social_media_accounts.description")}
        </p>

        {platforms.map((platform, index) => {
          const connected =
            localAccounts?.[platform.key as keyof typeof localAccounts]?.connected &&
            !!localAccounts?.[platform.key as keyof typeof localAccounts]?.id?.trim();

          return (
            <div
              key={platform.key}
              className={`flex items-center justify-between py-4 ${index !== platforms.length - 1
                  ? "border-b border-neutrals100 dark:border-darkborder"
                  : ""
                }`}
            >
              <div className="flex items-center gap-3">
                <img
                  src={platform.icon}
                  alt={platform.name}
                  className={platform.class}
                />
                <p className="text-sm text-neutrals800 dark:text-neutrals300">
                  {connected
                    ? t(
                      "account_settings.social_media_accounts.connected_with",
                      {
                        platform: platform.name,
                      }
                    )
                    : t(
                      "account_settings.social_media_accounts.not_connected_to",
                      { platform: platform.name }
                    )}
                </p>
              </div>

              <Button
                label={
                  connected
                    ? "Connected"
                    : t("account_settings.social_media_accounts.connect")
                }
                variant={connected ? "outline" : "secondary"}
                disabled={connected || connecting === platform.key}
                onClick={() =>
                  handleConnect(platform.key as "google" | "facebook" | "apple")
                }
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SocialMediaAccounts;