import { useState, useEffect } from 'react';
import {
    Table,
    Button,
    Space,
    Modal,
    Form,
    Input,
    InputNumber,
    Select,
    DatePicker,
    Switch,
    Tag,
    Popconfirm,
    message,
} from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import {
    requestCreateDiscount,
    requestGetAllDiscounts,
    requestUpdateDiscount,
    requestDeleteDiscount,
} from '../../config/discount';
import dayjs from 'dayjs';

function DiscountManager() {
    const [discounts, setDiscounts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingDiscount, setEditingDiscount] = useState(null);
    const [form] = Form.useForm();

    const fetchDiscounts = async () => {
        setLoading(true);
        try {
            const res = await requestGetAllDiscounts();
            setDiscounts(res.metadata);
        } catch (error) {
            message.error('Không thể tải danh sách mã giảm giá!');
        } finally {
            setLoading(false);
        }
    };

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

    const handleAdd = () => {
        setEditingDiscount(null);
        form.resetFields();
        form.setFieldsValue({
            type: 'percentage',
            isActive: true,
            userLimit: 1,
        });
        setIsModalOpen(true);
    };

    const handleEdit = (record) => {
        setEditingDiscount(record);
        form.setFieldsValue({
            ...record,
            startDate: dayjs(record.startDate),
            endDate: dayjs(record.endDate),
        });
        setIsModalOpen(true);
    };

    const handleDelete = async (id) => {
        try {
            await requestDeleteDiscount(id);
            message.success('Xóa mã giảm giá thành công!');
            fetchDiscounts();
        } catch (error) {
            message.error('Có lỗi xảy ra khi xóa!');
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
        setEditingDiscount(null);
        form.resetFields();
    };

    const onFinish = async (values) => {
        try {
            const data = {
                ...values,
                startDate: values.startDate.toISOString(),
                endDate: values.endDate.toISOString(),
            };

            if (editingDiscount) {
                await requestUpdateDiscount(editingDiscount._id, data);
                message.success('Cập nhật mã giảm giá thành công!');
            } else {
                await requestCreateDiscount(data);
                message.success('Tạo mã giảm giá thành công!');
            }

            handleCancel();
            fetchDiscounts();
        } catch (error) {
            message.error(error.response?.data?.message || 'Có lỗi xảy ra!');
        }
    };

    const columns = [
        {
            title: 'Mã',
            dataIndex: 'code',
            key: 'code',
            render: (code) => <span className="font-mono font-bold text-blue-600">{code}</span>,
        },
        {
            title: 'Loại',
            dataIndex: 'type',
            key: 'type',
            render: (type) => (
                <Tag color={type === 'percentage' ? 'blue' : 'green'}>
                    {type === 'percentage' ? 'Phần trăm' : 'Số tiền cố định'}
                </Tag>
            ),
        },
        {
            title: 'Giá trị',
            dataIndex: 'value',
            key: 'value',
            render: (value, record) =>
                record.type === 'percentage' ? `${value}%` : `${value.toLocaleString('vi-VN')}đ`,
        },
        {
            title: 'Đã dùng',
            key: 'usage',
            render: (_, record) => (
                <span>
                    {record.usedCount}/{record.usageLimit || '∞'}
                </span>
            ),
        },
        {
            title: 'Thời hạn',
            key: 'date',
            render: (_, record) => (
                <span className="text-sm">
                    {dayjs(record.startDate).format('DD/MM/YYYY')} - {dayjs(record.endDate).format('DD/MM/YYYY')}
                </span>
            ),
        },
        {
            title: 'Trạng thái',
            dataIndex: 'isActive',
            key: 'isActive',
            render: (isActive, record) => {
                const now = new Date();
                const isExpired = new Date(record.endDate) < now;
                if (isExpired) return <Tag color="red">Hết hạn</Tag>;
                return isActive ? <Tag color="green">Hoạt động</Tag> : <Tag color="default">Tắt</Tag>;
            },
        },
        {
            title: 'Hành động',
            key: 'action',
            render: (_, record) => (
                <Space>
                    <Button type="primary" icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>
                        Sửa
                    </Button>
                    <Popconfirm
                        title="Xóa mã giảm giá này?"
                        onConfirm={() => handleDelete(record._id)}
                        okText="Xóa"
                        cancelText="Hủy"
                    >
                        <Button danger icon={<DeleteOutlined />} size="small">
                            Xóa
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <div className="p-6">
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-2xl font-bold text-gray-800">Quản lý mã giảm giá</h1>
                <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd} size="large">
                    Thêm mã giảm giá
                </Button>
            </div>

            <Table
                columns={columns}
                dataSource={discounts}
                rowKey="_id"
                loading={loading}
                pagination={{ pageSize: 10 }}
            />

            <Modal
                title={editingDiscount ? 'Sửa mã giảm giá' : 'Thêm mã giảm giá'}
                open={isModalOpen}
                onCancel={handleCancel}
                footer={null}
                width={600}
            >
                <Form form={form} layout="vertical" onFinish={onFinish} className="mt-4">
                    <Form.Item
                        name="code"
                        label="Mã giảm giá"
                        rules={[{ required: true, message: 'Vui lòng nhập mã!' }]}
                    >
                        <Input placeholder="VD: GIAM10" style={{ textTransform: 'uppercase' }} />
                    </Form.Item>

                    <div className="grid grid-cols-2 gap-4">
                        <Form.Item
                            name="type"
                            label="Loại giảm giá"
                            rules={[{ required: true, message: 'Vui lòng chọn loại!' }]}
                        >
                            <Select>
                                <Select.Option value="percentage">Phần trăm (%)</Select.Option>
                                <Select.Option value="fixed_amount">Số tiền cố định (đ)</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            name="value"
                            label="Giá trị"
                            rules={[{ required: true, message: 'Vui lòng nhập giá trị!' }]}
                        >
                            <InputNumber min={0} style={{ width: '100%' }} placeholder="VD: 10 hoặc 50000" />
                        </Form.Item>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <Form.Item name="minOrderValue" label="Đơn hàng tối thiểu (đ)">
                            <InputNumber min={0} style={{ width: '100%' }} placeholder="0 = không giới hạn" />
                        </Form.Item>

                        <Form.Item name="maxDiscountValue" label="Giảm tối đa (đ)">
                            <InputNumber min={0} style={{ width: '100%' }} placeholder="Để trống = không giới hạn" />
                        </Form.Item>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <Form.Item
                            name="startDate"
                            label="Ngày bắt đầu"
                            rules={[{ required: true, message: 'Vui lòng chọn ngày!' }]}
                        >
                            <DatePicker style={{ width: '100%' }} format="DD/MM/YYYY" />
                        </Form.Item>

                        <Form.Item
                            name="endDate"
                            label="Ngày kết thúc"
                            rules={[{ required: true, message: 'Vui lòng chọn ngày!' }]}
                        >
                            <DatePicker style={{ width: '100%' }} format="DD/MM/YYYY" />
                        </Form.Item>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <Form.Item name="usageLimit" label="Giới hạn sử dụng (tổng)">
                            <InputNumber min={1} style={{ width: '100%' }} placeholder="Để trống = không giới hạn" />
                        </Form.Item>

                        <Form.Item name="userLimit" label="Giới hạn/người dùng">
                            <InputNumber min={1} style={{ width: '100%' }} />
                        </Form.Item>
                    </div>

                    <Form.Item name="isActive" label="Trạng thái" valuePropName="checked">
                        <Switch checkedChildren="Bật" unCheckedChildren="Tắt" />
                    </Form.Item>

                    <Form.Item className="mb-0 flex justify-end">
                        <Space>
                            <Button onClick={handleCancel}>Hủy</Button>
                            <Button type="primary" htmlType="submit">
                                {editingDiscount ? 'Cập nhật' : 'Tạo mã'}
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default DiscountManager;
