import { useState, useEffect } from 'react';
import { Table, Tag, Space, Button, Input, Modal, Form, Select, Typography, InputNumber } from 'antd';
import { Edit, Trash, Search, PlusCircle, CircleDollarSign } from 'lucide-react';
import { requestGetAllUser, requestUpdateUserAdmin, requestDeleteUserAdmin, requestAddBalanceAdmin } from '../../config/UserRequest.jsx';
import { toast } from 'react-toastify';
import moment from 'moment';
import useDebounce from '../../hooks/useDebounce';

const { Title } = Typography;
const { Option } = Select;

const UserManager = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });
    const [search, setSearch] = useState('');
    const debouncedSearch = useDebounce(search, 500);

    // Edit modal
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingUser, setEditingUser] = useState(null);
    const [form] = Form.useForm();

    // Add balance modal
    const [isBalanceModalOpen, setIsBalanceModalOpen] = useState(false);
    const [balanceUser, setBalanceUser] = useState(null);
    const [balanceLoading, setBalanceLoading] = useState(false);
    const [balanceForm] = Form.useForm();

    const fetchUsers = async (page = 1, limit = 10, searchTerm = '') => {
        setLoading(true);
        try {
            const res = await requestGetAllUser({ page, limit, search: searchTerm });
            if (res.metadata) {
                setUsers(res.metadata.users);
                setPagination({
                    current: res.metadata.currentPage,
                    pageSize: limit,
                    total: res.metadata.total,
                });
            }
        } catch (error) {
            toast.error('Lỗi khi tải danh sách người dùng');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchUsers(1, pagination.pageSize, debouncedSearch);
    }, [debouncedSearch]);

    const handleTableChange = (newPagination) => {
        fetchUsers(newPagination.current, newPagination.pageSize, debouncedSearch);
    };

    const handleEdit = (record) => {
        setEditingUser(record);
        form.setFieldsValue(record);
        setIsModalOpen(true);
    };

    const handleDelete = (id) => {
        Modal.confirm({
            title: 'Xóa người dùng',
            content: 'Bạn có chắc chắn muốn xóa người dùng này không?',
            okText: 'Xóa',
            okType: 'danger',
            cancelText: 'Hủy',
            onOk: async () => {
                try {
                    await requestDeleteUserAdmin(id);
                    toast.success('Xóa người dùng thành công');
                    fetchUsers(pagination.current, pagination.pageSize, debouncedSearch);
                } catch (error) {
                    toast.error('Xóa thất bại');
                }
            },
        });
    };

    const handleModalOk = async () => {
        try {
            const values = await form.validateFields();
            if (editingUser) {
                await requestUpdateUserAdmin(editingUser._id, values);
                toast.success('Cập nhật thành công');
            }
            setIsModalOpen(false);
            setEditingUser(null);
            fetchUsers(pagination.current, pagination.pageSize, debouncedSearch);
        } catch (error) {
            toast.error('Cập nhật thất bại');
        }
    };

    const handleOpenBalanceModal = (record) => {
        setBalanceUser(record);
        balanceForm.resetFields();
        setIsBalanceModalOpen(true);
    };

    const handleAddBalance = async () => {
        try {
            const values = await balanceForm.validateFields();
            setBalanceLoading(true);
            await requestAddBalanceAdmin(balanceUser._id, {
                amount: values.amount,
                note: values.note,
            });
            toast(
                <div className="flex items-start gap-3">
                    <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                        <CircleDollarSign size={22} className="text-white" />
                    </div>
                    <div>
                        <p className="font-bold text-white text-sm mb-0.5">Cộng tiền thành công!</p>
                        <p className="text-green-100 text-xs">
                            <strong>{balanceUser.fullName}</strong> vừa được cộng{' '}
                            <strong>+{values.amount.toLocaleString('vi-VN')}đ</strong>
                        </p>
                    </div>
                </div>,
                {
                    position: 'top-right',
                    autoClose: 5000,
                    hideProgressBar: false,
                    closeOnClick: true,
                    pauseOnHover: true,
                    style: {
                        background: 'linear-gradient(135deg, #16a34a, #15803d)',
                        borderRadius: '14px',
                        padding: '12px 16px',
                        boxShadow: '0 8px 32px rgba(22, 163, 74, 0.35)',
                    },
                    progressStyle: { background: 'rgba(255,255,255,0.4)' },
                }
            );
            setIsBalanceModalOpen(false);
            setBalanceUser(null);
            fetchUsers(pagination.current, pagination.pageSize, debouncedSearch);
        } catch (error) {
            toast.error(error?.response?.data?.message || 'Cộng tiền thất bại');
        } finally {
            setBalanceLoading(false);
        }
    };

    const columns = [
        {
            title: 'Họ tên',
            dataIndex: 'fullName',
            key: 'fullName',
            render: (text) => <span className="font-semibold">{text}</span>,
        },
        {
            title: 'Email',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: 'Số điện thoại',
            dataIndex: 'phone',
            key: 'phone',
            render: (text) => text || 'Chưa cập nhật',
        },
        {
            title: 'Số dư',
            dataIndex: 'balance',
            key: 'balance',
            render: (balance) => (
                <span className="font-bold text-green-600">
                    {(balance || 0).toLocaleString('vi-VN')}đ
                </span>
            ),
        },
        {
            title: 'Vai trò',
            dataIndex: 'isAdmin',
            key: 'isAdmin',
            render: (isAdmin) => <Tag color={isAdmin ? 'red' : 'blue'}>{isAdmin ? 'QUẢN TRỊ VIÊN' : 'KHÁCH HÀNG'}</Tag>,
        },
        {
            title: 'Loại TK',
            dataIndex: 'typeLogin',
            key: 'typeLogin',
            render: (type) => <Tag color={type === 'google' ? 'orange' : 'green'}>{type.toUpperCase()}</Tag>,
        },
        {
            title: 'Ngày tạo',
            dataIndex: 'createdAt',
            key: 'createdAt',
            render: (date) => moment(date).format('DD/MM/YYYY HH:mm'),
        },
        {
            title: 'Hành động',
            key: 'action',
            width: 260,
            render: (_, record) => (
                <Space size="small" wrap>
                    <Button
                        size="small"
                        icon={<PlusCircle size={14} />}
                        onClick={() => handleOpenBalanceModal(record)}
                        style={{
                            background: 'linear-gradient(135deg, #16a34a, #15803d)',
                            borderColor: '#16a34a',
                            color: 'white',
                            borderRadius: '6px',
                            fontWeight: 600,
                            fontSize: '12px',
                        }}
                    >
                        Cộng tiền
                    </Button>
                    <Button
                        size="small"
                        icon={<Edit size={14} />}
                        onClick={() => handleEdit(record)}
                        style={{
                            borderColor: '#3b82f6',
                            color: '#3b82f6',
                            borderRadius: '6px',
                            fontWeight: 600,
                            fontSize: '12px',
                        }}
                    >
                        Sửa
                    </Button>
                    <Button
                        size="small"
                        danger
                        icon={<Trash size={14} />}
                        onClick={() => handleDelete(record._id)}
                        style={{
                            borderRadius: '6px',
                            fontWeight: 600,
                            fontSize: '12px',
                        }}
                    >
                        Xóa
                    </Button>
                </Space>
            ),
        },
    ];

    return (
        <div className="p-6 bg-white rounded-xl shadow-sm">
            <div className="flex justify-between items-center mb-6">
                <div>
                    <Title level={3} className="m-0">
                        Quản lý người dùng
                    </Title>
                    <p className="text-gray-500 mt-1">Quản lý danh sách thành viên và phân quyền</p>
                </div>
                <Input
                    prefix={<Search size={18} className="text-gray-400" />}
                    placeholder="Tìm kiếm theo tên hoặc email..."
                    className="w-64 rounded-lg"
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
            </div>

            <Table
                columns={columns}
                dataSource={users}
                rowKey="_id"
                pagination={pagination}
                loading={loading}
                onChange={handleTableChange}
                scroll={{ x: 1100 }}
            />

            {/* Modal chỉnh sửa người dùng */}
            <Modal
                title={editingUser ? 'Chỉnh sửa người dùng' : 'Thêm người dùng mới'}
                open={isModalOpen}
                onOk={handleModalOk}
                onCancel={() => setIsModalOpen(false)}
                okText="Lưu"
                cancelText="Hủy"
            >
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="fullName"
                        label="Họ tên"
                        rules={[{ required: true, message: 'Vui lòng nhập họ tên' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="email"
                        label="Email"
                        rules={[
                            { required: true, message: 'Vui lòng nhập email' },
                            { type: 'email', message: 'Email không hợp lệ' },
                        ]}
                    >
                        <Input disabled={!!editingUser} />
                    </Form.Item>
                    <Form.Item name="phone" label="Số điện thoại">
                        <Input />
                    </Form.Item>
                    <Form.Item name="isAdmin" label="Vai trò" valuePropName="checked">
                        <Select>
                            <Option value={false}>Khách hàng</Option>
                            <Option value={true}>Quản trị viên</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="address" label="Địa chỉ">
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>

            {/* Modal cộng tiền */}
            <Modal
                title={
                    <div className="flex items-center gap-2">
                        <PlusCircle size={20} className="text-green-600" />
                        <span>Cộng tiền cho <strong>{balanceUser?.fullName}</strong></span>
                    </div>
                }
                open={isBalanceModalOpen}
                onOk={handleAddBalance}
                onCancel={() => { setIsBalanceModalOpen(false); setBalanceUser(null); }}
                okText="Cộng tiền"
                cancelText="Hủy"
                confirmLoading={balanceLoading}
                okButtonProps={{ className: 'bg-green-600 hover:bg-green-700 border-green-600' }}
            >
                {balanceUser && (
                    <div className="mb-4 p-3 bg-gray-50 rounded-lg text-sm text-gray-600">
                        <p>Email: <span className="font-medium">{balanceUser.email}</span></p>
                        <p className="mt-1">
                            Số dư hiện tại:{' '}
                            <span className="font-bold text-green-600">
                                {(balanceUser.balance || 0).toLocaleString('vi-VN')}đ
                            </span>
                        </p>
                    </div>
                )}
                <Form form={balanceForm} layout="vertical">
                    <Form.Item
                        name="amount"
                        label="Số tiền cộng thêm (đ)"
                        rules={[
                            { required: true, message: 'Vui lòng nhập số tiền' },
                            { type: 'number', min: 1000, message: 'Số tiền tối thiểu là 1.000đ' },
                        ]}
                    >
                        <InputNumber
                            className="w-full"
                            min={1000}
                            step={10000}
                            formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            parser={(value) => value?.replace(/,/g, '')}
                            placeholder="Nhập số tiền..."
                            addonAfter="đ"
                        />
                    </Form.Item>
                    <Form.Item name="note" label="Ghi chú (tùy chọn)">
                        <Input.TextArea
                            rows={2}
                            placeholder="Lý do cộng tiền..."
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default UserManager;
