import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { HeaderV3 } from './HeaderElement/HeaderV3';
import { ADDON_REGISTRY } from './Settings/v3/addonRegistry';

const Header = () => {
    const [TimerBadge, setTimerBadge] = useState(() => window.lazytasksTimeTracker?.headerTimer || null);
    const [NavLink, setNavLink] = useState(() => window.lazytasksTimeTracker?.navLink || null);
    const [GamificationNavLink, setGamificationNavLink] = useState(() => window.lazytasksPerformance?.navLink || null);

    // Phase 4: gate the TimeTracker top-nav link by "user has timetracker-access on at least one project".
    // Floating timer bar (4a) stays unconditional — it only renders when an active timer exists, which is
    // already guarded server-side by perm-gated start_timer.
    const hasAnyTTAccess = useSelector(state => {
        const user = state.auth?.session?.loggedInUser;
        if (!user) return false;
        if (user.is_superadmin) return true;
        const projects = state.auth?.permissions?.projects || {};
        for (const id in projects) {
            const list = projects[id]?.permissions;
            if (Array.isArray(list) && list.includes('timetracker-access')) return true;
        }
        return false;
    });

    useEffect(() => {
        const onTimeTrackerReady = () => {
            setTimerBadge(() => window.lazytasksTimeTracker?.headerTimer || null);
            setNavLink(() => window.lazytasksTimeTracker?.navLink || null);
        };
        const onPerformanceReady = () => {
            setGamificationNavLink(() => window.lazytasksPerformance?.navLink || null);
        };

        if (!window.lazytasksTimeTracker) {
            window.addEventListener('lazytasksTimeTrackerReady', onTimeTrackerReady);
        }
        if (!window.lazytasksPerformance) {
            window.addEventListener('lazytasksPerformanceReady', onPerformanceReady);
        }
        return () => {
            window.removeEventListener('lazytasksTimeTrackerReady', onTimeTrackerReady);
            window.removeEventListener('lazytasksPerformanceReady', onPerformanceReady);
        };
    }, []);

    const ttReleased = ADDON_REGISTRY.timeTracker.status === 'released';
    const navLinkVisible = NavLink && ttReleased && hasAnyTTAccess;

    return (
        <div className='header'>
            <HeaderV3
                headerTimer={TimerBadge && ttReleased ? <TimerBadge /> : null}
                timeTrackerNavLink={navLinkVisible ? <NavLink /> : null}
                performanceNavLink={GamificationNavLink && ADDON_REGISTRY.performance.status === 'released' ? <GamificationNavLink /> : null}
            />
        </div>
    );
}

export default Header;