import { useState, useEffect } from 'react';
import {
    Table,
    Button,
    Modal,
    Form,
    Input,
    InputNumber,
    Switch,
    message,
    Card,
    Space,
    Popconfirm,
    ColorPicker,
    Divider,
} from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons';
import { getWheelConfig, updateWheelConfig, getAllSpinHistory } from '../../config/luckyWheel';

const LuckyWheelManager = () => {
    const [config, setConfig] = useState(null);
    const [history, setHistory] = useState([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [prizeModalOpen, setPrizeModalOpen] = useState(false);
    const [editingPrize, setEditingPrize] = useState(null);
    const [prizeForm] = Form.useForm();

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

    const fetchData = async () => {
        try {
            setLoading(true);
            const [configRes, historyRes] = await Promise.all([getWheelConfig(), getAllSpinHistory()]);
            setConfig(configRes.metadata);
            setHistory(historyRes.metadata);
        } catch (error) {
            message.error('Không thể tải dữ liệu');
        } finally {
            setLoading(false);
        }
    };

    const handleSaveConfig = async () => {
        try {
            setSaving(true);
            // console.log(config);

            await updateWheelConfig(config);
            message.success('Lưu cấu hình thành công');
        } catch (error) {
            message.error('Không thể lưu cấu hình');
        } finally {
            setSaving(false);
        }
    };

    const handleAddPrize = () => {
        setEditingPrize(null);
        prizeForm.resetFields();
        prizeForm.setFieldsValue({
            label: '',
            value: 0,
            probability: 10,
            color: '#FF6B6B',
        });
        setPrizeModalOpen(true);
    };

    const handleEditPrize = (prize, index) => {
        setEditingPrize(index);
        prizeForm.setFieldsValue(prize);
        setPrizeModalOpen(true);
    };

    const handleDeletePrize = async (index) => {
        const newPrizes = [...config.prizes];
        newPrizes.splice(index, 1);
        const newConfig = { ...config, prizes: newPrizes };

        try {
            setLoading(true);
            await updateWheelConfig(newConfig);
            setConfig(newConfig);
            message.success('Xóa phần thưởng thành công');
        } catch (error) {
            message.error('Có lỗi xảy ra');
        } finally {
            setLoading(false);
        }
    };

    const handleSavePrize = () => {
        prizeForm.validateFields().then(async (values) => {
            // Handle ColorPicker value
            const color = typeof values.color === 'string' ? values.color : values.color?.toHexString?.() || '#FF6B6B';

            const prizeData = { ...values, color };
            const newPrizes = [...(config.prizes || [])];

            if (editingPrize !== null) {
                newPrizes[editingPrize] = prizeData;
            } else {
                newPrizes.push(prizeData);
            }

            const newConfig = { ...config, prizes: newPrizes };

            try {
                setLoading(true);
                await updateWheelConfig(newConfig);
                setConfig(newConfig);
                setPrizeModalOpen(false);
                message.success(
                    editingPrize !== null ? 'Cập nhật phần thưởng thành công' : 'Thêm phần thưởng thành công',
                );
            } catch (error) {
                message.error('Có lỗi xảy ra');
            } finally {
                setLoading(false);
            }
        });
    };

    const prizeColumns = [
        {
            title: 'Màu',
            dataIndex: 'color',
            key: 'color',
            width: 60,
            render: (color) => (
                <div className="w-8 h-8 rounded-full border-2 border-gray-300" style={{ backgroundColor: color }} />
            ),
        },
        {
            title: 'Tên phần thưởng',
            dataIndex: 'label',
            key: 'label',
        },
        {
            title: 'Giá trị',
            dataIndex: 'value',
            key: 'value',
            render: (value) => `${value.toLocaleString()}đ`,
        },
        {
            title: 'Tỷ lệ (%)',
            dataIndex: 'probability',
            key: 'probability',
            render: (prob) => `${prob}%`,
        },
        {
            title: 'Thao tác',
            key: 'action',
            width: 120,
            render: (_, record, index) => (
                <Space>
                    <Button type="text" icon={<EditOutlined />} onClick={() => handleEditPrize(record, index)} />
                    <Popconfirm
                        title="Xóa phần thưởng này?"
                        onConfirm={() => handleDeletePrize(index)}
                        okText="Xóa"
                        cancelText="Hủy"
                    >
                        <Button type="text" danger icon={<DeleteOutlined />} />
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const historyColumns = [
        {
            title: 'Thời gian',
            dataIndex: 'createdAt',
            key: 'createdAt',
            render: (text) => new Date(text).toLocaleString('vi-VN'),
        },
        {
            title: 'Người chơi',
            dataIndex: 'userId',
            key: 'userId',
            render: (user) => user?.fullName || user?.email || 'N/A',
        },
        {
            title: 'Phí quay',
            dataIndex: 'spinCost',
            key: 'spinCost',
            render: (value) => `${value.toLocaleString()}đ`,
        },
        {
            title: 'Phần thưởng',
            dataIndex: 'rewardLabel',
            key: 'rewardLabel',
            render: (text, record) => (
                <span className={record.reward > 0 ? 'text-green-600 font-bold' : 'text-gray-500'}>{text}</span>
            ),
        },
        {
            title: 'Số dư trước',
            dataIndex: 'balanceBefore',
            key: 'balanceBefore',
            render: (value) => `${value.toLocaleString()}đ`,
        },
        {
            title: 'Số dư sau',
            dataIndex: 'balanceAfter',
            key: 'balanceAfter',
            render: (value) => `${value.toLocaleString()}đ`,
        },
    ];

    const totalProbability = config?.prizes?.reduce((sum, p) => sum + p.probability, 0) || 0;

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold">Quản lý Vòng Quay May Mắn</h1>
                <Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={handleSaveConfig} size="large">
                    Lưu cấu hình
                </Button>
            </div>

            {/* Config Section */}
            <Card title="⚙️ Cấu hình chung" loading={loading}>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label className="block text-gray-600 mb-2">Phí mỗi lượt quay</label>
                        <InputNumber
                            value={config?.spinCost}
                            onChange={(value) => setConfig({ ...config, spinCost: value })}
                            formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            parser={(value) => value.replace(/,/g, '')}
                            className="w-full"
                            addonAfter="đ"
                            min={0}
                        />
                    </div>
                    <div>
                        <label className="block text-gray-600 mb-2">Giới hạn lượt quay/ngày</label>
                        <InputNumber
                            value={config?.maxSpinsPerDay}
                            onChange={(value) => setConfig({ ...config, maxSpinsPerDay: value })}
                            className="w-full"
                            min={0}
                            placeholder="0 = không giới hạn"
                        />
                        <p className="text-xs text-gray-400 mt-1">0 = không giới hạn</p>
                    </div>
                    <div>
                        <label className="block text-gray-600 mb-2">Trạng thái</label>
                        <Switch
                            checked={config?.isActive}
                            onChange={(checked) => setConfig({ ...config, isActive: checked })}
                            checkedChildren="Đang mở"
                            unCheckedChildren="Đã đóng"
                        />
                    </div>
                </div>
            </Card>

            {/* Prizes Section */}
            <Card
                title="🎁 Danh sách phần thưởng"
                extra={
                    <Button type="primary" icon={<PlusOutlined />} onClick={handleAddPrize}>
                        Thêm phần thưởng
                    </Button>
                }
                loading={loading}
            >
                {totalProbability !== 100 && (
                    <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-700">
                        ⚠️ Tổng tỷ lệ hiện tại: <strong>{totalProbability}%</strong>. Nên để tổng bằng 100%.
                    </div>
                )}
                <Table
                    dataSource={config?.prizes || []}
                    columns={prizeColumns}
                    rowKey={(_, index) => index}
                    pagination={false}
                />
            </Card>

            {/* Preview */}
            <Card title="👁️ Xem trước vòng quay" loading={loading}>
                <div className="flex justify-center">
                    <div
                        className="w-64 h-64 rounded-full relative"
                        style={{
                            background: config?.prizes?.length
                                ? `conic-gradient(${config.prizes
                                      .map(
                                          (p, i) =>
                                              `${p.color} ${(i * 360) / config.prizes.length}deg ${
                                                  ((i + 1) * 360) / config.prizes.length
                                              }deg`,
                                      )
                                      .join(', ')})`
                                : '#ccc',
                        }}
                    >
                        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
                            <span className="text-white font-bold text-xs">QUAY</span>
                        </div>
                    </div>
                </div>
            </Card>

            <Divider />

            {/* History Section */}
            <Card title="📜 Lịch sử quay (100 gần nhất)" loading={loading}>
                <Table dataSource={history} columns={historyColumns} rowKey="_id" pagination={{ pageSize: 10 }} />
            </Card>

            {/* Prize Modal */}
            <Modal
                title={editingPrize !== null ? 'Sửa phần thưởng' : 'Thêm phần thưởng'}
                open={prizeModalOpen}
                onOk={handleSavePrize}
                onCancel={() => setPrizeModalOpen(false)}
                okText="Lưu"
                cancelText="Hủy"
            >
                <Form form={prizeForm} layout="vertical">
                    <Form.Item
                        name="label"
                        label="Tên phần thưởng"
                        rules={[{ required: true, message: 'Vui lòng nhập tên' }]}
                    >
                        <Input placeholder="VD: 50,000đ hoặc Mất lượt" />
                    </Form.Item>
                    <Form.Item
                        name="value"
                        label="Giá trị (đ)"
                        rules={[{ required: true, message: 'Vui lòng nhập giá trị' }]}
                    >
                        <InputNumber
                            className="w-full"
                            min={0}
                            formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            parser={(value) => value.replace(/,/g, '')}
                            placeholder="0 = Mất lượt"
                        />
                    </Form.Item>
                    <Form.Item
                        name="probability"
                        label="Tỷ lệ trúng (%)"
                        rules={[{ required: true, message: 'Vui lòng nhập tỷ lệ' }]}
                    >
                        <InputNumber className="w-full" min={0} max={100} />
                    </Form.Item>
                    <Form.Item name="color" label="Màu ô">
                        <ColorPicker format="hex" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default LuckyWheelManager;
