@extends("layouts.main")

@section("content")
<div class="container">
    <div class="d-flex align-items-center mb-4">
        @if($selectedBrand && $selectedBrand['brand_logo'])
            <img src="{{ $selectedBrand['brand_logo'] }}" alt="{{ $selectedBrand['name'] }}" class="rounded-circle mr-3" style="width: 50px; height: 50px; object-fit: cover;">
        @endif
        <div class="headline text-4xl">Page Dashboard</div>
        <div class="ml-auto d-flex align-items-center">
            @if(count($brands) > 0)
                <select class="form-control brand-selector" id="brandSelector">
                    @foreach($brands as $brand)
                        <option value="{{ $brand['id'] }}" {{ $selectedBrand['id'] == $brand['id'] ? 'selected' : '' }}>
                            {{ $brand['name'] }}
                        </option>
                    @endforeach
                </select>
                <i class="fas fa-sync-alt refresh-button" id="refreshData" title="Refresh data"></i>
            @endif
            <a href="{{ route('facebook.create.form') }}" class="btn btn-primary ml-3">
                <i class="fas fa-plus"></i> Add Dashboard
            </a>
        </div>
    </div>

    @if($error ?? false)
        <div class="alert alert-warning">{{ $error }}</div>
    @endif

    @if($isStale)
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            Data is more than 24 hours old. Last updated: {{ $lastUpdated }}
        </div>
    @endif

    <div class="text-sm text-gray-500 mb-4">
        Last updated: {{ $lastUpdated }}
    </div>

    <div id="campaigns-container">
        <div class="p-4">
            <!-- Brand Overview Section -->
            <div class="mb-6">
                <div class="flex items-center mb-4">
                    <img src="{{ $selectedBrand['brand_logo'] ?? 'https://via.placeholder.com/150' }}" alt="{{ $selectedBrand['name'] }} Logo" class="h-12 mr-4">
                    <div>
                        <h2 class="text-2xl font-bold">{{ $selectedBrand['name'] }}</h2>
                        <p class="text-gray-600">{{ '@' . strtolower(str_replace(' ', '', $selectedBrand['name'])) }}</p>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-gray-500 text-sm">Total Followers</h3>
                        <p class="text-2xl font-bold">{{ number_format($selectedBrand['follower_count']) }}</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-gray-500 text-sm">Engagement Rate</h3>
                        <p class="text-2xl font-bold" id="engagementRate">Loading...</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-gray-500 text-sm">Avg. Likes</h3>
                        <p class="text-2xl font-bold" id="avgLikes">Loading...</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-gray-500 text-sm">Best Posting Time</h3>
                        <p class="text-2xl font-bold" id="bestTime">Loading...</p>
                    </div>
                </div>
            </div>

            <!-- Content Analysis Section -->
            <div class="mb-6">
                <h3 class="text-xl font-bold mb-4">Content Performance Analysis</h3>
                <div class="grid grid-cols-2 gap-6">
                    <!-- Brand Posts -->
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h4 class="font-bold mb-4">Recent Posts</h4>
                        <div class="space-y-4" id="postsContainer">
                            <div class="text-center p-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">Loading posts...</span>
                                </div>
                            </div>
                        </div>
                        <div id="loadMoreContainer" class="text-center mt-4 d-none">
                            <button id="loadMoreBtn" class="btn btn-outline-primary">
                                <i class="fas fa-plus"></i> Load More Posts
                            </button>
                        </div>
                    </div>

                    <!-- Topics Analysis -->
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h4 class="font-bold mb-4">Top Topics</h4>
                        <div class="space-y-4" id="topicsContainer">
                            <div class="text-center p-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">Loading topics...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Market Comparison -->
            <div class="mb-6">
                <h3 class="text-xl font-bold mb-4">Market Comparison</h3>
                <div class="space-y-4">
                    <div class="border-b pb-4">
                        <div class="flex justify-between mb-2">
                            <span class="text-sm text-gray-500">Pepsi</span>
                            <span class="text-sm font-semibold text-blue-600">1.5M likes</span>
                        </div>
                        <p class="text-gray-800">"The choice of a new generation! 🥤 #PepsiChallenge"</p>
                        <div class="mt-2 flex space-x-4 text-sm text-gray-500">
                            <span>❤️ 1.5M</span>
                            <span>💬 28K</span>
                            <span>🔄 9K</span>
                        </div>
                    </div>
                    <div class="border-b pb-4">
                        <div class="flex justify-between mb-2">
                            <span class="text-sm text-gray-500">Dr Pepper</span>
                            <span class="text-sm font-semibold text-blue-600">850K likes</span>
                        </div>
                        <p class="text-gray-800">"23 flavors of awesome! 🎯 #DrPepper"</p>
                        <div class="mt-2 flex space-x-4 text-sm text-gray-500">
                            <span>❤️ 850K</span>
                            <span>💬 15K</span>
                            <span>🔄 5K</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Engagement Metrics -->
            <div class="mb-6">
                <h3 class="text-xl font-bold mb-4">Engagement Metrics</h3>
                <div class="grid grid-cols-3 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h4 class="text-gray-500 text-sm mb-2">Best Performing Content Type</h4>
                        <p class="text-xl font-bold" id="topContentType">Loading...</p>
                        <p class="text-sm text-gray-600">3.2x higher engagement</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h4 class="text-gray-500 text-sm mb-2">Peak Posting Time</h4>
                        <p class="text-xl font-bold" id="peakTime">Loading...</p>
                        <p class="text-sm text-gray-600">Highest engagement rate</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h4 class="text-gray-500 text-sm mb-2">Top Hashtag</h4>
                        <p class="text-xl font-bold" id="topHashtag">Loading...</p>
                        <p class="text-sm text-gray-600">2.1M impressions</p>
                    </div>
                </div>
            </div>

            <!-- Market Insights -->
            <div>
                <h3 class="text-xl font-bold mb-4">Market Insights</h3>
                <div class="bg-white p-4 rounded-lg shadow">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-bold mb-2">Top Performing Topics</h4>
                            <ul class="space-y-2">
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                    <span>Limited Edition Products</span>
                                </li>
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                    <span>Summer Campaigns</span>
                                </li>
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                    <span>Brand Heritage</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-bold mb-2">Market Trends</h4>
                            <ul class="space-y-2">
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                    <span>Rising interest in zero-sugar options</span>
                                </li>
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                    <span>Growing sustainability focus</span>
                                </li>
                                <li class="flex items-center">
                                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                    <span>Digital-first engagement</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    const brandId = '{{ $selectedBrand['id'] }}';
    let allPosts = [];
    let displayedPosts = 3;
    
    function loadInsights() {
        $.get(`{{ url('/facebook/insights') }}/${brandId}`)
            .done(function(response) {
                if (response.success) {
                    const insights = response.data;
                    $('#engagementRate').text(insights.engagement_rate.toFixed(2) + '%');
                    $('#avgLikes').text(insights.avg_likes.toFixed(2));
                    $('#bestTime').text(insights.best_time + ':00');
                    $('#topContentType').text(insights.top_content_type);
                    $('#peakTime').text(insights.best_time + ':00');
                }
            })
            .fail(function() {
                $('#engagementRate').text('Error');
                $('#avgLikes').text('Error');
                $('#bestTime').text('Error');
                $('#topContentType').text('Error');
                $('#peakTime').text('Error');
            });
    }
    
    function loadPosts() {
        $.get(`{{ url('/facebook/posts') }}/${brandId}`)
            .done(function(response) {
                if (response.success) {
                    allPosts = response.data;
                    displayPosts();
                }
            })
            .fail(function() {
                $('#postsContainer').html('<div class="alert alert-danger">Failed to load posts</div>');
            });
    }
    
    function displayPosts() {
        const postsToShow = allPosts.slice(0, displayedPosts);
        const postsHtml = postsToShow.map(post => {
            let contentHtml = '';
            
            // Handle different content types
            if (post.type === 'photo' || post.type === 'video') {
                // Try to get image from different possible sources
                const imageUrl = post.full_picture || 
                              post.attachments?.data?.[0]?.media?.image?.src || 
                              post.attachments?.data?.[0]?.subattachments?.data?.[0]?.media?.image?.src;
                              
                if (imageUrl) {
                    contentHtml = `
                        <div class="mb-3">
                            <img src="${imageUrl}" 
                                 alt="Post content" 
                                 class="w-full rounded-lg shadow-sm"
                                 style="max-height: 400px; object-fit: cover;">
                        </div>`;
                }
            }
            
            return `
                <div class="border-b pb-4">
                    <div class="flex justify-between mb-2">
                        <span class="text-sm text-gray-500">${new Date(post.created_time).toLocaleDateString()}</span>
                        <span class="text-sm font-semibold text-green-600">${post.likes} likes</span>
                    </div>
                    ${post.message ? `<p class="text-gray-800 mb-3">${post.message}</p>` : ''}
                    ${contentHtml}
                    <div class="mt-2 flex space-x-4 text-sm text-gray-500">
                        <span>❤️ ${post.likes}</span>
                        <span>💬 ${post.comments}</span>
                        <span>🔄 ${post.shares}</span>
                    </div>
                </div>
            `;
        }).join('');
        
        $('#postsContainer').html(postsHtml);
        
        // Show/hide load more button
        if (displayedPosts < allPosts.length) {
            $('#loadMoreContainer').removeClass('d-none');
        } else {
            $('#loadMoreContainer').addClass('d-none');
        }
    }
    
    // Handle load more button click
    $('#loadMoreBtn').click(function() {
        displayedPosts += 3;
        displayPosts();
    });
    
    function loadTopics() {
        $.get(`{{ url('/facebook/topics') }}/${brandId}`)
            .done(function(response) {
                if (response.success) {
                    const topics = response.data;
                    const topicsHtml = topics.map(topic => `
                        <div class="border-b pb-4">
                            <div class="flex justify-between mb-2">
                                <span class="text-sm font-semibold">${topic.name}</span>
                                <span class="text-sm text-blue-600">${topic.count} posts</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-blue-600 h-2.5 rounded-full" style="width: ${topic.percentage}%"></div>
                            </div>
                        </div>
                    `).join('');
                    
                    $('#topicsContainer').html(topicsHtml);
                }
            })
            .fail(function() {
                $('#topicsContainer').html('<div class="alert alert-danger">Failed to load topics</div>');
            });
    }
    
    // Load data progressively
    loadInsights();
    setTimeout(loadPosts, 500);
    setTimeout(loadTopics, 1000);
    
    // Handle brand selection change
    $('#brandSelector').change(function() {
        window.location.href = `{{ route('facebook.dashboard') }}?brand_id=${$(this).val()}`;
    });
    
    // Handle refresh button click
    $('#refreshData').click(function() {
        const button = $(this);
        button.addClass('fa-spin');
        
        $.post(`{{ url('/facebook/update') }}/${brandId}`)
            .done(function(response) {
                if (response.success) {
                    loadInsights();
                    setTimeout(loadPosts, 500);
                    setTimeout(loadTopics, 1000);
                } else {
                    alert('Failed to refresh data: ' + response.message);
                }
            })
            .fail(function() {
                alert('Failed to refresh data');
            })
            .always(function() {
                button.removeClass('fa-spin');
            });
    });
});
</script>

<style>
.campaign-header .data-cell.selected::after {
    content: '';
    margin-left: 5px;
    display: inline-block; 
    border: 4px solid transparent;
}

.campaign-header .data-cell.selected.sort-asc::after {
    border-bottom-color: #333;
}

.campaign-header .data-cell.selected.sort-desc::after { 
    border-top-color: #333;
}

.adsets-header .data-cell.selected::after {
    content: '';
    margin-left: 5px;
    display: inline-block; 
    border: 4px solid transparent;
}

.adsets-header .data-cell.selected.sort-asc::after {
    border-bottom-color: #333;
}

.adsets-header .data-cell.selected.sort-desc::after { 
    border-top-color: #333;
}

.interest-header .data-cell.selected::after {
    content: '';
    margin-left: 5px;
    display: inline-block; 
    border: 4px solid transparent;
}

.interest-header .data-cell.selected.sort-asc::after {
    border-bottom-color: #333;
}

.interest-header .data-cell.selected.sort-desc::after { 
    border-top-color: #333;
}

.adsets-header {
    padding: 5px;
}

#campaigns-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}

.adsets-container {
    background-color: rgba(37,40,105,0.05);
}

.interests-container {
    background-color: rgba(37,40,105,0.05);
}

.sub-data-container {
    /* Add borders, spacing, etc. if needed */
}

.data-row {
    line-height: 34px;
}

.data-cell {
    flex: 1;
    padding: 5px; 
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

.campaign-container {
    width: 100%; 
    padding: 10px;
}

.campaign-row, .campaign-header {
    /*padding-top:10px;*/
    /*border-bottom: 1px solid #ddd;*/
}

.campaign-header, .data-header {
    font-weight: bold;
}

.data-cell {
    flex: 1; 
    padding: 8px;
}

.selected-campaign {
    background-color: #e4fcd5;
    margin-left: 0;
}

.selected-campaign div:first-child {
    margin-left: -15px;
}

.data-row .col-2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.data-loader {
    margin: 20px;
}

.headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

.brand-selector {
    max-width: 300px;
    margin-bottom: 20px;
}

.refresh-button {
    margin-left: 10px;
    cursor: pointer;
}

.refresh-button:hover {
    color: #007bff;
}

/* Additional styles for the restored layout */
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.font-bold {
    font-weight: 700;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-800 {
    color: #1f2937;
}

.bg-white {
    background-color: #ffffff;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}
</style>
@endsection