import React, { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { AuthContext } from "Src/authContext";
import { GlobalContext } from "Src/globalContext";
import MemberSubscriptionPage from "./MemberSubscriptionPage";
import MkdSDK from "Utils/MkdSDK";

const MemberOnboardingPage = () => {
  const navigate = useNavigate();
  const { state: authState, dispatch: authDispatch } =
    React.useContext(AuthContext);
  const { dispatch: globalDispatch, state } = React.useContext(GlobalContext);

  const handleLogout = () => {
    authDispatch({ type: "LOGOUT" });
    localStorage.clear();
    navigate("/member/login");
  };

  useEffect(() => {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: "onboarding",
      },
    });

    const checkSubscription = async () => {
      const sdk = new MkdSDK();
      const subscriptionResult = await sdk.getCustomerStripeSubscription();

      // If no subscription, redirect to onboarding
      if (!subscriptionResult.customer?.planId) {
        navigate("/member/onboarding");
        localStorage.setItem("subscribed", "");
        return;
      } else {
        localStorage.setItem("subscribed", true);
        navigate("/member/dashboard");
      }
    };

    (async () => {
      await checkSubscription();
    })();
  }, []);

  return (
    <div className="p-4 mx-auto max-w-screen md:p-6 2xl:p-10">
      <div className="flex flex-col p-6 mb-8 rounded-lg bg-boxdark">
        <div className="flex justify-between items-center mb-8">
          <Link className="inline-block" to="/">
            <img
              crossOrigin="anonymous"
              src={
                state.siteLogo ??
                `${window.location.origin}/new/cheerEQ-2-Ed2.png`
              }
              className="h-auto w-[300px] dark:hidden"
              alt="Logo"
            />
          </Link>
          <div className="flex gap-4">
            <Link
              to="/"
              className="inline-flex items-center justify-center rounded-md border border-stroke px-6 py-2.5 text-center font-medium text-white hover:bg-opacity-90"
            >
              Return Home
            </Link>
            <button
              onClick={handleLogout}
              className="inline-flex items-center justify-center rounded-md bg-danger px-6 py-2.5 text-center font-medium text-white hover:bg-opacity-90"
            >
              Logout
            </button>
          </div>
        </div>
        <div className="flex flex-col justify-center items-center">
          <h1 className="mb-4 text-3xl font-bold text-white">
            Hello, {localStorage.getItem("userName")}
          </h1>
          <h2 className="mb-4 text-2xl font-bold text-white">
            Welcome to Equality Records!
          </h2>
          <p className="mb-6 text-lg text-bodydark">
            To get started, please select a subscription plan that best fits
            your needs.
          </p>
        </div>
      </div>
      <MemberSubscriptionPage isOnboarding={true} />
    </div>
  );
};

export default MemberOnboardingPage;
