/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./admin-trading-signals.module.scss";
import { useEffect, useMemo, useState } from "react";

import { usePaginatedData } from "@/hooks/use-paginated-data";

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

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

import DeleteConfirmationModal from "../Modals/DeleteConfirmationModal";

import { MdDeleteOutline } from "react-icons/md";
import { HiOutlineChartBar } from "react-icons/hi2";
import { BsArrowUpRight, BsArrowDownRight } from "react-icons/bs";

const TradingSignalsSkeleton = () => {
  return (
    <>
      <div className={styles.statsSkeleton}>
        {[...Array(4)].map((_, i) => (
          <div key={i} className={styles.statCardSkeleton} />
        ))}
      </div>

      <div className={styles.tableSkeleton}>
        <div className={styles.tableHeaderSkeleton}>
          {[...Array(9)].map((_, i) => (
            <span key={i} />
          ))}
        </div>

        {[...Array(6)].map((_, i) => (
          <div key={i} className={styles.tableRowSkeleton}>
            {[...Array(9)].map((__, j) => (
              <span key={j} />
            ))}
          </div>
        ))}
      </div>
    </>
  );
};

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

  const [deleteModal, setDeleteModal] = useState(false);

  const [selectedSignal, setSelectedSignal] = useState<any>(null);

  const { handlePageChange } = usePaginatedData(10);

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

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

  const formatOrderType = (value: string) => {
    if (!value) return "";

    return value
      .split("-")
      .map(
        (word) =>
          word.charAt(0).toUpperCase() + word.slice(1)
      )
      .join(" ");
  };

  const openDeleteModal = (signal: any) => {
    setSelectedSignal(signal);
    setDeleteModal(true);
  };

  const stats = useMemo(() => {
    const signals = tradeSignals?.data || [];

    const buySignals = signals.filter((item: any) =>
      item.order_type?.toLowerCase().includes("buy")
    ).length;

    const sellSignals = signals.filter((item: any) =>
      item.order_type?.toLowerCase().includes("sell")
    ).length;

    const pairs = new Set(
      signals.map((item: any) => item.pair)
    ).size;

    return {
      total: tradeSignals?.total || signals.length,
      buy: buySignals,
      sell: sellSignals,
      pairs,
    };
  }, [tradeSignals]);

  return (
    <>
      {deleteModal && (
        <DeleteConfirmationModal
          closeModal={() => setDeleteModal(false)}
          deleteUrl={route(
            "admin.signal-item.delete",
            selectedSignal?.id
          )}
          title="Delete Trading Signal"
          description={`This will permanently delete signal reference ${selectedSignal?.reference}. This action cannot be undone.`}
        />
      )}

      <div className={styles.signals}>
        <div className={styles.signals__content}>
          {loading ? (
            <TradingSignalsSkeleton />
          ) : (
            <>
              {/* ================= STATS ================= */}

              <div className={styles.signals__stats}>
                <div className={styles.statCard}>
                  <div className={styles.statCard__icon}>
                    <HiOutlineChartBar />
                  </div>

                  <div>
                    <span>Total Signals</span>

                    <h2>
                      {Number(
                        stats.total
                      ).toLocaleString()}
                    </h2>
                  </div>
                </div>

                <div className={styles.statCard}>
                  <div
                    className={`${styles.statCard__icon} ${styles.buy}`}
                  >
                    <BsArrowUpRight />
                  </div>

                  <div>
                    <span>Buy Signals</span>

                    <h2>{stats.buy}</h2>
                  </div>
                </div>

                <div className={styles.statCard}>
                  <div
                    className={`${styles.statCard__icon} ${styles.sell}`}
                  >
                    <BsArrowDownRight />
                  </div>

                  <div>
                    <span>Sell Signals</span>

                    <h2>{stats.sell}</h2>
                  </div>
                </div>

                <div className={styles.statCard}>
                  <div className={styles.statCard__icon}>
                    FX
                  </div>

                  <div>
                    <span>Currency Pairs</span>

                    <h2>{stats.pairs}</h2>
                  </div>
                </div>
              </div>

              {/* ================= TABLE ================= */}

              <div
                className={
                  styles.signals__tableWrapper
                }
              >
                <div
                  className={
                    styles.signals__table
                  }
                >
                  <span>Reference</span>
                  <span>Order Type</span>
                  <span>Currency Pair</span>
                  <span>Entry Price</span>
                  <span>Take Profit 1</span>
                  <span>Take Profit 2</span>
                  <span>Stop Loss</span>
                  <span>Date</span>
                  <span>Action</span>
                </div>

                <div
                  className={
                    styles.signals__rows
                  }
                >
                  {tradeSignals?.data?.length ? (
                    tradeSignals.data.map(
                      (signal: any) => (
                        <div
                          key={signal.id}
                          className={
                            styles.signalRow
                          }
                        >
                          <span>
                            {
                              signal.reference
                            }
                          </span>

                          <span>
                            {formatOrderType(
                              signal.order_type
                            )}
                          </span>

                          <span>
                            {capitalizeFirstLetter(
                              signal.pair
                            )}
                          </span>

                          <span>
                            {
                              signal.price_formatted
                            }
                          </span>

                          <span>
                            {
                              signal.take_profit_1_formatted
                            }
                          </span>

                          <span>
                            {
                              signal.take_profit_2_formatted
                            }
                          </span>

                          <span>
                            {
                              signal.stop_loss_formatted
                            }
                          </span>

                          <span>
                            {formatDate(
                              signal.created_at
                            )}
                          </span>

                          <span
                            className={
                              styles.actions
                            }
                          >
                            <button
                              onClick={() =>
                                openDeleteModal(
                                  signal
                                )
                              }
                              className={
                                styles.deleteBtn
                              }
                            >
                              <MdDeleteOutline />

                              Delete
                            </button>
                          </span>
                        </div>
                      )
                    )
                  ) : (
                    <div
                      className={
                        styles.emptyState
                      }
                    >
                      <NoResults
                        title="No Trading Signals"
                        description="No trading signals have been created yet."
                      />
                    </div>
                  )}
                </div>
              </div>

              {/* ================= PAGINATION ================= */}

              {tradeSignals?.links?.length >
                0 && (
                <div
                  className={
                    styles.pagination
                  }
                >
                  <Pagination
                    links={
                      tradeSignals.links
                    }
                    onChange={
                      handlePageChange
                    }
                  />
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </>
  );
};

export default AdminTradingSignals;