export interface Transaction {
    id: string;
    type: string;
    quantity: number;
    balanceAfter: number;
    reason: string | null;
    userName: string;
    actualTime: string;
}

interface TransactionTableProps {
    transactions: Transaction[];
}

export default function TransactionTable({ transactions }: TransactionTableProps) {
    if (transactions.length === 0) {
        return (
            <div className="text-center py-8 text-gray-500">
                暫無異動紀錄
            </div>
        );
    }

    return (
        <div className="overflow-x-auto">
            <table className="w-full text-sm text-left">
                <thead className="text-xs text-gray-700 uppercase bg-gray-50">
                    <tr>
                        <th className="px-4 py-3 w-[50px]">#</th>
                        <th className="px-4 py-3">時間</th>
                        <th className="px-4 py-3">類型</th>
                        <th className="px-4 py-3 text-right">變動數量</th>
                        <th className="px-4 py-3 text-right">結餘</th>
                        <th className="px-4 py-3">經手人</th>
                        <th className="px-4 py-3">原因/備註</th>
                    </tr>
                </thead>
                <tbody>
                    {transactions.map((tx, index) => (
                        <tr key={tx.id} className="border-b hover:bg-gray-50">
                            <td className="px-4 py-3 text-center text-gray-500 font-medium">{index + 1}</td>
                            <td className="px-4 py-3 whitespace-nowrap">{tx.actualTime}</td>
                            <td className="px-4 py-3">
                                <span className={`px-2 py-1 rounded-full text-xs ${tx.quantity > 0
                                    ? 'bg-green-100 text-green-800'
                                    : tx.quantity < 0
                                        ? 'bg-red-100 text-red-800'
                                        : 'bg-gray-100 text-gray-800'
                                    }`}>
                                    {tx.type}
                                </span>
                            </td>
                            <td className={`px-4 py-3 text-right font-medium ${tx.quantity > 0 ? 'text-green-600' : tx.quantity < 0 ? 'text-red-600' : ''
                                }`}>
                                {tx.quantity > 0 ? '+' : ''}{tx.quantity}
                            </td>
                            <td className="px-4 py-3 text-right">{tx.balanceAfter}</td>
                            <td className="px-4 py-3">{tx.userName}</td>
                            <td className="px-4 py-3 text-gray-500">{tx.reason || '-'}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}