@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Facebook Integration</h1>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Send customer events to Facebook for retargeting campaigns
            </p>
        </div>

        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-md dark:bg-green-900/30 dark:border-green-700 dark:text-green-300">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-md dark:bg-red-900/30 dark:border-red-700 dark:text-red-300">
                {{ session('error') }}
            </div>
        @endif

        <!-- CAPI Per Sales Page Notice -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Facebook Conversions API (CAPI)</h2>
                    <p class="mt-1 text-sm text-green-600 dark:text-green-400 font-medium">Ready to use - No app approval required!</p>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        Configure CAPI on each sales page individually. This allows you to use different Facebook Pixels for different products.
                    </p>
                    <div class="mt-4">
                        <a href="{{ route('settings.sales-pages.index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm">
                            Configure Sales Pages
                        </a>
                    </div>
                </div>
            </div>

            <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">How to set up CAPI for each Sales Page:</h3>
                <ol class="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>Go to your Sales Page edit page</li>
                    <li>Scroll to the "Tracking & Analytics" section</li>
                    <li>Enter your <strong>Facebook Pixel ID</strong> (from Facebook Events Manager)</li>
                    <li>Enter your <strong>Conversions API Access Token</strong> (generate from Events Manager)</li>
                    <li>Optionally add a Test Event Code for testing</li>
                    <li>Save - events will be sent when customers submit orders!</li>
                </ol>
            </div>
        </div>

        <!-- OAuth Coming Soon -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center">
                        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                        OAuth Connect
                        <span class="ml-2 px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300 rounded-full">Coming Soon</span>
                    </h2>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        One-click Facebook account connection to automatically sync custom audiences is pending Facebook app review approval.
                    </p>
                    
                    <div class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
                        <p class="text-xs text-yellow-700 dark:text-yellow-300">
                            <strong>Why pending?</strong> Facebook requires app review for ads_management permission. Use CAPI instead - it works now!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection