{% extends 'base.html.twig' %}

{% block navbar %}{% endblock %}

{% block body %}

{# ── Top navigation bar ── #}
<nav class="agent-topbar">

    {# Left: brand #}
    <a href="{{ path('app_agent_dashboard') }}"
       class="agent-topbar__brand">
        <span class="agent-topbar__brand-main">Agent</span>
        <span class="agent-topbar__brand-sub">Portal</span>
    </a>

    {# Center: nav links (hidden on mobile, shown md+). Dashboard + two
       grouped dropdowns so the bar stays uncluttered. #}
    <div class="d-none d-md-flex agent-topbar__nav">
        {% set route = app.request.attributes.get('_route') %}
        {% set downlineRoutes = ['app_agent_users', 'app_agent_downline', 'app_agent_agents', 'app_agent_live_players', 'app_agent_player_monitor', 'app_agent_player_detail'] %}
        {% set moneyRoutes    = ['app_agent_requests', 'app_agent_transactions', 'app_agent_withdrawal'] %}

        <a href="{{ path('app_agent_dashboard') }}"
           class="agent-nav-link {% if route == 'app_agent_dashboard' %}is-active{% endif %}"
           data-testid="agent-nav-dashboard">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
            </svg>
            Dashboard
        </a>

        <a href="{{ path('app_agent_insight') }}"
           class="agent-nav-link {% if route starts with 'app_agent_insight' %}is-active{% endif %}"
           data-testid="agent-nav-insight">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>
            </svg>
            Insight
        </a>

        {# ── Downline ▾ ── #}
        <div class="dropdown">
            <button type="button"
                    class="agent-nav-link dropdown-toggle {% if route in downlineRoutes %}is-active{% endif %}"
                    data-bs-toggle="dropdown" aria-expanded="false"
                    data-testid="agent-nav-downline-menu">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
                Downline
            </button>
            <ul class="dropdown-menu dropdown-menu--dark">
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_users' %}active{% endif %}"
                       href="{{ path('app_agent_users') }}" data-testid="agent-nav-users">Players</a></li>
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_downline' %}active{% endif %}"
                       href="{{ path('app_agent_downline') }}" data-testid="agent-nav-downline">Downline</a></li>
                <li><a class="dropdown-item dropdown-item--dark {% if route starts with 'app_agent_player_' %}active{% endif %}"
                       href="{{ path('app_agent_player_monitor') }}" data-testid="agent-nav-player-monitor">Player Monitor</a></li>
                {% if is_granted('ROLE_MASTER_AGENT') or is_granted('ROLE_AGENT') %}
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_agents' %}active{% endif %}"
                       href="{{ path('app_agent_agents') }}" data-testid="agent-nav-agents">Agents</a></li>
                {% endif %}
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_live_players' %}active{% endif %}"
                       href="{{ path('app_agent_live_players') }}" data-testid="agent-nav-live-players">Live Players</a></li>
            </ul>
        </div>

        {# ── Payments ▾ ── #}
        <div class="dropdown">
            <button type="button"
                    class="agent-nav-link dropdown-toggle {% if route in moneyRoutes or route starts with 'app_agent_withdrawal' %}is-active{% endif %}"
                    data-bs-toggle="dropdown" aria-expanded="false"
                    data-testid="agent-nav-payments-menu">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/>
                </svg>
                Payments
            </button>
            <ul class="dropdown-menu dropdown-menu--dark">
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_requests' %}active{% endif %}"
                       href="{{ path('app_agent_requests') }}" data-testid="agent-nav-requests">Deposits &amp; Withdrawals</a></li>
                <li><a class="dropdown-item dropdown-item--dark {% if route == 'app_agent_transactions' %}active{% endif %}"
                       href="{{ path('app_agent_transactions') }}" data-testid="agent-nav-transactions">Transactions</a></li>
                <li><a class="dropdown-item dropdown-item--dark {% if route starts with 'app_agent_withdrawal' %}active{% endif %}"
                       href="{{ path('app_agent_withdrawal') }}" data-testid="agent-nav-withdrawal">My Withdrawal</a></li>
            </ul>
        </div>
    </div>

    {# Right: wallet + back link #}
    <div class="d-flex align-items-center gap-3">
        <div class="d-none d-md-block text-end">
            <div class="agent-topbar__wallet-label">Wallet</div>
            <div class="agent-topbar__wallet-amount">₱{{ app.user.walletBalance|number_format(2) }}</div>
        </div>
        {% set lastGame = app.session.get('_last_game') %}
        {% if lastGame %}
        <a href="{{ path(lastGame.route) }}"
           class="agent-topbar__back-link"
           data-turbo="false"
           data-testid="agent-nav-back-game">
            ← Back to Game
        </a>
        {% endif %}
        <a href="{{ path('app_home') }}"
           class="agent-topbar__back-link"
           data-turbo="false"
           data-testid="agent-nav-back-site">
            Back to Site
        </a>
        <a href="{{ path('app_logout') }}"
           class="agent-topbar__back-link"
           data-testid="agent-nav-logout">
            Logout
        </a>
        {# Mobile hamburger #}
        <button id="agent-hamburger" class="agent-topbar__hamburger d-flex d-md-none"
                aria-label="Toggle menu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
        </button>
    </div>
</nav>

{# Mobile dropdown nav #}
<div id="agent-mobile-nav" class="agent-mobile-nav">
    {% set route = app.request.attributes.get('_route') %}
    <a href="{{ path('app_agent_dashboard') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_dashboard' %}is-active{% endif %}">
        Dashboard
    </a>
    <a href="{{ path('app_agent_insight') }}"
       class="agent-mobile-nav__link {% if route starts with 'app_agent_insight' %}is-active{% endif %}"
       data-testid="agent-nav-insight-mobile">
        Insight
    </a>
    <a href="{{ path('app_agent_users') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_users' %}is-active{% endif %}">
        Players
    </a>
    <a href="{{ path('app_agent_downline') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_downline' %}is-active{% endif %}"
       data-testid="agent-nav-downline-mobile">
        Downline
    </a>
    <a href="{{ path('app_agent_player_monitor') }}"
       class="agent-mobile-nav__link {% if route starts with 'app_agent_player_' %}is-active{% endif %}"
       data-testid="agent-nav-player-monitor-mobile">
        Player Monitor
    </a>
    {% if is_granted('ROLE_MASTER_AGENT') or is_granted('ROLE_AGENT') %}
    <a href="{{ path('app_agent_agents') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_agents' %}is-active{% endif %}">
        Agents
    </a>
    {% endif %}
    <a href="{{ path('app_agent_live_players') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_live_players' %}is-active{% endif %}"
       data-testid="agent-nav-live-players-mobile">
        Live Players
    </a>
    <a href="{{ path('app_agent_requests') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_requests' %}is-active{% endif %}"
       data-testid="agent-nav-requests-mobile">
        Deposits &amp; Withdrawals
    </a>
    <a href="{{ path('app_agent_transactions') }}"
       class="agent-mobile-nav__link {% if route == 'app_agent_transactions' %}is-active{% endif %}">
        Transactions
    </a>
    <a href="{{ path('app_agent_withdrawal') }}"
       class="agent-mobile-nav__link {% if route starts with 'app_agent_withdrawal' %}is-active{% endif %}">
        Withdrawal
    </a>
    <div class="agent-mobile-nav__wallet">
        Wallet: <strong class="text-white">₱{{ app.user.walletBalance|number_format(2) }}</strong>
    </div>
    {% set lastGame = app.session.get('_last_game') %}
    {% if lastGame %}
    <a href="{{ path(lastGame.route) }}"
       class="agent-mobile-nav__link"
       data-turbo="false"
       data-testid="agent-nav-back-game-mobile">
        ← Back to Game
    </a>
    {% endif %}
    <a href="{{ path('app_home') }}"
       class="agent-mobile-nav__link"
       data-turbo="false"
       data-testid="agent-nav-back-site-mobile">
        Back to Site
    </a>
    <a href="{{ path('app_logout') }}"
       class="agent-mobile-nav__link"
       data-testid="agent-nav-logout-mobile">
        Logout
    </a>
</div>

<script>
(function () {
    var btn = document.getElementById('agent-hamburger');
    var nav = document.getElementById('agent-mobile-nav');
    if (btn && nav) {
        btn.addEventListener('click', function () {
            nav.style.display = nav.style.display === 'none' ? 'block' : 'none';
        });
    }
})();
</script>

{# ── Page content ── #}
<div class="agent-page">
<div class="agent-page__inner">
    {% block agent_content %}{% endblock %}
</div>
</div>

{% endblock %}