/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./signals.module.scss";
import UserDashboardLayout from "@/layouts/user_dashboard_layout";
import Signal from "@/components/dashboard/SignalPlanCard";
import PageIntro from "@/components/dashboard/PageIntro";
import { useState, useEffect } from "react";
import MySignals from "@/components/dashboard/MySignals";
import NoResults from "@/components/dashboard/NoResults";

const SignalPlanSkeleton = () => (
  <div className={styles["signal-skeleton"]}>
    <div className={styles["skeleton-top"]}>
      <div>
        <div className={styles["skeleton-badge"]} />
        <div className={styles["skeleton-title"]} />
      </div>
    </div>

    <div className={styles["skeleton-description"]}>
      <div className={styles["skeleton-line"]} />
      <div className={styles["skeleton-line"]} />
      <div className={styles["skeleton-line-short"]} />
    </div>

    <div className={styles["skeleton-pricing"]}>
      <div className={styles["skeleton-price-row"]}>
        <div />
        <div />
      </div>

      <div className={styles["skeleton-price-row"]}>
        <div />
        <div />
      </div>

      <div className={styles["skeleton-price-row"]}>
        <div />
        <div />
      </div>
    </div>

    <div className={styles["skeleton-button"]} />
  </div>
);

const Signals = ({
  signals,
  activeSubscriptions,
  tradeSignals,
}: any) => {
  const [toggleActive, setTogglActive] = useState(1);
  const [loading, setLoading] = useState(true);

  const toggleActiveState = (key: number) => {
    setTogglActive(key);
    setLoading(true);
  };

  useEffect(() => {
    if (toggleActive === 1) {
      const timer = setTimeout(() => setLoading(false), 2000);
      return () => clearTimeout(timer);
    }

    setLoading(false);
  }, [toggleActive]);

  const hasSignalPlans = signals?.data?.length > 0;

  const hasSubscriptions = activeSubscriptions?.length > 0;

  const showEmptyState =
    !loading &&
    ((toggleActive === 1 && !hasSignalPlans) ||
      (toggleActive === 2 && !hasSubscriptions));

  return (
    <div className={styles["signals"]}>
      <PageIntro
        title="Trading Signals"
        description="Purchase trading signals by expert traders to improve your win probabilities"
      />

      <div className={styles["signals__tab"]}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles["signals__tab--item--active"]
              : styles["signals__tab--item"]
          }
        >
          Buy Signals
        </div>

        <div
          onClick={() => toggleActiveState(2)}
          className={
            toggleActive === 2
              ? styles["signals__tab--item--active"]
              : styles["signals__tab--item"]
          }
        >
          My Signals
        </div>
      </div>

      {showEmptyState ? (
        <NoResults
          title={
            toggleActive === 1
              ? "No Signal Plans"
              : "No Active Subscriptions"
          }
          description={
            toggleActive === 1
              ? "There are no trading signal plans available at the moment."
              : "You don't have any active signal subscriptions yet."
          }
        />
      ) : toggleActive === 2 ? (
        <MySignals
          plan={activeSubscriptions}
          tradeSignals={tradeSignals}
        />
      ) : (
        <div
          className={styles["signals__signals"]}
          aria-busy={loading}
        >
          {loading
            ? [...Array(4)].map((_, i) => (
                <SignalPlanSkeleton key={i} />
              ))
            : signals?.data?.map((signal: any) => (
                <Signal
                  key={signal.id}
                  signal={signal}
                />
              ))}
        </div>
      )}
    </div>
  );
};

Signals.layout = (page: any) => (
  <UserDashboardLayout
    title="Dashboard signals"
  >
    {page}
  </UserDashboardLayout>
);

export default Signals;