import React from 'react'
import {useQuery} from "@tanstack/react-query";

import Icons from '../Icons'

import Avatar from '../../assets/loans.png'
import queryKeys from '../../services/queryKeys'
import {getLoans} from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber'
import getTimeFromDateString from "../../helpers/GetTimeFromDateString";
import {initiateDisburseRetrials, initiateDisburseVerify} from "../../services/siteEventService"

export default function LoanDetails({transactionID}) {

    const {data: allLoans, isFetching, isError, error} = useQuery({
        queryKey: [...queryKeys.loans, transactionID],
        queryFn: () => getLoans({transaction_id: transactionID})
    })

    const loans = allLoans?.data?.loans // LOANS LIST
    // const loansCount = allLoans?.data?.count // LOANS LIST COUNT

    const handleClick = (transactioID) => {
        // alert(transactioID)
        const fields = {
            "transactionId": transactioID
        }
        return initiateDisburseRetrials(fields)
        // console.log('Button clicked!');
    };

    const handleRetryClick = (transactioID) => {
        alert(transactioID)
        const fields = {
            "transactionId": transactioID
        }
        return initiateDisburseVerify(fields)
        // console.log('Button clicked!');
    };

    return (
        <>
            {isFetching ?
                <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                    <p className='pb-4 font-bold text-base'>Loans</p>
                    <p className='text-slate-800'>Loading...</p>
                </div>
                : isError ?
                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                        <p className='pb-4 font-bold text-base'>Loans</p>
                        <p className='text-red-500'>{error.message}</p>
                    </div>
                    : (loans && loans.length > 0) ?
                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'
                             style={{backgroundColor: '#f7d9e3'}}>
                            <p className='pb-4 font-bold text-base'>Loan</p>
                            <table className="table-auto py-2 w-full text-sm">
                                <thead className="py-2 text-sm text-slate-500 text-left">
                                <tr>
                                    <th scope="col" className="px-2 py-2">
                                        Name
                                    </th>
                                    <th scope="col" className="px-2 text-right">
                                        Loan/Eligible Amount
                                    </th>
                                    <th scope="col" className="px-2 text-right">
                                        Product/Tenor
                                    </th>
                                    <th scope="col" className="px-2 text-right">
                                        Repay/Install Amount.
                                    </th>
                                    <th scope="col" className="px-2 text-right">
                                        Added/Due
                                    </th>
                                    <th scope="col" className="px-2 text-right">
                                        Status
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {loans?.map((item, index) => (
                                    <>
                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                            <td className="px-2 py-2">
                                                <div
                                                    className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                                    <img className="w-10 h-10 rounded-md" src={Avatar}
                                                         alt="Jese image"/>
                                                    <div className="text-left">
                                                        <div
                                                            className="text-base font-semibold">{item?.account_id || ''}</div>
                                                        <div
                                                            className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
                                                        <div className="font-semibold text-red-500">ORIGIN
                                                            : {item?.original_transaction}</div>
                                                        <div className="font-bold text-blue-500">OFFER
                                                            : {item?.offer_id}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="px-2">
                                                <div className="text-right">
                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
                                                    <div
                                                        className="font-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div>
                                                    <div
                                                        className="font-semibold text-red-500">#{formatNumber(item?.eligible_amount)}</div>

                                                </div>
                                            </td>
                                            <td className="px-2">
                                                <div className="text-right">
                                                    <div
                                                        className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
                                                    <div className="font-normal text-gray-500">{item?.tenor} days</div>
                                                </div>
                                            </td>
                                            <td className="px-2">
                                                <div className="text-right">
                                                    <div
                                                        className="font-semibold text-gray-500">#{formatNumber(item?.repayment_amount)}</div>
                                                    <div
                                                        className="font-semibold text-red-500">#{formatNumber(item?.installment_amount)}</div>
                                                </div>
                                            </td>
                                            <td className="px-2">
                                                <div className="text-right">
                                                    <div
                                                        className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                    <div
                                                        className="font-semibold text-red-500">{getDateFromDateString(item?.due_date)}</div>
                                                </div>
                                            </td>
                                            <td className="px-2 text-right">
                                                <div className="font-semibold  text-red-500">{item?.status}</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colSpan="8">
                                                <div>
                                                    <div style={{display: 'flex'}}>
                                                        <div style={{width: '50%'}}>
                                                            <p className='pb-4 font-bold text-base'>Loans Disbursement
                                                                Details</p>
                                                        </div>
                                                        <div style={{width: '50%', textAlign: 'right'}}>
                                                            <button
                                                                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 roundede"
                                                                onClick={() => handleClick(item?.transaction_id)}>
                                                                Retry Disbursement
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div className="font-bold text-blue-500">Disburse Date
                                                        : {getDateFromDateString(item?.disburseDate)} {getTimeFromDateString(item?.disburseDate)} </div>
                                                    <div className="font-bold text-gray-500">Disburse Description
                                                        : {item?.disburseDescription}</div>
                                                    <div className="font-bold text-red-500">Disburse Result
                                                        : {item?.disburseResult}</div>
                                                    <div><br/></div>
                                                    <div style={{display: 'flex'}}>
                                                        <div style={{width: '70%'}}>
                                                            <div className="font-bold text-blue-500">Disburse Verify
                                                                Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>
                                                            <div className="font-bold text-gray-500">Verify Description
                                                                : {item?.verifyDescription}</div>
                                                            <div className="font-bold text-red-500">Verify Result
                                                                : {item?.verifyResult}</div>
                                                        </div>
                                                        <div style={{width: '30%', textAlign: 'right'}}>
                                                            <button
                                                                className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
                                                                onClick={() => handleRetryClick(item?.transaction_id)}>
                                                                Retry Verification
                                                            </button>
                                                        </div>
                                                    </div>


                                                    {/*<div className="font-bold text-blue-500">Disburse Verify*/}
                                                    {/*    Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>*/}
                                                    {/*<div className="font-bold text-gray-500">Verify Description*/}
                                                    {/*    : {item?.verifyDescription}</div>*/}
                                                    {/*<div className="font-bold text-red-500">Verify Result*/}
                                                    {/*    : {item?.verifyResult}</div>*/}
                                                </div>
                                            </td>
                                        </tr>
                                    </>


                                ))
                                }
                                </tbody>
                            </table>

                        </div>
                        :
                        null
            }
        </>
    )
}