'use client'
import Link from 'next/link'
import { useEffect, useState } from 'react'
interface Transaction {
    id: string
    transactionHash: string
    network: string
    value: number
    telegramUserId: number
    status: string
    createdAt: string
    telegramUser: { username?: string; firstName?: string }
}

export default function TransactionsPage() {
    const [transactions, setTransactions] = useState<Transaction[]>([])

    useEffect(() => {
        fetch('/api/user-transactions')
            .then(r => r.json())
            .then(setTransactions)
    }, [])

    return (
        <div className="min-h-screen p-4" style={{ backgroundColor: '#1A1D1F', color: '#FCFCFC' }} dir="rtl">
            <h1 className="text-2xl font-bold mb-6">تراکنش‌های کاربران</h1>
            <div className="overflow-x-auto">
                <table className="w-full rounded-lg" style={{ backgroundColor: '#272B30' }}>
                    <thead>
                        <tr className="border-b" style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}>
                            <th className="p-3 text-right">کاربر</th>
                            <th className="p-3 text-right">هش</th>
                            <th className="p-3 text-right">شبکه</th>
                            <th className="p-3 text-right">مقدار</th>
                            <th className="p-3 text-right">وضعیت</th>
                            <th className="p-3 text-right">تاریخ</th>
                        </tr>
                    </thead>
                    <tbody>
                        {transactions.map(t => (
                            <tr key={t.id} className="border-b" style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}>
                                <td className="p-3"><Link className="text-primary" href={`/dashboard/users/${t.telegramUserId}`}>{t.telegramUser.username || t.telegramUser.firstName}</Link></td>
                                <td className="p-3 font-mono text-sm">{t.transactionHash.slice(0, 10)}...</td>
                                <td className="p-3">{t.network}</td>
                                <td className="p-3">{t.value}</td>
                                <td className="p-3">
                                    <span className={`px-2 py-1 rounded text-xs ${t.status === 'PENDING' ? 'bg-yellow-500/20 text-yellow-300' :
                                        t.status === 'SUCCESS' ? 'bg-green-500/20 text-green-300' :
                                            'bg-red-500/20 text-red-300'
                                        }`}>
                                        {t.status === 'PENDING' ? 'در انتظار' :
                                            t.status === 'SUCCESS' ? 'موفق' : 'ناموفق'}
                                    </span>
                                </td>
                                <td className="p-3 text-sm" style={{ color: '#9A9FA5' }}>
                                    {new Date(t.createdAt).toLocaleDateString('fa-IR')}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}