'use client';

import usePreference from '@/hooks/helpers/usePreference';
import React, { useEffect, useState } from 'react';
import { useGetAbout } from '@/app/[name]/(Main)/about/hooks/useAboutData';
import SplashScreen from '@/components/overlays/SplashScreen';
import { hexToOklch, calculateBrightness } from '@/lib/helpers/colorUtils';

type Props = {
    children: React.ReactNode
}

// تابع برای اعمال رنگ primary
function applyPrimaryColor(colorHex: string) {
    const root = document.documentElement;
    const oklchColor = hexToOklch(colorHex);
    
    if (oklchColor) {
        root.style.setProperty('--primary', oklchColor);
        
        const brightness = calculateBrightness(colorHex);
        const foregroundOklch = brightness > 0.5 ? 'oklch(0 0 0)' : 'oklch(1 0 0)';
        root.style.setProperty('--primary-foreground', foregroundOklch);
    }
}

function PreferenceWrapper({ children }: Props) {
    const { state: nightMode } = usePreference('night-mode', false);
    const { data: aboutData } = useGetAbout();

    // بررسی اینکه آیا باید اسپلش نمایش داده بشه
    const [showSplash, setShowSplash] = useState(() => {
        if (typeof window === 'undefined') return true;
        const navigationEntries = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
        const isReload = navigationEntries.length > 0 && navigationEntries[0].type === 'reload';
        return !sessionStorage.getItem('app-loaded') || isReload;
    });

    const [cachedLogo, setCachedLogo] = useState<string | null>(null);
    const [cachedName, setCachedName] = useState<string | null>(null);

    // بارگذاری رنگ و اطلاعات از localStorage در اولین رندر
    useEffect(() => {
        // بارگذاری رنگ
        const savedColor = localStorage.getItem('theme-primary-color');
        if (savedColor) {
            applyPrimaryColor(savedColor);
        }

        // بارگذاری لوگو و نام
        const savedLogo = localStorage.getItem('shop-logo');
        const savedName = localStorage.getItem('shop-name');
        if (savedLogo) setCachedLogo(savedLogo);
        if (savedName) setCachedName(savedName);

        // ثبت اینکه app لود شده
        sessionStorage.setItem('app-loaded', 'true');
    }, []);

    // اعمال رنگ primary از about (با ذخیره در localStorage)
    useEffect(() => {
        if (aboutData?.data?.menuColor) {
            // ذخیره رنگ و اطلاعات در localStorage
            localStorage.setItem('theme-primary-color', aboutData.data.menuColor);

            // ذخیره لوگو و نام برای اسپلش
            if (aboutData.data.logo) {
                localStorage.setItem('shop-logo', aboutData.data.logo);
            }
            if (aboutData.data.name) {
                localStorage.setItem('shop-name', aboutData.data.name);
            }

            applyPrimaryColor(aboutData.data.menuColor);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [aboutData?.data?.menuColor]);

    // اعمال تم تاریک/روشن
    useEffect(() => {
        const theme = nightMode;
        document.documentElement.setAttribute("data-theme", theme ? "dark" : "light");
    }, [nightMode]);

    // بستن اسپلش بعد از مدت زمان مشخص
    useEffect(() => {
        if (showSplash) {
            const timer = setTimeout(() => {
                setShowSplash(false);
            }, 2500);

            return () => clearTimeout(timer);
        }
    }, [showSplash]);

    // استفاده از داده‌های cache شده برای اسپلش
    const splashLogo = aboutData?.data?.logo || cachedLogo || undefined;
    const splashName = aboutData?.data?.name || cachedName || undefined;

    return (
        <>
            {showSplash && (
                <SplashScreen
                    logo={splashLogo}
                    shopName={splashName}
                    duration={2500}
                />
            )}
            {!showSplash && children}
        </>
    )
}

export default PreferenceWrapper