@extends('adminlte::page')

@section('title', 'YouTube Integration - KunciLink')

<meta name="csrf-token" content="{{ csrf_token() }}">

@section('content_header')
    <div class="p-4 rounded mb-4" style="background: linear-gradient(90deg, #ff0000 0%, #ff8c00 100%); color: #fff;">
        <div class="d-flex align-items-center">
            <i class="fab fa-youtube fa-3x mr-3"></i>
            <div>
                <h1 class="mb-0" style="font-weight: 700; letter-spacing: 1px;">YouTube Integration</h1>
                <div class="mt-1">Pantau pertumbuhan channel YouTube Anda secara otomatis</div>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-7 col-md-10">
            <div class="card shadow-lg border-0">
                <div class="card-body text-center">
                    
                    @if(Auth::user()->youtube_channel_id)
                        {{-- Card Channel Terhubung --}}
                        <div class="mb-4">
                            <img src="{{ Auth::user()->youtube_channel_avatar }}" class="rounded-circle shadow" width="110" height="110" style="object-fit:cover; border:4px solid #ff0000;">
                            <h2 class="mt-3 mb-1" style="font-weight: 600;">{{ Auth::user()->youtube_channel_title }}</h2>
                            
                            {{-- Custom URL jika ada --}}
                            @if(Auth::user()->youtube_custom_url)
                                <div class="mb-2">
                                    <a href="https://youtube.com{{ Auth::user()->youtube_custom_url }}" target="_blank" class="text-danger">
                                        <i class="fab fa-youtube mr-1"></i>{{ Auth::user()->youtube_custom_url }}
                                    </a>
                                </div>
                            @endif
                            
                            <span class="badge badge-danger mb-2">Channel Terhubung</span>
                            
                            {{-- Channel Info --}}
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-globe mr-1"></i>
                                        {{ Auth::user()->youtube_country ?? 'Unknown' }}
                                    </small>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar mr-1"></i>
                                        Dibuat: {{ Auth::user()->youtube_published_at ? \Carbon\Carbon::parse(Auth::user()->youtube_published_at)->format('M Y') : 'Unknown' }}
                                    </small>
                                </div>
                            </div>
                            
                            {{-- Channel Selector untuk Multiple Channels --}}
                            @if(session('youtube_channels') && count(session('youtube_channels')) > 1)
                                <div class="mb-3">
                                    <label class="form-label">Pilih Channel:</label>
                                    <select class="form-control" id="channelSelector" style="max-width: 300px; margin: 0 auto;">
                                        @foreach(session('youtube_channels') as $index => $channel)
                                            <option value="{{ $index }}" {{ $index === 0 ? 'selected' : '' }}>
                                                {{ $channel['snippet']['title'] }} 
                                                ({{ number_format($channel['statistics']['subscriberCount'] ?? 0) }} subscribers)
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                            
                            <div class="d-flex justify-content-center align-items-center mb-3" style="gap: 2rem;">
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#ff0000;">
                                        <i class="fas fa-users mr-1"></i> {{ number_format(Auth::user()->youtube_subscriber_count) }}
                                    </div>
                                    <div class="small text-muted">Subscribers</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#007bff;">
                                        <i class="fas fa-eye mr-1"></i> {{ number_format(Auth::user()->youtube_total_view_count) }}
                                    </div>
                                    <div class="small text-muted">Total Views</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#28a745;">
                                        <i class="fas fa-video mr-1"></i> {{ number_format(Auth::user()->youtube_video_count) }}
                                    </div>
                                    <div class="small text-muted">Jumlah Video</div>
                                </div>
                            </div>
                            
                            {{-- Additional Stats --}}
                            @if(Auth::user()->youtube_comment_count)
                                <div class="mb-3">
                                    <div class="h5 mb-0" style="font-weight:600; color:#6c757d;">
                                        <i class="fas fa-comments mr-1"></i> {{ number_format(Auth::user()->youtube_comment_count) }}
                                    </div>
                                    <div class="small text-muted">Total Comments</div>
                                </div>
                            @endif
                            
                            {{-- Channel Description --}}
                            @if(Auth::user()->youtube_channel_description)
                                <div class="mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">Deskripsi Channel</h6>
                                            <p class="card-text small">{{ Str::limit(Auth::user()->youtube_channel_description, 200) }}</p>
                                            @if(strlen(Auth::user()->youtube_channel_description) > 200)
                                                <button class="btn btn-sm btn-link" onclick="showFullDescription()">Baca selengkapnya</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                            
                            {{-- Channel Status Info --}}
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <small class="text-muted">
                                        <i class="fas fa-lock mr-1"></i>
                                        Status: {{ ucfirst(Auth::user()->youtube_privacy_status ?? 'Unknown') }}
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">
                                        <i class="fas fa-link mr-1"></i>
                                        {{ Auth::user()->youtube_is_linked ? 'Linked' : 'Not Linked' }}
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">
                                        <i class="fas fa-child mr-1"></i>
                                        {{ Auth::user()->youtube_made_for_kids ? 'Made for Kids' : 'Not for Kids' }}
                                    </small>
                                </div>
                            </div>
                            
                            {{-- Info Multiple Channels --}}
                            @if(session('youtube_channels') && count(session('youtube_channels')) > 1)
                                <div class="alert alert-info mb-3">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Anda memiliki <strong>{{ count(session('youtube_channels')) }} channel YouTube</strong>. 
                                    Saat ini menampilkan data channel utama. 
                                    <a href="#" class="alert-link" onclick="showAllChannels()">Lihat semua channel</a>
                                </div>
                            @endif
                            
                            {{-- Last Refresh Info --}}
                            @if(Auth::user()->youtube_last_refresh_at)
                                <div class="alert alert-success mb-3">
                                    <i class="fas fa-clock mr-1"></i>
                                    <strong>Data terakhir diperbarui:</strong> {{ Auth::user()->youtube_last_refresh_at->format('d M Y H:i') }}
                                </div>
                            @endif
                            
                            {{-- Action Buttons --}}
                            <div class="d-flex justify-content-center gap-2 mb-3">
                                <button type="button" class="btn btn-primary btn-lg" onclick="refreshYouTubeData()" id="refreshBtn">
                                    <i class="fas fa-sync-alt mr-1"></i> Refresh Data
                                </button>
                                <a href="{{ route('admin.youtube.disconnect') }}" class="btn btn-outline-danger btn-lg">
                                    <i class="fas fa-unlink mr-1"></i> Putuskan Integrasi
                                </a>
                            </div>
                        </div>
                        
                        {{-- Modal untuk menampilkan semua channel --}}
                        @if(session('youtube_channels') && count(session('youtube_channels')) > 1)
                            <div class="modal fade" id="allChannelsModal" tabindex="-1">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Semua Channel YouTube Anda</h5>
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                @foreach(session('youtube_channels') as $channel)
                                                    <div class="col-md-6 mb-3">
                                                        <div class="card">
                                                            <div class="card-body text-center">
                                                                <img src="{{ $channel['snippet']['thumbnails']['default']['url'] }}" 
                                                                     class="rounded-circle mb-2" width="60" height="60">
                                                                <h6 class="card-title">{{ $channel['snippet']['title'] }}</h6>
                                                                <div class="row text-center">
                                                                    <div class="col-4">
                                                                        <small class="text-muted">Subscribers</small>
                                                                        <div class="font-weight-bold">{{ number_format($channel['statistics']['subscriberCount'] ?? 0) }}</div>
                                                                    </div>
                                                                    <div class="col-4">
                                                                        <small class="text-muted">Views</small>
                                                                        <div class="font-weight-bold">{{ number_format($channel['statistics']['viewCount'] ?? 0) }}</div>
                                                                    </div>
                                                                    <div class="col-4">
                                                                        <small class="text-muted">Videos</small>
                                                                        <div class="font-weight-bold">{{ number_format($channel['statistics']['videoCount'] ?? 0) }}</div>
                                                                    </div>
                                                                </div>
                                                                @if(isset($channel['snippet']['customUrl']))
                                                                    <div class="mt-2">
                                                                        <small class="text-muted">{{ $channel['snippet']['customUrl'] }}</small>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        
                        {{-- Modal untuk deskripsi lengkap --}}
                        @if(Auth::user()->youtube_channel_description && strlen(Auth::user()->youtube_channel_description) > 200)
                            <div class="modal fade" id="descriptionModal" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Deskripsi Channel Lengkap</h5>
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ Auth::user()->youtube_channel_description }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @else
                        {{-- Card Belum Terhubung --}}
                        <div class="mb-4">
                            <i class="fab fa-youtube fa-5x text-danger mb-3"></i>
                            <h3 class="mb-2">Hubungkan Channel YouTube Anda</h3>
                            <p class="text-muted mb-4">Dapatkan insight subscriber, views, dan statistik channel secara otomatis di dashboard KunciLink.</p>
                            <a href="{{ route('admin.youtube.connect') }}" class="btn btn-danger btn-lg">
                                <i class="fab fa-youtube mr-2"></i> Hubungkan Channel YouTube
                            </a>
                        </div>
                    @endif
                    <hr>
                    <div class="row mt-3">
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-chart-line fa-2x text-primary mb-2"></i>
                                <div class="font-weight-bold">Analytics Real-time</div>
                                <div class="small text-muted">Pantau pertumbuhan subscriber dan statistik view channel Anda secara real-time.</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-sync-alt fa-2x text-success mb-2"></i>
                                <div class="font-weight-bold">Auto Sync</div>
                                <div class="small text-muted">Data channel otomatis tersinkronisasi dengan dashboard KunciLink.</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-shield-alt fa-2x text-info mb-2"></i>
                                <div class="font-weight-bold">Keamanan & Privasi</div>
                                <div class="small text-muted">Data channel Anda aman dan hanya dapat diakses oleh Anda.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function showAllChannels() {
    $('#allChannelsModal').modal('show');
}

function showFullDescription() {
    $('#descriptionModal').modal('show');
}

// Refresh YouTube data
function refreshYouTubeData() {
    const refreshBtn = $('#refreshBtn');
    const originalText = refreshBtn.html();
    
    // Disable button and show loading
    refreshBtn.prop('disabled', true);
    refreshBtn.html('<i class="fas fa-spinner fa-spin mr-1"></i> Memperbarui...');
    
    // Show loading overlay
    $('body').append('<div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;"><div class="text-white"><i class="fas fa-spinner fa-spin fa-2x"></i><br><span>Memperbarui data channel...</span></div></div>');
    
    $.ajax({
        url: '{{ route("admin.youtube.refresh") }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                // Show success message
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: response.message,
                    showConfirmButton: false,
                    timer: 2000
                });
                
                // Update the displayed data
                updateDisplayedData(response.data);
                
                // Reload page after 2 seconds to show updated data
                setTimeout(function() {
                    location.reload();
                }, 2000);
                
            } else {
                // Show error message
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: response.message
                });
            }
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Terjadi kesalahan saat memperbarui data. Silakan coba lagi.'
            });
        },
        complete: function() {
            // Re-enable button and restore original text
            refreshBtn.prop('disabled', false);
            refreshBtn.html(originalText);
            
            // Remove loading overlay
            $('#loadingOverlay').remove();
        }
    });
}

// Update displayed data without page reload (optional)
function updateDisplayedData(data) {
    // Update subscriber count
    $('.h4:contains("Subscribers")').html('<i class="fas fa-users mr-1"></i> ' + data.subscribers);
    
    // Update view count
    $('.h4:contains("Total Views")').html('<i class="fas fa-eye mr-1"></i> ' + data.views);
    
    // Update video count
    $('.h4:contains("Jumlah Video")').html('<i class="fas fa-video mr-1"></i> ' + data.videos);
    
    // Update comment count if exists
    if (data.comments && data.comments !== '0') {
        $('.h5:contains("Total Comments")').html('<i class="fas fa-comments mr-1"></i> ' + data.comments);
    }
    
    // Update last refresh info
    const lastRefreshHtml = '<div class="alert alert-success mb-3"><i class="fas fa-clock mr-1"></i><strong>Data terakhir diperbarui:</strong> ' + data.last_refresh + '</div>';
    $('.alert-success:contains("Data terakhir diperbarui")').replaceWith(lastRefreshHtml);
}

// Channel selector functionality
$(document).ready(function() {
    $('#channelSelector').change(function() {
        // Here you can implement channel switching logic
        // For now, just show an alert
        const selectedChannel = $(this).find('option:selected').text();
        alert('Fitur switch channel akan segera tersedia. Channel yang dipilih: ' + selectedChannel);
    });
});
</script>
@stop