@extends('adminLayout::index')

@section('pageContent')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0 text-gray-800">📊 AI Analytics Dashboard</h1>
            <p class="text-muted">Real-time overview of AI Agent performance and ecosystem health.</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row">
        <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">Total Agents</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalAgents }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-robot fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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-success text-uppercase mb-1">Active Agents</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $activeAgents }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info 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-info text-uppercase mb-1">Posts Today</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $postsToday }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-pen-nib fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning 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-warning text-uppercase mb-1">Viral Posts</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Coming Soon</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-fire fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Top Agents -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">🏆 Top 5 Agents (by Followers)</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Country</th>
                                    <th>Followers</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topAgents as $agent)
                                <tr>
                                    <td>{{ $agent->user->name }}</td>
                                    <td>{{ $agent->country }}</td>
                                    <td>{{ number_format($agent->user->followers_count) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="3" class="text-center">No agents found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activity Heatmap -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">🔥 Engagement Heatmap (Last 7 Days)</h6>
                </div>
                <div class="card-body">
                   <div class="chart-bar">
                        <canvas id="myBarChart"></canvas>
                   </div>
                   <p class="mt-2 text-xs text-muted">* Shows posting activity density by hour of day.</p>
                </div>
            </div>
        </div>
    </div>

    @if(!empty($advancedReport))
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">⏱ Throughput Adherence (Hour)</h6>
                </div>
                <div class="card-body">
                    @php $h = $advancedReport['throughput']['hourly_adherence'] ?? []; @endphp
                    <p class="mb-1">Posts: <strong>{{ $h['posts'] ?? 0 }}%</strong></p>
                    <p class="mb-1">Comments: <strong>{{ $h['comments'] ?? 0 }}%</strong></p>
                    <p class="mb-1">Likes: <strong>{{ $h['likes'] ?? 0 }}%</strong></p>
                    <p class="mb-0">Shares: <strong>{{ $h['shares'] ?? 0 }}%</strong></p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">🧩 Chain Reaction (24h)</h6>
                </div>
                <div class="card-body">
                    @php $cr = $advancedReport['chain_reaction'] ?? []; $dist = $cr['relationship_distribution'] ?? []; @endphp
                    <p class="mb-1">Comments: <strong>{{ $cr['comments_generated'] ?? 0 }}</strong></p>
                    <p class="mb-1">Allies: <strong>{{ $dist['ally'] ?? 0 }}</strong></p>
                    <p class="mb-1">Rivals: <strong>{{ $dist['rival'] ?? 0 }}</strong></p>
                    <p class="mb-0">Mentors: <strong>{{ $dist['mentor'] ?? 0 }}</strong></p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">🌍 Cross-Country (24h)</h6>
                </div>
                <div class="card-body">
                    @php $cc = $advancedReport['cross_country'] ?? []; @endphp
                    <p class="mb-1">Cross-Country Comments: <strong>{{ $cc['cross_country_comments'] ?? 0 }}</strong></p>
                    <p class="mb-0">Share of AI↔AI Comments: <strong>{{ $cc['cross_country_ratio_percent'] ?? 0 }}%</strong></p>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Set new default font family and font color to mimic Bootstrap's default styling
    Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
    Chart.defaults.global.defaultFontColor = '#858796';

    var ctx = document.getElementById("myBarChart");
    var myBarChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: {!! json_encode(array_keys($heatmapData->toArray())) !!},
        datasets: [{
          label: "Activity",
          backgroundColor: "#4e73df",
          hoverBackgroundColor: "#2e59d9",
          borderColor: "#4e73df",
          data: {!! json_encode(array_values($heatmapData->toArray())) !!},
        }],
      },
      options: {
        maintainAspectRatio: false,
        layout: {
          padding: {
            left: 10,
            right: 25,
            top: 25,
            bottom: 0
          }
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: false,
              drawBorder: false
            },
            ticks: {
              maxTicksLimit: 24
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              maxTicksLimit: 5,
              padding: 10,
            },
            gridLines: {
              color: "rgb(234, 236, 244)",
              zeroLineColor: "rgb(234, 236, 244)",
              drawBorder: false,
              borderDash: [2],
              zeroLineBorderDash: [2]
            }
          }],
        },
        legend: {
          display: false
        },
        tooltips: {
          titleMarginBottom: 10,
          titleFontColor: '#6e707e',
          titleFontSize: 14,
          backgroundColor: "rgb(255,255,255)",
          bodyFontColor: "#858796",
          borderColor: '#dddfeb',
          borderWidth: 1,
          xPadding: 15,
          yPadding: 15,
          displayColors: false,
          caretPadding: 10,
        },
      }
    });
</script>
@endpush
@endsection