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

const API_URL = apiConfig.transaction;

const DetailTransaction = () => {
    const { GetData } = useCallApi();
    const {
        showDetailDialog,
        setShowDetailDialog,
        selectedTransactionId
    } = useTransactionContext();

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

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

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

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

    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>
                <DialogBody>
                    {/* Tabs Navigation */}
                    <div className="flex border-b border-gray-200">
                        <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>
                        <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 === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                            onClick={() => setActiveTab('log')}
                        >
                            Transaction Log
                        </button>
                        <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>
                        <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>

                    {/* Tab Content */}
                    <div className="py-4 overflow-y-auto max-h-[400px]">
                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
                            <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-2 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Date</p>
                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Full Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</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?.purchase.amount)}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Fee</p>
                                        <p className="font-medium">
                                            {transactionDetails?.kind === 'P'
                                                ? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
                                                : transactionDetails?.transfer.fee_amount.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;
                                                if (transactionDetails?.status === 'C') {
                                                    status = 'COMPLETE';
                                                } else if (transactionDetails?.status === 'F') {
                                                    status = 'FAILED';
                                                } else if (transactionDetails?.status === 'O') {
                                                    status = 'ON PROCESS';
                                                } else {
                                                    status = 'PENDING';
                                                }
                                                return status;
                                            })()}
                                        </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';
                                                }
                                                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>

                                <h3 className="font-semibold flex items-center">
                                    Origin Wallet
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Wallet
                                    </span>
                                </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>

                                <h3 className="font-semibold flex items-center">
                                    Purchase
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Purchase
                                    </span>
                                </h3>
                                <div className="grid grid-cols-2 gap-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)}</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)}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Cashback Point</p>
                                        <p className="font-medium">{transactionDetails?.purchase.cashback_point}</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)}</p>
                                    </div>
                                </div>
                            </div>
                        )}
                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
                            <div className="space-y-4">
                                <h3 className="font-semibold flex items-center">
                                    Product Information
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Product Info
                                    </span>
                                </h3>
                                <div className="grid grid-cols-2 gap-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>
                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Price Point</p>
                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
                                    </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>
                                    <div>
                                        <p className="text-sm text-gray-500">Provider Type</p>
                                        <p className="font-medium">{transactionDetails?.purchase.product.provider.type}</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-2 gap-4">
                                    <div>
                                        <p className="text-sm text-gray-500">Transaction Date</p>
                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Full Name</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</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.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;
                                                if (transactionDetails?.status === 'C') {
                                                    status = 'COMPLETE';
                                                } else if (transactionDetails?.status === 'F') {
                                                    status = 'FAILED';
                                                } else if (transactionDetails?.status === 'O') {
                                                    status = 'ON PROCESS';
                                                } else {
                                                    status = 'PENDING';
                                                }
                                                return status;
                                            })()}
                                        </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';
                                                }
                                                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">
                                    Destination Wallet
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Wallet
                                    </span>
                                </h3>
                                <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>

                                <h3 className="font-semibold flex items-center">
                                    Destination Customer
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Destination Customer
                                    </span>
                                </h3>
                                <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}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">MSISDN</p>
                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.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">MSISDN</p>
                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
                                    </div>
                                </div>

                                <h3 className="font-semibold flex items-center">
                                    Origin Wallet
                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                        Wallet
                                    </span>
                                </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>
                            </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_customer.fullname}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">Phone Number</p>
                                        <p className="font-medium">{transactionDetails?.origin_customer.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 === '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">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">Response Code</th>
                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
                                                transactionDetails.log.map((log: { 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 font-medium">
                                                            {(() => {
                                                                let status;
                                                                if (log.status === 'P') {
                                                                    status = 'PENDING';
                                                                } else if (log.status === 'O') {
                                                                    status = 'ON PROCESS';
                                                                } else if (log.status === 'F') {
                                                                    status = 'FAILED';
                                                                } else if (log.status === 'C') {
                                                                    status = 'COMPLETE';
                                                                }
                                                                return status;
                                                            })()}
                                                        </td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td>
                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</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' && (
                            <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">Created At</th>
                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
                                                    transactionDetails.log_approve.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';
                                                                    }
                                                                    return status;
                                                                })()}
                                                            </td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</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 === '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">Type</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">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">Response Code</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: { 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">{log.type}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</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>
                </DialogBody>
            </DialogContent>
        </Dialog>
    );
};

export default DetailTransaction;