@extends('adminlte::page')

@section('title', 'Statistik Shortlink - KunciLink')

@section('content_header')
    <h1><i class="fas fa-chart-bar mr-2"></i>Statistik Shortlink</h1>
@stop

@section('content')
<div class="row mb-2">
    <div class="col-md-8">
        <h4 id="statsLabel" class="mb-0">Statistik Semua Link</h4>
    </div>
    <div class="col-md-4 text-right">
        <div id="topLinks"></div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <label for="shortlinkSelect" class="font-weight-bold">Pilih Shortlink</label>
        <select id="shortlinkSelect" class="form-control">
            <option value="">-- Pilih Shortlink --</option>
            @foreach($shortlinks as $link)
                <option value="{{ $link->id }}" @if(isset($shortlink_id) && $shortlink_id == $link->id) selected @endif>
                    {{ $link->custom_label ? $link->custom_label . ' - ' : '' }}{{ $link->description ?? $link->id }} ({{ $link->id }})
                </option>
            @endforeach
        </select>
    </div>
    <div class="col-md-6 text-right align-self-end">
        <button id="exportBtn" class="btn btn-primary"><i class="fas fa-download mr-1"></i> Export</button>
    </div>
</div>

<script>
console.log('Shortlinks data from server:', @json($shortlinks));
</script>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title">Grafik Funnel (Klik → Challenge → Unlock)</h3>
            </div>
            <div class="card-body">
                <div id="funnelChart" style="height:320px;">[Grafik Funnel Placeholder]</div>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h3 class="card-title">Statistik Ringkas</h3>
            </div>
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Klik <span class="badge badge-primary badge-pill">-</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Unlock <span class="badge badge-success badge-pill">-</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Conversion Rate <span class="badge badge-warning badge-pill">-</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Top Negara <span class="badge badge-info badge-pill">-</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Top Device <span class="badge badge-info badge-pill">-</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h3 class="card-title">Grafik Harian Klik/Unlock</h3>
            </div>
            <div class="card-body">
                <div id="dailyChart" style="height:220px;">[Grafik Harian Placeholder]</div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h3 class="card-title">Pie Chart Sumber Traffic</h3>
            </div>
            <div class="card-body">
                <div id="pieChart" style="height:220px;">[Pie Chart Placeholder]</div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-light">
        <h3 class="card-title">Tabel Detail Event Funnel</h3>
    </div>
    <div class="card-body">
        <div id="eventTable">[Tabel Event Funnel Placeholder]</div>
    </div>
</div>
@stop

@push('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
<script>
// Check if jQuery and DataTables are loaded
if (typeof jQuery === 'undefined') {
    console.error('jQuery is not loaded');
} else {
    console.log('jQuery version:', jQuery.fn.jquery);
}

if (typeof $.fn.DataTable === 'undefined') {
    console.error('DataTables is not loaded');
} else {
    console.log('DataTables is loaded');
}

// Check if Chart.js is loaded
if (typeof Chart === 'undefined') {
    console.error('Chart.js is not loaded');
} else {
    console.log('Chart.js version:', Chart.version);
}

let funnelChart, dailyChart, pieChart;

function renderStats(data) {
    console.log('Received data:', data); // Debug log to see what data is received
    
    // Update label summary/detail
    const label = document.getElementById('statsLabel');
    console.log('Stats label element:', label);
    if (data.is_summary) {
        label.textContent = 'Statistik Semua Link';
    } else {
        label.textContent = 'Statistik Shortlink';
    }
    
    // Update Statistik Ringkas
    const badges = document.querySelectorAll('.list-group-item .badge');
    console.log('Badges found:', badges.length, badges);
    badges.forEach(b => b.textContent = '-');
    
    if (data.funnel) {
        console.log('Funnel data:', data.funnel);
        // Make sure we have enough list items
        if (badges.length >= 3) {
            badges[0].textContent = data.funnel.visit || 0;
            badges[1].textContent = data.funnel.unlock || 0;
            const conv = data.funnel.visit && data.funnel.unlock ? ((data.funnel.unlock / data.funnel.visit) * 100).toFixed(1) + '%' : '0%';
            badges[2].textContent = conv;
            console.log('Updated badges:', badges[0].textContent, badges[1].textContent, badges[2].textContent);
        } else {
            console.error('Not enough badges found, expected at least 3, found:', badges.length);
        }
    }
    
    if (data.countries && data.countries.length > 0) {
        if (badges.length >= 4) {
            badges[3].textContent = data.countries[0].country;
        }
    }
    
    if (data.devices && data.devices.length > 0) {
        if (badges.length >= 5) {
            badges[4].textContent = data.devices[0].device_info;
        }
    }
    
    // Render Funnel Chart
    const funnelLabels = ['Visit', 'Set', 'Challenge', 'Unlock'];
    const funnelData = [
        data.funnel?.visit || 0,
        data.funnel?.set || 0,
        data.funnel?.challenge || 0,
        data.funnel?.unlock || 0
    ];
    console.log('Funnel chart data:', funnelLabels, funnelData);
    renderBarChart('funnelChart', funnelLabels, funnelData, 'Funnel Statistik', 'rgba(54, 162, 235, 0.7)');
    
    // Render Daily Chart
    const days = Array.from(new Set((data.daily||[]).map(d => d.date)));
    const dailyVisit = days.map(day => {
        const found = (data.daily||[]).find(d => d.date === day && d.event === 'visit');
        return found ? found.total : 0;
    });
    const dailyUnlock = days.map(day => {
        const found = (data.daily||[]).find(d => d.date === day && d.event === 'unlock');
        return found ? found.total : 0;
    });
    console.log('Daily chart data:', days, dailyVisit, dailyUnlock);
    renderLineChart('dailyChart', days, dailyVisit, dailyUnlock);
    
    // Render Pie Chart Referrer
    const pieLabels = (data.referrers||[]).map(r => r.referrer || 'Direct');
    const pieData = (data.referrers||[]).map(r => r.total);
    console.log('Pie chart data:', pieLabels, pieData);
    renderPieChart('pieChart', pieLabels, pieData);
    
    // Render Event Table (JSON preview)
    // document.getElementById('eventTable').textContent = JSON.stringify(data.events, null, 2);
    console.log('Events data:', data.events);
    renderEventTable(data.events);
    
    // Render Top Links
    const topLinksDiv = document.getElementById('topLinks');
    console.log('Top links div:', topLinksDiv);
    if (data.top_links && data.top_links.length > 0) {
        topLinksDiv.innerHTML = '<b>Top 3 Shortlink (by Unlock):</b><ul>' + data.top_links.map(l => `<li><code>${l.shortlink_id}</code> (${l.unlocks} unlock)</li>`).join('') + '</ul>';
    } else {
        topLinksDiv.innerHTML = '';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing stats page');
    
    // Check if required elements exist
    const statsLabel = document.getElementById('statsLabel');
    const shortlinkSelect = document.getElementById('shortlinkSelect');
    const exportBtn = document.getElementById('exportBtn');
    
    if (!statsLabel || !shortlinkSelect || !exportBtn) {
        console.error('Required elements not found:', {
            statsLabel: !!statsLabel,
            shortlinkSelect: !!shortlinkSelect,
            exportBtn: !!exportBtn
        });
        return;
    }
    
    // Get CSRF token from meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    console.log('CSRF Token:', csrfToken);
    
    // Fetch summary atau detail saat load
    @if(isset($shortlink_id))
        console.log('Fetching data for specific shortlink: {{ $shortlink_id }}');
        fetch('/admin/stats/data/{{ $shortlink_id }}', {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            }
        })
            .then(res => {
                console.log('Received response for specific shortlink:', res.status);
                if (!res.ok) {
                    throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.json();
            })
            .then(data => {
                console.log('Received data for specific shortlink:', data);
                renderStats(data);
            })
            .catch(error => {
                console.error('Error fetching data for specific shortlink:', error);
            });
    @else
        console.log('Fetching summary data');
        fetch('/admin/stats/data', {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            }
        })
            .then(res => {
                console.log('Received response for summary:', res.status);
                if (!res.ok) {
                    throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.json();
            })
            .then(data => {
                console.log('Received summary data:', data);
                renderStats(data);
            })
            .catch(error => {
                console.error('Error fetching summary data:', error);
            });
    @endif
    
    shortlinkSelect.addEventListener('change', function() {
        const id = this.value;
        console.log('Shortlink selection changed to:', id);
        
        if (!id) {
            fetch('/admin/stats/data', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                }
            })
                .then(res => {
                    if (!res.ok) {
                        throw new Error(`HTTP error! status: ${res.status}`);
                    }
                    return res.json();
                })
                .then(renderStats)
                .catch(error => console.error('Error fetching summary data:', error));
            window.history.replaceState({}, '', '/admin/stats');
            return;
        }
        
        fetch(`/admin/stats/data/${id}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            }
        })
            .then(res => {
                if (!res.ok) {
                    throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.json();
            })
            .then(renderStats)
            .catch(error => console.error('Error fetching data for shortlink:', error));
        window.history.replaceState({}, '', `/admin/stats/${id}`);
    });
    
    exportBtn.addEventListener('click', function() {
        const id = shortlinkSelect.value;
        let url = '/admin/stats/export';
        if (id && id.trim() !== '') {
            url += '/' + id;
        }
        console.log('Export URL:', url);
        
        // Gunakan fetch dengan blob untuk download file
        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            }
        })
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.blob();
            })
            .then(blob => {
                console.log('Blob received:', blob);
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = id ? `event-funnel-${id}.csv` : 'event-funnel-summary.csv';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            })
            .catch(error => {
                console.error('Export error:', error);
                alert('Error exporting data: ' + error.message);
            });
    });
});

function renderBarChart(id, labels, data, label, color) {
    console.log(`Rendering bar chart ${id} with data:`, {labels, data, label, color});
    
    const ctx = getOrCreateCanvas(id);
    console.log(`Canvas context for ${id}:`, ctx);
    if (!ctx) {
        console.error(`Could not get canvas context for ${id}`);
        return;
    }
    
    if (window[id + '_chart']) {
        console.log(`Destroying existing chart ${id}`);
        window[id + '_chart'].destroy();
        delete window[id + '_chart'];
    }
    
    try {
        window[id + '_chart'] = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: label,
                    data: data,
                    backgroundColor: color,
                }]
            },
            options: {
                responsive: true,
                plugins: { 
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: ${context.parsed.y}`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
        console.log(`Successfully created bar chart ${id}`);
    } catch (e) {
        console.error(`Error rendering bar chart ${id}:`, e);
    }
}

function renderLineChart(id, labels, data1, data2) {
    console.log(`Rendering line chart ${id} with data:`, {labels, data1, data2});
    
    const ctx = getOrCreateCanvas(id);
    console.log(`Canvas context for ${id}:`, ctx);
    if (!ctx) {
        console.error(`Could not get canvas context for ${id}`);
        return;
    }
    
    if (window[id + '_chart']) {
        console.log(`Destroying existing chart ${id}`);
        window[id + '_chart'].destroy();
        delete window[id + '_chart'];
    }
    
    try {
        window[id + '_chart'] = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Visit',
                        data: data1,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        fill: true,
                    },
                    {
                        label: 'Unlock',
                        data: data2,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true,
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
        console.log(`Successfully created line chart ${id}`);
    } catch (e) {
        console.error(`Error rendering line chart ${id}:`, e);
    }
}

function renderPieChart(id, labels, data) {
    console.log(`Rendering pie chart ${id} with data:`, {labels, data});
    
    const ctx = getOrCreateCanvas(id);
    console.log(`Canvas context for ${id}:`, ctx);
    if (!ctx) {
        console.error(`Could not get canvas context for ${id}`);
        return;
    }
    
    // Filter out empty labels and data
    const filteredLabels = [];
    const filteredData = [];
    for (let i = 0; i < labels.length; i++) {
        if (labels[i] && data[i] > 0) {
            filteredLabels.push(labels[i]);
            filteredData.push(data[i]);
        }
    }
    
    console.log(`Filtered pie chart data:`, {filteredLabels, filteredData});
    
    if (filteredLabels.length === 0) {
        // If no data, show a message
        const el = document.getElementById(id);
        if (el) {
            el.innerHTML = '<div class="text-center text-muted" style="padding: 20px;">Tidak ada data referrer</div>';
        }
        console.log(`No data for pie chart ${id}, showing message`);
        return;
    }
    
    if (window[id + '_chart']) {
        console.log(`Destroying existing chart ${id}`);
        window[id + '_chart'].destroy();
        delete window[id + '_chart'];
    }
    
    try {
        window[id + '_chart'] = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: filteredLabels,
                datasets: [{
                    data: filteredData,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)',
                        'rgba(255, 159, 64, 0.7)'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                }
            }
        });
        console.log(`Successfully created pie chart ${id}`);
    } catch (e) {
        console.error(`Error rendering pie chart ${id}:`, e);
    }
}

function getOrCreateCanvas(id) {
    console.log(`Getting or creating canvas for ${id}`);
    
    let el = document.getElementById(id);
    console.log(`Element found for ${id}:`, el);
    if (!el) {
        console.error(`Element with id ${id} not found`);
        return null;
    }
    
    console.log(`Element tag name: ${el.tagName}`);
    
    if (el.tagName.toLowerCase() !== 'canvas') {
        console.log(`Element is not canvas, creating new canvas for ${id}`);
        el.innerHTML = '';
        const canvas = document.createElement('canvas');
        canvas.style.height = '100%';
        canvas.style.width = '100%';
        el.appendChild(canvas);
        console.log(`Created new canvas for ${id}:`, canvas);
        return canvas;
    }
    
    console.log(`Using existing canvas for ${id}`);
    return el;
}

function renderEventTable(events) {
    console.log('Rendering events table with data:', events); // Debug log
    
    const container = document.getElementById('eventTable');
    console.log('Event table container:', container);
    if (!container) {
        console.error('Event table container not found');
        return;
    }
    
    if (!events || events.length === 0) {
        container.innerHTML = '<div class="text-center text-muted">Tidak ada data event funnel.</div>';
        return;
    }
    
    let html = `<div class="table-responsive"><table id="eventFunnelTable" class="table table-striped table-bordered table-sm mb-0">
        <thead class="thead-light">
            <tr>
                <th>ID Shortlink</th>
                <th>Tanggal</th>
                <th>Event</th>
                <th>Negara</th>
                <th>Device</th>
                <th>Referrer</th>
                <th>IP</th>
            </tr>
        </thead>
        <tbody>`;
    events.forEach(ev => {
        html += `<tr>
            <td><code>${ev.shortlink_id || '-'}</code></td>
            <td>${ev.created_at ? new Date(ev.created_at).toLocaleString('id-ID') : '-'}</td>
            <td><span class="badge badge-${ev.event==='unlock'?'success':ev.event==='challenge'?'warning':ev.event==='set'?'info':'secondary'}">${ev.event || '-'}</span></td>
            <td>${ev.country || '-'}</td>
            <td>${ev.device_info || '-'}</td>
            <td>${ev.referrer || '-'}</td>
            <td>${ev.ip_address || '-'}</td>
        </tr>`;
    });
    html += '</tbody></table></div>';
    container.innerHTML = html;
    
    // Inisialisasi DataTables setelah render
    setTimeout(() => {
        if (typeof $ !== 'undefined' && $('#eventFunnelTable').length) {
            try {
                $('#eventFunnelTable').DataTable({
                    order: [[1, 'desc']],
                    pageLength: 10,
                    lengthMenu: [5, 10, 25, 50, 100],
                    language: {
                        url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
                    }
                });
                console.log('DataTables initialized successfully');
            } catch (e) {
                console.error('Error initializing DataTables:', e);
            }
        } else {
            console.log('jQuery or eventFunnelTable not found, skipping DataTables initialization');
            // Add simple sorting functionality as fallback
            if (typeof $ === 'undefined') {
                console.log('Adding simple sorting as fallback');
                // Simple fallback for sorting if jQuery is not available
                const table = document.getElementById('eventFunnelTable');
                if (table) {
                    const headers = table.querySelectorAll('thead th');
                    headers.forEach((header, index) => {
                        header.style.cursor = 'pointer';
                        header.addEventListener('click', () => {
                            sortTable(table, index);
                        });
                    });
                }
            }
        }
    }, 100);
}
</script>
@endpush