@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h2 class="mb-4">Statistiques</h2>

    {{-- 🔹 Formulaire de filtre --}}
    <form id="statsForm" class="mb-4">
        @csrf
        <div class="form-row">
            <div class="col-md-3">
                <label for="user_id">Utilisateur</label>
                <select id="user_id" name="user_id" class="form-control">
                    <option value="">Tous les utilisateurs</option>
                    @php
                        $allUsers = $allUsers ?? \App\Models\Account::orderBy('user_name')->get(['id','user_name']);
                    @endphp
                    @foreach($allUsers as $u)
                        <option value="{{ $u->id }}">{{ $u->user_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label for="date_debut">Date de début</label>
                <input type="date" id="date_debut" name="date_debut" class="form-control" value="{{ $defaultStartDate ?? '' }}">
            </div>

            <div class="col-md-3">
                <label for="date_fin">Date de fin</label>
                <input type="date" id="date_fin" name="date_fin" class="form-control" value="{{ $defaultEndDate ?? '' }}">
            </div>

            <div class="col-md-3">
                <button id="submitBtn" type="submit" class="btn btn-primary btn-block mt-4 mt-md-0">
                    Actualiser
                </button>
            </div>
        </div>
    </form>

    {{-- 🔹 Overlay chargement global --}}
    <div id="loadingOverlay" class="loading-overlay" style="display:none;">
        <div class="spinner-border" role="status">
            <span class="sr-only">Chargement…</span>
        </div>
    </div>

    {{-- 🔹 Tableau des numéros de série (server-side DataTables) --}}
    <div id="serialsAggWrapper" class="mt-4" style="display:none;">
        <h5 id="dynamicTitle" class="mb-3 text-primary"></h5>

        <div class="table-responsive">
            <table id="serialsTable" class="display table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Date</th>
                        <th>Numéro de série</th>
                        <th>Modèle</th>
                        <th>État</th>
                        <th>Garantie</th>
                        <th>Historique</th>
                        <th>PDF</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- 🔹 Graphiques --}}
    <div id="chartsWrapper" style="display:none;">
        <div class="row">

            {{-- Produits --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Produits les plus vendus</h5>
                        <div class="chart-box"><canvas id="chartProducts"></canvas></div>
                        <div id="chartProducts-legend" class="chart-widget-list mt-3 legend-scroll"></div>
                    </div>
                </div>
            </div>

            {{-- Vendeurs --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Numéros de série par vendeur</h5>
                        <div class="chart-box"><canvas id="chartVendors"></canvas></div>
                        <div id="chartVendors-legend" class="chart-widget-list mt-3 legend-scroll"></div>
                    </div>
                </div>
            </div>

            {{-- Courbe temporelle --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Ventes par période</h5>
                        <div class="chart-box"><canvas id="chartTimeseries"></canvas></div>
                        <div id="granularityControls" class="d-flex justify-content-center mt-2">
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="day" checked> Jour
                            </label>
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="month"> Mois
                            </label>
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="year"> Année
                            </label>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

{{-- 🔹 Libs --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
.chart-box{
    height:280px;
    position:relative;
}
.chart-widget-list p{
    display:flex;
    justify-content:space-between;
    margin-bottom:5px;
}
.legend-scroll{
    max-height:120px;
    overflow:auto;
}
.loading-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.6);
    z-index:2000;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
    console.log('dashboard JS loaded');

    const startEl  = document.getElementById('date_debut');
    const endEl    = document.getElementById('date_fin');
    const userEl   = document.getElementById('user_id');
    const chartsEl = document.getElementById('chartsWrapper');
    const overlay  = document.getElementById('loadingOverlay');

    const titleEl  = document.getElementById('dynamicTitle');

    let serialsDT  = null;

    // Date de début par défaut = 1er janvier de l'année en cours si vide
    if (!startEl.value) {
        const y = new Date().getFullYear();
        startEl.value = `${y}-01-01`;
    }

    if (!endEl.value) {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0');
        const dd = String(today.getDate()).padStart(2, '0');
        endEl.value = `${yyyy}-${mm}-${dd}`;
    }

    function readInputValue(id){
        if (window.jQuery) {
            return String($('#' + id).val() || '').trim();
        }
        const el = document.getElementById(id);
        return el ? String(el.value || '').trim() : '';
    }

    function normalizeDateValue(raw){
        if (!raw) return '';
        const value = String(raw).trim();

        // Native input[type=date] value format.
        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
            return value;
        }

        // Fallback for datepicker/localized format MM/DD/YYYY.
        const us = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
        if (us) {
            const mm = us[1].padStart(2, '0');
            const dd = us[2].padStart(2, '0');
            const yyyy = us[3];
            return `${yyyy}-${mm}-${dd}`;
        }

        return value;
    }

    function getCurrentFilters(){
        const userId = readInputValue('user_id');
        const dateDebut = normalizeDateValue(readInputValue('date_debut'));
        const dateFin = normalizeDateValue(readInputValue('date_fin'));

        return {
            user_id: userId,
            date_debut: dateDebut,
            date_fin: dateFin,
            granularity: getGranularity(),
        };
    }

    function ensureDateFilters(filters){
        if (!filters.date_debut || !filters.date_fin) {
            console.warn('[dashboard] Dates manquantes, requête annulée pour éviter un chargement massif.', filters);
            return false;
        }
        return true;
    }

    function showLoading(on){
        overlay.style.display = on ? 'flex' : 'none';
    }

    function getGranularity(){
        const g = document.querySelector('input[name="granularity"]:checked');
        return g ? g.value : 'day';
    }

    function buildParams(){
        const filters = getCurrentFilters();
        const p = [];
        if (filters.user_id)    p.push('user_id=' + encodeURIComponent(filters.user_id));
        if (filters.date_debut) p.push('date_debut=' + encodeURIComponent(filters.date_debut));
        if (filters.date_fin)   p.push('date_fin=' + encodeURIComponent(filters.date_fin));
        p.push('granularity=' + filters.granularity);
        return '?' + p.join('&');
    }

    async function fetchStats(){
        const filters = getCurrentFilters();
        if (!ensureDateFilters(filters)) {
            return { products:{labels:[],data:[]}, vendors:{labels:[],data:[]}, timeseries:{labels:[],data:[]} };
        }

        console.log('[dashboard][stats] params', filters);
        const url = '{{ route('pages.dashboard.stats') }}' + buildParams();
        const res = await fetch(url, { headers:{ Accept:'application/json' }});
        if (!res.ok) throw new Error('HTTP ' + res.status);
        return res.json();
    }

    // --------------------- CHARTS ----------------------
    function destroyChart(id){
        const c = Chart.getChart(id);
        if (c) c.destroy();
    }

    function renderPie(id, labels, data){
        destroyChart(id);
        return new Chart(document.getElementById(id), {
            type: 'pie',
            data: {
                labels,
                datasets: [{
                    data,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }

    function renderLine(id, labels, data){
        destroyChart(id);
        return new Chart(document.getElementById(id), {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Ventes',
                    data,
                    borderWidth: 2,
                    fill: false,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display:false } }
            }
        });
    }

    function updateTitle(){
        const filters = getCurrentFilters();
        const start = filters.date_debut || 'début';
        const end   = filters.date_fin || 'aujourd\'hui';

        let userName = 'tous les utilisateurs';
        if (filters.user_id) {
            userName = userEl.options[userEl.selectedIndex].text;
        }

        titleEl.innerText = `Numéros de série de ${userName} entre le ${start} et le ${end}`;
    }

    // ------------------ DATATABLE SERVER-SIDE ----------------------
    function initSerialsDT(){
        if (serialsDT) return serialsDT;

        serialsDT = $('#serialsTable').DataTable({
            serverSide: true,
            processing: true,
            searching: true,        // ⛔ pas de recherche pour l’instant
            deferRender: true,
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            order: [[0, 'desc']],    // date desc
            ajax: {
                url: '{{ route('pages.dashboard.serialsData') }}',
                type: 'GET',
                data: function (d) {
                    const filters = getCurrentFilters();

                    if (!ensureDateFilters(filters)) {
                        d.user_id = filters.user_id;
                        d.date_debut = '1900-01-01';
                        d.date_fin = '1900-01-01';
                        console.warn('[dashboard][datatable] params forced to empty-safe range due to missing dates', filters);
                        return;
                    }

                    d.user_id    = filters.user_id;
                    d.date_debut = filters.date_debut;
                    d.date_fin   = filters.date_fin;

                    console.log('[dashboard][datatable] params', {
                        user_id: d.user_id,
                        date_debut: d.date_debut,
                        date_fin: d.date_fin
                    });
                }
            },
            language: {
                lengthMenu:   "Afficher _MENU_ enregistrements par page",
                zeroRecords:  "Aucun enregistrement trouvé",
                info:         "Affichage de _START_ à _END_ sur _TOTAL_ enregistrements",
                infoEmpty:    "Aucun enregistrement disponible",
                infoFiltered: "(filtré sur _MAX_ enregistrements)",
                paginate: {
                    first:    "Premier",
                    last:     "Dernier",
                    next:     "Suivant",
                    previous: "Précédent"
                }
            },
            columns: [
                { data: 'checkbox', orderable: false, searchable: false },
                { data: 'date' },
                { data: 'sn' },
                { data: 'model' },
                { data: 'state' },
                { data: 'warranty' },
                { data: 'history', orderable:false, searchable:false },
                { data: 'pdf', orderable:false, searchable:false }
            ]
        });
        return serialsDT;
    }

    // --------------- REFRESH GLOBAL --------------------
    async function refreshAll(){
    showLoading(true);
    try {
        const filters = getCurrentFilters();
        if (!ensureDateFilters(filters)) {
            chartsEl.style.display = 'none';
            document.getElementById('serialsAggWrapper').style.display = 'none';
            updateTitle();
            return;
        }

        const json = await fetchStats();

        if (json.products) {
            renderPie('chartProducts', json.products.labels, json.products.data);
        }
        if (json.vendors) {
            renderPie('chartVendors', json.vendors.labels, json.vendors.data);
        }
        if (json.timeseries) {
            renderLine('chartTimeseries', json.timeseries.labels, json.timeseries.data);
        }

        chartsEl.style.display = 'block';

        const dt = initSerialsDT();
        updateTitle();
        dt.ajax.reload(null, false);

        document.getElementById('serialsAggWrapper').style.display = 'block';

    } catch(e) {
        console.error('refreshAll error', e);
    } finally {
        showLoading(false);
    }
}

    // ----------------- ÉVÉNEMENTS -----------------------
    document.getElementById('statsForm').addEventListener('submit', function(e){
        e.preventDefault();
        refreshAll();
    });

    document.getElementById('granularityControls').addEventListener('change', function(){
        refreshAll();
    });

    userEl.addEventListener('change', refreshAll);
    startEl.addEventListener('change', refreshAll);
    endEl.addEventListener('change', refreshAll);

    // Premier chargement
    // Bulk transfer listener désactivé temporairement :
    // document.getElementById('bulk-transfer-form').addEventListener('submit', function(e){
    //     e.preventDefault();
    //
    //     // Supprimer les anciens inputs hidden
    //     const form = e.target;
    //     form.querySelectorAll('input[name="selected_serials[]"], input[name^="states["]').forEach(el => el.remove());
    //
    //     // Récupérer les cases cochées
    //     const checked = Array.from(document.querySelectorAll('.serial-checkbox:checked'));
    //     if (checked.length === 0) {
    //         alert('Sélectionnez au moins un numéro de série.');
    //         return;
    //     }
    //
    //     // Récupérer la valeur du select global_state
    //     const state = document.getElementById('global_state').value;
    //
    //     // Créer les nouveaux inputs hidden pour chaque SN
    //     checked.forEach(cb => {
    //         const sn = cb.value;
    //         // selected_serials[]
    //         const inputSN = document.createElement('input');
    //         inputSN.type = 'hidden';
    //         inputSN.name = 'selected_serials[]';
    //         inputSN.value = sn;
    //         form.appendChild(inputSN);
    //
    //         // states[SN]
    //         const inputState = document.createElement('input');
    //         inputState.type = 'hidden';
    //         inputState.name = `states[${sn}]`;
    //         inputState.value = state;
    //         form.appendChild(inputState);
    //     });
    //
    //     form.submit();
    // });

    refreshAll();
});
</script>

@endsection