<?php
if ( ! defined( 'ABSPATH' ) ) exit;

$current = isset( $_GET['page'] ) ? sanitize_key( $_GET['page'] ) : 'visitorlens';
$is_premium = defined( 'VLENS_PREMIUM' ) && VLENS_PREMIUM;

// 'collapsible' items are the ones the JS overflow nav (admin.js) is allowed
// to move into the "More ▾" dropdown one at a time as the bar runs out of
// room. Dashboard / Session Replay / Statistics / Settings always stay
// pinned in the main bar.
$nav_items = [
    [
        'slug'        => 'visitorlens',
        'label'       => 'Dashboard',
        'premium'     => false,
        'collapsible' => false,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-replay',
        'label'       => 'Session Replay',
        'premium'     => false,
        'collapsible' => false,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-stats',
        'label'       => 'Statistics',
        'premium'     => false,
        'collapsible' => false,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-ad-lens',
        'label'       => 'Ad Lens',
        'premium'     => true,
        'collapsible' => true,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-orders-lens',
        'label'       => 'Orders Lens',
        'premium'     => true,
        'collapsible' => true,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-incomplete-orders',
        'label'       => 'Incomplete Orders',
        'premium'     => true,
        'collapsible' => true,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>',
    ],
    [
        'slug'        => 'visitorlens-settings',
        'label'       => 'Settings',
        'premium'     => false,
        'collapsible' => false,
        'icon'        => '<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
    ],
];

$icon_kses = [ 'svg' => [ 'width' => [], 'height' => [], 'fill' => [], 'stroke' => [], 'stroke-width' => [], 'stroke-linecap' => [], 'stroke-linejoin' => [], 'viewbox' => [] ], 'path' => [ 'd' => [], 'fill' => [], 'stroke' => [] ], 'rect' => [ 'x' => [], 'y' => [], 'width' => [], 'height' => [], 'rx' => [] ], 'polyline' => [ 'points' => [] ], 'polygon' => [ 'points' => [], 'fill' => [], 'stroke' => [] ], 'circle' => [ 'cx' => [], 'cy' => [], 'r' => [], 'fill' => [], 'stroke' => [] ] ];

// Renders one <li> nav item; shared by the main bar loop and the pinned
// Settings item below so both stay in sync with a single markup source.
$render_nav_item = function ( $item ) use ( $current, $icon_kses ) {
    $is_active = ( $current === $item['slug'] );
    $url       = admin_url( 'admin.php?page=' . $item['slug'] );
    ?>
    <li role="none"<?php echo ! empty( $item['collapsible'] ) ? ' data-collapsible="1"' : ''; ?>>
        <a href="<?php echo esc_url( $url ); ?>"
           class="vsr-nav-link<?php echo $is_active ? esc_attr( ' is-active' ) : ''; ?>"
           role="menuitem"
           <?php if ( $is_active ) : ?>aria-current="page"<?php endif; ?>>
            <span class="vsr-nav-link-icon"><?php echo wp_kses( $item['icon'], $icon_kses ); ?></span>
            <span class="vsr-nav-link-label"><?php echo esc_html( $item['label'] ); ?></span>
            <?php if ( $is_active ) : ?><span class="vsr-nav-link-pip" aria-hidden="true"></span><?php endif; ?>
        </a>
    </li>
    <?php
};

$settings_item = null;
foreach ( $nav_items as $item ) {
    if ( $item['slug'] === 'visitorlens-settings' ) {
        $settings_item = $item;
        break;
    }
}
?>
<nav class="vsr-top-nav" id="vsrTopNav">
    <div class="vsr-top-nav-inner">

        <!-- Brand -->
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=visitorlens' ) ); ?>" class="vsr-nav-brand">
            <span class="vsr-nav-brand-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
                </svg>
            </span>
            <span class="vsr-nav-brand-name">Visitor<em>Lens</em></span>
            <?php if ( $is_premium ) : ?>
                <span class="vsr-nav-premium-badge">PRO</span>
            <?php endif; ?>
        </a>

        <!-- Nav links -->
        <ul class="vsr-nav-links" id="vsrNavLinks" role="menubar">
            <?php foreach ( $nav_items as $item ) :
                if ( $item['slug'] === 'visitorlens-settings' ) continue;
                // Skip premium-only items on free installs
                if ( ! empty( $item['premium'] ) && ! $is_premium ) continue;
                $render_nav_item( $item );
            endforeach; ?>

            <!-- "More" overflow toggle — hidden until admin.js collapses at
                 least one item into it as the bar runs out of room. -->
            <li role="none" class="vsr-nav-more" id="vsrNavMore" hidden>
                <button type="button" class="vsr-nav-link vsr-nav-more-btn" id="vsrNavMoreBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="vsr-nav-link-label">More</span>
                    <span class="vsr-nav-link-icon vsr-nav-more-chevron"><svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span>
                </button>
            </li>

            <?php if ( $settings_item ) $render_nav_item( $settings_item ); ?>
        </ul>

        <!-- Right side -->
        <div class="vsr-nav-end">
            <span class="vsr-nav-version">v<?php echo defined( 'VLENS_VERSION' ) ? esc_html( VLENS_VERSION ) : '1.0'; ?></span>
        </div>

    </div>
</nav>

<!-- "More" dropdown panel — deliberately NOT nested inside #vsrNavMore /
     .vsr-nav-links: that ul has overflow:hidden (needed so admin.js can
     measure true available width for the overflow calc), which would
     clip an absolutely-positioned dropdown living inside it. Living here
     instead and positioned with position:fixed (viewport-relative, so it
     escapes that overflow:hidden ancestor entirely) — admin.js computes
     its top/left from #vsrNavMoreBtn's live position each time it opens. -->
<ul class="vsr-nav-more-dropdown" id="vsrNavMoreDropdown" role="menu"></ul>
