/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";

import { useMemo, useState } from "react";

import styles from "./payment.module.scss";

import PageIntro from "@/components/dashboard/PageIntro";

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

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

interface PaymentMethod {
  id: number;
  method: string;
  type: "crypto" | "fiat";
  charges: number;
  is_enabled: boolean;
  address?: string;
  min_amount?: number;
  max_amount?: number;
}

type ModalType =
  | "add"
  | "update"
  | "delete"
  | null;

interface PaymentSettingsProps {
  methods: PaymentMethod[];
}

const PaymentSettings = ({
  methods,
}: PaymentSettingsProps) => {
  const [
    activeModal,
    setActiveModal,
  ] = useState<ModalType>(
    null
  );

  const [
    selectedMethod,
    setSelectedMethod,
  ] =
    useState<PaymentMethod | null>(
      null
    );

  const [
    search,
    setSearch,
  ] = useState("");

  const openModal = (
    type: Exclude<
      ModalType,
      null
    >,
    method?: PaymentMethod
  ) => {
    setActiveModal(type);

    if (method) {
      setSelectedMethod(method);
    }
  };

  const closeModal = () => {
    setActiveModal(null);

    setSelectedMethod(null);
  };

  const filteredMethods =
    useMemo(() => {
      return methods?.filter(
        (method) =>
          method.method
            ?.toLowerCase()
            .includes(
              search.toLowerCase()
            ) ||
          method.type
            ?.toLowerCase()
            .includes(
              search.toLowerCase()
            )
      );
    }, [methods, search]);

  const enabledMethods =
    methods?.filter(
      (method) =>
        method.is_enabled
    ).length || 0;

  const disabledMethods =
    methods?.filter(
      (method) =>
        !method.is_enabled
    ).length || 0;

  return (
    <>
      {/* ======================================
          DELETE
      ====================================== */}

      {activeModal ===
        "delete" &&
        selectedMethod && (
          <DeleteConfirmationModal
            closeModal={
              closeModal
            }
            title="Delete Payment Method"
            description="You are about to permanently delete this payment method. Users will no longer be able to use it for deposits or withdrawals."
            deleteUrl={`/admin/payment-methods/${selectedMethod.id}`}
            onSuccess={
              closeModal
            }
          />
        )}

      {/* ======================================
          ADD
      ====================================== */}

      {activeModal ===
        "add" && (
          <PaymentMethodModal
            closeModal={
              closeModal
            }
            type="add"
            method={
              undefined
            }
          />
        )}

      {/* ======================================
          UPDATE
      ====================================== */}

      {activeModal ===
        "update" &&
        selectedMethod && (
          <PaymentMethodModal
            closeModal={
              closeModal
            }
            type="update"
            method={
              selectedMethod
            }
          />
        )}

      <div
        className={
          styles.payments
        }
      >
        <PageIntro
          title="Payment Settings"
          description="Manage all payment methods available on the platform."
        />

        {/* ======================================
            STATS
        ====================================== */}

        <div
          className={
            styles.statsGrid
          }
        >
          <div
            className={
              styles.statCard
            }
          >
            <h4>
              Total Methods
            </h4>

            <h2>
              {
                methods?.length
              }
            </h2>
          </div>

          <div
            className={
              styles.statCard
            }
          >
            <h4>
              Enabled
            </h4>

            <h2>
              {
                enabledMethods
              }
            </h2>
          </div>

          <div
            className={
              styles.statCard
            }
          >
            <h4>
              Disabled
            </h4>

            <h2>
              {
                disabledMethods
              }
            </h2>
          </div>
        </div>

        {/* ======================================
            ACTIONS
        ====================================== */}

        <div
          className={
            styles.header
          }
        >
          {/* <input
            type="text"
            placeholder="Search payment methods..."
            value={search}
            onChange={(
              e
            ) =>
              setSearch(
                e.target.value
              )
            }
            className={
              styles.searchInput
            }
          /> */}

          <button
            className={
              styles.addBtn
            }
            onClick={() =>
              openModal(
                "add"
              )
            }
          >
            Add Payment Method
          </button>
        </div>

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

        <div
          className={
            styles.tableCard
          }
        >
          <div
            className={
              styles.tableWrapper
            }
          >
            <div
              className={
                styles.tableHeader
              }
            >
              <div>
                Method
              </div>

              <div>
                Type
              </div>

              <div>
                Charges
              </div>

              <div>
                Status
              </div>

              <div>
                Actions
              </div>
            </div>

            {filteredMethods?.map(
              (
                method
              ) => (
                <div
                  key={
                    method.id
                  }
                  className={
                    styles.tableRow
                  }
                >
                  <div>
                    {
                      method.method
                    }
                  </div>

                  <div>
                    {capitalizeFirstLetter(
                      method.type
                    )}
                  </div>

                  <div>
                    {
                      method.charges
                    }
                    %
                  </div>

                  <div>
                    <span
                      className={
                        method.is_enabled
                          ? styles.statusEnabled
                          : styles.statusDisabled
                      }
                    >
                      {method.is_enabled
                        ? "Enabled"
                        : "Disabled"}
                    </span>
                  </div>

                  <div
                    className={
                      styles.actions
                    }
                  >
                    <button
                      onClick={() =>
                        openModal(
                          "update",
                          method
                        )
                      }
                      className={
                        styles.editBtn
                      }
                    >
                      Update
                    </button>

                    <button
                      onClick={() =>
                        openModal(
                          "delete",
                          method
                        )
                      }
                      className={
                        styles.deleteBtn
                      }
                    >
                      Delete
                    </button>
                  </div>
                </div>
              )
            )}

            {filteredMethods
              ?.length ===
              0 && (
              <div
                className={
                  styles.emptyState
                }
              >
                <h4>
                  No Payment
                  Methods
                </h4>

                <p>
                  No payment
                  methods were
                  found.
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default PaymentSettings;