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

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

import {
    BsArrowDownLeft,
    BsArrowUpRight,
} from "react-icons/bs";

import { IoClose } from "react-icons/io5";

import { formatDate } from "@/lib/utils/format-date";

interface TransactionSummaryProps {
    handleModalClose: () => void;
    transaction: any;
}

const TransactionSummary = ({
    handleModalClose,
    transaction,
}: TransactionSummaryProps) => {

    const {
        type,
        amount,
        created_at,
        reference,
        status,
    } = transaction;

    const isCredit =
        type === "deposit" ||
        type === "profit" ||
        type === "bonus" ||
        type === "refund";

    return (
        <div className={styles.modalOverlay}>
            <div className={styles.modalContent}>

                {/* Close */}

                <button
                    onClick={handleModalClose}
                    className={styles.closeBtn}
                >
                    <IoClose size={18} />
                </button>

                {/* Header */}

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

                    <p>
                        Review the details of this
                        transaction. If you notice
                        anything unusual, kindly
                        contact our support team.
                    </p>
                </div>

                {/* Hero */}

                <div
                    className={
                        styles.transactionHero
                    }
                >
                    <div
                        className={
                            isCredit
                                ? styles.creditIcon
                                : styles.debitIcon
                        }
                    >
                        {isCredit ? (
                            <BsArrowDownLeft />
                        ) : (
                            <BsArrowUpRight />
                        )}
                    </div>

                    <div
                        className={
                            isCredit
                                ? styles.transactionStatusCredit
                                : styles.transactionStatusDebit
                        }
                    >
                        {isCredit
                            ? "Wallet Credited"
                            : "Wallet Debited"}
                    </div>

                    <h5
                        className={
                            styles.transactionTitle
                        }
                    >
                        {isCredit
                            ? "Incoming Transaction"
                            : "Outgoing Transaction"}
                    </h5>

                    <h1
                        className={
                            styles.transactionAmount
                        }
                    >
                        {isCredit ? "+" : "-"}$
                        {Number(
                            amount
                        ).toLocaleString(
                            "en-US"
                        )}
                    </h1>

                    <p
                        className={
                            styles.transactionSubtext
                        }
                    >
                        This transaction has
                        been recorded on your
                        TraderPlus account.
                    </p>
                </div>

                <div className={styles.divider} />

                {/* Summary */}

                <div className={styles.summaryCard}>
                                      <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>Transaction ID</h6>
                        </div>

                        <div
                            className={`${styles.summaryValue} ${styles.transactionId}`}
                        >
                            {reference ?? "N/A"}
                        </div>
                    </div>

                    <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>Type</h6>
                        </div>

                        <div className={styles.summaryValue}>
                            <span
                                className={
                                    isCredit
                                        ? styles.creditBadge
                                        : styles.debitBadge
                                }
                            >
                                {isCredit
                                    ? "Credit"
                                    : "Debit"}
                            </span>
                        </div>
                    </div>

                    <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>Status</h6>
                        </div>

                        <div className={styles.summaryValue}>
                            {status ===
                            "completed" ? (
                                <span
                                    className={
                                        styles.statusCompleted
                                    }
                                >
                                    Completed
                                </span>
                            ) : status ===
                              "pending" ? (
                                <span
                                    className={
                                        styles.statusPending
                                    }
                                >
                                    Pending
                                </span>
                            ) : (
                                <span
                                    className={
                                        styles.statusFailed
                                    }
                                >
                                    Failed
                                </span>
                            )}
                        </div>
                    </div>

                    <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>Amount</h6>
                        </div>

                        <div
                            className={`${styles.summaryValue} ${styles.amount}`}
                        >
                            $
                            {Number(
                                amount
                            ).toLocaleString(
                                "en-US"
                            )}
                        </div>
                    </div>

                    <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>
                                Wallet Amount
                            </h6>
                        </div>

                        <div
                            className={`${styles.summaryValue} ${styles.amount}`}
                        >
                            $
                            {Number(
                                amount
                            ).toLocaleString(
                                "en-US"
                            )}
                        </div>
                    </div>

                    <div className={styles.summaryRow}>
                        <div className={styles.summaryLabel}>
                            <h6>Date</h6>
                        </div>

                        <div
                            className={`${styles.summaryValue} ${styles.date}`}
                        >
                            {formatDate(
                                created_at
                            )}
                        </div>
                    </div>

                </div>

                <div className={styles.footer}>
                    <button
                        onClick={
                            handleModalClose
                        }
                        className={
                            styles.closeButton
                        }
                    >
                        Close
                    </button>
                </div>

            </div>
        </div>
    );
};

export default TransactionSummary;