import { useEffect, useState } from 'react';
import { useStore } from '../hooks/useStore';

function MaintenancePage() {
    const { dataWebsite } = useStore();
    const [dots, setDots] = useState('');

    // Animate dots "..." để tạo cảm giác đang xử lý
    useEffect(() => {
        const interval = setInterval(() => {
            setDots((prev) => (prev.length >= 3 ? '' : prev + '.'));
        }, 500);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className="maintenance-page">
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap');

                .maintenance-page {
                    min-height: 100vh;
                    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: 'Outfit', sans-serif;
                    overflow: hidden;
                    position: relative;
                }

                /* Orbs nền */
                .maintenance-page::before,
                .maintenance-page::after {
                    content: '';
                    position: absolute;
                    border-radius: 50%;
                    filter: blur(80px);
                    opacity: 0.3;
                    animation: float 6s ease-in-out infinite;
                }
                .maintenance-page::before {
                    width: 500px; height: 500px;
                    background: radial-gradient(circle, #f97316, transparent);
                    top: -100px; left: -100px;
                }
                .maintenance-page::after {
                    width: 400px; height: 400px;
                    background: radial-gradient(circle, #8b5cf6, transparent);
                    bottom: -80px; right: -80px;
                    animation-delay: -3s;
                }

                @keyframes float {
                    0%, 100% { transform: translateY(0px); }
                    50% { transform: translateY(-30px); }
                }

                .maintenance-card {
                    position: relative;
                    z-index: 10;
                    background: rgba(255,255,255,0.05);
                    backdrop-filter: blur(20px);
                    border: 1px solid rgba(255,255,255,0.1);
                    border-radius: 28px;
                    padding: 60px 48px;
                    text-align: center;
                    max-width: 520px;
                    width: 90%;
                    box-shadow: 0 25px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
                }

                .maintenance-logo {
                    max-height: 70px;
                    max-width: 220px;
                    object-fit: contain;
                    margin: 0 auto 24px;
                    filter: drop-shadow(0 4px 12px rgba(249,115,22,0.5));
                }

                .maintenance-icon {
                    font-size: 72px;
                    margin-bottom: 12px;
                    display: block;
                    animation: spin-slow 4s linear infinite;
                }

                @keyframes spin-slow {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }

                .maintenance-title {
                    font-size: 32px;
                    font-weight: 800;
                    color: #fff;
                    margin: 0 0 12px;
                    background: linear-gradient(135deg, #f97316, #fb923c, #fbbf24);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .maintenance-subtitle {
                    font-size: 16px;
                    color: rgba(255,255,255,0.65);
                    margin-bottom: 32px;
                    line-height: 1.6;
                }

                .maintenance-status-bar {
                    background: rgba(255,255,255,0.08);
                    border-radius: 12px;
                    padding: 16px 20px;
                    margin-bottom: 32px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                }

                .status-dot {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #f97316;
                    box-shadow: 0 0 0 0 rgba(249,115,22,0.4);
                    animation: pulse 1.5s infinite;
                    flex-shrink: 0;
                }

                @keyframes pulse {
                    0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
                    70% { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
                    100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
                }

                .status-text {
                    color: rgba(255,255,255,0.8);
                    font-size: 14px;
                    text-align: left;
                }
                .status-text strong {
                    color: #f97316;
                    display: block;
                    font-size: 13px;
                    font-weight: 600;
                    letter-spacing: 0.05em;
                    text-transform: uppercase;
                }

                .progress-bar-wrap {
                    background: rgba(255,255,255,0.1);
                    border-radius: 99px;
                    height: 6px;
                    margin-bottom: 32px;
                    overflow: hidden;
                }

                .progress-bar-fill {
                    height: 100%;
                    border-radius: 99px;
                    background: linear-gradient(90deg, #f97316, #fbbf24);
                    width: 60%;
                    animation: loading 2s ease-in-out infinite alternate;
                }

                @keyframes loading {
                    0% { width: 20%; }
                    100% { width: 85%; }
                }

                .refresh-btn {
                    background: linear-gradient(135deg, #f97316, #ea580c);
                    color: white;
                    border: none;
                    padding: 14px 36px;
                    border-radius: 99px;
                    font-size: 15px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s;
                    box-shadow: 0 8px 24px rgba(249,115,22,0.35);
                    font-family: 'Outfit', sans-serif;
                    letter-spacing: 0.02em;
                }

                .refresh-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 12px 32px rgba(249,115,22,0.5);
                }

                .refresh-btn:active {
                    transform: translateY(0);
                }

                .particles {
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    pointer-events: none;
                    overflow: hidden;
                }

                .particle {
                    position: absolute;
                    width: 3px; height: 3px;
                    background: rgba(249,115,22,0.6);
                    border-radius: 50%;
                    animation: rise linear infinite;
                }

                @keyframes rise {
                    0% { transform: translateY(100vh) scale(0); opacity: 0; }
                    10% { opacity: 1; }
                    90% { opacity: 0.5; }
                    100% { transform: translateY(-20px) scale(1); opacity: 0; }
                }
            `}</style>

            {/* Particles */}
            <div className="particles">
                {Array.from({ length: 12 }).map((_, i) => (
                    <div
                        key={i}
                        className="particle"
                        style={{
                            left: `${Math.random() * 100}%`,
                            animationDuration: `${4 + Math.random() * 6}s`,
                            animationDelay: `${Math.random() * 5}s`,
                            width: `${2 + Math.random() * 4}px`,
                            height: `${2 + Math.random() * 4}px`,
                        }}
                    />
                ))}
            </div>

            <div className="maintenance-card">
                {/* Logo */}
                {dataWebsite?.logo ? (
                    <img src={dataWebsite.logo} alt="logo" className="maintenance-logo" />
                ) : (
                    <span className="maintenance-icon">⚙️</span>
                )}

                <h1 className="maintenance-title">Đang Bảo Trì</h1>

                <p className="maintenance-subtitle">
                    Hệ thống đang được nâng cấp để phục vụ bạn tốt hơn.
                    <br />
                    Vui lòng quay lại sau ít phút{dots}
                </p>

                {/* Status */}
                <div className="maintenance-status-bar">
                    <div className="status-dot" />
                    <div className="status-text">
                        <strong>🔧 Đang xử lý</strong>
                        Hệ thống sẽ sớm hoạt động trở lại
                    </div>
                </div>

                {/* Progress */}
                <div className="progress-bar-wrap">
                    <div className="progress-bar-fill" />
                </div>

                <button className="refresh-btn" onClick={() => window.location.reload()}>
                    🔄 Thử lại ngay
                </button>
            </div>
        </div>
    );
}

export default MaintenancePage;
