import Header from './components/Header';
import Banner from './components/Banner';
import Category from './components/Category';
import Footer from './components/Footer';
import MaintenancePage from './components/MaintenancePage';
import { Helmet } from 'react-helmet';
import { useStore } from './hooks/useStore';
import { useState, useEffect } from 'react';
import { Modal } from 'antd';
import { getActiveNotification } from './config/notification';

function App() {
    const { dataWebsite } = useStore();

    const [notification, setNotification] = useState(null);
    const [isModalOpen, setIsModalOpen] = useState(false);

    useEffect(() => {
        const fetchNotification = async () => {
            try {
                const res = await getActiveNotification();
                if (res.metadata) {
                    const notif = res.metadata;
                    const hideUntil = localStorage.getItem(`hideNotif_${notif._id || 'global'}`);
                    if (!hideUntil || Date.now() > parseInt(hideUntil, 10)) {
                        setNotification(notif);
                        setIsModalOpen(true);
                    }
                }
            } catch (error) {
                console.error('Error fetching notification:', error);
            }
        };
        fetchNotification();
    }, []);

    const handleCloseModal = (hours) => {
        if (typeof hours === 'number' && notification) {
            const hideUntil = Date.now() + hours * 60 * 60 * 1000;
            localStorage.setItem(`hideNotif_${notification._id || 'global'}`, hideUntil.toString());
        }
        setIsModalOpen(false);
    };

    // Hiển thị trang bảo trì nếu status là 'maintenance'
    if (dataWebsite?.status === 'maintenance') {
        return <MaintenancePage />;
    }

    return (
        <div>
            <Helmet>
                <title>{dataWebsite?.nameWebsite}</title>
                <link rel="icon" type="image/png" href={`${dataWebsite?.favicon}`} />
                <meta name="description" content={dataWebsite?.description} />
                <meta name="keywords" content={dataWebsite?.keywords} />
            </Helmet>
            <header className="pt-16">
                <Header />
            </header>
            <main className="bg-gray-100">
                <Banner />
                <Category />
            </main>

            <footer>
                <Footer />
            </footer>

            <Modal
                title={
                    <div className="text-xl font-bold text-center text-red-600 uppercase border-b pb-2">
                        {notification?.title}
                    </div>
                }
                open={isModalOpen}
                onCancel={handleCloseModal}
                footer={[
                    <button
                        key="close-1h"
                        onClick={() => handleCloseModal(1)}
                        className="bg-gray-500 text-white px-4 py-2 rounded-full hover:bg-gray-600 transition-colors font-semibold mr-2"
                    >
                        Tắt 1 giờ
                    </button>,
                    <button
                        key="close-3h"
                        onClick={() => handleCloseModal(3)}
                        className="bg-gray-500 text-white px-4 py-2 rounded-full hover:bg-gray-600 transition-colors font-semibold mr-2"
                    >
                        Tắt 3 giờ
                    </button>,
                    <button
                        key="close"
                        onClick={handleCloseModal}
                        className="bg-red-500 text-white px-6 py-2 rounded-full hover:bg-red-600 transition-colors font-semibold"
                    >
                        Đóng thông báo
                    </button>,
                ]}
                width={600}
                centered
                className="notification-modal"
            >
                <div
                    className="py-4 text-gray-700 text-base leading-relaxed overflow-y-auto max-h-[60vh]"
                    dangerouslySetInnerHTML={{ __html: notification?.content }}
                />
            </Modal>
        </div>
    );
}

export default App;
