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

import { MdClose } from "react-icons/md";
import styles from "./withdrawal-details.module.scss";
import { formatReadableDate } from "@/lib/utils/format-date-readable";

interface WithdrawalDetailsModalProps {
  withdrawal: any;
  closeModal: () => void;
}

const WithdrawalDetailsModal = ({
  withdrawal,
  closeModal,
}: WithdrawalDetailsModalProps) => {
  const meta = withdrawal?.meta || {};

  const DetailRow = ({
    label,
    value,
  }: {
    label: string;
    value: React.ReactNode;
  }) => (
    <div className={styles.row}>
      <span className={styles.label}>
        {label}
      </span>

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

  return (
    <div
      className={styles.overlay}
      onClick={closeModal}
    >
      <div
        className={styles.modal}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          className={styles.closeButton}
          onClick={closeModal}
        >
          <MdClose size={20} />
        </button>

        <div className={styles.header}>
          <h2>Transaction Details</h2>

          <p>
            See all the details associated with this transaction.
          </p>
        </div>

        <div className={styles.section}>
          <DetailRow
            label="Transaction ID"
            value={`#${withdrawal?.id}`}
          />

          <DetailRow
            label="Status"
            value={
              <span
                className={
                  withdrawal?.status ===
                  "success"
                    ? styles.success
                    : styles.pending
                }
              >
                {withdrawal?.status}
              </span>
            }
          />

          <DetailRow
            label="Name"
            value={
              meta?.user_name || "N/A"
            }
          />

          <DetailRow
            label="Email Address"
            value={
              meta?.user_email || "N/A"
            }
          />

          <DetailRow
            label="Amount"
            value={Number(
              withdrawal?.amount || 0
            ).toLocaleString()}
          />

          <DetailRow
            label="Channel"
            value={
              withdrawal?.channel === "admin" ? "ROI - PROFITS"
               : withdrawal?.channel?.toUpperCase() ||
              "N/A"
            }
          />

          <DetailRow
            label="Created At"
            value={
              withdrawal?.created_at
                ? formatReadableDate(withdrawal?.created_at)
                : "N/A"
            }
          />
        </div>

        {withdrawal?.channel ===
          "crypto" && (
          <>
            <div
              className={styles.sectionTitle}
            >
              Wallet Information
            </div>

            <div
              className={styles.section}
            >
              <DetailRow
                label="Wallet Address"
                value={
                  withdrawal?.details?.wallet_address || "N/A"
                }
              />
            </div>
          </>
        )}

        {withdrawal?.channel ===
          "fiat" && (
          <>
            <div
              className={styles.sectionTitle}
            >
              Bank Information
            </div>

            <div
              className={styles.section}
            >
              <DetailRow
                label="Account Name"
                value={
                  withdrawal?.details?.account_name ||
                  "N/A"
                }
              />

              <DetailRow
                label="Account Number"
                value={
                  withdrawal?.details?.account_number ||
                  "N/A"
                }
              />

              <DetailRow
                label="Bank Name"
                value={
                  withdrawal?.details?.bank_name ||
                  "N/A"
                }
              />
            </div>
          </>
        )}

        {meta?.note && (
          <>
            <div
              className={styles.sectionTitle}
            >
              Additional Note
            </div>

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

export default WithdrawalDetailsModal;