/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useEffect, useState } from "react";

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

import styles from "./my-signals.module.scss";

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

import { formatMoneyComplete } from "@/lib/utils/format-money";
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter";
import { formatDate } from "@/lib/utils/format-date";
import currencyData from "../../../../data/countries-currencies.json";
import { usePage } from "@inertiajs/react";

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

   const { appSettings } =
    usePage().props as unknown as any

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

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

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

  const { handlePageChange } =
    usePaginatedData(10);

  const activePlan =
    plan?.[0] || null;

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

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

  return (
    <div
      className={
        styles["my-signals"]
      }
    >
      <div
        className={
          styles["my-signals--content"]
        }
      >
        {loading ? (
          <>
            {/* SUMMARY SKELETON */}

            <div
              className={
                styles["summarySkeleton"]
              }
            >
              <div
                className={
                  styles[
                    "summarySkeleton__left"
                  ]
                }
              >
                <span />
                <h3 />
                <p />
              </div>

              <div
                className={
                  styles[
                    "summarySkeleton__right"
                  ]
                }
              >
                <span />
                <p />
              </div>
            </div>

            {/* TABLE SKELETON */}

            <div
              className={
                styles["tableCard"]
              }
            >
              <div
                className={
                  styles[
                    "tableSkeleton"
                  ]
                }
              >
                <div
                  className={
                    styles[
                      "tableSkeleton__header"
                    ]
                  }
                >
                  {[...Array(8)].map(
                    (_, i) => (
                      <span
                        key={i}
                      />
                    )
                  )}
                </div>

                {[...Array(6)].map(
                  (_, i) => (
                    <div
                      key={i}
                      className={
                        styles[
                          "tableSkeleton__row"
                        ]
                      }
                    >
                      {[
                        ...Array(
                          8
                        ),
                      ].map(
                        (
                          __,
                          j
                        ) => (
                          <span
                            key={
                              j
                            }
                          />
                        )
                      )}
                    </div>
                  )
                )}
              </div>
            </div>
          </>
        ) : (
          <>
            {/* SUBSCRIPTION */}

            {plan?.length === 0 ? (
              <NoResults
                title="No Signal Subscription"
                description="You don't have an active trading signal subscription yet. Subscribe to a signal plan to unlock premium trading signals."
              />
            ) : (
              <div
                className={
                  styles[
                    "subscriptionCard"
                  ]
                }
              >
                <div
                  className={
                    styles[
                      "subscriptionCard__left"
                    ]
                  }
                >
                  <span>
                    Active Subscription
                  </span>

                  <h2>
                    {capitalizeFirstLetter(
                      activePlan?.signal_plan_name ||
                        ""
                    )}
                  </h2>

                  <p>
                    Billing
                    Cycle:&nbsp;
                    <strong>
                      {capitalizeFirstLetter(
                        activePlan?.billing_cycle ||
                          ""
                      )}
                    </strong>
                  </p>
                </div>

                <div
                  className={
                    styles[
                      "subscriptionCard__middle"
                    ]
                  }
                >
                  <span>
                    Amount Paid
                  </span>

                  <h3>
                    { currency?.currency_symbol }{formatMoneyComplete(
                      activePlan?.amount_paid ||
                        0
                    )}
                  </h3>
                </div>

                <div
                  className={
                    styles[
                      "subscriptionCard__right"
                    ]
                  }
                >
                  <div
                    className={
                      activePlan?.status ===
                      "active"
                        ? styles.active
                        : styles.expired
                    }
                  >
                    {capitalizeFirstLetter(
                      activePlan?.status ||
                        ""
                    )}
                  </div>

                  <small>
                    Expires
                    on
                  </small>

                  <p>
                    {activePlan?.end_date
                      ? formatDate(
                          activePlan.end_date
                        )
                      : "--"}
                  </p>
                </div>
              </div>
            )}

            {/* TABLE */}

            <div
              className={
                styles["tableCard"]
              }
            >
              <div
                className={
                  styles[
                    "tableWrapper"
                  ]
                }
              >
                <div
                  className={
                    styles[
                      "tableHeader"
                    ]
                  }
                >
                  {/* <span>
                    Reference
                  </span> */}

                  <span>
                    Order
                  </span>

                  <span>
                    Pair
                  </span>

                  <span>
                    Entry
                  </span>

                  <span>
                    TP 1
                  </span>

                  <span>
                    TP 2
                  </span>

                  <span>
                    Stop
                    Loss
                  </span>

                  <span>
                    Date
                  </span>
                </div>

                <div
                  className={
                    styles[
                      "tableBody"
                    ]
                  }
                >
                  {tradeSignals
                    ?.data
                    ?.length ? (
                    tradeSignals.data.map(
                      (
                        signal: any
                      ) => (
                        <div
                          key={
                            signal.id
                          }
                          className={
                            styles[
                              "tableRow"
                            ]
                          }
                        >
                          {/* <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>
                        </div>
                      )
                    )
                  ) : activePlan?.status ===
                    "banned" ? (
                    <div
                      className={
                        styles[
                          "emptyState"
                        ]
                      }
                    >
                      <NoResults
                        title="Subscription Blocked"
                        description="Your subscription has been restricted, so you cannot receive trading signals. Please contact support."
                      />
                    </div>
                  ) : (
                    <div
                      className={
                        styles[
                          "emptyState"
                        ]
                      }
                    >
                      <NoResults
                        title="No Trading Signals"
                        description="There are currently no trading signals available for your subscription."
                      />
                    </div>
                  )}
                </div>
              </div>
            </div>

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

export default MySignals;