import React from 'react';
import { MoreVertical, ArrowDownRight, ArrowUpRight } from 'lucide-react';

export default function AccountsTable({ data = [] }) {
    const formatCurrency = (val) => {
        return new Intl.NumberFormat('en-AE', { style: 'currency', currency: 'AED' }).format(val);
    };

    return (
        <div className="bg-white rounded-[2rem] p-8 border border-gray-100 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="flex items-center justify-between mb-8">
                <div>
                    <h3 className="text-xl font-bold text-gray-900">Recent Transactions</h3>
                    <p className="text-xs text-gray-400 font-bold uppercase tracking-widest mt-1">Detailed breakdown of income and expenses.</p>
                </div>
                <button className="text-gray-400 hover:text-gray-900 transition-colors">
                    <MoreVertical size={20} />
                </button>
            </div>

            <div className="overflow-x-auto -mx-8">
                <table className="w-full">
                    <thead>
                        <tr className="text-left border-b border-gray-50 bg-gray-50/30">
                            <th className="px-8 pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Date</th>
                            <th className="px-4 pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Type</th>
                            <th className="px-4 pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Category / Description</th>
                            <th className="px-8 pb-4 text-right text-[10px] uppercase font-bold text-gray-400 tracking-wider">Amount</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-50">
                        {data.length === 0 && (
                            <tr>
                                <td colSpan="4" className="py-12 text-center text-sm font-medium text-gray-400 italic">No transactions found for the selected period.</td>
                            </tr>
                        )}
                        {data.map((row, index) => (
                            <tr key={index} className="group hover:bg-gray-50/50 transition-all">
                                <td className="px-8 py-5">
                                    <div className="flex flex-col">
                                        <span className="text-sm font-bold text-gray-900">{new Date(row.date).toLocaleDateString()}</span>
                                        <span className="text-[10px] text-gray-400 font-medium uppercase">{new Date(row.date).toLocaleDateString(undefined, { weekday: 'short' })}</span>
                                    </div>
                                </td>
                                <td className="px-4 py-5 font-medium">
                                    <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest ${
                                        row.type === 'Income' 
                                            ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' 
                                            : 'bg-rose-50 text-rose-600 border border-rose-100'
                                    }`}>
                                        {row.type === 'Income' ? <ArrowUpRight size={12} /> : <ArrowDownRight size={12} />}
                                        {row.type}
                                    </span>
                                </td>
                                <td className="px-4 py-5">
                                    <div className="flex flex-col max-w-md">
                                        <span className="text-sm font-bold text-gray-800 truncate">{row.category}</span>
                                        <span className="text-xs text-gray-400 font-medium truncate">{row.description || 'No description provided'}</span>
                                    </div>
                                </td>
                                <td className="px-8 py-5 text-right">
                                    <span className={`text-sm font-black ${row.type === 'Income' ? 'text-emerald-600' : 'text-rose-600'}`}>
                                        {row.type === 'Income' ? '+' : '-'}{formatCurrency(row.amount)}
                                    </span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}