/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from "react";
import { router, usePage } from "@inertiajs/react";

import styles from "./upgrade.module.scss";

import UserDashboardLayout from "@/layouts/user_dashboard_layout";

import NoResults from "@/components/dashboard/NoResults";

import AccountPlanCard from "@/components/dashboard/AccountPlanCard";
import UpgradePlanModal from "@/components/dashboard/Modals/UpgradePlanModal";

const Upgrade = ({ accountsTypes }: any) => {
  const [loading, setLoading] = useState(true);

  const [selectedPlan, setSelectedPlan] =
    useState<any>(null);

  const [showModal, setShowModal] =
    useState(false);

  const { auth } = usePage().props as any;

  const currentPlan =
    auth?.user?.account_type;

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1500);

    return () => clearTimeout(timer);
  }, []);

  const openUpgradeModal = (
    plan: any
  ) => {
    setSelectedPlan(plan);

    setShowModal(true);
  };

  const closeUpgradeModal = () => {
    setSelectedPlan(null);

    setShowModal(false);
  };

  const handleUpgrade = () => {
    if (!selectedPlan) return;

    router.post(
      "/upgrade-account",
      {
        account_type: selectedPlan.id,
      },
      {
        preserveScroll: true,

        onSuccess: () => {
          closeUpgradeModal();
        },
      }
    );
  };

  const hasData =
    accountsTypes?.data &&
    accountsTypes.data.length > 0;

  return (
    <>
      {showModal && selectedPlan && (
        <UpgradePlanModal
          plan={selectedPlan}
          balance={auth?.user?.balance}
          onClose={closeUpgradeModal}
          onConfirm={handleUpgrade}
        />
      )}

      <div className={styles.upgrade}>

        <div
          className={
            styles["upgrade__overview"]
          }
        >
          <div
            className={
              styles["upgrade__overview__left"]
            }
          >
            <span>
              CURRENT ACCOUNT LEVEL
            </span>

            <h2>{currentPlan}</h2>

            <p>
              Upgrade your account to
              increase your investment
              capacity, gain access to
              premium opportunities and
              enjoy enhanced platform
              benefits.
            </p>
          </div>

          {/* <div
            className={
              styles["upgrade__overview__badge"]
            }
          >
            Active Plan
          </div> */}
        </div>

        {!loading && !hasData && (
          <NoResults
            title="No Plans Available"
            description="No account plans are available at the moment."
          />
        )}

        <div
          className={
            styles["upgrade__plans"]
          }
        >
          {loading ? (
            <>
              {[1, 2, 3].map((n) => (
                <div
                  key={n}
                  className={
                    styles[
                      "plan-card-skeleton"
                    ]
                  }
                >
                  <div
                    className={
                      styles[
                        "plan-card-skeleton__badge"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__header"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__text"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__price"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__feature"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__feature"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__feature"
                      ]
                    }
                  />

                  <div
                    className={
                      styles[
                        "plan-card-skeleton__button"
                      ]
                    }
                  />
                </div>
              ))}
            </>
          ) : (
            hasData &&
            accountsTypes.data.map(
              (plan: any) => {
                const isCurrent =
                  currentPlan ===
                  plan.name;

                return (
                  <AccountPlanCard
                    key={plan.id}
                    plan={plan}
                    current={isCurrent}
                    onSelect={() =>
                      openUpgradeModal(
                        plan
                      )
                    }
                  />
                );
              }
            )
          )}
        </div>
      </div>
    </>
  );
};

Upgrade.layout = (page: any) => (
  <UserDashboardLayout
    title="Account Upgrade"
  >
    {page}
  </UserDashboardLayout>
);

export default Upgrade;