{% extends 'Admin/admin.html.twig' %}

{% block title %}{{"Accueil"|trans}} - Administration{% endblock %}

{% block body %}

{# Stats #}
<section class="row">
    <!-- Nombre total de compte -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            {{"Joueurs"|trans}}
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                            {% if total_users is not null %}  {{total_users}} {% else %} <div class="alert alert-info">Server offline</div> {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Nombre total de joueurs -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            {{"Personnages"|trans}}
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                            {{total_players}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Nombre total d'items dans la boutique -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            {{"Boutique"|trans}}</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{total_shop}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Nombres total d'article -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            {{"Article"|trans}}</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{total_news}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if server_info is not null %}
    <!-- Nombre de CPS utilisé -->
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            {{"CPS"|trans}}</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{total_news}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Temps depuis l'ouverture' -->
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Uptime
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{server_info.uptime|ago}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

</section>
{# /Stats #}

{# Graphics et listes #}
<section class="row">
    {# Playing Time #}
    <div class="col-md-2">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Overall playing time</h6>
            </div>
            <div class="card-body">
                <p>In total, players have accumulated {{total_playTime|ago}} playing time.</p>
                <p class="mb-0">On average, players have accumulated {{moyenne_play|ago}} playing time.</p>
            </div>
        </div>
    </div>
	
	
<div class="col-md-5">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Ventes des objets (hors admin/test)</h6>
        </div>
        <div class="card-body">
            {% if salesData is not empty %}
			<div class="mb-3 text-center">
    <label class="mr-2">
        <input type="radio" name="chartMode" value="units" checked>
        Le plus vendu (unités)
    </label>
    <label class="ml-3">
        <input type="radio" name="chartMode" value="dollars">
        Le plus rentable ($)
    </label>
</div>
                <canvas id="itemSalesChart" style="width: 100%; height: 400px;"></canvas>
            {% else %}
                <p class="text-muted">Aucune vente enregistrée.</p>
            {% endif %}
        </div>
    </div>
</div>	
	
	
    {# /Playing Time #}

    {# Last Registrer #}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Last registered accounts</h6>
    </div>
    <div class="card-body">
        {% if last_register is not empty %}
            <ul class="list-group">
                {% for user in last_register %}
                    <li class="list-group-item">
                        #{{ user.id }} - {{ user.username }}<br>
                        <small class="text-muted">Inscrit le {{ user.date|date('d/m/Y à H:i') }}</small>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>Aucun compte récent trouvé.</p>
        {% endif %}
    </div>
</div>
    {# /Last Register #}

    {# Online Players #}
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Online Players</h6>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for player in online_players %}
                    <a href="{{path('admin.character.detail', {'character':player.Id})}}" class="list-group-item list-group-item-action" aria-current="true">
                       {{player.Name}} | Lv.{{player.Level}} | {{player.ClassName}}
                    </a>
                    {% else %}
                        <div class="alert alert-info">
                            No player online
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {# /Online Players #}
	
	
	    {# Revenue #}
	
<div class="col-md-3">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Revenus Steam</h6>
        </div>
        <div class="card-body">
{% if revenues is not empty %}
    {% set total_revenue = revenues|map(v => v)|reduce((carry, item) => carry + item) %}
    <p class="mb-2 font-weight-bold text-success">Total : {{ total_revenue|number_format(2, '.', ' ') }} $</p>

<div id="googlePieChart" style="width: 100%; max-width: 500px; height: 400px; margin: auto;"></div>


{% else %}
    <p class="text-muted">Aucun revenu Steam enregistré.</p>
{% endif %}
</div>
    </div>
</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    const data = google.visualization.arrayToDataTable([
      ['Montant', 'Total $'],
      {% for label, value in revenues %}
        ['{{ label }}', {{ value|replace({',': '.'}) }}],
      {% endfor %}
    ]);

    const options = {
      title: 'Revenus Steam',
      pieHole: 0.4,
      chartArea: {width: '90%', height: '80%'},
      legend: { position: 'bottom' }
    };

    const chart = new google.visualization.PieChart(document.getElementById('googlePieChart'));
    chart.draw(data, options);
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('itemSalesChart');
    if (!canvas) return;

    // Données PHP → JS
    const sales = [
        {% for row in salesData %}
            {
                name: "{{ row.name|e('js') }}",
                price: {{ row.price }},
                total: {{ row.total }}
            },
        {% endfor %}
    ];

    const conversionTable = [
        { mc: 250, dollars: 4.99 },
        { mc: 550, dollars: 9.99 },
        { mc: 900, dollars: 14.99 },
        { mc: 1500, dollars: 24.99 },
        { mc: 3200, dollars: 49.99 }
    ];

    function convertMcToDollars(mc) {
        for (let i = 1; i < conversionTable.length; i++) {
            const prev = conversionTable[i - 1];
            const curr = conversionTable[i];
            if (mc <= curr.mc) {
                const ratio = (mc - prev.mc) / (curr.mc - prev.mc);
                return prev.dollars + ratio * (curr.dollars - prev.dollars);
            }
        }
        const last = conversionTable[conversionTable.length - 1];
        return mc * (last.dollars / last.mc);
    }

    const chartData = {
        units: {
            labels: sales.map(s => s.name),
            data: sales.map(s => s.total)
        },
        dollars: {
            labels: sales.map(s => s.name),
            data: sales.map(s => convertMcToDollars(s.price * s.total))
        }
    };

    const chart = new Chart(canvas, {
        type: 'bar',
        data: {
            labels: chartData.units.labels,
            datasets: [{
                label: 'Nombre de ventes',
                data: chartData.units.data,
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            indexAxis: 'y',
            scales: {
                x: { beginAtZero: true }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const index = context.dataIndex;
                            const item = sales[index];
                            const totalMC = item.price * item.total;
                            const totalDollars = convertMcToDollars(totalMC);
                            return [
                                `Nombre de ventes : ${item.total}`,
                                `Total MC dépensés : ${totalMC}`,
                                `Équivalent $ : ${totalDollars.toFixed(2)}`
                            ];
                        }
                    }
                }
            }
        }
    });

    // Gestion des boutons radio
    document.querySelectorAll('input[name="chartMode"]').forEach(radio => {
        radio.addEventListener('change', function () {
            const mode = this.value;
            chart.data.labels = chartData[mode].labels;
            chart.data.datasets[0].label = mode === 'dollars' ? 'Revenus générés ($)' : 'Nombre de ventes';
            chart.data.datasets[0].data = chartData[mode].data;
            chart.update();
        });
    });
});
</script>


	
	
	    {# /Revenue #}
	
</section>
{% endblock %}