@extends('layouts.app')

@section('title', 'Analytics')

@section('content')
    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Overview Analytics</h2>
            <p class="text-sm text-gray-500">Performanța conturilor tale în ultimele 7 zile.</p>
        </div>
        <div class="flex bg-white border border-gray-200 rounded-lg p-1 shadow-sm">
            <button class="px-4 py-1.5 text-xs font-bold bg-orange-50 text-[#FF6900] rounded-md">7 Zile</button>
            <button class="px-4 py-1.5 text-xs font-bold text-gray-500 hover:bg-gray-50 rounded-md">30 Zile</button>
            <button class="px-4 py-1.5 text-xs font-bold text-gray-500 hover:bg-gray-50 rounded-md">3 Luni</button>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between h-32">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Total Audiență</p>
                    <h3 class="text-2xl font-extrabold text-gray-800 mt-1">{{ number_format($stats['total_audience']) }}</h3>
                </div>
                <div class="p-2 bg-blue-50 text-blue-600 rounded-lg"><i class="fas fa-users text-lg"></i></div>
            </div>
            <div class="text-xs font-bold text-green-500 flex items-center gap-1">
                <i class="fas fa-arrow-up"></i> {{ $stats['growth'] }} vs săptămâna trecută
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between h-32">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Engagement</p>
                    <h3 class="text-2xl font-extrabold text-gray-800 mt-1">{{ $stats['engagement'] }}</h3>
                </div>
                <div class="p-2 bg-pink-50 text-pink-600 rounded-lg"><i class="fas fa-heart text-lg"></i></div>
            </div>
            <div class="text-xs font-bold text-gray-400">Avg. per post</div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between h-32">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Postări Totale</p>
                    <h3 class="text-2xl font-extrabold text-gray-800 mt-1">{{ $stats['total_posts'] }}</h3>
                </div>
                <div class="p-2 bg-orange-50 text-orange-600 rounded-lg"><i class="fas fa-paper-plane text-lg"></i></div>
            </div>
            <div class="text-xs font-bold text-gray-400">În toate conturile</div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between h-32">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Reach Estimativ</p>
                    <h3 class="text-2xl font-extrabold text-gray-800 mt-1">{{ number_format($stats['total_audience'] * 1.5) }}</h3>
                </div>
                <div class="p-2 bg-green-50 text-green-600 rounded-lg"><i class="fas fa-eye text-lg"></i></div>
            </div>
            <div class="text-xs font-bold text-green-500"><i class="fas fa-arrow-up"></i> 5.2% Organic</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        
        <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-gray-800 text-lg flex items-center gap-2">
                    <i class="fas fa-chart-line text-[#FF6900]"></i> Evoluție Interacțiuni
                </h3>
                <button class="text-xs text-gray-400 hover:text-gray-600"><i class="fas fa-download"></i> Export CSV</button>
            </div>
            <div class="relative h-72">
                <canvas id="mainChart"></canvas>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <h3 class="font-bold text-gray-800 text-lg mb-6">Distribuție Platforme</h3>
            <div class="relative h-48 mb-4">
                <canvas id="pieChart"></canvas>
            </div>
            <div class="space-y-3">
                <div class="flex justify-between items-center text-sm">
                    <span class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-blue-600"></span> Facebook</span>
                    <span class="font-bold text-gray-700">65%</span>
                </div>
                <div class="flex justify-between items-center text-sm">
                    <span class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-pink-500"></span> Instagram</span>
                    <span class="font-bold text-gray-700">35%</span>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <h3 class="font-bold text-gray-800">Top Conturi Performante</h3>
            <a href="/pages" class="text-xs font-bold text-[#FF6900] hover:underline">Vezi toate</a>
        </div>
        <table class="w-full text-left text-sm">
            <thead class="bg-white text-xs font-bold text-gray-400 uppercase border-b border-gray-100">
                <tr>
                    <th class="px-6 py-3">Nume Cont</th>
                    <th class="px-6 py-3">Audiență</th>
                    <th class="px-6 py-3 text-center">Status</th>
                    <th class="px-6 py-3 text-right">Acțiuni</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($pages->take(5) as $page)
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4 flex items-center gap-3">
                        <img src="{{ $page->profile_picture ?? 'https://ui-avatars.com/api/?name='.urlencode($page->name) }}" class="w-8 h-8 rounded-full border border-gray-200">
                        <div>
                            <div class="font-bold text-gray-800">{{ $page->name }}</div>
                            <div class="text-[10px] text-gray-400 uppercase">{{ $page->platform }}</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 font-mono font-bold text-gray-600">
                        {{ number_format($page->followers) }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-[10px] font-bold uppercase border border-green-200">Active</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <a href="/deep-sync/{{ $page->id }}" class="text-[#FF6900] hover:bg-orange-50 px-3 py-1 rounded text-xs font-bold transition">Sync</a>
                    </td>
                </tr>
                @endforeach
                @if($pages->isEmpty())
                <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400 italic">Nu există date. Conectează un cont!</td></tr>
                @endif
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Date primite din Laravel
        const labels = {!! json_encode($chartLabels) !!};
        const fbData = {!! json_encode($chartDataFB) !!};
        const igData = {!! json_encode($chartDataIG) !!};

        // 1. Line Chart
        const ctx = document.getElementById('mainChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Facebook',
                        data: fbData,
                        borderColor: '#2563EB', // Blue
                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Instagram',
                        data: igData,
                        borderColor: '#EC4899', // Pink
                        backgroundColor: 'rgba(236, 72, 153, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' }
                },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                }
            }
        });

        // 2. Pie Chart
        const ctxPie = document.getElementById('pieChart').getContext('2d');
        new Chart(ctxPie, {
            type: 'doughnut',
            data: {
                labels: ['Facebook', 'Instagram'],
                datasets: [{
                    data: [65, 35], // Aici poti pune date reale mai tarziu
                    backgroundColor: ['#2563EB', '#EC4899'],
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: { legend: { display: false } }
            }
        });
    </script>
@endsection