import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useState } from 'react';
import ResendTransaction from './ResendTransaction';
import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle
} from '@/components/ui/dialog';
import { useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';

const API_URL = apiConfig.transaction;
const API_URL_CURRENT_BALANCE = apiConfig.service_wallet;


const DetailTransaction = () => {
    const { GetData } = useCallApi();

    // const { reload } = useDataGrid();
    const {
        showDetailDialog,
        setShowDetailDialog,
        selectedTransactionId
    } = useTransactionContext();

    const [transactionDetails, setTransactionDetails] = useState<any>(null);
    const [edtl, setEdtl] = useState<any>(null);

    const [showResend, setResend] = useState(false);

    const handleResendOpen = () => {
        setResend(true);
    };

    const handleResendClose = () => {
        setResend(false);
    };

    useEffect(() => {
        const fetchTransactionDetails = async () => {
            if (selectedTransactionId) {
                try {
                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
                        id: selectedTransactionId
                    });
                    // setTransactionDetails(response?.data);
                    // console.log(response?.data.result_edtl)
                    if (response?.data.result_edtl == undefined) {
                        setTransactionDetails(response?.data)
                        setEdtl(null);
                    } else {
                        setTransactionDetails(response?.data.detail)
                        setEdtl(response?.data.result_edtl.data)
                    }
                } catch (error) {
                    console.error('Error fetching transaction', error);
                }
            }
        };

        if (showDetailDialog && selectedTransactionId) {
            fetchTransactionDetails();
        }
    }, [showDetailDialog, selectedTransactionId, GetData]);

    const [activeTab, setActiveTab] = useState('detail');

    // Reset ke tab awal saat dialog dibuka
    useEffect(() => {
        if (showDetailDialog) {
            setActiveTab('detail');
        }
    }, [showDetailDialog]);

    const [currentBalance, setCurrentBalance] = useState<number | null>(null);
    const [currentBalanceTransfer, setCurrentBalanceTransfer] = useState<number | null>(null);

    useEffect(() => {
        setCurrentBalance(null);
    }, [transactionDetails]);

    useEffect(() => {
        setCurrentBalanceTransfer(null);
    }, [transactionDetails]);

    const getCurrentBallanceWallet = async (customerId: string) => {
        try {
            const responsecurrentbalance = await GetData(
                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerId}`,
                {}
            );

            const match = responsecurrentbalance?.data?.find(
                (item: any) => item.id_wallet === transactionDetails?.origin_wallet?.id
            );

            if (match) {
                // console.log('Matched Wallet:', match); // Optional debug
                return match.amount;
            }
        } catch (error) {
            console.error('Error fetching current balance', error);
        }

        return null;
    };


    const getCurrentBallanceWalletTransfer = async (customerIdtransfer: string) => {
        try {
            const response = await GetData(
                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerIdtransfer}`,
                {}
            );

            const match = response?.data?.find(
                (item: any) => item.id_wallet === transactionDetails?.transfer?.destination_wallet?.id
            );

            if (match) {
                // console.log('Matched Wallet:', match);
                return match.amount;
            }
        } catch (error) {
            console.error('Error fetching current balance', error);
        }

        return null;
    };

    const formatTokenDec = (token: any) => {
        if (token != null && token !== "") {
            return token.match(/.{1,4}/g)?.join(" ");
        } else {
            return "-";
        }
    };


    return (
        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
                <DialogHeader>
                    <DialogTitle>Transaction Details</DialogTitle>
                </DialogHeader>
                <DialogDescription></DialogDescription>
                <DialogBody>
                    {/* Tabs Navigation */}
                    <div className="flex border-b border-gray-200">
                        {/* {transactionDetails?.kind == 'P' && ( */}
                        <button
                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('detail')}
                        >
                            Detail Transaction
                        </button>
                        {/* )} */}

                        {transactionDetails?.kind == 'P' && (
                            <button
                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'purchase' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                                onClick={() => setActiveTab('purchase')}
                            >
                                Purchase Detail
                            </button>
                        )}

                        {transactionDetails?.kind == 'P' && (
                            <button
                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'productdetail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                                onClick={() => setActiveTab('productdetail')}
                            >
                                Product Detail
                            </button>
                        )}

                        <button
                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('origincustomer')}
                        >
                            Origin Customer
                        </button>
                        <button
                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('destinationcustomer')}
                        >
                            Destination Customer
                        </button>
                        <button
                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('originwallet')}
                        >
                            Origin Wallet
                        </button>
                        {transactionDetails?.kind !== 'P' && (
                            <button
                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                                onClick={() => setActiveTab('destinationwallet')}
                            >
                                Destination Wallet
                            </button>
                        )}

                        <button
                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('log')}
                        >
                            Transaction Log
                        </button>

                        {transactionDetails?.kind !== 'P' && (
                            <button
                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                                onClick={() => setActiveTab('approve')}
                            >
                                Approval Log
                            </button>
                        )}

                        {transactionDetails?.kind !== 'P' && (
                            <button
                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                                onClick={() => setActiveTab('p24')}
                            >
                                Log P24
                            </button>
                        )}

                    </div>

                    {activeTab === 'purchase' && (
                        <>
                            <h3 className="font-semibold flex items-center mt-4">
                                Purchase
                            </h3>
                            <div className="grid grid-cols-2 gap-4 mt-4">
                                <div>
                                    <p className="text-sm text-gray-500">Amount</p>
                                    <p className="font-medium">
                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
                                            transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
                                        )}
                                    </p>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Cashback</p>
                                    <p className="font-medium">
                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
                                            transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
                                        )}
                                    </p>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Cashback Point</p>
                                    <p className="font-medium">
                                        {transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
                                    </p>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Fee Amount</p>
                                    <p className="font-medium">
                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
                                            transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
                                        )}
                                    </p>
                                </div>
                            </div>
                        </>
                    )}

                    {activeTab === 'productdetail' && (
                        <>
                            <div className="space-y-4">
                                <h3 className="font-semibold flex items-center mt-4">
                                    Product Information
                                </h3>
                                <div className="grid grid-cols-2 gap-4 mt-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Product Name</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.name ?? "-"}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Price Cash</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.price_cash != null
                                                ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
                                                : "-"}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Price Point</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.price_point ?? "-"}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Product Type</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.type ?? "-"}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Provider Name</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.provider?.description ?? "-"}
                                        </p>
                                    </div>

                                    {edtl != null && (
                                        <>
                                            <div>
                                                <p className="text-sm text-gray-500">Token KWh EDTL</p>
                                                <p className="font-medium">
                                                    {formatTokenDec(edtl.tokenDec)}
                                                </p>
                                            </div>

                                            <div>
                                                <p className="text-sm text-gray-500">Meter SN</p>
                                                <p className="font-medium">
                                                    {edtl.meterSn ?? "-"}
                                                </p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Power Steps Desc</p>
                                                <p className="font-medium">
                                                    {edtl.powerStepsDesc ?? "-"}
                                                </p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Customer Name</p>
                                                <p className="font-medium">
                                                    {edtl.customerName ?? "-"}
                                                </p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Customer Addr</p>
                                                <p className="font-medium">
                                                    {edtl.customerAddr ?? "-"}
                                                </p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Amount</p>
                                                <p className="font-medium">
                                                    {edtl.customerPaymentAmount != null
                                                        ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(edtl.customerPaymentAmount)
                                                        : "-"}
                                                </p>
                                            </div>
                                        </>
                                    )}

                                    <div>
                                        <p className="text-sm text-gray-500">Provider Type</p>
                                        <p className="font-medium">
                                            {transactionDetails?.purchase?.product?.provider?.type === "h2h"
                                                ? "HOST TO HOST"
                                                : transactionDetails?.purchase?.product?.provider?.type === "agent"
                                                    ? "AGENT"
                                                    : "-"}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </>
                    )}

                    <div className="py-4 overflow-y-auto max-h-[400px]">
                        {activeTab === 'detail' && (transactionDetails?.kind === 'P' || transactionDetails?.kind === 'K') && (
                            <div className="space-y-4">
                                <h3 className="font-semibold flex items-center">
                                    Transaction Information
                                </h3>
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Date</p>
                                        <p className="font-medium">
                                            {transactionDetails?.transaction_date
                                                ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
                                                    day: '2-digit',
                                                    month: '2-digit',
                                                    year: 'numeric',
                                                    hour: '2-digit',
                                                    minute: '2-digit',
                                                    second: '2-digit',
                                                    hour12: false
                                                })
                                                : ''}
                                        </p>

                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Full Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Amount</p>
                                        <p className="font-medium">
                                            {(transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount) != null
                                                ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
                                                    transactionDetails.purchase?.amount ?? transactionDetails.transfer?.amount
                                                )
                                                : "-"}
                                        </p>
                                    </div>

                                    <div>
                                        <p className="text-sm text-gray-500">Fee</p>
                                        <p className="font-medium">
                                            {(transactionDetails?.transfer?.fee_amount ?? transactionDetails?.purchase?.fee_amount ?? 0)
                                                .toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Status</p>
                                        <div>
                                            {(() => {
                                                let status;
                                                let badgeClass;


                                                if (transactionDetails?.status === 'C') {
                                                    status = 'COMPLETE';
                                                    badgeClass = 'bg-green-100 text-green-800';
                                                } else if (transactionDetails?.status === 'F') {
                                                    status = 'FAILED';
                                                    badgeClass = 'bg-red-100 text-red-800';
                                                } else if (transactionDetails?.status === 'O') {
                                                    status = 'ON PROCESS';
                                                    badgeClass = 'bg-blue-100 text-blue-800';
                                                } else if (transactionDetails?.status === 'P') {
                                                } else if (transactionDetails?.status === 'P') {
                                                    status = 'PENDING';
                                                    badgeClass = 'bg-gray-100 text-gray-800';
                                                } else if (transactionDetails?.status === 'R') {
                                                    status = 'ROLLBACK';
                                                    badgeClass = 'bg-yellow-100 text-yellow-800';
                                                } else if (transactionDetails?.status === 'S') {
                                                    status = 'REVERSAL';
                                                    badgeClass = 'bg-purple-100 text-purple-800';
                                                } else if (transactionDetails?.status === 'R') {
                                                    status = 'ROLLBACK';
                                                    badgeClass = 'bg-yellow-100 text-yellow-800';
                                                } else if (transactionDetails?.status === 'S') {
                                                    status = 'REVERSAL';
                                                    badgeClass = 'bg-purple-100 text-purple-800';
                                                }

                                                return (
                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
                                                        {status}
                                                    </span>
                                                );
                                            })()}
                                        </div>

                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Type</p>
                                        <p className="font-medium">
                                            {(() => {
                                                let kind;
                                                if (transactionDetails?.kind === 'R') {
                                                    kind = 'Return';
                                                } else if (transactionDetails?.kind === 'T') {
                                                    kind = 'Transfer';
                                                } else if (transactionDetails?.kind === 'P') {
                                                    kind = 'Purchase';
                                                } else if (transactionDetails?.kind === 'L') {
                                                    kind = 'Purchase Loja';
                                                } else if (transactionDetails?.kind === 'W') {
                                                    kind = 'Withdraw';
                                                } else if (transactionDetails?.kind === 'U') {
                                                    kind = 'Topup';
                                                } else if (transactionDetails?.kind === 'B') {
                                                    kind = 'Topup P24';
                                                } else if (transactionDetails?.kind === 'N') {
                                                    kind = 'Topup Partner';
                                                } else if (transactionDetails?.kind === 'E') {
                                                    kind = 'Reward';
                                                } else if (transactionDetails?.kind === 'A') {
                                                    kind = 'Transfer Agent';
                                                } else if (transactionDetails?.kind === 'M') {
                                                    kind = 'Withdraw Agent';
                                                } else if (transactionDetails?.kind === 'O') {
                                                    kind = 'Topup Agent';
                                                } else if (transactionDetails?.kind === 'S') {
                                                    kind = 'Transfer P24';
                                                } else if (transactionDetails?.kind === 'I') {
                                                    kind = 'Withdraw Merchant';
                                                } else if (transactionDetails?.kind === 'D') {
                                                    kind = 'Donation';
                                                } else if (transactionDetails?.kind === 'F') {
                                                    kind = 'Fee';
                                                } else if (transactionDetails?.kind === 'V') {
                                                    kind = 'Raversal';
                                                } else if (transactionDetails?.kind === 'C') {
                                                    kind = 'Cashback Cash';
                                                } else if (transactionDetails?.kind === 'H') {
                                                    kind = 'Cashback Point';
                                                } else if (transactionDetails?.kind === 'J') {
                                                    kind = 'Withdraw Admin';
                                                } else if (transactionDetails?.kind === 'G') {
                                                    kind = "Topup EDTL Agent";
                                                }else if (transactionDetails?.kind === 'K') {
                                                    kind = "Topup EDTL Customer";
                                                }
                                                
                                                return kind;
                                            })()}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Description</p>
                                        <p className="font-medium">{transactionDetails?.description || '-'}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Name</p>
                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
                                    </div>
                                </div>

                            </div>
                        )}

                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
                            <div className="space-y-4">
                                <h3 className="font-semibold flex items-center">
                                    Transaction Information
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Info
                                    </span>
                                </h3>
                                <div className="grid grid-cols-3 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Date</p>
                                        <p className="font-medium">{transactionDetails?.transaction_date
                                            ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
                                                day: '2-digit',
                                                month: '2-digit',
                                                year: 'numeric',
                                                hour: '2-digit',
                                                minute: '2-digit',
                                                second: '2-digit',
                                                hour12: false
                                            })
                                            : ''}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Full Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Amount</p>
                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Fee</p>
                                        <p className="font-medium">
                                            {(transactionDetails?.transfer?.fee_amount ?? transactionDetails?.purchase?.fee_amount ?? 0).toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Status</p>
                                        <p className="font-medium">
                                            {(() => {
                                                let status = 'UNKNOWN';
                                                let badgeClass = 'bg-gray-100 text-gray-800';

                                                switch (transactionDetails?.status) {
                                                    case 'C':
                                                        status = 'COMPLETE';
                                                        badgeClass = 'bg-green-100 text-green-800';
                                                        break;
                                                    case 'F':
                                                        status = 'FAILED';
                                                        badgeClass = 'bg-red-100 text-red-800';
                                                        break;
                                                    case 'O':
                                                        status = 'ON PROCESS';
                                                        badgeClass = 'bg-blue-100 text-blue-800';
                                                        break;
                                                    case 'P':
                                                        status = 'PENDING';
                                                        badgeClass = 'bg-gray-100 text-gray-800';
                                                        break;
                                                    case 'R':
                                                        status = 'ROLLBACK';
                                                        badgeClass = 'bg-yellow-100 text-yellow-800';
                                                        break;
                                                    case 'S':
                                                        status = 'REVERSAL';
                                                        badgeClass = 'bg-purple-100 text-purple-800';
                                                        break;
                                                    default:
                                                        // optional: keep 'UNKNOWN' or set to null
                                                        break;
                                                }

                                                return (
                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
                                                        {status}
                                                    </span>
                                                );
                                            })()}

                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Type</p>
                                        <p className="font-medium">
                                            {(() => {
                                                let kind;
                                                if (transactionDetails?.kind === 'T') {
                                                    kind = 'TRANSFER';
                                                } else if (transactionDetails?.kind === 'P') {
                                                    kind = 'PURCHASE';
                                                } else if (transactionDetails?.kind === 'W') {
                                                    kind = 'WITHDRAW';
                                                } else if (transactionDetails?.kind === 'U') {
                                                    kind = 'TOP UP';
                                                } else if (transactionDetails?.kind === 'R') {
                                                    kind = 'RETURN';
                                                } else if (transactionDetails?.kind === 'E') {
                                                    kind = 'REWARD';
                                                } else if (transactionDetails?.kind === 'L') {
                                                    kind = 'PURCHASE LOJA';
                                                } else if (transactionDetails?.kind === 'B') {
                                                    kind = 'TOP UP P24';
                                                } else if (transactionDetails?.kind === 'A') {
                                                    kind = 'TRANSFER AGENT';
                                                } else if (transactionDetails?.kind === 'M') {
                                                    kind = 'WITHDRAWAL AGENT';
                                                } else if (transactionDetails?.kind === 'O') {
                                                    kind = 'TOPUP AGENT';
                                                } else if (transactionDetails?.kind === 'S') {
                                                    kind = 'TOPUP P24';
                                                } else if (transactionDetails?.kind === 'I') {
                                                    kind = 'WITHDRAW MERCHANT';
                                                } else if (transactionDetails?.kind === 'D') {
                                                    kind = 'DONATION';
                                                } else if (transactionDetails?.kind === 'F') {
                                                    kind = 'FEE';
                                                } else if (transactionDetails?.kind === 'V') {
                                                    kind = 'REVERSAL';
                                                } else if (transactionDetails?.kind === 'C') {
                                                    kind = 'CASHBACK CASH';
                                                } else if (transactionDetails?.kind === 'H') {
                                                    kind = 'CASHBACK POINT';
                                                } else if (transactionDetails?.kind === 'J') {
                                                    kind = 'WITHDRAW ADMIN';
                                                }

                                                return kind;
                                            })()}

                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Description</p>
                                        <p className="font-medium">{transactionDetails?.description}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Name</p>
                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Reference</p>
                                        <p className="font-medium">{transactionDetails?.transfer.reference}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Destination Iban</p>
                                        <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                    </div>
                                </div>
                                <h3 className="font-semibold flex items-center">
                                    Transfer Type
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Transfer Type
                                    </span>
                                </h3>
                                <div className="grid grid-cols-3 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Transfer Type</p>
                                        <p className="font-medium">
                                            {
                                                (() => {
                                                    if (transactionDetails?.transfer.type === "S") {
                                                        return "SEND";
                                                    } else if (transactionDetails?.transfer.type === "R") {
                                                        return "RECEIVE";
                                                    } else {
                                                        return "UNKNOWN";
                                                    }
                                                })()
                                            }
                                        </p>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'origincustomer' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Origin Customer</h3>
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Full Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_name}</p>
                                    </div>
                                    {/* <div>
                                        <p className="text-sm text-gray-500">Phone Number</p>
                                        <p className="font-medium">{transactionDetails?.origin_msisdn}</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
                                    </div> */}
                                    <div>
                                        <p className="text-sm text-gray-500">Phone Number</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Email</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Username</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer?.username ?? "-"}</p>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'destinationcustomer' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Destination Customer</h3>

                                {transactionDetails?.transfer?.destination_customer ? (
                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <p className="text-sm text-gray-500">Name</p>
                                            <p className="font-medium">
                                                {transactionDetails.transfer.destination_customer.fullname ?? transactionDetails.transfer.destination_name}
                                            </p>
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-500">MSISDN</p>
                                            <p className="font-medium">
                                                {transactionDetails.transfer.destination_customer.msisdn ?? transactionDetails.transfer.destination_msisdn}
                                            </p>
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-500">Email</p>
                                            <p className="font-medium">
                                                {transactionDetails.transfer.destination_customer.email ?? "-"}
                                            </p>
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-500">Username</p>
                                            <p className="font-medium">
                                                {transactionDetails.transfer.destination_customer.username ?? "-"}
                                            </p>
                                        </div>
                                    </div>
                                ) : (
                                    <p className="text-gray-500">No data available</p>
                                )}
                            </div>
                        )}

                        {activeTab === 'originwallet' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Origin Wallet</h3>
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Description</p>
                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Current Balance</p>
                                        <p className="font-medium">
                                            {currentBalance !== null && currentBalance !== undefined
                                                ? currentBalance
                                                : '-'}
                                        </p>
                                    </div>
                                </div>
                                <Button
                                    className="btn btn-primary"
                                    type="button"
                                    onClick={async () => {
                                        const balance = await getCurrentBallanceWallet(transactionDetails?.origin_customer.id);
                                        if (balance !== null) {
                                            setCurrentBalance(balance);
                                        }
                                    }}
                                >
                                    Generate Current Balance
                                </Button>
                            </div>
                        )}

                        {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Destination Wallet</h3>

                                {!transactionDetails?.transfer ? (
                                    <div className="text-sm text-gray-500">No Data available</div>
                                ) : (
                                    <>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div>
                                                <p className="text-sm text-gray-500">Name</p>
                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Description</p>
                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-500">Current Balance</p>
                                                <p className="font-medium">
                                                    {currentBalanceTransfer !== null
                                                        ? currentBalanceTransfer
                                                        : '-'}
                                                </p>
                                            </div>
                                        </div>
                                        <Button
                                            className="btn btn-primary"
                                            type="button"
                                            onClick={async () => {
                                                const customerId = transactionDetails?.transfer?.destination_customer?.id;
                                                const balance = await getCurrentBallanceWalletTransfer(customerId);
                                                if (balance !== null) {
                                                    setCurrentBalanceTransfer(balance); // ✅ INI YANG BENAR
                                                }
                                            }}
                                        >
                                            Generate Current Balance
                                        </Button>
                                    </>

                                )}
                            </div>

                        )}


                        {activeTab === 'log' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Transaction Logs</h3>
                                <div className="border rounded-lg overflow-x-auto">
                                    <table className="min-w-full table-auto">
                                        <thead>
                                            <tr className="bg-gray-100">
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
                                                transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                    <tr key={index} className="border-t">
                                                        <td className="px-4 py-2 text-sm text-gray-500">
                                                            {(() => {
                                                                let status;
                                                                if (log.status === 'C') {
                                                                    status = 'COMPLETE';
                                                                } else if (log.status === 'F') {
                                                                    status = 'FAILED';
                                                                } else if (log.status === 'O') {
                                                                    status = 'ON PROCESS';
                                                                } else if (log.status === 'P') {
                                                                    status = 'PENDING';
                                                                } else if (log.status === 'R') {
                                                                    status = 'ROLLBACK';
                                                                } else if (log.status === 'S') {
                                                                    status = 'REVERSAL';
                                                                }
                                                                return status;
                                                            })()}
                                                        </td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                            ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                day: '2-digit',
                                                                month: '2-digit',
                                                                year: 'numeric',
                                                                hour: '2-digit',
                                                                minute: '2-digit',
                                                                second: '2-digit',
                                                                hour12: false
                                                            })
                                                            : ''}</td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
                                                            ? new Date(log.response_date).toLocaleDateString('en-GB', {
                                                                day: '2-digit',
                                                                month: '2-digit',
                                                                year: 'numeric',
                                                                hour: '2-digit',
                                                                minute: '2-digit',
                                                                second: '2-digit',
                                                                hour12: false
                                                            })
                                                            : ''}</td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">
                                                            <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                {(() => {
                                                                    try {
                                                                        if (log.response_code === null) {
                                                                            return '';
                                                                        }
                                                                        const parsed = JSON.parse(log.request_body);
                                                                        return JSON.stringify(parsed, null, 2);
                                                                    } catch (e) {
                                                                        return log.request_body; // fallback: tampilkan as-is jika gagal parse
                                                                    }
                                                                })()}
                                                            </pre>
                                                        </td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">
                                                            <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                {(() => {
                                                                    try {
                                                                        if (log.response_body === null) {
                                                                            return '';
                                                                        }
                                                                        const parsed = JSON.parse(log.response_body);
                                                                        return JSON.stringify(parsed, null, 2) ?? '';
                                                                    } catch (e) {
                                                                        return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
                                                                    }
                                                                })()}
                                                            </pre>

                                                        </td>

                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
                                                    </tr>
                                                ))
                                            ) : (
                                                <tr>
                                                    <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
                                                        No logs available
                                                    </td>
                                                </tr>
                                            )}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        )}

                        {activeTab === 'approve' && transactionDetails?.kind == "P" && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">Approval Logs</h3>
                                {transactionDetails?.log_approve.length === 0 ? (
                                    <p className="text-sm text-gray-500">No data available</p>
                                ) : (
                                    <div className="border rounded-lg overflow-x-auto">
                                        <table className="min-w-full table-auto">
                                            <thead>
                                                <tr className="bg-gray-100">
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {[...transactionDetails.log_approve]
                                                    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
                                                    .map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
                                                        <tr key={index} className="border-t">
                                                            <td className="px-4 py-2 font-medium">
                                                                {(() => {
                                                                    let status;
                                                                    if (log.status === 'W') {
                                                                        status = 'WAITING';
                                                                    } else if (log.status === 'Y') {
                                                                        status = 'APPROVE';
                                                                    } else if (log.status === 'N') {
                                                                        status = 'REJECT';
                                                                    } else if (log.status === 'T') {
                                                                        status = 'NO NEED';
                                                                    } else {
                                                                        status = log.status || 'UNKNOWN';
                                                                    }
                                                                    return status;
                                                                })()}
                                                            </td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">
                                                                {new Date(log.created_at).toLocaleString('sv-SE', {
                                                                    timeZone: 'Asia/Jakarta',
                                                                    year: 'numeric',
                                                                    month: '2-digit',
                                                                    day: '2-digit',
                                                                    hour: '2-digit',
                                                                    minute: '2-digit',
                                                                    second: '2-digit',
                                                                    hour12: false,
                                                                })}
                                                            </td>
                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                        </tr>
                                                    ))}
                                            </tbody>
                                        </table>
                                    </div>
                                )}
                            </div>
                        )}

                        {activeTab === 'p24' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold">P24 Logs</h3>
                                {transactionDetails?.p24.length === 0 ? (
                                    <p className="text-sm text-gray-500">No data available</p>
                                ) : (
                                    <div className="border rounded-lg overflow-x-auto">
                                        <table className="min-w-full table-auto">
                                            <thead>
                                                <tr className="bg-gray-100">
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
                                                    transactionDetails.p24.map((log: { status: string, request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                        <tr key={index} className="border-t">
                                                            <td className="px-4 py-2 text-sm text-gray-500">
                                                                {(() => {
                                                                    let status;
                                                                    if (log.status === 'C') {
                                                                        status = 'COMPLETE';
                                                                    } else if (log.status === 'F') {
                                                                        status = 'FAILED';
                                                                    } else if (log.status === 'O') {
                                                                        status = 'ON PROCESS';
                                                                    } else if (log.status === 'P') {
                                                                        status = 'PENDING';
                                                                    } else if (log.status === 'R') {
                                                                        status = 'ROLLBACK';
                                                                    } else if (log.status === 'S') {
                                                                        status = 'REVERSAL';
                                                                    }
                                                                    return status;
                                                                })()}
                                                            </td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                                ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                    day: '2-digit',
                                                                    month: '2-digit',
                                                                    year: 'numeric',
                                                                    hour: '2-digit',
                                                                    minute: '2-digit',
                                                                    second: '2-digit',
                                                                    hour12: false
                                                                })
                                                                : ''}</td>

                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
                                                                ? new Date(log.response_date).toLocaleDateString('en-GB', {
                                                                    day: '2-digit',
                                                                    month: '2-digit',
                                                                    year: 'numeric',
                                                                    hour: '2-digit',
                                                                    minute: '2-digit',
                                                                    second: '2-digit',
                                                                    hour12: false
                                                                })
                                                                : ''}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">
                                                                <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                    {(() => {
                                                                        try {
                                                                            if (log.response_code === null) {
                                                                                return '';
                                                                            }
                                                                            const parsed = JSON.parse(log.request_body);
                                                                            return JSON.stringify(parsed, null, 2);
                                                                        } catch (e) {
                                                                            return log.request_body; // fallback: tampilkan as-is jika gagal parse
                                                                        }
                                                                    })()}
                                                                </pre>
                                                            </td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">
                                                                <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                    {(() => {
                                                                        try {
                                                                            if (log.response_body === null) {
                                                                                return '';
                                                                            }
                                                                            const parsed = JSON.parse(log.response_body);
                                                                            return JSON.stringify(parsed, null, 2) ?? '';
                                                                        } catch (e) {
                                                                            return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
                                                                        }
                                                                    })()}
                                                                </pre>

                                                            </td>

                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
                                                        </tr>
                                                    ))
                                                ) : (
                                                    <tr>
                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
                                                            No logs available
                                                        </td>
                                                    </tr>
                                                )}
                                            </tbody>
                                        </table>
                                    </div>
                                )}
                            </div>
                        )}

                    </div>

                    {/* {showResendDialog} */}
                    {(transactionDetails?.status === 'F' || transactionDetails?.status === 'P') && transactionDetails?.status_approve !== 'W' && (
                        <div className="flex justify-end mt-4">
                            <button className="btn btn-primary" onClick={handleResendOpen}>Retry Transaction</button>
                            <ResendTransaction isOpen={showResend} onClose={handleResendClose} selectedTransactionForResend={transactionDetails} />
                        </div>
                    )}


                </DialogBody>
            </DialogContent>
        </Dialog>
    );
};

export default DetailTransaction;