@extends('layouts.admin')
@section('title', 'Facebook Entegrasyon Rehberi')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.facebook.index') }}">Facebook Sayfaları</a></li>
    <li class="breadcrumb-item active">Entegrasyon Rehberi</li>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h4 mb-0"><i class="bi bi-book me-2 text-info"></i>Facebook Entegrasyon Rehberi</h1>
    <a href="{{ route('admin.facebook.index') }}" class="btn btn-outline-light btn-sm">
        <i class="bi bi-arrow-left me-1"></i> Sayfalara Dön
    </a>
</div>

<div class="row g-4">
    <!-- Adım 1 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">1. Adım</span>
                Facebook Sayfası Oluşturun
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Eğer bir Facebook sayfanız yoksa, öncelikle bir sayfa oluşturmanız gerekiyor.
                </p>
                <ol class="small text-muted mb-0">
                    <li class="mb-2"><a href="https://www.facebook.com/pages/create" target="_blank" class="text-info">facebook.com/pages/create</a> adresine gidin</li>
                    <li class="mb-2">Sayfa adınızı ve kategorinizi belirleyin</li>
                    <li class="mb-2">Sayfa bilgilerinizi doldurun (profil fotoğrafı, kapak, açıklama)</li>
                    <li>Sayfanızı oluşturun ve yayınlayın</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Adım 2 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">2. Adım</span>
                Facebook Developer Uygulaması Oluşturun
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Facebook Graph API'ye erişmek için bir uygulama oluşturmanız gerekiyor.
                </p>
                <ol class="small text-muted mb-0">
                    <li class="mb-2"><a href="https://developers.facebook.com/" target="_blank" class="text-info">developers.facebook.com</a> adresine gidin</li>
                    <li class="mb-2">"Uygulama Oluştur" butonuna tıklayın</li>
                    <li class="mb-2">"Business" veya "Diğer" uygulama türünü seçin</li>
                    <li class="mb-2">Uygulama adı ve e-posta bilgilerinizi girin</li>
                    <li>Uygulamayı oluşturun</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Adım 3 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">3. Adım</span>
                Graph API Explorer ile Token Alın (Kolay Yöntem)
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Test amacıyla veya hızlı başlangıç için Graph API Explorer'ı kullanabilirsiniz.
                    <br><strong class="text-warning">⚠ Bu token'ların süresi sınırlıdır (1-3 saat).</strong>
                </p>
                <ol class="small text-muted mb-0">
                    <li class="mb-2"><a href="https://developers.facebook.com/tools/explorer/" target="_blank" class="text-info">Graph API Explorer</a> sayfasını açın</li>
                    <li class="mb-2">Sağ üstten uygulamanızı seçin</li>
                    <li class="mb-2"><strong>İzinler (Permissions):</strong> <code>pages_manage_posts</code>, <code>pages_read_engagement</code>, <code>pages_show_list</code> ekleyin</li>
                    <li class="mb-2">"Generate Access Token" butonuna tıklayın</li>
                    <li class="mb-2">Çıkan token'ı kopyalayın</li>
                    <li class="mb-2">Token'ı sistemdeki Facebook sayfa formuna yapıştırın</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Adım 4 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">4. Adım</span>
                Uzun Süreli Token (60 Gün) - Önerilen Yöntem
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Otomasyon için 60 günlük uzun süreli token kullanmanız önerilir.
                </p>
                <ol class="small text-muted mb-3">
                    <li class="mb-2">Kısa süreli token'ınızı alın (Adım 3'teki gibi)</li>
                    <li class="mb-2">Aşağıdaki URL'yi tarayıcıda açın:
                        <br><code class="d-block mt-1 p-2 bg-dark rounded" style="font-size:0.72rem;word-break:break-all;">https://graph.facebook.com/v18.0/oauth/access_token?grant_type=fb_exchange_token&client_id={APP_ID}&client_secret={APP_SECRET}&fb_exchange_token={KISA_TOKEN}</code>
                    </li>
                    <li class="mb-2">Dönen JSON'daki <code>access_token</code> değerini kopyalayın</li>
                    <li>Bu token 60 gün geçerlidir, sisteme ekleyin</li>
                </ol>
                <div class="alert alert-info small mb-0">
                    <i class="bi bi-info-circle me-1"></i>
                    <strong>Sayfa Token'ı:</strong> Sayfa token'ı almak için:
                    <code class="d-block mt-1 p-2 bg-dark rounded" style="font-size:0.72rem;word-break:break-all;">GET /me/accounts?access_token={KULLANICI_TOKEN}</code>
                    Dönen listeden sayfanızın <code>access_token</code>'ını kullanın.
                </div>
            </div>
        </div>
    </div>

    <!-- Adım 5 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">5. Adım</span>
                Token'ı Sisteme Ekleyin
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Aldığınız token'ı sistemdeki Facebook sayfa ayarlarına ekleyin.
                </p>
                <ol class="small text-muted mb-0">
                    <li class="mb-2">Panelde <strong>Facebook Sayfaları</strong> → <strong>Yeni Sayfa Ekle</strong> ye gidin</li>
                    <li class="mb-2"><strong>Sayfa Adı:</strong> Facebook sayfanızın adı</li>
                    <li class="mb-2"><strong>Sayfa ID:</strong> Facebook sayfanızın ID'si (sayfa URL'sinden veya <code>/me/accounts</code> endpoint'inden bulun)</li>
                    <li class="mb-2"><strong>Access Token:</strong> Aldığınız token'ı yapıştırın</li>
                    <li class="mb-2"><strong>Varsayılan Dil:</strong> Paylaşımların yapılacağı dil</li>
                    <li>Kaydedin ve <strong>"Token'ı Test Et"</strong> butonuyla doğrulayın</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Adım 6 -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <span class="badge bg-primary me-2">6. Adım</span>
                Otomasyon Kuralı Bağlayın
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Sayfa eklendikten sonra otomasyon kuralıyla eşleştirmeniz gerekiyor.
                </p>
                <ol class="small text-muted mb-0">
                    <li class="mb-2">Panelde <strong>Otomasyon Kuralları</strong> → <strong>Yeni Kural</strong> a gidin</li>
                    <li class="mb-2">Kurala bir isim verin</li>
                    <li class="mb-2"><strong>TikTok Hesabı:</strong> Tarama yapılacak hesabı seçin</li>
                    <li class="mb-2"><strong>Hedef Sayfa:</strong> Yeni eklediğiniz Facebook sayfasını seçin</li>
                    <li class="mb-2">Tarama sıklığını ve paylaşım zamanlamasını ayarlayın</li>
                    <li>Kuralı aktifleştirin</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Sıkça Sorulan Sorular -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-question-circle me-2 text-warning"></i>Sıkça Sorulan Sorular
            </div>
            <div class="card-body">
                <div class="accordion accordion-flush" id="faqAccordion">
                    <div class="accordion-item bg-transparent border-0 mb-2">
                        <button class="accordion-button collapsed bg-transparent text-light shadow-none px-3 py-2 rounded" data-bs-toggle="collapse" data-bs-target="#faq1" style="font-size:0.88rem;border:1px solid #2d3148;">
                            Token süresi dolduğunda ne olur?
                        </button>
                        <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body small text-muted">
                                Token süresi dolduğunda paylaşımlar başarısız olur. Panelde ilgili sayfanın durumu "Token süresi doldu" olarak güncellenir.
                                Yeni bir token alıp sayfa düzenleme ekranından güncellemeniz yeterlidir.
                                <strong>Önerilen:</strong> 60 günlük token kullanın ve token'ı yenilemek için ayda bir kontrol yapın.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item bg-transparent border-0 mb-2">
                        <button class="accordion-button collapsed bg-transparent text-light shadow-none px-3 py-2 rounded" data-bs-toggle="collapse" data-bs-target="#faq2" style="font-size:0.88rem;border:1px solid #2d3148;">
                            Sayfa token'ı ile kullanıcı token'ı arasındaki fark nedir?
                        </button>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body small text-muted">
                                <strong>Kullanıcı token'ı:</strong> Facebook hesabınız adına işlem yapar. Sayfalarınızı yönetmek için kullanılır.<br>
                                <strong>Sayfa token'ı:</strong> Doğrudan sayfa adına işlem yapar. Paylaşım yapmak için sayfa token'ı gereklidir.
                                Kullanıcı token'ı ile <code>/me/accounts</code> endpoint'inden sayfa token'ı alınabilir.
                                Sistem sayfa token'ı ile çalışır.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item bg-transparent border-0 mb-2">
                        <button class="accordion-button collapsed bg-transparent text-light shadow-none px-3 py-2 rounded" data-bs-toggle="collapse" data-bs-target="#faq3" style="font-size:0.88rem;border:1px solid #2d3148;">
                            Birden fazla Facebook sayfası ekleyebilir miyim?
                        </button>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body small text-muted">
                                Evet, sisteme istediğiniz kadar Facebook sayfası ekleyebilirsiniz. Her sayfa için ayrı token almanız gerekir.
                                Otomasyon kurallarında farklı TikTok hesaplarını farklı Facebook sayfalarına yönlendirebilirsiniz.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item bg-transparent border-0 mb-2">
                        <button class="accordion-button collapsed bg-transparent text-light shadow-none px-3 py-2 rounded" data-bs-toggle="collapse" data-bs-target="#faq4" style="font-size:0.88rem;border:1px solid #2d3148;">
                            API olmadan paylaşım nasıl yapılıyor?
                        </button>
                        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body small text-muted">
                                Bu sistem <strong>Facebook Graph API</strong> kullanır. TikTok tarafı API'siz scraping ile çalışırken,
                                Facebook paylaşımları resmi Graph API üzerinden yapılır. Facebook'un video yükleme ve paylaşım için
                                resmi API kullanımı zorunludur. Bu nedenle yukarıdaki adımları takip ederek token almanız gerekmektedir.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item bg-transparent border-0">
                        <button class="accordion-button collapsed bg-transparent text-light shadow-none px-3 py-2 rounded" data-bs-toggle="collapse" data-bs-target="#faq5" style="font-size:0.88rem;border:1px solid #2d3148;">
                            Paylaşım limitleri var mı?
                        </button>
                        <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body small text-muted">
                                Facebook Graph API'nin rate limit'leri vardır. Sayfa başına saatte yaklaşık 200 paylaşım,
                                kullanıcı başına saatte yaklaşık 200 istek yapılabilir.
                                Sistem bu limitleri gözeterek zamanlama yapar. Aşırı kullanımda geçici engelleme yiyebilirsiniz.
                                Önerilen: Sayfa başına günde 20-30 paylaşım.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection