import React, { useEffect, useState } from 'react'
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
import api from '../../config/api';
import { Transaction } from '../transactions/Transactions';
import { useNavigate } from 'react-router-dom';

import { FaCheck } from 'react-icons/fa';




const formatDate = (timestamp: number) => {
    return new Date(timestamp * 1000).toLocaleString();
};

const TransactionDataTable = () => {
    const navigate = useNavigate()
    const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
    const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );

    const fetchTransactions = async () => {
        console.log("fetchTransactions")
        try {
            const response = await api.get(`/api/accounts/${activeAccountId}/transactions?sortBy=lastModifiedAt desc`);
            setTransactions(response.data || []);
        } catch (error) {
            console.error("Error fetching transactions:", error);
        }
    };

    const [transactions, setTransactions] = useState<Transaction[]>([]);

    const handleTransactionClick = (id: number) => {
        navigate(`/accounts/${activeAccountId}/transactions/${id}`);
    };

    useEffect(() => {
        if (activeAccountId) {
            fetchTransactions();
        }
    }, [activeAccountId]);

    useEffect(() => {
        const userDetails = JSON.parse(sessionStorage.getItem('userDetails'));
        setCurrentEmailId(userDetails?.email)
    }, []);


    

    return (
        <>
            {transactions.length > 0 && (
                <div className="overflow-x-auto py-2">
                    <table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
                        <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
                            <tr>
                                <th className="px-4 py-3 text-left"></th>
                                <th className="px-4 py-3 text-center">Name</th>
                                <th className="px-4 py-3 text-center">Status</th>
                                <th className="px-4 py-3 text-center">Active</th>
                                <th className="px-4 py-3 text-center">Last Change</th>
                                <th className="px-4 py-3 text-center">Expire After (days)</th>
                                <th className="px-4 py-3 text-center">Sign</th>
                                <th className="px-4 py-3 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                            {transactions.map((tx) => {
                                const lastModifiedAt = new Date(tx.lastModifiedAt, "DD/MM/YYYY");
                                return (
                                    <tr
                                        key={tx.id}
                                        onClick={() => handleTransactionClick(tx.id)}
                                        className="hover:bg-gray-50 cursor-pointer"
                                    >
                                        <td className="px-4 py-3">
                                            <div className="w-5 h-5 rounded border border-slate-300 flex justify-center items-center">
                                                {selectedTransactions.includes(tx.id) && (
                                                    <FaCheck className="text-purple-600 text-sm" />
                                                )}
                                            </div>
                                        </td>
                                        <td className="px-4 py-3 text-center">
                                            {tx.subject || "Untitled"}
                                        </td>
                                        <td className="px-4 py-3 text-center">
                                            <span className="px-2 py-0.5 rounded-xl text-xs font-medium bg-blue-100 text-blue-700">
                                                {tx.status}
                                            </span>
                                        </td>
                                        <td className="px-4 py-3 text-center">
                                            {tx.active ? "Yes" : "No"}
                                        </td>

                                        <td className="px-4 py-3 text-center">
                                            {formatDate(tx.lastModifiedAt)}
                                        </td>
                                        <td className="px-4 py-3 text-center">
                                            {tx.expireAfter ?? "-"}
                                        </td>
                                        <td className="px-4 py-3 text-center ">
                                            {tx?.createdBy?.email === currentEmailId ? <button className="px-2 py-0.5 rounded-xl text-xs font-medium bg-green-100 text-green-700 cursor-pointer">Sign now</button> : "-"}
                                        </td>
                                        <td className="px-4 py-3 text-center">
                                            <PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
                                        </td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
            )}
        </>
    )
}

export default TransactionDataTable