import { useEffect, useState } from "react";
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
import AccountNav from "./AccountNav";
import api from "../../config/api";
import { useNavigate, useParams } from "react-router-dom";
import { FaCheck } from "react-icons/fa";

interface Transaction {
    id: number;
    status: string;
    active: boolean;
    subject: string | null;
    createdAt: number;
    expireAfter: number | null;
}

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

const Account = () => {
    const { accountId } = useParams<{ accountId: string }>();
    const [transactions, setTransactions] = useState<Transaction[]>([]);
    const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);

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

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

    const navigate = useNavigate();

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

    return (
        <>
            {transactions.length > 0 && (
                <div className="overflow-x-auto py-4">
                    <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"></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">
                                            <PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
                                        </td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
            )}
        </>
    );
};

export default Account;