@extends('layouts.dashboard')

@section('title', 'Campaign Details - ' . $campaignId)
@section('page-title', 'Campaign: ' . $campaignId)

@section('content')
<!-- Back Button -->
<div class="mb-4">
    <a href="{{ route('dashboard.campaigns') }}" class="text-indigo-600 hover:text-indigo-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to All Campaigns
    </a>
</div>

<!-- Time Range Selector -->
<div class="mb-6 flex space-x-2">
    <a href="{{ route('dashboard.campaigns.show', ['campaignId' => $campaignId, 'days' => 7]) }}" 
       class="px-4 py-2 rounded-lg {{ $days == 7 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-indigo-700 hover:text-white">
        Last 7 Days
    </a>
    <a href="{{ route('dashboard.campaigns.show', ['campaignId' => $campaignId, 'days' => 30]) }}" 
       class="px-4 py-2 rounded-lg {{ $days == 30 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-indigo-700 hover:text-white">
        Last 30 Days
    </a>
    <a href="{{ route('dashboard.campaigns.show', ['campaignId' => $campaignId, 'days' => 90]) }}" 
       class="px-4 py-2 rounded-lg {{ $days == 90 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-indigo-700 hover:text-white">
        Last 90 Days
    </a>
</div>

<!-- Key Metrics -->
<div class="grid md:grid-cols-5 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="text-center">
            <i class="fas fa-eye text-4xl text-blue-500 mb-2"></i>
            <p class="text-gray-600 text-sm mb-1">Total Visits</p>
            <h3 class="text-3xl font-bold text-gray-800">{{ number_format($campaign['total_visits']) }}</h3>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="text-center">
            <i class="fas fa-users text-4xl text-purple-500 mb-2"></i>
            <p class="text-gray-600 text-sm mb-1">Unique Visitors</p>
            <h3 class="text-3xl font-bold text-gray-800">{{ number_format($campaign['unique_visitors']) }}</h3>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="text-center">
            <i class="fas fa-mouse-pointer text-4xl text-yellow-500 mb-2"></i>
            <p class="text-gray-600 text-sm mb-1">Form Starts</p>
            <h3 class="text-3xl font-bold text-gray-800">{{ number_format($campaign['form_starts']) }}</h3>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="text-center">
            <i class="fas fa-check-circle text-4xl text-green-500 mb-2"></i>
            <p class="text-gray-600 text-sm mb-1">Conversions</p>
            <h3 class="text-3xl font-bold text-green-600">{{ number_format($campaign['subscriptions']) }}</h3>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="text-center">
            <i class="fas fa-percentage text-4xl text-indigo-500 mb-2"></i>
            <p class="text-gray-600 text-sm mb-1">Conversion Rate</p>
            <h3 class="text-3xl font-bold {{ $campaign['conversion_rate'] >= 5 ? 'text-green-600' : ($campaign['conversion_rate'] >= 2 ? 'text-yellow-600' : 'text-red-600') }}">
                {{ number_format($campaign['conversion_rate'], 2) }}%
            </h3>
        </div>
    </div>
</div>

<!-- Visual Funnel Diagram -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-800 mb-4">
        <i class="fas fa-chart-pyramid text-indigo-600 mr-2"></i>
        Visual Funnel Diagram
        <span class="ml-3 px-3 py-1 bg-{{ $funnel['flow_type'] == 'OTP' ? 'blue' : 'purple' }}-100 text-{{ $funnel['flow_type'] == 'OTP' ? 'blue' : 'purple' }}-800 text-sm font-semibold rounded-full">
            {{ $funnel['flow_type'] }} Flow
        </span>
    </h3>
    <p class="text-gray-600 text-sm mb-6">
        @if($funnel['flow_type'] == 'OTP')
            Users complete OTP (One-Time Password) verification to subscribe
        @else
            Users subscribe via Header Enrichment (direct operator integration)
        @endif
    </p>
    
    <div class="flex justify-center">
        <div class="w-full max-w-3xl">
            <!-- Funnel SVG -->
            <svg viewBox="0 0 400 {{ count($funnel['funnel']) * 90 + 20 }}" class="w-full" style="max-height: 600px;">
                <!-- Funnel Stages -->
                @foreach($funnel['funnel'] as $index => $step)
                    @php
                        $y = $index * 90 + 10;
                        $topWidth = 380 - ($index * 60);
                        $bottomWidth = 380 - (($index + 1) * 60);
                        $leftTop = (400 - $topWidth) / 2;
                        $rightTop = $leftTop + $topWidth;
                        $leftBottom = (400 - $bottomWidth) / 2;
                        $rightBottom = $leftBottom + $bottomWidth;
                        
                        $colors = [
                            'blue' => '#3b82f6',
                            'indigo' => '#6366f1',
                            'purple' => '#8b5cf6',
                            'yellow' => '#eab308',
                            'green' => '#22c55e'
                        ];
                        $color = $colors[$step['color']] ?? '#6366f1';
                    @endphp
                    
                    <!-- Funnel Stage -->
                    <g>
                        <path d="M {{ $leftTop }},{{ $y }} L {{ $rightTop }},{{ $y }} L {{ $rightBottom }},{{ $y + 80 }} L {{ $leftBottom }},{{ $y + 80 }} Z"
                              fill="{{ $color }}" 
                              opacity="0.8" 
                              stroke="#ffffff" 
                              stroke-width="2"/>
                        
                        <!-- Stage Label -->
                        <text x="200" y="{{ $y + 30 }}" 
                              text-anchor="middle" 
                              fill="white" 
                              font-size="14" 
                              font-weight="bold">
                            {{ $step['name'] }}
                        </text>
                        
                        <!-- Count -->
                        <text x="200" y="{{ $y + 50 }}" 
                              text-anchor="middle" 
                              fill="white" 
                              font-size="20" 
                              font-weight="bold">
                            {{ number_format($step['count']) }}
                        </text>
                        
                        <!-- Percentage -->
                        <text x="200" y="{{ $y + 68 }}" 
                              text-anchor="middle" 
                              fill="white" 
                              font-size="12">
                            {{ number_format($step['percentage'], 1) }}%
                        </text>
                    </g>
                @endforeach
            </svg>
            
            <!-- Drop-off indicators on the side -->
            <div class="mt-4 space-y-2">
                @foreach($funnel['funnel'] as $index => $step)
                    @if($step['drop_count'] > 0 && $index > 0)
                        <div class="flex items-center justify-between p-2 bg-red-50 rounded">
                            <span class="text-sm text-gray-700">
                                <i class="fas fa-arrow-down text-red-500 mr-2"></i>
                                Between Step {{ $index }} → {{ $index + 1 }}
                            </span>
                            <span class="text-sm font-bold text-red-600">
                                -{{ number_format($step['drop_count']) }} users ({{ number_format($step['drop_percentage'], 1) }}%)
                            </span>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Detailed Conversion Funnel - Where Users Drop Off -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-800 mb-4">
        <i class="fas fa-filter text-indigo-600 mr-2"></i>
        Detailed Conversion Funnel - Where Users Drop Off
    </h3>
    <p class="text-gray-600 text-sm mb-6">
        Step-by-step breakdown showing exactly where users leave the {{ $funnel['flow_type'] }} flow
    </p>
    
    <!-- Funnel Diagram Version -->
    <div class="mb-8">
        @foreach($funnel['funnel'] as $step)
            @php
                $width = 100 - (($step['step'] - 1) * (80 / count($funnel['funnel'])));
                $marginLeft = (100 - $width) / 2;
            @endphp
            
            <div class="mb-4">
                <!-- Funnel Shape -->
                <div style="width: {{ $width }}%; margin-left: {{ $marginLeft }}%;" 
                     class="relative transition-all duration-300">
                    
                    <!-- Trapezoid Block -->
                    <div class="bg-{{ $step['color'] }}-500 text-white rounded-lg p-5 shadow-lg border-2 border-{{ $step['color'] }}-600">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center flex-1">
                                <span class="flex items-center justify-center w-10 h-10 rounded-full bg-white text-{{ $step['color'] }}-600 font-bold mr-4 text-lg flex-shrink-0">
                                    {{ $step['step'] }}
                                </span>
                                <div class="flex-1">
                                    <p class="font-bold text-xl mb-1">
                                        <i class="fas {{ $step['icon'] }} mr-2"></i>
                                        {{ $step['name'] }}
                                    </p>
                                    @if(isset($step['description']))
                                        <p class="text-sm text-white/90">{{ $step['description'] }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="text-right ml-4">
                                <p class="text-3xl font-bold">{{ number_format($step['count']) }}</p>
                                <p class="text-lg text-white/90">{{ number_format($step['percentage'], 1) }}%</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Drop-off Alert -->
                @if($step['drop_count'] > 0 && $step['step'] < count($funnel['funnel']))
                    <div class="flex items-center justify-center my-3">
                        <div class="flex items-center p-4 bg-red-50 border-2 border-red-400 rounded-xl shadow-md max-w-2xl">
                            <i class="fas fa-exclamation-triangle text-red-500 text-2xl mr-4"></i>
                            <div class="flex-1">
                                <p class="text-red-800 font-bold text-base">
                                    <span class="text-xl">{{ number_format($step['drop_count']) }}</span> users dropped off
                                </p>
                                <p class="text-red-600 text-sm">
                                    {{ number_format($step['drop_percentage'], 1) }}% loss from this step
                                </p>
                            </div>
                            @if($funnel['biggest_drop'] && $funnel['biggest_drop']['step'] == $step['step'])
                                <span class="ml-4 px-4 py-2 bg-red-600 text-white text-sm font-bold rounded-full shadow-lg animate-pulse">
                                    ⚠️ BIGGEST DROP
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <!-- Connector Arrow -->
                    <div class="flex justify-center my-2">
                        <i class="fas fa-arrow-down text-gray-400 text-2xl"></i>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
    
    <!-- Summary -->
    <div class="mt-6 p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Overall Conversion Rate</p>
                <p class="text-3xl font-bold text-indigo-600">{{ number_format($funnel['overall_conversion_rate'], 2) }}%</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-600 mb-1">Total Conversions</p>
                <p class="text-3xl font-bold text-green-600">{{ number_format($funnel['total_conversions']) }}</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-600 mb-1">from</p>
                <p class="text-3xl font-bold text-blue-600">{{ number_format($funnel['total_visits']) }}</p>
                <p class="text-sm text-gray-600">visits</p>
            </div>
        </div>
    </div>
</div>

<!-- Critical Issues & Recommendations -->
@if(count($funnel['insights']) > 0)
<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-exclamation-circle text-red-500 mr-2"></i>
        Critical Issues & Action Items
    </h3>
    
    <div class="space-y-6">
        @foreach($funnel['insights'] as $insight)
            <div class="p-6 border-l-4 {{ $insight['type'] == 'critical' ? 'border-red-500 bg-red-50' : 'border-yellow-500 bg-yellow-50' }} rounded-r-lg">
                <div class="flex items-start">
                    <i class="fas fa-{{ $insight['icon'] }} {{ $insight['type'] == 'critical' ? 'text-red-500' : 'text-yellow-500' }} text-3xl mr-4 mt-1"></i>
                    <div class="flex-1">
                        <h4 class="text-lg font-bold {{ $insight['type'] == 'critical' ? 'text-red-800' : 'text-yellow-800' }} mb-2">
                            {{ $insight['title'] }}
                        </h4>
                        <p class="{{ $insight['type'] == 'critical' ? 'text-red-700' : 'text-yellow-700' }} mb-4">
                            {{ $insight['description'] }}
                        </p>
                        
                        <div class="bg-white p-4 rounded-lg">
                            <p class="font-semibold text-gray-800 mb-3">
                                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                                Recommended Actions:
                            </p>
                            <ul class="space-y-2">
                                @foreach($insight['recommendations'] as $recommendation)
                                    <li class="flex items-start text-gray-700">
                                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                        <span>{{ $recommendation }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@else
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <div class="text-center py-8">
        <i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i>
        <h3 class="text-xl font-bold text-gray-800 mb-2">No Critical Issues Detected</h3>
        <p class="text-gray-600">Your campaign funnel is performing well with no major drop-off points.</p>
    </div>
</div>
@endif

<!-- Performance Analysis -->
<div class="grid md:grid-cols-2 gap-6 mb-8">
    <!-- Daily Performance Chart -->
    <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-line text-blue-600 mr-2"></i>
            Daily Performance
        </h3>
        <canvas id="dailyChart" style="max-height: 300px;"></canvas>
    </div>

    <!-- Performance Insights -->
    <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-lightbulb text-yellow-500 mr-2"></i>
            Performance Insights
        </h3>
        <div class="space-y-4">
            @if($campaign['conversion_rate'] >= 5)
                <div class="flex items-start p-4 bg-green-50 rounded-lg border border-green-200">
                    <i class="fas fa-check-circle text-green-500 text-2xl mr-3 mt-1"></i>
                    <div>
                        <p class="font-semibold text-green-800">Excellent Performance</p>
                        <p class="text-sm text-green-700">This campaign has a conversion rate of {{ number_format($campaign['conversion_rate'], 2) }}%, which is above the 5% excellence threshold.</p>
                    </div>
                </div>
            @elseif($campaign['conversion_rate'] >= 2)
                <div class="flex items-start p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                    <i class="fas fa-exclamation-triangle text-yellow-500 text-2xl mr-3 mt-1"></i>
                    <div>
                        <p class="font-semibold text-yellow-800">Good Performance</p>
                        <p class="text-sm text-yellow-700">Conversion rate is {{ number_format($campaign['conversion_rate'], 2) }}%. Consider optimizing landing page to reach 5% target.</p>
                    </div>
                </div>
            @else
                <div class="flex items-start p-4 bg-red-50 rounded-lg border border-red-200">
                    <i class="fas fa-times-circle text-red-500 text-2xl mr-3 mt-1"></i>
                    <div>
                        <p class="font-semibold text-red-800">Needs Improvement</p>
                        <p class="text-sm text-red-700">Conversion rate is {{ number_format($campaign['conversion_rate'], 2) }}%. Review targeting, messaging, and landing page design.</p>
                    </div>
                </div>
            @endif

            @php
                $dropoffRate = $campaign['form_starts'] > 0 ? (($campaign['form_starts'] - $campaign['subscriptions']) / $campaign['form_starts']) * 100 : 0;
            @endphp
            @if($campaign['form_starts'] > 0 && $dropoffRate > 50)
                <div class="flex items-start p-4 bg-orange-50 rounded-lg border border-orange-200">
                    <i class="fas fa-user-times text-orange-500 text-2xl mr-3 mt-1"></i>
                    <div>
                        <p class="font-semibold text-orange-800">High Form Abandonment</p>
                        <p class="text-sm text-orange-700">{{ number_format($dropoffRate, 1) }}% of users who started the form didn't complete it. Simplify the signup process.</p>
                    </div>
                </div>
            @endif

            @if($campaign['total_visits'] > 0 && $campaign['form_starts'] == 0)
                <div class="flex items-start p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <i class="fas fa-info-circle text-blue-500 text-2xl mr-3 mt-1"></i>
                    <div>
                        <p class="font-semibold text-blue-800">No Form Engagement</p>
                        <p class="text-sm text-blue-700">No users have started the signup form. Review call-to-action visibility and messaging.</p>
                    </div>
                </div>
            @endif

            <div class="flex items-start p-4 bg-gray-50 rounded-lg border border-gray-200">
                <i class="fas fa-calculator text-gray-500 text-2xl mr-3 mt-1"></i>
                <div>
                    <p class="font-semibold text-gray-800">Traffic Quality</p>
                    <p class="text-sm text-gray-700">
                        @if($campaign['total_visits'] > 0)
                            Average of {{ number_format($campaign['total_visits'] / $days, 1) }} visits per day over the last {{ $days }} days.
                        @else
                            No traffic recorded in this period.
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Daily Breakdown Table -->
<div class="bg-white rounded-xl shadow-lg p-6">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-table text-indigo-600 mr-2"></i>
        Daily Breakdown
    </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">Date</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">Unique</th>
                    <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Form Starts</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>
                </tr>
            </thead>
            <tbody>
                @forelse($campaign['daily_breakdown'] as $day)
                    @php
                        $dayRate = $day->visits > 0 ? ($day->subscriptions / $day->visits) * 100 : 0;
                    @endphp
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-3 font-semibold text-gray-800">{{ \Carbon\Carbon::parse($day->date)->format('M d, Y') }}</td>
                        <td class="px-4 py-3 text-right">{{ number_format($day->visits) }}</td>
                        <td class="px-4 py-3 text-right">{{ number_format($day->unique_visitors) }}</td>
                        <td class="px-4 py-3 text-right">{{ number_format($day->form_starts) }}</td>
                        <td class="px-4 py-3 text-right">
                            <span class="font-semibold text-green-600">{{ number_format($day->subscriptions) }}</span>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <span class="px-2 py-1 rounded text-sm {{ $dayRate >= 5 ? 'bg-green-100 text-green-800' : ($dayRate >= 2 ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                {{ number_format($dayRate, 2) }}%
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                            No daily data available for this period
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<script>
// Daily Performance Chart
const dailyData = @json($campaign['daily_breakdown']);
const labels = dailyData.map(d => {
    const date = new Date(d.date);
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
});
const visits = dailyData.map(d => d.visits);
const conversions = dailyData.map(d => d.subscriptions);

const ctx = document.getElementById('dailyChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Visits',
                data: visits,
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true,
                yAxisID: 'y'
            },
            {
                label: 'Conversions',
                data: conversions,
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.4,
                fill: true,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        interaction: {
            mode: 'index',
            intersect: false
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Visits'
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Conversions'
                },
                grid: {
                    drawOnChartArea: false
                }
            }
        },
        plugins: {
            legend: {
                position: 'top'
            }
        }
    }
});
</script>
@endsection