@extends('layouts.user')

@section('title', 'AI Sentiment Analysis')

@section('content')
<div class="container mx-auto px-6 py-8">
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-800 flex items-center gap-3">
                <span class="text-4xl">🤖</span>
                AI Sentiment Analysis
            </h1>
            <p class="text-gray-600 mt-2">Analisis sentimen berita ekonomi dan supply chain menggunakan Lexicon-Based Analysis</p>
        </div>
        
        <!-- Category Filter -->
        <div class="flex items-center gap-4">
            <select id="categoryFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
                <option value="all" {{ $category == 'all' ? 'selected' : '' }}>Semua Kategori</option>
                <option value="economy" {{ $category == 'economy' ? 'selected' : '' }}>Ekonomi</option>
                <option value="shipping" {{ $category == 'shipping' ? 'selected' : '' }}>Shipping</option>
                <option value="trade" {{ $category == 'trade' ? 'selected' : '' }}>Perdagangan</option>
                <option value="weather" {{ $category == 'weather' ? 'selected' : '' }}>Cuaca</option>
            </select>
            
            <button id="bulkAnalyze" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                📊 Analisis Bulk
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <!-- Total Articles -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm font-medium">Total Berita</p>
                    <p class="text-2xl font-bold text-gray-800">{{ number_format($stats['total']) }}</p>
                </div>
                <div class="p-3 bg-gray-100 rounded-full">
                    <span class="text-xl">📰</span>
                </div>
            </div>
        </div>

        <!-- Positive Sentiment -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm font-medium">Sentimen Positif</p>
                    <p class="text-2xl font-bold text-green-600">{{ $stats['percentages']['positive'] }}%</p>
                    <p class="text-sm text-gray-500">{{ number_format($stats['positive']) }} berita</p>
                </div>
                <div class="p-3 bg-green-100 rounded-full">
                    <span class="text-xl">😊</span>
                </div>
            </div>
        </div>

        <!-- Negative Sentiment -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm font-medium">Sentimen Negatif</p>
                    <p class="text-2xl font-bold text-red-600">{{ $stats['percentages']['negative'] }}%</p>
                    <p class="text-sm text-gray-500">{{ number_format($stats['negative']) }} berita</p>
                </div>
                <div class="p-3 bg-red-100 rounded-full">
                    <span class="text-xl">😔</span>
                </div>
            </div>
        </div>

        <!-- Neutral Sentiment -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm font-medium">Sentimen Netral</p>
                    <p class="text-2xl font-bold text-gray-600">{{ $stats['percentages']['neutral'] }}%</p>
                    <p class="text-sm text-gray-500">{{ number_format($stats['neutral']) }} berita</p>
                </div>
                <div class="p-3 bg-gray-100 rounded-full">
                    <span class="text-xl">😐</span>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- News List -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                        <span>📊</span>
                        Analisis Berita Terbaru
                    </h2>
                </div>
                
                <div class="divide-y divide-gray-200">
                    @forelse($news as $article)
                    <div class="p-6 hover:bg-gray-50 transition-colors">
                        <div class="flex items-start gap-4">
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-800 mb-2 line-clamp-2">
                                    {{ $article->title }}
                                </h3>
                                
                                <div class="flex items-center gap-4 text-sm text-gray-500 mb-3">
                                    <span>{{ $article->published_at ? $article->published_at->format('d M Y H:i') : 'N/A' }}</span>
                                    @if($article->category)
                                    <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">
                                        {{ ucfirst($article->category) }}
                                    </span>
                                    @endif
                                </div>

                                @if($article->newsSentiment && is_object($article->newsSentiment))
                                <!-- Sentiment Display -->
                                <div class="flex items-center gap-4">
                                    <div class="flex items-center gap-2">
                                        @if($article->newsSentiment->sentiment === 'positive')
                                            <span class="text-green-500">😊</span>
                                            <span class="text-green-600 font-medium">Positif</span>
                                        @elseif($article->newsSentiment->sentiment === 'negative')
                                            <span class="text-red-500">😔</span>
                                            <span class="text-red-600 font-medium">Negatif</span>
                                        @else
                                            <span class="text-gray-500">😐</span>
                                            <span class="text-gray-600 font-medium">Netral</span>
                                        @endif
                                    </div>
                                    
                                    <div class="flex items-center gap-3 text-xs">
                                        <span class="text-green-600">+{{ $article->newsSentiment->positive_percentage ?? 0 }}%</span>
                                        <span class="text-red-600">-{{ $article->newsSentiment->negative_percentage ?? 0 }}%</span>
                                    </div>
                                    
                                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium" 
                                            onclick="showSentimentDetail({{ $article->id }})">
                                        Detail →
                                    </button>
                                </div>
                                @else
                                <!-- Not Analyzed -->
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-400 text-sm">Belum dianalisis</span>
                                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"
                                            onclick="analyzeNews({{ $article->id }})">
                                        Analisis →
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="p-12 text-center">
                        <span class="text-6xl mb-4 block">📊</span>
                        <h3 class="text-lg font-medium text-gray-800 mb-2">Tidak Ada Berita</h3>
                        <p class="text-gray-500">Belum ada berita untuk kategori yang dipilih</p>
                    </div>
                    @endforelse
                </div>
                
                @if($news->hasPages())
                <div class="p-6 border-t border-gray-200">
                    {{ $news->links() }}
                </div>
                @endif
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Sentiment Chart -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <span>📈</span>
                    Distribusi Sentimen
                </h3>
                
                <div class="relative">
                    <canvas id="sentimentChart" width="300" height="300"></canvas>
                </div>
                
                <div class="mt-4 space-y-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 bg-green-500 rounded"></div>
                            <span class="text-sm text-gray-600">Positif</span>
                        </div>
                        <span class="font-medium text-green-600">{{ $stats['percentages']['positive'] }}%</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 bg-red-500 rounded"></div>
                            <span class="text-sm text-gray-600">Negatif</span>
                        </div>
                        <span class="font-medium text-red-600">{{ $stats['percentages']['negative'] }}%</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 bg-gray-400 rounded"></div>
                            <span class="text-sm text-gray-600">Netral</span>
                        </div>
                        <span class="font-medium text-gray-600">{{ $stats['percentages']['neutral'] }}%</span>
                    </div>
                </div>
            </div>

            <!-- Text Analyzer -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <span>✍️</span>
                    Analisis Teks Manual
                </h3>
                
                <form id="textAnalysisForm">
                    <textarea id="analysisText" 
                              class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500" 
                              rows="4" 
                              placeholder="Masukkan teks yang ingin dianalisis..."></textarea>
                    
                    <button type="submit" 
                            class="w-full mt-3 bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                        🔍 Analisis Sentimen
                    </button>
                </form>
                
                <div id="analysisResult" class="mt-4 hidden">
                    <!-- Result will be shown here -->
                </div>
            </div>

            <!-- Top Words -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <span>🏷️</span>
                    Kata Paling Sering
                </h3>
                
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-green-600 mb-2">Kata Positif</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach(array_slice($wordClouds['positive'], 0, 10, true) as $word => $count)
                            <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">
                                {{ $word }} ({{ $count }})
                            </span>
                            @endforeach
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-red-600 mb-2">Kata Negatif</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach(array_slice($wordClouds['negative'], 0, 10, true) as $word => $count)
                            <span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">
                                {{ $word }} ({{ $count }})
                            </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sentiment Detail Modal -->
<div id="sentimentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-xl font-bold text-gray-800">Detail Analisis Sentimen</h3>
            <button onclick="closeSentimentModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <div id="sentimentModalContent" class="p-6">
            <!-- Content will be loaded here -->
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Sentiment Chart
const ctx = document.getElementById('sentimentChart').getContext('2d');
new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Positif', 'Negatif', 'Netral'],
        datasets: [{
            data: [
                {{ $stats['percentages']['positive'] }},
                {{ $stats['percentages']['negative'] }},
                {{ $stats['percentages']['neutral'] }}
            ],
            backgroundColor: ['#10B981', '#EF4444', '#6B7280'],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Category Filter
document.getElementById('categoryFilter').addEventListener('change', function() {
    const category = this.value;
    window.location.href = `{{ route('user.sentiment.index') }}?category=${category}`;
});

// Text Analysis
document.getElementById('textAnalysisForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const text = document.getElementById('analysisText').value;
    if (text.length < 10) {
        alert('Teks minimal 10 karakter');
        return;
    }
    
    const button = e.target.querySelector('button');
    const originalText = button.innerHTML;
    button.innerHTML = '⏳ Menganalisis...';
    button.disabled = true;
    
    fetch('{{ route("user.sentiment.analyze-text") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ text: text })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAnalysisResult(data.analysis);
        } else {
            alert('Terjadi kesalahan saat menganalisis');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menganalisis');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
});

// Show Analysis Result
function showAnalysisResult(analysis) {
    const resultDiv = document.getElementById('analysisResult');
    
    let sentimentColor = '';
    let sentimentIcon = '';
    let sentimentText = '';
    
    if (analysis.sentiment === 'positive') {
        sentimentColor = 'text-green-600';
        sentimentIcon = '😊';
        sentimentText = 'Positif';
    } else if (analysis.sentiment === 'negative') {
        sentimentColor = 'text-red-600';
        sentimentIcon = '😔';
        sentimentText = 'Negatif';
    } else {
        sentimentColor = 'text-gray-600';
        sentimentIcon = '😐';
        sentimentText = 'Netral';
    }
    
    resultDiv.innerHTML = `
        <div class="border border-gray-200 rounded-lg p-4">
            <div class="flex items-center gap-2 mb-3">
                <span class="text-xl">${sentimentIcon}</span>
                <span class="font-medium ${sentimentColor}">${sentimentText}</span>
            </div>
            
            <div class="grid grid-cols-3 gap-2 text-sm mb-3">
                <div class="text-center">
                    <div class="text-green-600 font-medium">${analysis.percentages.positive}%</div>
                    <div class="text-gray-500">Positif</div>
                </div>
                <div class="text-center">
                    <div class="text-red-600 font-medium">${analysis.percentages.negative}%</div>
                    <div class="text-gray-500">Negatif</div>
                </div>
                <div class="text-center">
                    <div class="text-gray-600 font-medium">${analysis.percentages.neutral}%</div>
                    <div class="text-gray-500">Netral</div>
                </div>
            </div>
            
            ${analysis.matches.positive.length > 0 ? `
                <div class="mb-2">
                    <div class="text-sm font-medium text-green-600 mb-1">Kata Positif:</div>
                    <div class="flex flex-wrap gap-1">
                        ${analysis.matches.positive.map(word => 
                            `<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">${word}</span>`
                        ).join('')}
                    </div>
                </div>
            ` : ''}
            
            ${analysis.matches.negative.length > 0 ? `
                <div>
                    <div class="text-sm font-medium text-red-600 mb-1">Kata Negatif:</div>
                    <div class="flex flex-wrap gap-1">
                        ${analysis.matches.negative.map(word => 
                            `<span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">${word}</span>`
                        ).join('')}
                    </div>
                </div>
            ` : ''}
        </div>
    `;
    
    resultDiv.classList.remove('hidden');
}

// Analyze Single News
function analyzeNews(newsId) {
    fetch(`{{ url('user/sentiment/analyze') }}/${newsId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload(); // Reload to show updated analysis
        } else {
            alert('Gagal menganalisis berita');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menganalisis berita');
    });
}

// Show Sentiment Detail
function showSentimentDetail(newsId) {
    fetch(`{{ url('user/sentiment/news') }}/${newsId}`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSentimentModal(data.news, data.sentiment);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Gagal memuat detail sentimen');
    });
}

// Show Sentiment Modal
function showSentimentModal(news, sentiment) {
    const modal = document.getElementById('sentimentModal');
    const content = document.getElementById('sentimentModalContent');
    
    const positiveWords = JSON.parse(sentiment.positive_words || '[]');
    const negativeWords = JSON.parse(sentiment.negative_words || '[]');
    
    let sentimentColor = '';
    let sentimentIcon = '';
    let sentimentText = '';
    
    if (sentiment.sentiment === 'positive') {
        sentimentColor = 'text-green-600';
        sentimentIcon = '😊';
        sentimentText = 'Positif';
    } else if (sentiment.sentiment === 'negative') {
        sentimentColor = 'text-red-600';
        sentimentIcon = '😔';
        sentimentText = 'Negatif';
    } else {
        sentimentColor = 'text-gray-600';
        sentimentIcon = '😐';
        sentimentText = 'Netral';
    }
    
    content.innerHTML = `
        <div class="space-y-6">
            <div>
                <h4 class="font-medium text-gray-800 mb-2">Judul Berita</h4>
                <p class="text-gray-600">${news.title}</p>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <span class="text-2xl">${sentimentIcon}</span>
                    <span class="text-xl font-medium ${sentimentColor}">${sentimentText}</span>
                </div>
                
                <div class="flex items-center gap-4 text-sm">
                    <span class="text-green-600">Positif: ${sentiment.positive_percentage}%</span>
                    <span class="text-red-600">Negatif: ${sentiment.negative_percentage}%</span>
                    <span class="text-gray-600">Netral: ${sentiment.neutral_percentage}%</span>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h5 class="font-medium text-green-600 mb-3">Kata-kata Positif (${positiveWords.length})</h5>
                    <div class="flex flex-wrap gap-2">
                        ${positiveWords.map(word => 
                            `<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-sm">${word}</span>`
                        ).join('')}
                    </div>
                </div>
                
                <div>
                    <h5 class="font-medium text-red-600 mb-3">Kata-kata Negatif (${negativeWords.length})</h5>
                    <div class="flex flex-wrap gap-2">
                        ${negativeWords.map(word => 
                            `<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-sm">${word}</span>`
                        ).join('')}
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 rounded-lg">
                <h5 class="font-medium text-gray-800 mb-2">Statistik Analisis</h5>
                <div class="grid grid-cols-4 gap-4 text-sm">
                    <div>
                        <div class="text-gray-500">Total Kata</div>
                        <div class="font-medium">${sentiment.total_words}</div>
                    </div>
                    <div>
                        <div class="text-gray-500">Kata Dianalisis</div>
                        <div class="font-medium">${sentiment.analyzed_words}</div>
                    </div>
                    <div>
                        <div class="text-gray-500">Skor Positif</div>
                        <div class="font-medium text-green-600">${sentiment.positive_score}</div>
                    </div>
                    <div>
                        <div class="text-gray-500">Skor Negatif</div>
                        <div class="font-medium text-red-600">${sentiment.negative_score}</div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    modal.classList.remove('hidden');
}

// Close Sentiment Modal
function closeSentimentModal() {
    document.getElementById('sentimentModal').classList.add('hidden');
}

// Bulk Analyze
document.getElementById('bulkAnalyze').addEventListener('click', function() {
    const button = this;
    const originalText = button.innerHTML;
    
    if (!confirm('Analisis bulk akan memproses berita yang belum dianalisis. Lanjutkan?')) {
        return;
    }
    
    button.innerHTML = '⏳ Menganalisis...';
    button.disabled = true;
    
    const category = document.getElementById('categoryFilter').value;
    const params = new URLSearchParams();
    if (category !== 'all') {
        params.append('category', category);
    }
    
    fetch(`{{ route('user.sentiment.bulk-analyze') }}?${params.toString()}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Berhasil menganalisis ${data.analyzed} dari ${data.total} berita`);
            location.reload();
        } else {
            alert('Gagal melakukan analisis bulk');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat melakukan analisis bulk');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
});
</script>
@endpush