@extends('layouts.dashboard')

@section('title', 'CEO Dashboard - Media World')
@section('page-title', 'CEO Dashboard - Executive Overview')

@section('content')
<!-- Key Metrics Overview -->
<div class="grid md:grid-cols-4 gap-6 mb-8">
    <!-- Total Revenue -->
    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm mb-1">Total Revenue (30d)</p>
                <h3 class="text-3xl font-bold" id="totalRevenue">-</h3>
                <p class="text-green-100 text-xs mt-2" id="revenueGrowth">-</p>
            </div>
            <i class="fas fa-dollar-sign text-5xl text-green-200"></i>
        </div>
    </div>

    <!-- Active Subscribers -->
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm mb-1">Active Subscribers</p>
                <h3 class="text-3xl font-bold" id="activeSubscribers">-</h3>
                <p class="text-blue-100 text-xs mt-2" id="subscribersGrowth">-</p>
            </div>
            <i class="fas fa-users text-5xl text-blue-200"></i>
        </div>
    </div>

    <!-- Campaign Performance -->
    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm mb-1">Avg Conversion Rate</p>
                <h3 class="text-3xl font-bold" id="avgConversion">-</h3>
                <p class="text-purple-100 text-xs mt-2" id="conversionTrend">-</p>
            </div>
            <i class="fas fa-chart-line text-5xl text-purple-200"></i>
        </div>
    </div>

    <!-- New Signups (30d) -->
    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-orange-100 text-sm mb-1">New Signups (30d)</p>
                <h3 class="text-3xl font-bold" id="newSignups">-</h3>
                <p class="text-orange-100 text-xs mt-2" id="signupsGrowth">-</p>
            </div>
            <i class="fas fa-user-plus text-5xl text-orange-200"></i>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="grid md:grid-cols-2 gap-6 mb-8">
    <!-- Revenue Trend -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-xl font-bold text-gray-800 mb-4">
            <i class="fas fa-chart-area text-green-600 mr-2"></i>
            Revenue Trend (Last 30 Days)
        </h3>
        <canvas id="revenueChart" style="max-height: 300px;"></canvas>
    </div>

    <!-- Subscriber Growth -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-xl font-bold text-gray-800 mb-4">
            <i class="fas fa-users text-blue-600 mr-2"></i>
            Subscriber Growth (Last 30 Days)
        </h3>
        <canvas id="subscriberChart" style="max-height: 300px;"></canvas>
    </div>
</div>

<!-- Top Campaigns Performance -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-trophy text-yellow-500 mr-2"></i>
        Top Performing Campaigns (Last 30 Days)
    </h3>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-100">
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Rank</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Campaign</th>
                    <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Visits</th>
                    <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Conversions</th>
                    <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Rate</th>
                    <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Revenue</th>
                </tr>
            </thead>
            <tbody id="topCampaignsBody">
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-spinner fa-spin text-3xl mb-2"></i>
                        <p>Loading campaign data...</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Quick Stats Grid -->
<div class="grid md:grid-cols-3 gap-6">
    <!-- Today's Performance -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-calendar-day text-indigo-600 mr-2"></i>
            Today's Performance
        </h3>
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-gray-600">New Subscribers</span>
                <span class="font-bold text-gray-800" id="todaySubscribers">-</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Revenue</span>
                <span class="font-bold text-green-600" id="todayRevenue">-</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Active Users</span>
                <span class="font-bold text-blue-600" id="todayActive">-</span>
            </div>
        </div>
    </div>

    <!-- Service Performance -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-server text-purple-600 mr-2"></i>
            Service Distribution
        </h3>
        <canvas id="serviceChart" style="max-height: 200px;"></canvas>
    </div>

    <!-- Key Insights -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
            Key Insights
        </h3>
        <div class="space-y-3" id="keyInsights">
            <div class="flex items-start">
                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                <p class="text-sm text-gray-600">Loading insights...</p>
            </div>
        </div>
    </div>
</div>

<script>
let revenueChart, subscriberChart, serviceChart;

// Load executive dashboard data
async function loadExecutiveDashboard() {
    try {
        // Load all data
        const [campaignData, dashboardData] = await Promise.all([
            fetch('{{ route('dashboard.campaigns.api') }}?days=30', {
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            }).then(r => r.json()),
            fetch('{{ route('dashboard.executive.api') }}', {
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            }).then(r => r.json())
        ]);

        updateMetrics(campaignData, dashboardData);
        updateCharts(dashboardData);
        updateTopCampaigns(campaignData.campaigns);
        updateInsights(campaignData, dashboardData);
    } catch (error) {
        console.error('Error loading dashboard:', error);
    }
}

function updateMetrics(campaignData, dashboardData) {
    // Revenue
    document.getElementById('totalRevenue').textContent = 
        dashboardData.revenue.total.toLocaleString() + ' JOD';
    document.getElementById('revenueGrowth').textContent = 
        (dashboardData.revenue.growth >= 0 ? '↑' : '↓') + ' ' + Math.abs(dashboardData.revenue.growth).toFixed(1) + '% vs last period';

    // Subscribers
    document.getElementById('activeSubscribers').textContent = 
        dashboardData.subscribers.active.toLocaleString();
    document.getElementById('subscribersGrowth').textContent = 
        '↑ ' + dashboardData.subscribers.new_30d.toLocaleString() + ' new this month';

    // Conversion
    document.getElementById('avgConversion').textContent = 
        campaignData.summary.avg_conversion_rate.toFixed(2) + '%';
    document.getElementById('conversionTrend').textContent = 
        campaignData.summary.total_subscriptions.toLocaleString() + ' conversions';

    // New Signups
    document.getElementById('newSignups').textContent = 
        dashboardData.subscribers.new_30d.toLocaleString();
    document.getElementById('signupsGrowth').textContent = 
        'From ' + campaignData.summary.total_visits.toLocaleString() + ' visits';

    // Today's stats
    document.getElementById('todaySubscribers').textContent = dashboardData.today.new_signups.toLocaleString();
    document.getElementById('todayRevenue').textContent = dashboardData.today.revenue.toLocaleString() + ' JOD';
    document.getElementById('todayActive').textContent = dashboardData.today.active_today.toLocaleString();
}

function updateCharts(data) {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    if (revenueChart) revenueChart.destroy();
    revenueChart = new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: data.charts.revenue.labels,
            datasets: [{
                label: 'Revenue (JOD)',
                data: data.charts.revenue.data,
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });

    // Subscriber Chart
    const subCtx = document.getElementById('subscriberChart').getContext('2d');
    if (subscriberChart) subscriberChart.destroy();
    subscriberChart = new Chart(subCtx, {
        type: 'line',
        data: {
            labels: data.charts.subscribers.labels,
            datasets: [{
                label: 'New Subscribers',
                data: data.charts.subscribers.data,
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });

    // Service Distribution Chart
    const svcCtx = document.getElementById('serviceChart').getContext('2d');
    if (serviceChart) serviceChart.destroy();
    serviceChart = new Chart(svcCtx, {
        type: 'doughnut',
        data: {
            labels: data.charts.services.labels,
            datasets: [{
                data: data.charts.services.data,
                backgroundColor: ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } }
        }
    });
}

function updateTopCampaigns(campaigns) {
    const tbody = document.getElementById('topCampaignsBody');
    const topCampaigns = campaigns.slice(0, 5);

    if (topCampaigns.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No campaign data available</td></tr>';
        return;
    }

    tbody.innerHTML = topCampaigns.map((campaign, index) => `
        <tr class="border-b hover:bg-gray-50">
            <td class="px-4 py-3">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full ${
                    index === 0 ? 'bg-yellow-100 text-yellow-800' :
                    index === 1 ? 'bg-gray-100 text-gray-800' :
                    index === 2 ? 'bg-orange-100 text-orange-800' :
                    'bg-gray-50 text-gray-600'
                } font-bold text-sm">
                    ${index + 1}
                </span>
            </td>
            <td class="px-4 py-3">
                <span class="font-semibold text-indigo-600">${campaign.campaign_id}</span>
            </td>
            <td class="px-4 py-3 text-right">${campaign.visits.toLocaleString()}</td>
            <td class="px-4 py-3 text-right">
                <span class="font-semibold text-green-600">${campaign.subscriptions.toLocaleString()}</span>
            </td>
            <td class="px-4 py-3 text-right">
                <span class="px-2 py-1 rounded text-sm ${
                    campaign.conversion_rate >= 5 ? 'bg-green-100 text-green-800' :
                    campaign.conversion_rate >= 2 ? 'bg-yellow-100 text-yellow-800' :
                    'bg-red-100 text-red-800'
                }">
                    ${campaign.conversion_rate.toFixed(2)}%
                </span>
            </td>
            <td class="px-4 py-3 text-right font-semibold">${campaign.revenue.toLocaleString()} JOD</td>
        </tr>
    `).join('');
}

function updateInsights(campaignData, dashboardData) {
    const insights = [];
    
    if (dashboardData.revenue.growth > 10) {
        insights.push({ icon: 'arrow-up', color: 'green', text: `Revenue up ${dashboardData.revenue.growth.toFixed(1)}% - Strong growth!` });
    }
    
    if (campaignData.summary.avg_conversion_rate > 5) {
        insights.push({ icon: 'star', color: 'yellow', text: `Excellent conversion rate at ${campaignData.summary.avg_conversion_rate.toFixed(2)}%` });
    } else if (campaignData.summary.avg_conversion_rate < 2) {
        insights.push({ icon: 'exclamation-triangle', color: 'orange', text: 'Conversion rate needs attention' });
    }
    
    if (dashboardData.subscribers.new_30d > 100) {
        insights.push({ icon: 'chart-line', color: 'blue', text: `${dashboardData.subscribers.new_30d} new subscribers this month` });
    }

    const html = insights.length > 0 
        ? insights.map(i => `
            <div class="flex items-start">
                <i class="fas fa-${i.icon} text-${i.color}-500 mt-1 mr-2"></i>
                <p class="text-sm text-gray-600">${i.text}</p>
            </div>
        `).join('')
        : '<p class="text-sm text-gray-500">No significant insights at this time</p>';
    
    document.getElementById('keyInsights').innerHTML = html;
}

// Load dashboard on page load
document.addEventListener('DOMContentLoaded', loadExecutiveDashboard);

// Auto-refresh every 5 minutes
setInterval(loadExecutiveDashboard, 300000);
</script>
@endsection