import Table from '@/components/Table'
import { type FC } from 'react'
import type { RowDataType, ActionType } from '@/components/types/TableTypes'

interface TransactionData extends RowDataType {
    id: number
    number: number
    transactionType: string
    amount: string
    paymentDate: string
    status: 'successful' | 'unsuccessful' | 'unknown'
}

const TransactionsTable: FC = () => {
    const handleRowActions = (item: TransactionData): ActionType[] => {
        return [
            {
                label: 'ویرایش',
                onClick: () => {
                    console.log('ویرایش تراکنش:', item.id)
                },
            },
            {
                label: 'حذف',
                onClick: () => {
                    console.log('حذف تراکنش:', item.id)
                },
            },
        ]
    }

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'successful':
                return 'text-green-600'
            case 'unsuccessful':
                return 'text-red-600'
            case 'unknown':
                return 'text-orange-600'
            default:
                return 'text-gray-600'
        }
    }

    const getStatusText = (status: string) => {
        switch (status) {
            case 'successful':
                return 'موفق'
            case 'unsuccessful':
                return 'ناموفق'
            case 'unknown':
                return 'نا مشخص'
            default:
                return status
        }
    }

    const columns = [
        {
            key: 'number',
            title: 'شماره',
        },
        {
            key: 'transactionType',
            title: 'نوع تراکنش',
        },
        {
            key: 'amount',
            title: 'مبلغ',
        },
        {
            key: 'paymentDate',
            title: 'تاریخ پرداخت',
        },
        {
            key: 'status',
            title: 'وضعیت',
            render: (item: TransactionData) => {
                return (
                    <span className={getStatusColor(item.status)}>
                        {getStatusText(item.status)}
                    </span>
                )
            },
        },
    ]

    const data: TransactionData[] = [
        {
            id: 1,
            number: 1,
            transactionType: 'پرداخت اینترنتی',
            amount: '۴,۰۰۰,۰۰۰ تومان',
            paymentDate: '۱۳۶۹/۰۵/۱۱',
            status: 'successful',
        },
        {
            id: 2,
            number: 1,
            transactionType: 'پرداخت اینترنتی',
            amount: '۴,۰۰۰,۰۰۰ تومان',
            paymentDate: '۱۳۶۹/۰۵/۱۱',
            status: 'unsuccessful',
        },
        {
            id: 3,
            number: 1,
            transactionType: 'پرداخت اینترنتی',
            amount: '۴,۰۰۰,۰۰۰ تومان',
            paymentDate: '۱۳۶۹/۰۵/۱۱',
            status: 'unknown',
        },
    ]

    return (
        <Table
            columns={columns}
            data={data}
            selectable={true}
            rowActions={handleRowActions}
            className="mt-0"
        />
    )
}

export default TransactionsTable

