/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./subscribers.module.scss";
import { useEffect, useState } from "react";

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

import { formatDate } from "@/lib/utils/format-date";
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter";
import { truncateEmail } from "@/lib/utils/truncate-email";

import BanSubscriberModal from "../Modals/BanSubscriberModal";

import {
  FiUsers,
  FiCheckCircle,
  FiClock,
  FiSlash,
} from "react-icons/fi";

const SignalSubscribers = ({
  stats,
  subscribers,
}: any) => {
  const [loading, setLoading] =
    useState(true);

  const [banModal, setBanModal] =
    useState(false);

  const [
    selectedSubscriber,
    setSelectedSubscriber,
  ] = useState<any>(null);

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

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

  const openBanModal = (
    subscriber: any
  ) => {
    setSelectedSubscriber(
      subscriber
    );

    setBanModal(true);
  };

  const closeBanModal = () => {
    setBanModal(false);

    setSelectedSubscriber(null);
  };

  return (
    <>
      {banModal && (
        <BanSubscriberModal
          closeModal={
            closeBanModal
          }
          patchUrl={
            selectedSubscriber?.status ===
            "active"
              ? route(
                  "admin.signal.subscriber.ban",
                  selectedSubscriber.id
                )
              : route(
                  "admin.signal.subscriber.activate",
                  selectedSubscriber.id
                )
          }
          title={
            selectedSubscriber?.status ===
            "active"
              ? "Ban Subscriber"
              : "Activate Subscriber"
          }
          description={
            selectedSubscriber?.status ===
            "active"
              ? "The subscriber will immediately lose access to all premium trading signals."
              : "The subscriber will regain access to their subscribed signal package."
          }
        />
      )}

      <div className={styles.subscribers}>
        {/* STATS */}

        <div
          className={
            styles.statsGrid
          }
        >
          <div
            className={
              styles.statCard
            }
          >
            <div
              className={
                styles.statIcon
              }
            >
              <FiUsers />
            </div>

            <div>
              <p>
                Total
                Subscribers
              </p>

              <h3>
                {Number(
                  stats?.total || 0
                ).toLocaleString()}
              </h3>
            </div>
          </div>

          <div
            className={
              styles.statCard
            }
          >
            <div
              className={
                styles.successIcon
              }
            >
              <FiCheckCircle />
            </div>

            <div>
              <p>Active</p>

              <h3>
                {Number(
                  stats?.active || 0
                ).toLocaleString()}
              </h3>
            </div>
          </div>

          <div
            className={
              styles.statCard
            }
          >
            <div
              className={
                styles.warningIcon
              }
            >
              <FiClock />
            </div>

            <div>
              <p>Expired</p>

              <h3>
                {Number(
                  stats?.expired || 0
                ).toLocaleString()}
              </h3>
            </div>
          </div>

          <div
            className={
              styles.statCard
            }
          >
            <div
              className={
                styles.dangerIcon
              }
            >
              <FiSlash />
            </div>

            <div>
              <p>Banned</p>

              <h3>
                {Number(
                  stats?.banned || 0
                ).toLocaleString()}
              </h3>
            </div>
          </div>
        </div>

        {/* TABLE */}

        <div
          className={
            styles.tableCard
          }
        >
          {loading ? (
            <div
              className={
                styles.skeletonTable
              }
            >
              {[
                ...Array(8),
              ].map(
                (_, index) => (
                  <div
                    key={index}
                    className={
                      styles.skeletonRow
                    }
                  />
                )
              )}
            </div>
          ) : subscribers?.data
              ?.length ? (
            <>
              <div
                className={
                  styles.tableWrapper
                }
              >
                <div
                  className={
                    styles.table
                  }
                >
                  <div>
                    Name
                  </div>
                  <div>
                    Email
                  </div>
                  <div>
                    Signal Plan
                  </div>
                  <div>
                    Cycle
                  </div>
                  <div>
                    Status
                  </div>
                  <div>
                    Start
                  </div>
                  <div>
                    Expiry
                  </div>
                  <div>
                    Action
                  </div>

                  {subscribers.data.map(
                    (
                      subscriber: any
                    ) => (
                      <>
                        <div>
                          {
                            subscriber
                              .user
                              ?.name
                          }
                        </div>

                        <div>
                          {truncateEmail(
                            subscriber
                              .user
                              ?.email
                          )}
                        </div>

                        <div>
                          {capitalizeFirstLetter(
                            subscriber.signal_plan_name
                          )}
                        </div>

                        <div>
                          {capitalizeFirstLetter(
                            subscriber.billing_cycle
                          )}
                        </div>

                        <div>
                          <span
                            className={
                              subscriber.status ===
                              "active"
                                ? styles.activeBadge
                                : styles.inactiveBadge
                            }
                          >
                            {capitalizeFirstLetter(
                              subscriber.status
                            )}
                          </span>
                        </div>

                        <div>
                          {formatDate(
                            subscriber.start_date
                          )}
                        </div>

                        <div>
                          {formatDate(
                            subscriber.end_date
                          )}
                        </div>

                        <div>
                          <button
                            onClick={() =>
                              openBanModal(
                                subscriber
                              )
                            }
                            className={
                              subscriber.status ===
                              "active"
                                ? styles.banBtn
                                : styles.activateBtn
                            }
                          >
                            {subscriber.status ===
                            "active"
                              ? "Ban"
                              : "Activate"}
                          </button>
                        </div>
                      </>
                    )
                  )}
                </div>
              </div>

              {subscribers
                ?.links
                ?.length >
                0 && (
                <div
                  className={
                    styles.pagination
                  }
                >
                  <Pagination
                    links={
                      subscribers.links
                    }
                  />
                </div>
              )}
            </>
          ) : (
            <NoResults
              title="No Subscribers"
              description="No user has purchased any signal package yet."
            />
          )}
        </div>
      </div>
    </>
  );
};

export default SignalSubscribers;