import { useState, useEffect } from 'react';
import { Table, Tag, Button, Space, message, Popconfirm, Tooltip } from 'antd';
import { Check, X } from 'lucide-react';
import { apiClient } from '../../config/axiosClient';
import moment from 'moment';
import { requestGetDeposits } from '../../config/deposits';

const DepositManager = () => {
    const [deposits, setDeposits] = useState([]);
    const [loading, setLoading] = useState(false);

    const fetchDeposits = async () => {
        setLoading(true);
        try {
            const response = await requestGetDeposits();
            setDeposits(response.metadata);
        } catch (error) {
            message.error('Không thể tải danh sách nạp tiền');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchDeposits();
    }, []);

    const handleUpdateStatus = async (id, status) => {
        try {
            await apiClient.put(`/api/deposit/${id}/status`, { status });
            message.success(`Đã cập nhật trạng thái thành: ${status}`);
            fetchDeposits();
        } catch (error) {
            message.error(error.response?.data?.message || 'Cập nhật thất bại');
        }
    };

    const columns = [
        {
            title: 'Người dùng',
            dataIndex: 'userId',
            key: 'userId',
            render: (user) => (
                <div className="flex flex-col">
                    <span className="font-medium">{user?.fullName || 'Unknown'}</span>
                    <span className="text-xs text-gray-500">{user?.email}</span>
                </div>
            ),
        },
        {
            title: 'Thông tin thẻ',
            key: 'cardInfo',
            render: (_, record) => (
                <div className="flex flex-col text-sm">
                    <div>
                        <span className="font-bold">{record.network}</span>
                    </div>
                    <div>Seri: {record.serial}</div>
                    <div>Mã: {record.code}</div>
                </div>
            ),
        },
        {
            title: 'Mệnh giá',
            dataIndex: 'amount',
            key: 'amount',
            render: (amount) => <span className="font-bold text-gray-700">{amount?.toLocaleString()} đ</span>,
        },
        {
            title: 'Thực nhận',
            dataIndex: 'receivedAmount',
            key: 'receivedAmount',
            render: (amount) => <span className="font-bold text-green-600">{amount?.toLocaleString()} đ</span>,
        },
        {
            title: 'Trạng thái',
            dataIndex: 'status',
            key: 'status',
            render: (status) => {
                let color = 'default';
                let text = 'Chờ xử lý';
                if (status === 'success') {
                    color = 'success';
                    text = 'Thành công';
                } else if (status === 'failed') {
                    color = 'error';
                    text = 'Thất bại';
                }
                return <Tag color={color}>{text}</Tag>;
            },
        },
        {
            title: 'Ngày tạo',
            dataIndex: 'createdAt',
            key: 'createdAt',
            render: (date) => <span className="text-sm text-gray-500">{moment(date).format('DD/MM/YYYY HH:mm')}</span>,
        },
        {
            title: 'Hành động',
            key: 'action',
            render: (_, record) =>
                record.status === 'pending' && (
                    <Space size="small">
                        <Popconfirm
                            title="Duyệt thẻ này?"
                            description="Người dùng sẽ nhận được tiền vào tài khoản."
                            onConfirm={() => handleUpdateStatus(record._id, 'success')}
                            okText="Duyệt"
                            cancelText="Hủy"
                        >
                            <Button type="primary" size="small" icon={<Check size={14} />} className="bg-green-600">
                                Duyệt
                            </Button>
                        </Popconfirm>
                        <Popconfirm
                            title="Từ chối thẻ này?"
                            description="Thẻ sẽ bị đánh dấu là lỗi/sai."
                            onConfirm={() => handleUpdateStatus(record._id, 'failed')}
                            okText="Từ chối"
                            cancelText="Hủy"
                            okButtonProps={{ danger: true }}
                        >
                            <Button type="primary" danger size="small" icon={<X size={14} />}>
                                Hủy
                            </Button>
                        </Popconfirm>
                    </Space>
                ),
        },
    ];

    return (
        <div>
            <div className="mb-6">
                <h2 className="text-xl font-bold text-gray-800">Quản lý nạp thẻ</h2>
            </div>

            <Table
                dataSource={deposits}
                columns={columns}
                rowKey="_id"
                loading={loading}
                pagination={{ pageSize: 10 }}
                className="shadow-sm rounded-lg overflow-hidden"
            />
        </div>
    );
};

export default DepositManager;
