import { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, Switch, message, InputNumber, Tooltip } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, BellOutlined } from '@ant-design/icons';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import {
    getNotifications,
    createNotification,
    updateNotification,
    deleteNotification,
} from '../../config/notification';
import moment from 'moment';

const NotificationManager = () => {
    const [notifications, setNotifications] = useState([]);
    const [loading, setLoading] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingNotification, setEditingNotification] = useState(null);
    const [form] = Form.useForm();

    const fetchNotifications = async () => {
        setLoading(true);
        try {
            const res = await getNotifications();
            setNotifications(res.metadata || []);
        } catch (error) {
            console.error(error);
            message.error('Không thể tải danh sách thông báo');
        } finally {
            setLoading(false);
        }
    };

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

    const handleAdd = () => {
        setEditingNotification(null);
        form.resetFields();
        form.setFieldsValue({ isActive: true, priority: 0 });
        setIsModalOpen(true);
    };

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

    const handleDelete = async (id) => {
        if (!window.confirm('Bạn có chắc chắn muốn xóa thông báo này?')) return;
        try {
            await deleteNotification(id);
            message.success('Xóa thông báo thành công');
            fetchNotifications();
        } catch (error) {
            console.error(error);
            message.error('Xóa thông báo thất bại');
        }
    };

    const handleSave = async (values) => {
        try {
            if (editingNotification) {
                await updateNotification(editingNotification._id, values);
                message.success('Cập nhật thông báo thành công');
            } else {
                await createNotification(values);
                message.success('Tạo thông báo thành công');
            }
            setIsModalOpen(false);
            fetchNotifications();
        } catch (error) {
            console.error(error);
            message.error('Lưu thông báo thất bại');
        }
    };

    const columns = [
        {
            title: 'Tiêu đề',
            dataIndex: 'title',
            key: 'title',
            render: (text) => <span className="font-semibold">{text}</span>,
        },
        {
            title: 'Nội dung',
            dataIndex: 'content',
            key: 'content',
            width: 400,
            render: (content) => (
                <div
                    className="max-h-20 overflow-y-auto w-full text-sm text-gray-600 truncate"
                    title="Nội dung chi tiết"
                    dangerouslySetInnerHTML={{
                        __html: content.length > 100 ? content.substring(0, 100) + '...' : content,
                    }}
                />
            ),
        },
        {
            title: 'Ưu tiên',
            dataIndex: 'priority',
            key: 'priority',
            render: (priority) => <span className="font-mono">{priority}</span>,
            sorter: (a, b) => a.priority - b.priority,
        },
        {
            title: 'Trạng thái',
            dataIndex: 'isActive',
            key: 'status',
            render: (isActive, record) => (
                <Switch
                    checked={isActive}
                    onChange={async (checked) => {
                        try {
                            await updateNotification(record._id, { isActive: checked });
                            message.success('Cập nhật trạng thái thành công');
                            fetchNotifications();
                        } catch (error) {
                            message.error('Cập nhật thất bại');
                        }
                    }}
                />
            ),
        },
        {
            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',
            render: (_, record) => (
                <div className="flex gap-2">
                    <Tooltip title="Chỉnh sửa">
                        <Button
                            type="primary"
                            icon={<EditOutlined />}
                            onClick={() => handleEdit(record)}
                            className="bg-blue-500"
                        />
                    </Tooltip>
                    <Tooltip title="Xóa">
                        <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record._id)} />
                    </Tooltip>
                </div>
            ),
        },
    ];

    return (
        <div className="p-6">
            <div className="flex justify-between items-center mb-6">
                <h2 className="text-2xl font-bold flex items-center gap-2">
                    <BellOutlined /> Quản lý Thông báo (Popup)
                </h2>
                <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={handleAdd}
                    size="large"
                    className="bg-green-600 hover:bg-green-700 border-none font-semibold"
                >
                    Thêm thông báo
                </Button>
            </div>

            <Table
                columns={columns}
                dataSource={notifications}
                rowKey="_id"
                loading={loading}
                pagination={{ pageSize: 10 }}
                className="shadow-md rounded-lg overflow-hidden bg-white"
            />

            <Modal
                title={editingNotification ? 'Chỉnh sửa thông báo' : 'Thêm thông báo mới'}
                open={isModalOpen}
                onCancel={() => setIsModalOpen(false)}
                footer={null}
                width={800}
                destroyOnClose
            >
                <Form
                    form={form}
                    layout="vertical"
                    onFinish={handleSave}
                    initialValues={{ isActive: true, priority: 0 }}
                >
                    <Form.Item
                        name="title"
                        label="Tiêu đề"
                        rules={[{ required: true, message: 'Vui lòng nhập tiêu đề' }]}
                    >
                        <Input placeholder="Nhập tiêu đề thông báo" size="large" />
                    </Form.Item>

                    <div className="grid grid-cols-2 gap-4">
                        <Form.Item
                            name="priority"
                            label="Độ ưu tiên (Cao hơn hiển thị trước)"
                            help="Số lớn hơn sẽ được ưu tiên hiển thị nếu có nhiều thông báo bật"
                        >
                            <InputNumber className="w-full" min={0} />
                        </Form.Item>

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

                    <Form.Item
                        name="content"
                        label="Nội dung (Hỗ trợ định dạng, hình ảnh)"
                        rules={[{ required: true, message: 'Vui lòng nhập nội dung' }]}
                    >
                        <ReactQuill
                            theme="snow"
                            style={{ height: '300px', marginBottom: '50px' }}
                            modules={{
                                toolbar: [
                                    [{ header: [1, 2, 3, false] }],
                                    ['bold', 'italic', 'underline', 'strike'],
                                    [{ list: 'ordered' }, { list: 'bullet' }],
                                    [{ color: [] }, { background: [] }],
                                    ['link', 'image'],
                                    ['clean'],
                                ],
                            }}
                        />
                    </Form.Item>

                    <div className="flex justify-end gap-2 mt-8">
                        <Button onClick={() => setIsModalOpen(false)}>Hủy</Button>
                        <Button type="primary" htmlType="submit" className="bg-blue-600">
                            {editingNotification ? 'Cập nhật' : 'Tạo mới'}
                        </Button>
                    </div>
                </Form>
            </Modal>
        </div>
    );
};

export default NotificationManager;
