import React, { useEffect, useState } from 'react';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';

const API_URL = apiConfig.api_dashboard;

interface Props {
    startdate: string;
    enddate: string;
}

const TransactionValue = ({ startdate, enddate }: Props) => {
    const { GetData } = useCallApi();
    const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);

    useEffect(() => {
        const fetchDataTransactionValue = async () => {
            try {
                const res = await GetData(`${API_URL}/transaction-value`, {
                    date_from: startdate,
                    date_to: enddate,
                });
                setResponseTransactionValue(res);
            } catch (error) {
                console.error('Error fetching transaction value:', error);
            }
        };

        fetchDataTransactionValue();
    }, [startdate, enddate, GetData]);

    let transactionData: any[] = [];
    if (responseTransactionValue?.data?.length > 0) {
        for (let i = 0; i < responseTransactionValue.data.length; i++) {
            let type = "";
            let unit = "";

            const amount = responseTransactionValue.data[i].total_amount;

            if (amount >= 1000 && amount < 1000000) {
                unit = "K";
            } else if (amount >= 1000000 && amount < 1000000000) {
                unit = "M";
            } else if (amount >= 1000000000) {
                unit = "B";
            }

            switch (responseTransactionValue.data[i].kind) {
                case "P":
                    type = "Purchase";
                    break;
                case "T":
                    type = "Transfer";
                    break;
                case "U":
                    type = "Top Up";
                    break;
                case "W":
                    type = "Withdraw";
                    break;
                case "R":
                    type = "Return";
                    break;
                case "N":
                    type = "Top Up Partner";
                    break;
                case "E":
                    type = "Reward";
                    break;
                default:
                    type = "Unknown";
                    break;
            }

            transactionData.push({
                label: type,
                value: amount,
                unit: unit
            });
        }
    }

    const maxValue = transactionData.length > 0 ? Math.max(...transactionData.map(item => item.value)) : 1;

    return (
        <div className="bg-white rounded-xl shadow p-6 w-1/3">
            <div className="flex justify-between items-center mb-4">
                <h2 className="text-lg font-semibold text-gray-800">Transaction Value</h2>
            </div>
            {transactionData.length > 0 ? (
                <div className="space-y-4">
                    {transactionData.map((item, index) => (
                        <div key={index} className="flex items-center justify-between">
                            <span className="w-24 text-sm text-gray-700">{item.label}</span>
                            <div className="flex-1 mx-2">
                                <div className="w-full h-3 bg-gray-200 rounded-full">
                                    <div
                                        className="h-3 bg-teal-500 rounded-full"
                                        style={{ width: `${(item.value / maxValue) * 100}%` }}
                                    ></div>
                                </div>
                            </div>
                            <span className="w-14 text-right text-sm text-gray-700">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(item.value)}{item.unit}</span>
                        </div>
                    ))}
                </div>
            ) : (
                <div className="text-center text-sm text-gray-500 mt-4">
                    No Data Available
                </div>
            )}
        </div>
    );
};

export default TransactionValue;