{% extends 'agent/_layout.html.twig' %}

{% block title %}Agent Dashboard{% endblock %}

{% block agent_content %}

    {# ── Header ── #}
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
        <div>
            <h1 class="fw-bold mb-1 text-white" data-testid="agent-dashboard-title">
                Agent Dashboard
            </h1>
            <p class="text-white mb-0" style="font-size:13px;">
                Track your commissions and referral activity.
            </p>
        </div>
        <div class="text-end">
            <div class="text-white text-uppercase mb-1" style="font-size:11px; letter-spacing:.06em;">Wallet Balance</div>
            <div class="fw-bold text-white" style="font-size:22px;">₱{{ app.user.walletBalance|number_format(2) }}</div>
            <a href="{{ path('app_agent_withdrawal') }}"
               class="text-white text-decoration-underline fw-medium" style="font-size:12px;">
                Withdraw →
            </a>
        </div>
    </div>

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
    ] %}
    <div class="period-filter-bar">
        {% for p in presets %}
            <a href="{{ path('app_agent_dashboard', {period: p.key}) }}"
               class="period-pill--dark{{ period == p.key ? ' is-active' : '' }}"
               data-testid="agent-period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}

        {# Custom month picker #}
        <form method="GET" action="{{ path('app_agent_dashboard') }}" class="d-inline-flex align-items-center gap-2" data-testid="agent-form-custom-month">
            <input type="month" name="_month_val"
                   value="{{ period starts with 'month_' ? period|replace({'month_': '', '_': '-'}) : '' }}"
                   class="period-filter-input--dark{{ period starts with 'month_' ? ' is-active' : '' }}"
                   data-testid="agent-input-custom-month">
            <button type="submit"
                    class="period-filter-go--dark{{ period starts with 'month_' ? ' is-active' : '' }}">
                Go
            </button>
            <input type="hidden" name="period" id="agent-hidden-period-month" value="">
        </form>

        {# Custom year picker #}
        <form method="GET" action="{{ path('app_agent_dashboard') }}" class="d-inline-flex align-items-center gap-2" data-testid="agent-form-custom-year">
            <input type="number" name="_year_val" min="2020" max="2100" placeholder="Year"
                   value="{{ period starts with 'year_' ? period|replace({'year_': ''}) : '' }}"
                   class="period-filter-input--dark{{ period starts with 'year_' ? ' is-active' : '' }}"
                   style="width:90px;"
                   data-testid="agent-input-custom-year">
            <button type="submit"
                    class="period-filter-go--dark{{ period starts with 'year_' ? ' is-active' : '' }}">
                Go
            </button>
            <input type="hidden" name="period" id="agent-hidden-period-year" value="">
        </form>
    </div>

    <script>
    (function () {
        var mf = document.querySelector('[data-testid="agent-form-custom-month"]');
        if (mf) {
            mf.addEventListener('submit', function (e) {
                var val = mf.querySelector('[data-testid="agent-input-custom-month"]').value;
                if (!val) { e.preventDefault(); return; }
                var p = val.split('-');
                document.getElementById('agent-hidden-period-month').value = 'month_' + p[0] + '_' + p[1];
                mf.querySelector('[name="_month_val"]').disabled = true;
            });
        }
        var yf = document.querySelector('[data-testid="agent-form-custom-year"]');
        if (yf) {
            yf.addEventListener('submit', function (e) {
                var val = yf.querySelector('[data-testid="agent-input-custom-year"]').value;
                if (!val) { e.preventDefault(); return; }
                document.getElementById('agent-hidden-period-year').value = 'year_' + val;
                yf.querySelector('[name="_year_val"]').disabled = true;
            });
        }
    })();
    </script>

    {# ── Stats cards ── #}
    <div class="row g-3 mb-4">
        {% set cards = [
            {key: 'commissions',      label: 'Casino Commissions',       value: '₱' ~ stats.commissions|number_format(2), sub: periodLabel},
            {key: 'downlineDeposits', label: 'Total Downline Deposits',  value: '₱' ~ stats.downlineDeposits|number_format(2), sub: periodLabel},
            {key: 'commissionRate',   label: isMasterAgent ? 'Master Commission Rate' : 'Your Commission Rate', value: commissionRate ~ '%', sub: ''},
            {key: 'betCount',         label: 'Bets by Referrals',        value: stats.betCount,                            sub: periodLabel},
            {key: 'activeReferrals',  label: 'Active Referrals',         value: stats.activeReferrals,                     sub: 'placed bets · ' ~ periodLabel},
            {key: 'playersRegistered',label: 'Players Registered',       value: stats.playersRegistered,                   sub: periodLabel},
            {key: 'playersLoggedIn',  label: 'Players Logged In',        value: stats.playersLoggedIn,                     sub: periodLabel},
            {key: 'lrCommission',     label: 'Live Racing Commissions',  value: '₱' ~ liveRacingCommissionAmount,         sub: periodLabel},
            {key: 'lrCommissionRate', label: 'Live Racing Commission Rate', value: liveRacingCommissionRate ~ '%',         sub: ''},
        ] %}
        {% for card in cards %}
            <div class="col-12 col-sm-6 col-md-4" data-testid="stat-agent-{{ card.key }}">
                <div class="card-body--compact dark-card h-100">
                    <p class="stat-label--sm mb-2">
                        {{ card.label }}
                    </p>
                    <p class="stat-value--lg mb-1 text-white">
                        {{ card.value }}
                    </p>
                    <p class="mb-0" style="font-size:11px; color:#ffffff;">{{ card.sub }}</p>
                </div>
            </div>
        {% endfor %}
    </div>

    {# ── All-time referred count ── #}
    <div class="d-flex align-items-center gap-3 mb-3 card-body--compact dark-card" data-testid="stat-referred-count">
        <div class="d-flex align-items-center justify-content-center flex-shrink-0" style="width:44px; height:44px; border-radius:50%; background:#1a1a1a; border:1px solid #2a2a2a;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#afafaf" 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>
        </div>
        <div>
            <p class="stat-label--sm mb-1">Total Referred (All Time)</p>
            <p class="stat-value--lg mb-0 text-white" data-testid="referred-count">{{ referredCount }}</p>
        </div>
    </div>

    {# ── Referral Code ── #}
    <div class="card-body--compact dark-card mb-3">
        <p class="text-white fw-semibold text-uppercase mb-3" style="font-size:11px; letter-spacing:.06em;">Your Referral Code</p>
        <div class="d-flex flex-column flex-sm-row gap-2 align-items-stretch align-items-sm-center">
            <input type="text"
                   id="referral-code-input"
                   value="{{ referralCode }}"
                   readonly
                   style="font-size:clamp(16px,4vw,22px); font-weight:700; letter-spacing:.15em; font-family:monospace; border-radius:8px; background:#0a0a0a; border:1px solid #2a2a2a; color:#ffffff; padding:10px 14px; flex:1;"
                   data-testid="referral-code-display">
            <button type="button"
                    onclick="copyToClipboard('referral-code-input', this)"
                    style="padding:10px 20px; border-radius:999px; background:#ffffff; color:#000000; font-size:14px; font-weight:600; white-space:nowrap; border:none; flex-shrink:0; cursor:pointer;"
                    data-testid="btn-copy-code">
                Copy Code
            </button>
        </div>
    </div>

    {# ── Referral Link ── #}
    <div class="card-body--compact dark-card">
        <p class="text-white fw-semibold text-uppercase mb-3" style="font-size:11px; letter-spacing:.06em;">Referral Registration Link</p>
        <div class="d-flex flex-column flex-sm-row gap-2 align-items-stretch align-items-sm-center">
            <input type="text"
                   id="referral-link-input"
                   value="{{ url('app_register') }}?ref={{ referralCode }}"
                   readonly
                   style="font-size:13px; border-radius:8px; background:#0a0a0a; border:1px solid #2a2a2a; color:#afafaf; padding:10px 14px; flex:1;"
                   data-testid="referral-link-display">
            <button type="button"
                    onclick="copyToClipboard('referral-link-input', this)"
                    style="padding:10px 20px; border-radius:999px; background:#ffffff; color:#000000; font-size:14px; font-weight:600; white-space:nowrap; border:none; flex-shrink:0; cursor:pointer;"
                    data-testid="btn-copy-link">
                Copy Link
            </button>
        </div>
    </div>

    {# ── Referral QR Code ── #}
    <div class="card-body--compact dark-card mt-3 text-center" data-testid="referral-qr-section">
        <p class="text-white fw-semibold text-uppercase mb-1" style="font-size:11px; letter-spacing:.06em;">Share Your Referral Link</p>
        <p class="mb-4" style="font-size:13px; color:#afafaf;">Share this QR code so people can scan and register using your referral link.</p>
        <div id="referral-qr-canvas"
             style="display:inline-block; background:#fff; border-radius:12px; padding:12px; line-height:0; box-shadow:0 0 0 1px #2a2a2a;"
             data-referral-url="{{ url('app_register') }}?ref={{ referralCode }}"
             data-referral-code="{{ referralCode }}"
             data-site-name="{{ site_name }}"
             data-testid="referral-qr-canvas">
        </div>
        <p class="mt-3 mb-0" style="font-size:11px; color:#afafaf; letter-spacing:.03em;">Scan with your phone camera to open the registration page</p>
        <div class="mt-3">
            <button type="button"
                    id="btn-download-qr"
                    style="display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border-radius:999px; background:#ffffff; color:#000000; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:opacity .15s;"
                    onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'"
                    data-testid="btn-download-qr">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Download QR Code
            </button>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
function copyToClipboard(inputId, btn) {
    const text = document.getElementById(inputId).value;
    const original = btn.textContent.trim();
    function onSuccess() {
        btn.textContent = 'Copied!';
        btn.style.backgroundColor = '#16a34a';
        btn.style.color = '#fff';
        setTimeout(function () { btn.textContent = original; btn.style.backgroundColor = '#ffffff'; btn.style.color = '#000'; }, 2000);
    }
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(onSuccess).catch(function () { fallback(text, onSuccess); });
    } else {
        fallback(text, onSuccess);
    }
}
function fallback(text, onSuccess) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0;';
    document.body.appendChild(ta);
    ta.focus(); ta.select();
    try { document.execCommand('copy'); onSuccess(); } catch (e) {}
    document.body.removeChild(ta);
}
document.addEventListener('turbo:load', function () {
    var wrap = document.getElementById('referral-qr-canvas');
    if (!wrap || typeof QRCode === 'undefined') return;
    wrap.innerHTML = '';
    new QRCode(wrap, {
        text: wrap.dataset.referralUrl,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });
    var dlBtn = document.getElementById('btn-download-qr');
    if (dlBtn) {
        dlBtn.addEventListener('click', function () {
            var siteName = wrap.dataset.siteName || 'Agent Portal';
            var refCode  = wrap.dataset.referralCode || '';
            var qrSize   = 600;

            /* generate a high-res QR in a hidden offscreen div */
            var tempDiv = document.createElement('div');
            tempDiv.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
            document.body.appendChild(tempDiv);
            new QRCode(tempDiv, {
                text: wrap.dataset.referralUrl,
                width: qrSize,
                height: qrSize,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });

            var qrCanvas = tempDiv.querySelector('canvas');
            if (!qrCanvas) { document.body.removeChild(tempDiv); return; }

            var pad      = 72;
            var titleH   = 110;
            var footerH  = 70;
            var qrBorder = 24;
            var totalW   = qrSize + (pad + qrBorder) * 2;
            var totalH   = titleH + qrSize + (qrBorder * 2) + footerH + pad * 2;

            var out = document.createElement('canvas');
            out.width  = totalW;
            out.height = totalH;
            var ctx = out.getContext('2d');

            /* dark background */
            ctx.fillStyle = '#0a0a0a';
            ctx.fillRect(0, 0, totalW, totalH);

            /* site name */
            ctx.textAlign = 'center';
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 38px Inter, Arial, sans-serif';
            ctx.fillText(siteName, totalW / 2, pad + 42);

            /* subtitle */
            ctx.font = '600 22px Inter, Arial, sans-serif';
            ctx.fillStyle = '#afafaf';
            ctx.fillText('SCAN TO REGISTER AND WIN', totalW / 2, pad + 80);

            /* white frame behind QR so scanners can read it */
            var qrX = pad + qrBorder;
            var qrY = pad + titleH + qrBorder;
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(pad, pad + titleH, qrSize + qrBorder * 2, qrSize + qrBorder * 2);
            ctx.drawImage(qrCanvas, qrX, qrY, qrSize, qrSize);

            /* referral code */
            ctx.font = 'bold 26px "Courier New", monospace';
            ctx.fillStyle = '#ffffff';
            ctx.fillText('Code: ' + refCode, totalW / 2, pad + titleH + qrSize + qrBorder * 2 + 46);

            document.body.removeChild(tempDiv);

            var link = document.createElement('a');
            link.download = 'referral-qr.png';
            link.href = out.toDataURL('image/png');
            link.click();
        });
    }
});
</script>
{% endblock %}