<script>
    import { onMount } from 'svelte'
    import './Header.css'
    import Button from '../Button/Button.svelte'
    import { navigateTo, isInternalPath } from '../../lib/navigation'

    let activeNav = $state(typeof window !== 'undefined' ? window.location.pathname : '/')
    let isHidden = $state(false)
    let isMenuOpen = $state(false)
    let hasBackground = $state(false)
    let lastScrollY = 0

    const SCROLL_DELTA = 8
    const TOP_OFFSET = 24
    const BG_THRESHOLD = 100

    function handleNavClick(event, path) {
        if (!isInternalPath(path)) return
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return

        event.preventDefault()
        isMenuOpen = false
        navigateTo(path)
    }

    function toggleMenu() {
        isMenuOpen = !isMenuOpen
    }

    function handleScroll() {
        const currentScrollY = window.scrollY || 0
        const diff = currentScrollY - lastScrollY

        // Aggiungi sfondo quando scrolli oltre il threshold
        hasBackground = currentScrollY > BG_THRESHOLD

        if (currentScrollY <= TOP_OFFSET) {
            isHidden = false
            hasBackground = false
        } else if (diff > SCROLL_DELTA) {
            isHidden = true
            hasBackground = false
            isMenuOpen = false
        } else if (diff < -SCROLL_DELTA) {
            isHidden = false
        }

        lastScrollY = currentScrollY
    }

    onMount(() => {
        lastScrollY = window.scrollY || 0
        window.addEventListener('scroll', handleScroll, { passive: true })

        const updateActiveNav = () => {
            activeNav = window.location.pathname
        }
        window.addEventListener('popstate', updateActiveNav)

        return () => {
            window.removeEventListener('scroll', handleScroll)
            window.removeEventListener('popstate', updateActiveNav)
        }
    })
</script>

<header class="header" class:hidden={isHidden} class:with-bg={hasBackground} id="home">
    <div class="header-container">
        <div class="logo">
            <a href="/" aria-label="CIMA PROGETTI home" onclick={(e) => handleNavClick(e, '/')}>
                <span class="logo-img logo-mask" aria-hidden="true"></span>
            </a>
        </div>

        <!-- Nav desktop -->
        <nav class="nav nav-desktop" aria-label="Navigazione principale">
            <a
                href="/servizi"
                class:active={activeNav === '/servizi'}
                onclick={(e) => handleNavClick(e, '/servizi')}
                aria-current={activeNav === '/servizi' ? 'page' : undefined}
            >Servizi</a>
            <a
                href="/metodo"
                class:active={activeNav === '/metodo'}
                onclick={(e) => handleNavClick(e, '/metodo')}
                aria-current={activeNav === '/metodo' ? 'page' : undefined}
            >Il metodo</a>
            <a
                href="/progetti"
                class:active={activeNav === '/progetti'}
                onclick={(e) => handleNavClick(e, '/progetti')}
                aria-current={activeNav === '/progetti' ? 'page' : undefined}
            >Progetti</a>
            <a
                href="/chi-siamo"
                class:active={activeNav === '/chi-siamo'}
                onclick={(e) => handleNavClick(e, '/chi-siamo')}
                aria-current={activeNav === '/chi-siamo' ? 'page' : undefined}
            >Chi Siamo</a>
        </nav>

        <div class="header-actions">
            <Button text="Contattaci" href="/contatti" />
        </div>

        <!-- Pulsante hamburger / close (solo mobile) — SVG inline, niente span -->
        <button
            class="hamburger"
            onclick={toggleMenu}
            aria-label={isMenuOpen ? 'Chiudi menu' : 'Apri menu'}
            aria-expanded={isMenuOpen}
            aria-controls="mobile-menu"
            type="button"
        >
            {#if isMenuOpen}
                <!-- Icona X -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <line x1="4" y1="4" x2="20" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
                    <line x1="20" y1="4" x2="4" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
                </svg>
            {:else}
                <!-- Icona hamburger -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
                    <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
                    <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
                </svg>
            {/if}
        </button>
    </div>
</header>

<!-- Menu mobile full-page (si apre dal basso) -->
<div
    class="mobile-menu"
    class:open={isMenuOpen}
    id="mobile-menu"
    role="dialog"
    aria-modal="true"
    aria-label="Menu di navigazione"
    aria-hidden={!isMenuOpen}
>
    <nav class="mobile-menu-nav" aria-label="Navigazione mobile">
        <a
            href="/servizi"
            class:active={activeNav === '/servizi'}
            onclick={(e) => handleNavClick(e, '/servizi')}
            aria-current={activeNav === '/servizi' ? 'page' : undefined}
        >Servizi</a>
        <a
            href="/metodo"
            class:active={activeNav === '/metodo'}
            onclick={(e) => handleNavClick(e, '/metodo')}
            aria-current={activeNav === '/metodo' ? 'page' : undefined}
        >Il metodo</a>
        <a
            href="/progetti"
            class:active={activeNav === '/progetti'}
            onclick={(e) => handleNavClick(e, '/progetti')}
            aria-current={activeNav === '/progetti' ? 'page' : undefined}
        >Progetti</a>
        <a
            href="/chi-siamo"
            class:active={activeNav === '/chi-siamo'}
            onclick={(e) => handleNavClick(e, '/chi-siamo')}
            aria-current={activeNav === '/chi-siamo' ? 'page' : undefined}
        >Chi Siamo</a>
    </nav>

    <div class="mobile-menu-footer">
        <Button text="Contattaci" href="/contatti" onclick={() => { isMenuOpen = false }} padding="14px 32px" />
    </div>
</div>