/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./signals.module.scss";
import AdminDashboardLayout from "@/layouts/admin_layout";
import PageIntro from "@/components/dashboard/PageIntro";
import { useState, useEffect } from "react";
import SignalPlanCard from "@/components/dashboard/SignalPlanCard";
import AddSignalPlanModal from "@/components/admin/Modals/AddSignalPlanModal";
import NoResults from "@/components/dashboard/NoResults";
import AddTradingSignalModal from "@/components/admin/Modals/AddSignalModal";
import AdminTradingSignals from "@/components/admin/AdminTradingSignals";
import SignalSubscribers from "@/components/admin/SignalSubscribers";

const SignalSkeleton = () => {
  return (
    <div className={styles.signalSkeleton}>
      <div className={styles.signalSkeleton__badge}></div>

      <div className={styles.signalSkeleton__title}></div>

      <div className={styles.signalSkeleton__meta}></div>

      <div className={styles.signalSkeleton__description}></div>
      <div className={styles.signalSkeleton__description}></div>
      <div className={styles.signalSkeleton__descriptionShort}></div>

      <div className={styles.signalSkeleton__pricing}>
        <div className={styles.signalSkeleton__price}></div>
        <div className={styles.signalSkeleton__price}></div>
        <div className={styles.signalSkeleton__price}></div>
      </div>

      <div className={styles.signalSkeleton__button}></div>
    </div>
  );
};

const Signals = ({ signals, tradeSignals, subscribers, subscriberStats }: any) => {
  const [toggleActive, setToggleActive] = useState(1);
  const [addSignalPlanModal, setAddSignalPlanModal] = useState(false);
  const [addSignalModal, setAddSignalModal] = useState(false);
  const [loading, setLoading] = useState(true);


  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  const toggleAddSignalModal = () => {
    setAddSignalPlanModal(!addSignalPlanModal);
  };

  const toggleAddSignal = () => {
    setAddSignalModal(!addSignalModal);
  };

  const toggleActiveState = (key: number) => {
    setToggleActive(key);
  };

  return (
    <>
      {addSignalPlanModal && (
        <AddSignalPlanModal
          closeModal={toggleAddSignalModal}
          type="add"
        />
      )}

      {addSignalModal && (
        <AddTradingSignalModal
          closeModal={toggleAddSignal}
          packages={ signals }
        />
      )}

      <div className={styles["admin__signals"]}>
        <PageIntro
          title="Manage Trading Signals"
          description="View, create, update and delete trading signals on the traderplus platform"
        />

        <div className={styles["admin__signals__tab"]}>
          <div
            onClick={() => toggleActiveState(1)}
            className={
              toggleActive === 1
                ? styles["admin__signals__tab--item--active"]
                : styles["admin__signals__tab--item"]
            }
          >
            Signal Plans
          </div>

           <div
            onClick={() => toggleActiveState(5)}
            className={
              toggleActive === 5
                ? styles["admin__signals__tab--item--active"]
                : styles["admin__signals__tab--item"]
            }
          >
            Subscribers
          </div>

          <div
            onClick={() => toggleActiveState(4)}
            className={
              toggleActive === 4
                ? styles["admin__signals__tab--item--active"]
                : styles["admin__signals__tab--item"]
            }
          >
            Trading Signals
          </div>

          <div
            onClick={toggleAddSignalModal}
            className={
              toggleActive === 2
                ? styles["admin__signals__tab--item--active"]
                : styles["admin__signals__tab--item"]
            }
          >
            Add Signal Plan
          </div>

          <div
            onClick={toggleAddSignal}
            className={
              toggleActive === 3
                ? styles["admin__signals__tab--item--active"]
                : styles["admin__signals__tab--item"]
            }
          >
            Add Trading Signal
          </div>
        </div>

        <div className={styles["admin__signals__helper"]}></div>

        <div className={styles["admin__signals__children"]}>
          <div>
            {loading ? (
              <div className={styles["admin__signals__children--signals"]}>
                {[...Array(4)].map((_, idx) => (
                  <SignalSkeleton key={idx} />
                ))}
              </div>
            ) : Array.isArray(signals?.data) && signals?.data?.length === 0 ? (
              <NoResults title="No Signals" description="Oops! There are no trading signals available." />
            ) : toggleActive === 4 ? <AdminTradingSignals {...({ tradeSignals } as any)} /> : toggleActive === 5 ? <SignalSubscribers subscribers={subscribers} stats={subscriberStats} /> :  (
              <div className={styles["admin__signals__children--signals"]}>
                {signals?.data?.map((signal: any) => (
                  <SignalPlanCard key={signal.id} signal={signal} />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

Signals.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="Manage Signals" children={page} />
);

export default Signals;