@extends('layouts.app')

@section('content')

<div class="page-header mb-4">
    <h3>Pusat Intelijen Berita</h3>
    <p>Analisis sentimen bertenaga AI untuk berita logistik global, perdagangan, dan ekonomi</p>
</div>

{{-- ── Sentiment Summary ── --}}
@if($sentimentSummary)
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card p-3">
            <div class="d-flex align-items-center gap-3">
                <div style="width:70px; height:70px; border-radius:50%;
                            border: 4px solid {{ $sentimentSummary['sentiment'] === 'positive' ? '#28c76f' : ($sentimentSummary['sentiment'] === 'negative' ? '#ff6b6b' : '#8899aa') }};
                            display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <i class="bi bi-{{ $sentimentSummary['sentiment'] === 'positive' ? 'emoji-smile' : ($sentimentSummary['sentiment'] === 'negative' ? 'emoji-frown' : 'emoji-neutral') }}"
                       style="font-size:1.6rem; color:{{ $sentimentSummary['sentiment'] === 'positive' ? '#28c76f' : ($sentimentSummary['sentiment'] === 'negative' ? '#ff6b6b' : '#8899aa') }};"></i>
                </div>
                <div>
                    <div style="font-size:.72rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">Sentimen Keseluruhan</div>
                    <div style="font-size:1.5rem; font-weight:700;
                                color:{{ $sentimentSummary['sentiment'] === 'positive' ? '#28c76f' : ($sentimentSummary['sentiment'] === 'negative' ? '#ff6b6b' : '#8899aa') }};">
                        {{ $sentimentSummary['sentiment'] === 'positive' ? 'Positif' : ($sentimentSummary['sentiment'] === 'negative' ? 'Negatif' : 'Netral') }}
                    </div>
                    <div style="font-size:.75rem; color:#5a8099;">
                        {{ $sentimentSummary['totalWords'] }} kata dianalisis
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3">
            <div style="font-size:.72rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-3">Distribusi Sentimen</div>
            <div class="mb-2">
                <div class="d-flex justify-content-between mb-1" style="font-size:.75rem;">
                    <span style="color:#28c76f;">Positif</span><span>{{ $sentimentSummary['posPercent'] }}%</span>
                </div>
                <div class="progress" style="height:8px;">
                    <div class="progress-bar" style="width:{{ $sentimentSummary['posPercent'] }}%; background:#28c76f;"></div>
                </div>
            </div>
            <div class="mb-2">
                <div class="d-flex justify-content-between mb-1" style="font-size:.75rem;">
                    <span style="color:#ff6b6b;">Negatif</span><span>{{ $sentimentSummary['negPercent'] }}%</span>
                </div>
                <div class="progress" style="height:8px;">
                    <div class="progress-bar" style="width:{{ $sentimentSummary['negPercent'] }}%; background:#ff6b6b;"></div>
                </div>
            </div>
            <div>
                <div class="d-flex justify-content-between mb-1" style="font-size:.75rem;">
                    <span style="color:#8899aa;">Netral</span><span>{{ $sentimentSummary['neutralPercent'] }}%</span>
                </div>
                <div class="progress" style="height:8px;">
                    <div class="progress-bar" style="width:{{ $sentimentSummary['neutralPercent'] }}%; background:#8899aa;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3 h-100">
            <div style="font-size:.72rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-3">Kata Kunci Sinyal</div>
            @if($sentimentSummary['matchedPositive'])
            <div class="mb-2">
                <span style="font-size:.7rem; color:#28c76f;" class="fw-semibold">🟢 Positif:</span>
                <div style="font-size:.75rem; color:#a0b8cc;" class="mt-1">
                    {{ implode(', ', array_slice($sentimentSummary['matchedPositive'], 0, 8)) }}
                </div>
            </div>
            @endif
            @if($sentimentSummary['matchedNegative'])
            <div>
                <span style="font-size:.7rem; color:#ff6b6b;" class="fw-semibold">🔴 Negatif:</span>
                <div style="font-size:.75rem; color:#a0b8cc;" class="mt-1">
                    {{ implode(', ', array_slice($sentimentSummary['matchedNegative'], 0, 8)) }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endif

{{-- ── Search + Live news ── --}}
<div class="row g-3">

    {{-- Search --}}
    <div class="col-12">
        <div class="card p-3">
            <div class="d-flex gap-2">
                <input id="news-search" type="text" class="form-control" placeholder="Cari berita: contoh shipping, inflasi, kemacetan pelabuhan…" style="max-width:500px;">
                <button id="btn-search-news" class="btn btn-accent px-4">
                    <i class="bi bi-search me-1"></i> Cari
                </button>
            </div>
        </div>
    </div>

    {{-- Live news articles - FULL WIDTH --}}
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="fw-semibold" style="font-size:.85rem; color:#7eceff;">
                <i class="bi bi-newspaper me-1"></i> Berita Terbaru
                <span id="news-count" class="ms-2" style="font-size:.72rem; color:#5a8099;">
                    @if(!empty($allArticles))
                        {{ count($allArticles) }} artikel
                    @else
                        Memuat...
                    @endif
                </span>
            </div>
            <div class="d-flex gap-2">
                <button id="btn-clear-cache" class="btn btn-sm btn-outline-warning">
                    <i class="bi bi-trash2 me-1"></i>Clear Cache
                </button>
                <button id="btn-refresh-news" class="btn btn-sm btn-info">
                    <i class="bi bi-arrow-clockwise me-1"></i>Refresh
                </button>
            </div>
        </div>
        <div id="news-feed">
            @if(!empty($allArticles))
                <div class="alert alert-success d-flex align-items-center mb-3" style="background:rgba(40,199,111,0.1); border:1px solid rgba(40,199,111,0.3); color:#28c76f;">
                    <i class="bi bi-check-circle me-2"></i>
                    <small>
                        <strong>{{ count($allArticles) }} berita berhasil dimuat</strong> dari GNews API dengan gambar terbaru
                    </small>
                </div>
                
                {{-- Debug: Show first article URL for testing --}}
                @if(config('app.debug') && !empty($allArticles[0]['url']))
                <div class="alert alert-info d-flex align-items-center mb-3" style="background:rgba(0,210,255,0.1); border:1px solid rgba(0,210,255,0.3); color:#00d2ff; font-size:.75rem;">
                    <i class="bi bi-bug me-2"></i>
                    <small>
                        <strong>DEBUG:</strong> Sample URL = <code style="background:rgba(0,0,0,0.2); padding:2px 6px; border-radius:4px;">{{ Str::limit($allArticles[0]['url'], 80) }}</code>
                        <br>Valid: {{ filter_var($allArticles[0]['url'], FILTER_VALIDATE_URL) ? '✅ YES' : '❌ NO' }}
                    </small>
                </div>
                @endif
            @else 
                <div class="alert alert-warning d-flex align-items-center mb-3" style="background:rgba(255,193,7,0.1); border:1px solid rgba(255,193,7,0.3); color:#ffc107;">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <small>
                        <strong>Sedang memuat berita...</strong> Jika tidak muncul dalam 30 detik, silakan refresh halaman
                    </small>
                </div>
            @endif
            
            @foreach($allArticles as $article)
            @php
                $cleanUrl = $article['url'] ?? '';
                // Strict URL validation
                $isValidUrl = !empty($cleanUrl) && 
                              $cleanUrl !== '#' && 
                              filter_var($cleanUrl, FILTER_VALIDATE_URL) &&
                              (str_starts_with($cleanUrl, 'http://') || str_starts_with($cleanUrl, 'https://'));
                
                // Security: ensure URL is not javascript: or data: protocol
                if ($isValidUrl && (str_starts_with(strtolower($cleanUrl), 'javascript:') || str_starts_with(strtolower($cleanUrl), 'data:'))) {
                    $isValidUrl = false;
                }
            @endphp
            
            {{-- CLEAN STRUCTURE: <div class="card"> wrapper, <a> inside for clickability --}}
            <div class="card mb-3" style="border: 1px solid rgba(126,206,255,0.2); overflow: hidden;">
                @if($isValidUrl)
                {{-- Valid URL: Entire content is wrapped in <a> tag --}}
                <a href="{{ $cleanUrl }}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="news-article-link">
                @else
                {{-- Invalid URL: Show as disabled div --}}
                <div class="news-article-disabled" style="opacity: 0.5; cursor: not-allowed;">
                @endif
                
                    <div class="p-3">
                        <div class="d-flex gap-3">
                            {{-- Article Image --}}
                            @if(!empty($article['image']))
                                <img src="{{ $article['image'] }}" 
                                     alt="News thumbnail"
                                     class="flex-shrink-0"
                                     style="width:100px; height:80px; object-fit:cover; border-radius:8px;"
                                     onerror="this.style.display='none';">
                            @else
                                <div class="flex-shrink-0 d-flex align-items-center justify-content-center"
                                     style="width:100px; height:80px; background:linear-gradient(135deg, #1e3a8a, #3b82f6); border-radius:8px;">
                                    <i class="bi bi-newspaper" style="color:white; font-size:1.5rem;"></i>
                                </div>
                            @endif
                            
                            {{-- Article Content --}}
                            <div class="flex-grow-1">
                                {{-- Title --}}
                                <h6 class="article-title mb-2" 
                                    style="color:#e8f4f8; font-weight:600; font-size:.92rem; line-height:1.4;">
                                    {{ $article['title'] ?? 'Tanpa Judul' }}
                                </h6>
                                
                                {{-- Description --}}
                                <p class="mb-2" style="font-size:.78rem; color:#7a9ab5; line-height:1.5;">
                                    {{ Str::limit($article['description'] ?? 'Deskripsi tidak tersedia.', 140) }}
                                </p>
                                
                                {{-- Metadata Row --}}
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        {{-- Topic Badge --}}
                                        @if(!empty($article['topic']))
                                        <span class="badge" style="background:rgba(126,206,255,0.15); color:#7eceff; font-size:.68rem;">
                                            <i class="bi bi-tag-fill me-1"></i>{{ strtoupper($article['topic']) }}
                                        </span>
                                        @endif
                                        
                                        {{-- Source --}}
                                        <span style="font-size:.7rem; color:#5a8099;">
                                            <i class="bi bi-building me-1"></i>{{ $article['source']['name'] ?? 'Unknown' }}
                                        </span>
                                        
                                        {{-- Publish Date --}}
                                        <span style="font-size:.7rem; color:#5a8099;">
                                            <i class="bi bi-clock me-1"></i>
                                            @php
                                                try {
                                                    $publishDate = isset($article['publishedAt']) ? \Carbon\Carbon::parse($article['publishedAt']) : null;
                                                    $daysAgo = $publishDate ? $publishDate->diffInDays(now()) : null;
                                                } catch (\Exception $e) {
                                                    $publishDate = null;
                                                    $daysAgo = null;
                                                }
                                            @endphp
                                            @if($daysAgo === 0)
                                                Hari ini
                                            @elseif($daysAgo === 1)
                                                Kemarin
                                            @elseif($daysAgo !== null && $daysAgo <= 7)
                                                {{ $daysAgo }} hari lalu
                                            @else
                                                {{ $publishDate ? $publishDate->format('d M Y') : 'Baru saja' }}
                                            @endif
                                        </span>
                                        
                                        {{-- Image Badge --}}
                                        @if(!empty($article['image']))
                                        <span class="badge bg-success" style="font-size:.6rem;">✓ GAMBAR</span>
                                        @endif
                                        
                                        {{-- Live Badge --}}
                                        @if(isset($article['type']) && $article['type'] === 'live')
                                        <span class="badge bg-success" style="font-size:.6rem;">LIVE</span>
                                        @endif
                                    </div>
                                    
                                    {{-- Call to Action Text --}}
                                    @if($isValidUrl)
                                    <div style="font-size:.7rem; color:#00d2ff; font-weight:600;">
                                        <i class="bi bi-box-arrow-up-right me-1"></i>Klik untuk baca lengkap
                                    </div>
                                    @else
                                    <div style="font-size:.7rem; color:#ff6b6b;">
                                        <i class="bi bi-exclamation-circle me-1"></i>URL tidak tersedia
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                
                @if($isValidUrl)
                </a>
                @else
                </div>
                @endif
            </div>
            @endforeach

            @if(empty($allArticles))
            <div class="card p-4 text-center" style="color:#5a8099;">
                <i class="bi bi-newspaper" style="font-size:2rem; margin-bottom:10px;"></i>
                <p><strong>Sedang memuat berita terbaru dari GNews API...</strong></p>
                
                <div class="mt-3 p-3" style="background:rgba(0,210,255,0.1); border-radius:8px; text-align:left;">
                    <div style="font-size:0.85rem; color:#7eceff; margin-bottom:8px;"><strong>Status Koneksi:</strong></div>
                    <div style="font-size:0.8rem; color:#a0b8cc;" id="api-status">
                        • API GNews: {{ substr('8315d8a4fd1748c5b4e06c134451b4d4', 0, 10) }}...<br>
                        • Cache: Dinonaktifkan untuk data real-time<br>
                        • Topics: Technology, Business, World News, Breaking News<br>
                        • Filter: Artikel dengan gambar diprioritaskan<br>
                        • Status: <span id="loading-status" style="color:#ffc107;">Menghubungi GNews API...</span>
                    </div>
                </div>
                
                <div class="spinner-border text-info mb-3" id="loading-spinner"></div>
                
                <div class="d-flex gap-2 justify-content-center">
                    <button onclick="location.reload()" class="btn btn-info btn-sm">
                        <i class="bi bi-arrow-clockwise me-1"></i>Muat Ulang
                    </button>
                    <a href="/test-api-simple" class="btn btn-warning btn-sm" target="_blank">
                        <i class="bi bi-lightning me-1"></i>Test API
                    </a>
                    <a href="/debug-news" class="btn btn-outline-secondary btn-sm" target="_blank">
                        <i class="bi bi-bug me-1"></i>Debug
                    </a>
                    <a href="/clear-news-cache" class="btn btn-outline-warning btn-sm" target="_blank">
                        <i class="bi bi-trash me-1"></i>Clear Cache
                    </a>
                </div>
            </div>
            
            <script>
            // Auto-check API status and refresh if needed
            setTimeout(function() {
                const statusElement = document.getElementById('loading-status');
                const spinner = document.getElementById('loading-spinner');
                
                if (statusElement) {
                    // Test API endpoint
                    fetch('/api/test/news-api')
                        .then(response => response.json())
                        .then(data => {
                            if (data.test_request && data.test_request.status === 'success') {
                                statusElement.innerHTML = '<span class="text-success">API Aktif - Auto refresh dalam 5 detik...</span>';
                                setTimeout(() => location.reload(), 5000);
                            } else {
                                statusElement.innerHTML = '<span class="text-danger">API Error - Periksa koneksi atau API key</span>';
                                if (spinner) spinner.style.display = 'none';
                            }
                        })
                        .catch(error => {
                            statusElement.innerHTML = '<span class="text-warning">Network Error - Periksa koneksi internet</span>';
                            if (spinner) spinner.style.display = 'none';
                        });
                }
            }, 3000); // Check after 3 seconds
            </script>
            @endif
        </div>
    </div>
</div>

{{-- Sentiment Summary at Bottom (Full Width) --}}
@if($sentimentSummary)
<div class="row g-3 mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div class="fw-semibold" style="font-size:.85rem; color:#7eceff;">
                        <i class="bi bi-graph-up me-1"></i> Ringkasan Sentimen Berita
                    </div>
                    <div class="d-flex gap-4">
                        <div class="text-center">
                            <div style="font-size:1.2rem; font-weight:700; color:#28c76f;">{{ $sentimentSummary['posPercent'] }}%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Positif</div>
                        </div>
                        <div class="text-center">
                            <div style="font-size:1.2rem; font-weight:700; color:#ff6b6b;">{{ $sentimentSummary['negPercent'] }}%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Negatif</div>
                        </div>
                        <div class="text-center">
                            <div style="font-size:1.2rem; font-weight:700; color:#8899aa;">{{ $sentimentSummary['neutralPercent'] }}%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Netral</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')

<style>
/* ═══════════════════════════════════════════════════════════════
   NEWS ARTICLE CARD STYLES - CLEAN & SIMPLE
   ═══════════════════════════════════════════════════════════════ */

/* GNews Article Links - Native <a> tag behavior */
.news-article-link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.news-article-link:hover {
    color: inherit !important;
}

.news-article-link:hover .article-title {
    color: #00d2ff !important;
    transition: color 0.2s ease;
}

/* Parent card hover effect */
.news-article-link:hover {
    transform: translateY(-2px);
}

.news-article-link:hover ~ * {
    box-shadow: 0 4px 15px rgba(126,206,255,0.2);
}

/* System Article Cards - Uses onclick modal */
.article-system-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.article-system-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,210,255,0.3);
    border-color: rgba(0,210,255,0.5) !important;
}

/* Base card styles */
.card {
    transition: all 0.2s ease;
    border: 1px solid rgba(126,206,255,0.2);
}

/* Ensure no pointer-events conflicts */
.news-article-link * {
    pointer-events: none; /* All child elements don't capture clicks */
}

.news-article-link {
    pointer-events: auto; /* Only the link itself captures clicks */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // ═══════════════════════════════════════════════════════════════
    // BASE URL HELPER
    // ═══════════════════════════════════════════════════════════════
    
    const BASE_URL = '{{ url("/") }}';
    
    function apiUrl(endpoint) {
        return `${BASE_URL}${endpoint}`;
    }
    
    console.log('Base URL:', BASE_URL);

    // ═══════════════════════════════════════════════════════════════
    // NO JAVASCRIPT FOR GNEWS CARDS - PURE HTML <a> TAGS ONLY!
    // ═══════════════════════════════════════════════════════════════
    
    // GNews article cards use native <a href> tags - NO JavaScript needed!
    // This prevents conflicts and page refresh loops
    
    console.log('✅ GNews cards using native HTML links - no JS handlers attached');

    // System Article modal function - specifically for admin articles
    window.openSystemArticleModal = function(id, title, content, category, sentiment, publishDate) {
        console.log('Opening system article modal:', {id, title, category, sentiment, publishDate});
        
        try {
            document.getElementById('articleTitle').textContent = title;
            
            // Format metadata
            const sentimentBadge = getSentimentBadge(sentiment);
            const sentimentText = getSentimentText(sentiment);
            
            document.getElementById('articleMeta').innerHTML = `
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge" style="background:rgba(0,210,255,0.2); color:#00d2ff;">
                                <i class="bi bi-tag-fill me-1"></i>${category.toUpperCase()}
                            </span>
                            <span class="badge ${sentimentBadge}">${sentimentText}</span>
                            <span class="badge bg-info"><i class="bi bi-database me-1"></i>SISTEM</span>
                        </div>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <small class="text-muted">
                            <i class="bi bi-calendar3 me-1"></i>${publishDate}
                        </small>
                    </div>
                </div>
            `;
            
            // Format content with line breaks
            const formattedContent = content
                .replace(/\n\n/g, '</p><p style="margin-bottom:1rem; text-align:justify;">')
                .replace(/\n/g, '<br>')
                .replace(/^/, '<p style="margin-bottom:1rem; text-align:justify;">')
                .replace(/$/, '</p>');
                
            document.getElementById('articleContent').innerHTML = formattedContent;
            
            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('articleModal'));
            modal.show();
            
            console.log('✅ Modal opened successfully');
        } catch (error) {
            console.error('❌ Error opening modal:', error);
            alert('Gagal membuka artikel: ' + error.message);
        }
    };
    
    function getSentimentBadge(sentiment) {
        switch(sentiment) {
            case 'positive': return 'bg-success';
            case 'negative': return 'bg-danger';
            default: return 'bg-secondary';
        }
    }
    
    function getSentimentText(sentiment) {
        switch(sentiment) {
            case 'positive': return 'POSITIF';
            case 'negative': return 'NEGATIF';
            default: return 'NETRAL';
        }
    }

    // ═══════════════════════════════════════════════════════════════
    // NO JAVASCRIPT FOR GNEWS CARDS - PURE HTML <a> TAGS ONLY!
    // ═══════════════════════════════════════════════════════════════
    
    // GNews article cards use native <a href> tags - NO JavaScript needed!
    // This prevents conflicts and page refresh loops
    
    console.log('✅ GNews cards using native HTML links - no JS handlers attached');

    // System Article modal function - specifically for admin articles
    window.openSystemArticleModal = function(id, title, content, category, sentiment, publishDate) {
        console.log('Opening system article modal:', {id, title, category, sentiment, publishDate});
        
        document.getElementById('articleTitle').textContent = title;
        
        // Format metadata with Indonesian labels
        const sentimentBadge = getSentimentBadge(sentiment);
        const sentimentText = getSentimentText(sentiment);
        
        document.getElementById('articleMeta').innerHTML = `
            <div class="row g-2 mb-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge" style="background:rgba(0,210,255,0.2); color:#00d2ff;">
                            <i class="bi bi-tag-fill me-1"></i>${category.toUpperCase()}
                        </span>
                        <span class="badge ${sentimentBadge}">${sentimentText}</span>
                        <span class="badge bg-info"><i class="bi bi-database me-1"></i>SISTEM</span>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <small class="text-muted">
                        <i class="bi bi-calendar3 me-1"></i>${publishDate}
                    </small>
                </div>
            </div>
        `;
        
        // Format content with better typography - preserve line breaks
        const formattedContent = content
            .replace(/\n\n/g, '</p><p style="margin-bottom:1rem; text-align:justify;">')
            .replace(/\n/g, '<br>')
            .replace(/^/, '<p style="margin-bottom:1rem; text-align:justify;">')
            .replace(/$/, '</p>');
            
        document.getElementById('articleContent').innerHTML = formattedContent;
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('articleModal'));
        modal.show();
        
        console.log('Modal should be visible now');
    };

    // Article modal function - Updated to accept individual parameters
    window.openArticleModal = function(id, title, content, category, sentiment, publishDate) {
        document.getElementById('articleTitle').textContent = title;
        
        // Format metadata with Indonesian labels
        const sentimentBadge = getSentimentBadge(sentiment);
        const sentimentText = getSentimentText(sentiment);
        
        document.getElementById('articleMeta').innerHTML = `
            <div class="row g-2 mb-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-info"><i class="bi bi-tag-fill me-1"></i>${category}</span>
                        <span class="badge ${sentimentBadge}">${sentimentText}</span>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <small class="text-muted">
                        <i class="bi bi-calendar3 me-1"></i>${publishDate}
                    </small>
                </div>
            </div>
        `;
        
        // Format content with better typography - preserve line breaks
        const formattedContent = content
            .replace(/\n\n/g, '</p><p style="margin-bottom:1rem;">')
            .replace(/\n/g, '<br>')
            .replace(/^/, '<p style="margin-bottom:1rem;">')
            .replace(/$/, '</p>');
            
        document.getElementById('articleContent').innerHTML = formattedContent;
        
        // Show modal
        new bootstrap.Modal(document.getElementById('articleModal')).show();
    };

    // NEW: Function to open article from card using data attributes
    window.openArticleFromCard = function(cardElement) {
        const id = cardElement.getAttribute('data-article-id');
        const title = cardElement.getAttribute('data-article-title');
        const content = cardElement.getAttribute('data-article-content');
        const category = cardElement.getAttribute('data-article-category');
        const sentiment = cardElement.getAttribute('data-article-sentiment');
        const publishDate = cardElement.getAttribute('data-article-date');
        
        openArticleModal(id, title, content, category, sentiment, publishDate);
    };

    function getSentimentBadge(sentiment) {
        switch(sentiment) {
            case 'positive': return 'bg-success';
            case 'negative': return 'bg-danger';
            default: return 'bg-secondary';
        }
    }

    function getSentimentText(sentiment) {
        switch(sentiment) {
            case 'positive': return 'POSITIF';
            case 'negative': return 'NEGATIF';
            default: return 'NETRAL';
        }
    }

    // Refresh articles button
    document.getElementById('refresh-articles').addEventListener('click', function() {
        const button = this;
        const icon = button.querySelector('.bi-arrow-clockwise');
        const text = button.querySelector('.refresh-text');
        
        // Add loading state
        button.disabled = true;
        icon.style.animation = 'spin 1s linear infinite';
        text.textContent = 'Memuat...';
        
        // Add CSS for spinning animation if not exists
        if (!document.getElementById('spin-styles')) {
            const style = document.createElement('style');
            style.id = 'spin-styles';
            style.textContent = `
                @keyframes spin {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
        }
        
        // Call refresh function
        refreshAnalysisArticles();
        
        // Reset button after 3 seconds
        setTimeout(() => {
            button.disabled = false;
            icon.style.animation = 'none';
            text.textContent = 'Perbarui';
        }, 3000);
    });
        const container = document.getElementById('analysis-articles');
        container.innerHTML = '<div class="text-center py-3"><div class="spinner-border text-info"></div><div class="mt-2 text-muted" style="font-size:.8rem;">Memuat artikel analisis terbaru dari API...</div></div>';
        
        // Use multiple targeted search terms for supply chain analysis
        const searchTerms = [
            'supply chain analysis Indonesia',
            'global trade logistics disruption', 
            'freight shipping economic impact',
            'Indonesia export import trade',
            'supply chain risk management',
            'logistics inflation economic analysis'
        ];
        
        const randomTerm = searchTerms[Math.floor(Math.random() * searchTerms.length)];
        
        fetch(apiUrl(`/api/news?q=${encodeURIComponent(randomTerm)}`))
            .then(r => r.json())
            .then(data => {
                if (data.articles && data.articles.length > 0) {
                    // Filter for articles with valid URLs and recent dates
                    const validArticles = data.articles.filter(article => {
                        const hasValidUrl = article.url && article.url !== '#' && article.url !== '';
                        const isRecent = article.publishedAt && 
                            new Date(article.publishedAt) >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 days
                        return hasValidUrl && isRecent;
                    });
                    
                    if (validArticles.length > 0) {
                        container.innerHTML = validArticles.slice(0, 6).map((article, index) => {
                            const publishedDate = new Date(article.publishedAt);
                            const daysAgo = Math.floor((Date.now() - publishedDate.getTime()) / (1000 * 60 * 60 * 24));
                            
                            // Escape single quotes for onclick
                            const safeTitle = (article.title || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
                            const safeUrl = (article.url || '#').replace(/'/g, "\\'");
                            const safeDescription = (article.description || 'Artikel analisis terbaru...').replace(/'/g, "\\'").replace(/"/g, '&quot;');
                            const safeSource = (article.source?.name || 'Sumber Terpercaya').replace(/'/g, "\\'");
                            
                            return `
                                <div class="card mb-3 article-card" style="cursor: pointer; transition: all 0.2s ease;" 
                                     onclick="openExternalArticle('${safeUrl}', '${safeTitle}')"
                                     onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 15px rgba(0,210,255,0.2)'"
                                     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                            <div style="font-size:.85rem; font-weight:600; line-height:1.4; color:#e8f4f8;">
                                                ${article.title}
                                            </div>
                                            <div class="d-flex gap-1 flex-shrink-0">
                                                <span class="badge bg-success" style="font-size:.65rem;">API</span>
                                                ${getSentimentBadgeIndo(determineSentiment(article.title + ' ' + (article.description || '')))}
                                            </div>
                                        </div>
                                        <p style="font-size:.75rem; color:#7a9ab5; margin:0 0 8px; line-height:1.5;">
                                            ${safeDescription.length > 120 ? safeDescription.substring(0, 120) + '...' : safeDescription}
                                        </p>
                                        <div style="font-size:.7rem; color:#5a8099;">
                                            <span class="badge me-2" style="background:rgba(0,210,255,.15); color:#7eceff; font-size:.65rem;">
                                                <i class="bi bi-building me-1"></i>${safeSource}
                                            </span>
                                            <span class="me-2">
                                                <i class="bi bi-clock me-1"></i>${daysAgo === 0 ? 'Hari ini' : daysAgo === 1 ? 'Kemarin' : daysAgo + ' hari lalu'}
                                            </span>
                                            <span class="text-success" style="font-size:.65rem;">
                                                <i class="bi bi-box-arrow-up-right me-1"></i>Klik untuk buka artikel
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            `;
                        }).join('');
                    } else {
                        container.innerHTML = `
                            <div class="card p-4 text-center" style="color:#ff9999; border-color:rgba(220,53,69,.3);">
                                <i class="bi bi-exclamation-triangle" style="font-size:2rem; margin-bottom:10px; color:#ff6b6b;"></i>
                                <p style="margin-bottom:15px;">Tidak ditemukan artikel dengan link valid dalam 30 hari terakhir.</p>
                                <button onclick="refreshAnalysisArticles()" class="btn btn-outline-warning btn-sm">
                                    <i class="bi bi-arrow-clockwise me-1"></i>Coba Topik Lain
                                </button>
                            </div>
                        `;
                    }
                } else {
                    container.innerHTML = `
                        <div class="card p-4 text-center" style="color:#5a8099;">
                            <i class="bi bi-journal-text" style="font-size:2rem; margin-bottom:10px; color:#7eceff;"></i>
                            <p style="margin-bottom:15px;">Tidak ada artikel analisis ditemukan untuk kata kunci: <strong>${randomTerm}</strong></p>
                            <button onclick="refreshAnalysisArticles()" class="btn btn-outline-info btn-sm">
                                <i class="bi bi-arrow-clockwise me-1"></i>Coba Kata Kunci Lain
                            </button>
                        </div>
                    `;
                }
            })
            .catch(err => {
                console.error('Error fetching analysis articles:', err);
                container.innerHTML = `
                    <div class="card p-4 text-center" style="background:rgba(220,53,69,.1); border-color:rgba(220,53,69,.3);">
                        <i class="bi bi-wifi-off" style="font-size:1.5rem; margin-bottom:10px; color:#ff6b6b;"></i>
                        <p style="color:#ff9999; margin-bottom:15px;">Gagal terhubung ke API berita.</p>
                        <button onclick="refreshAnalysisArticles()" class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-arrow-clockwise me-1"></i>Muat Ulang
                        </button>
                    </div>
                `;
            });
    }
    
    
    function getSentimentBadgeIndo(sentiment) {
        switch(sentiment) {
            case 'positive': 
                return '<span class="badge bg-success ms-1" style="font-size:.6rem;">POSITIF</span>';
            case 'negative': 
                return '<span class="badge bg-danger ms-1" style="font-size:.6rem;">NEGATIF</span>';
            default: 
                return '<span class="badge bg-secondary ms-1" style="font-size:.6rem;">NETRAL</span>';
        }
    }
    
    function determineSentiment(text) {
        const positiveWords = ['naik', 'meningkat', 'positif', 'baik', 'stabil', 'tumbuh', 'untung', 'sukses', 'efisien', 'optimal'];
        const negativeWords = ['turun', 'menurun', 'krisis', 'masalah', 'gangguan', 'inflasi', 'risiko', 'konflik', 'defisit', 'rugi'];
        
        const lowerText = text.toLowerCase();
        let positiveCount = 0;
        let negativeCount = 0;
        
        positiveWords.forEach(word => {
            if (lowerText.includes(word)) positiveCount++;
        });
        
        negativeWords.forEach(word => {
            if (lowerText.includes(word)) negativeCount++;
        });
        
        if (positiveCount > negativeCount) return 'positive';
        if (negativeCount > positiveCount) return 'negative';
        return 'neutral';
    }

    window.openNewsArticle = function(url, title) {
        if (url && url !== '#' && url !== '') {
            // Show loading notification
            const toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.innerHTML = `
                <div style="background:rgba(0,210,255,0.9); color:white; padding:8px 12px; border-radius:6px; font-size:.75rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.3);">
                    <i class="bi bi-box-arrow-up-right me-1"></i>Membuka: ${title.length > 40 ? title.substring(0, 40) + '...' : title}
                </div>
            `;
            document.body.appendChild(toast);
            
            // Remove toast after 2 seconds
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 2000);
            
            window.open(url, '_blank', 'noopener,noreferrer');
        } else {
            // Show error notification
            const errorToast = document.createElement('div');
            errorToast.innerHTML = `
                <div style="background:rgba(220,53,69,0.9); color:white; padding:8px 12px; border-radius:6px; font-size:.75rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.3);">
                    <i class="bi bi-exclamation-triangle me-1"></i>Link artikel tidak tersedia
                </div>
            `;
            document.body.appendChild(errorToast);
            
            setTimeout(() => {
                if (errorToast.parentNode) {
                    errorToast.parentNode.removeChild(errorToast);
                }
            }, 3000);
        }
    };

    window.handleNewsClick = function(url) {
        if (url && url !== '#' && url !== '') {
            return true; // Allow the link to open
        } else {
            // Show notification and prevent default action
            const errorToast = document.createElement('div');
            errorToast.innerHTML = `
                <div style="background:rgba(255,193,7,0.9); color:#000; padding:8px 12px; border-radius:6px; font-size:.75rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.3);">
                    <i class="bi bi-info-circle me-1"></i>Artikel sedang dimuat dari sumber eksternal...
                </div>
            `;
            document.body.appendChild(errorToast);
            
            setTimeout(() => {
                if (errorToast.parentNode) {
                    errorToast.parentNode.removeChild(errorToast);
                }
            }, 3000);
            
            return false; // Prevent the link from opening
        }
    };

    // Live analysis feed
    function loadLiveAnalysis() {
        const liveContainer = document.getElementById('live-articles');
        
        // More targeted supply chain analysis topics
        const analysisTopics = [
            'supply chain disruption analysis',
            'global trade economic impact',
            'logistics freight rates analysis', 
            'Indonesia trade statistics',
            'shipping congestion economic analysis',
            'supply chain inflation impact'
        ];
        
        const randomTopic = analysisTopics[Math.floor(Math.random() * analysisTopics.length)];
        
        fetch(apiUrl(`/api/news?q=${encodeURIComponent(randomTopic)}`))
            .then(r => r.json())
            .then(data => {
                if (data.articles && data.articles.length > 0) {
                    // Filter ONLY for articles with valid external URLs (not our own site or gnews.io)
                    const validExternalArticles = data.articles.filter(article => {
                        const hasValidUrl = article.url && 
                                          article.url !== '#' && 
                                          article.url !== '' && 
                                          article.url.startsWith('http');
                        
                        // Exclude our own domain and gnews.io fallback URLs
                        const isExternalUrl = hasValidUrl &&
                                            !article.url.includes(window.location.hostname) &&
                                            !article.url.includes('gnews.io') &&
                                            !article.url.includes('localhost');
                        
                        // Check if article is recent (30 days)
                        const publishDate = new Date(article.publishedAt);
                        const isRecent = publishDate >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 days
                        
                        return isExternalUrl && isRecent;
                    });
                    
                    if (validExternalArticles.length > 0) {
                        liveContainer.innerHTML = validExternalArticles.slice(0, 4).map(article => {
                            const publishDate = new Date(article.publishedAt);
                            const hoursAgo = Math.floor((Date.now() - publishDate.getTime()) / (1000 * 60 * 60));
                            const timeText = hoursAgo < 24 ? 
                                (hoursAgo < 1 ? 'Baru saja' : `${hoursAgo} jam lalu`) : 
                                `${Math.floor(hoursAgo / 24)} hari lalu`;
                            
                            return `
                                <div class="border-bottom pb-2 mb-2 live-article-item" 
                                     style="border-color: var(--border-color) !important; cursor:pointer; transition: all 0.2s ease; padding: 8px; border-radius: 6px;"
                                     onclick="openExternalArticle('${article.url}', '${article.title.replace(/'/g, '\\\'')}')"
                                     onmouseover="this.style.backgroundColor='rgba(0,210,255,0.08)'; this.style.borderColor='rgba(0,210,255,0.4)'"
                                     onmouseout="this.style.backgroundColor='transparent'; this.style.borderColor='var(--border-color)'">
                                    <div style="font-size:.72rem; font-weight:600; color:#e8f4f8; line-height:1.4; margin-bottom:4px;">
                                        ${article.title.length > 75 ? article.title.substring(0, 75) + '...' : article.title}
                                    </div>
                                    <div style="font-size:.65rem; color:#7a9ab5; margin-bottom:6px; line-height:1.3;">
                                        ${article.description ? (article.description.length > 65 ? article.description.substring(0, 65) + '...' : article.description) : 'Analisis mendalam tentang rantai pasok...'}
                                    </div>
                                    <div style="font-size:.6rem; color:#5a8099; display:flex; justify-content:space-between; align-items:center;">
                                        <div>
                                            <i class="bi bi-building me-1"></i>${article.source?.name || 'Sumber'} • 
                                            <i class="bi bi-clock ms-1 me-1"></i>${timeText}
                                        </div>
                                        <div class="d-flex gap-1">
                                            <span class="badge bg-success" style="font-size:.55rem; padding:1px 4px;">LIVE</span>
                                            <span class="badge bg-primary" style="font-size:.55rem; padding:1px 4px;">EKSTERNAL</span>
                                        </div>
                                    </div>
                                </div>
                            `;
                        }).join('');
                    } else {
                        liveContainer.innerHTML = `
                            <div class="text-center" style="font-size:.7rem; padding: 15px;">
                                <div style="color:#ff9999; margin-bottom:8px;">
                                    <i class="bi bi-link-45deg"></i> Tidak ada artikel eksternal valid dalam 30 hari terakhir
                                </div>
                                <button onclick="loadLiveAnalysis()" class="btn btn-outline-warning btn-sm" style="font-size:.6rem; padding:2px 6px;">
                                    Coba Topik Lain
                                </button>
                            </div>
                        `;
                    }
                } else {
                    liveContainer.innerHTML = `
                        <div class="text-center text-muted" style="font-size:.7rem; padding: 15px;">
                            <i class="bi bi-search" style="font-size:1.2rem; margin-bottom:5px; color:#7eceff;"></i>
                            <div>Mencari analisis untuk: <em>${randomTopic}</em></div>
                        </div>
                    `;
                }
            })
            .catch(() => {
                liveContainer.innerHTML = `
                    <div class="text-center" style="font-size:.7rem; padding: 15px;">
                        <div style="color:#ff9999; margin-bottom:8px;">
                            <i class="bi bi-wifi-off"></i> Koneksi API bermasalah
                        </div>
                        <button onclick="loadLiveAnalysis()" class="btn btn-outline-danger btn-sm" style="font-size:.6rem; padding:2px 6px;">
                            Muat Ulang
                        </button>
                    </div>
                `;
            });
    }
    
    // New function to handle external articles (from API)
    window.openExternalArticle = function(url, title) {
        // Double check that URL is external and valid
        if (url && 
            url !== '#' && 
            url !== '' && 
            url.startsWith('http') && 
            !url.includes(window.location.hostname) && 
            !url.includes('gnews.io')) {
            
            // Show success notification
            const toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.innerHTML = `
                <div style="background:rgba(40,199,111,0.9); color:white; padding:10px 14px; border-radius:6px; font-size:.8rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.3); animation: slideIn 0.3s ease;">
                    <i class="bi bi-check-circle me-1"></i><strong>Membuka artikel</strong>
                    <div style="font-size:.7rem; margin-top:3px; opacity:0.9">${title.length > 40 ? title.substring(0, 40) + '...' : title}</div>
                </div>
            `;
            document.body.appendChild(toast);
            
            // Add animation style if not exists
            if (!document.getElementById('toast-animation')) {
                const style = document.createElement('style');
                style.id = 'toast-animation';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(400px); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                `;
                document.head.appendChild(style);
            }
            
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 3000);
            
            window.open(url, '_blank', 'noopener,noreferrer');
        } else {
            // Show error for invalid URL
            const errorToast = document.createElement('div');
            errorToast.innerHTML = `
                <div style="background:rgba(220,53,69,0.9); color:white; padding:10px 14px; border-radius:6px; font-size:.8rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.3);">
                    <i class="bi bi-exclamation-triangle me-1"></i>URL artikel tidak valid
                </div>
            `;
            document.body.appendChild(errorToast);
            
            setTimeout(() => {
                if (errorToast.parentNode) {
                    errorToast.parentNode.removeChild(errorToast);
                }
            }, 3000);
        }
    };

    // Start live updates
    loadLiveAnalysis();
    liveUpdateInterval = setInterval(loadLiveAnalysis, 60000); // Update every minute

    // Auto-refresh main news feed every 10 minutes
    const mainNewsRefreshInterval = setInterval(function() {
        // Refresh main news feed with latest articles
        const currentQuery = document.getElementById('news-search').value.trim();
        if (!currentQuery) {
            // If no search query, reload page to get fresh articles
            location.reload();
        }
    }, 600000); // 10 minutes
    
    // Check if page has been loading too long
    setTimeout(function() {
        const newsContainer = document.getElementById('news-feed');
        const loadingIndicator = newsContainer.querySelector('.spinner-border');
        
        if (loadingIndicator) {
            // Still loading after 10 seconds, show alternative
            newsContainer.innerHTML = `
                <div class="card p-4 text-center" style="color:#ff9999;">
                    <i class="bi bi-exclamation-triangle" style="font-size:2rem; margin-bottom:10px;"></i>
                    <h5>Berita Membutuhkan Waktu Lebih Lama</h5>
                    <p>API GNews sedang lambat merespons. Coba opsi di bawah:</p>
                    <div class="d-flex gap-2 justify-content-center">
                        <button onclick="location.reload()" class="btn btn-warning btn-sm">
                            <i class="bi bi-arrow-clockwise me-1"></i>Coba Lagi
                        </button>
                        <a href="/debug-news" class="btn btn-info btn-sm" target="_blank">
                            <i class="bi bi-bug me-1"></i>Debug API
                        </a>
                        <a href="/clear-news-cache" class="btn btn-secondary btn-sm">
                            <i class="bi bi-trash me-1"></i>Clear Cache
                        </a>
                    </div>
                </div>
            `;
        }
    }, 10000); // 10 seconds timeout

    // Live search
    document.getElementById('btn-search-news').addEventListener('click', doSearch);
    document.getElementById('news-search').addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });

    // Clear Cache button
    document.getElementById('btn-clear-cache').addEventListener('click', function() {
        const button = this;
        const icon = button.querySelector('.bi-trash2');
        const originalText = button.innerHTML;
        
        // Show loading state
        button.disabled = true;
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Clearing...';
        
        fetch('/clear-news-cache', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => response.json())
        .then(data => {
            // Show success
            button.innerHTML = '<i class="bi bi-check-circle me-1"></i>Cleared!';
            button.classList.remove('btn-outline-warning');
            button.classList.add('btn-success');
            
            // Show toast notification
            const toast = document.createElement('div');
            toast.innerHTML = `
                <div style="background:rgba(40,199,111,0.9); color:white; padding:12px 16px; border-radius:8px; font-size:.85rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 6px 20px rgba(0,0,0,0.3); animation: slideIn 0.3s ease;">
                    <i class="bi bi-check-circle me-2"></i><strong>Cache Berhasil Dihapus!</strong><br>
                    <small>Halaman akan refresh otomatis dalam 2 detik...</small>
                </div>
            `;
            document.body.appendChild(toast);
            
            // Auto reload after 2 seconds
            setTimeout(() => {
                location.reload();
            }, 2000);
        })
        .catch(error => {
            // Show error
            button.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>Gagal';
            button.classList.add('btn-danger');
            console.error('Clear cache error:', error);
            
            // Reset button after 3 seconds
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('btn-danger');
                button.classList.add('btn-outline-warning');
                button.disabled = false;
            }, 3000);
        });
    });
    
    // Refresh button
    document.getElementById('btn-refresh-news').addEventListener('click', function() {
        const button = this;
        const icon = button.querySelector('.bi-arrow-clockwise');
        
        // Animate icon
        icon.style.animation = 'spin 1s linear infinite';
        button.disabled = true;
        
        // Add spin animation if not exists
        if (!document.getElementById('spin-animation')) {
            const style = document.createElement('style');
            style.id = 'spin-animation';
            style.textContent = `
                @keyframes spin {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                }
                @keyframes slideIn {
                    from { transform: translateX(400px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
        }
        
        // Show toast
        const toast = document.createElement('div');
        toast.innerHTML = `
            <div style="background:rgba(0,210,255,0.9); color:white; padding:12px 16px; border-radius:8px; font-size:.85rem; position:fixed; top:20px; right:20px; z-index:9999; box-shadow:0 6px 20px rgba(0,0,0,0.3); animation: slideIn 0.3s ease;">
                <i class="bi bi-arrow-clockwise me-2"></i><strong>Memuat Ulang Berita...</strong>
            </div>
        `;
        document.body.appendChild(toast);
        
        // Reload page after 1 second
        setTimeout(() => {
            location.reload();
        }, 1000);
    });

    function doSearch() {
        const q = document.getElementById('news-search').value.trim();
        if (!q) return;
        fetchNews(q);
    }

    window.searchTag = function (tag) {
        document.getElementById('news-search').value = tag;
        fetchNews(tag);
    };

    function fetchNews(query) {
        const feed = document.getElementById('news-feed');
        feed.innerHTML = `<div class="text-center py-5" style="color:#5a8099;">
            <div class="spinner-border text-info mb-2"></div>
            <div>Mencari "${query}"…</div>
        </div>`;

        fetch(apiUrl(`/api/news?q=${encodeURIComponent(query)}`))
            .then(r => r.json())
            .then(d => {
                document.getElementById('news-count').textContent = `${d.total} hasil`;
                if (!d.articles || d.articles.length === 0) {
                    feed.innerHTML = '<div class="card p-4 text-center" style="color:#5a8099;">Tidak ditemukan artikel.</div>';
                    return;
                }
                feed.innerHTML = d.articles.map(a => `
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex gap-3">
                                ${a.image ? `<img src="${a.image}" alt="" style="width:80px; height:60px; object-fit:cover; border-radius:6px; flex-shrink:0;" onerror="this.style.display='none'">` : ''}
                                <div class="flex-grow-1">
                                    <a href="${a.url || '#'}" target="_blank" rel="noopener"
                                       style="color:#e0e8f0; text-decoration:none; font-weight:600; font-size:.88rem;">
                                        ${a.title || 'Tanpa Judul'}
                                    </a>
                                    <p style="font-size:.78rem; color:#7a9ab5; margin-top:5px; margin-bottom:5px;">
                                        ${(a.description || '').substring(0, 140)}${(a.description || '').length > 140 ? '...' : ''}
                                    </p>
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <span style="font-size:.7rem; color:#5a8099;">
                                            <i class="bi bi-building me-1"></i>${a.source?.name || 'Tidak Dikenal'}
                                        </span>
                                        <span style="font-size:.7rem; color:#5a8099;">
                                            <i class="bi bi-clock me-1"></i>${a.publishedAt ? new Date(a.publishedAt).toLocaleDateString('id-ID') : 'Baru saja'}
                                        </span>
                                        ${a.topic ? `<span style="font-size:.65rem; background:rgba(0,210,255,.1); color:#00d2ff; padding:2px 8px; border-radius:99px;">${a.topic}</span>` : ''}
                                        ${a.type === 'live' ? '<span class="badge bg-success" style="font-size:.6rem;">LIVE</span>' : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');
            })
            .catch(() => {
                feed.innerHTML = '<div class="card p-3" style="color:#ff6b6b;">Gagal memuat berita.</div>';
            });
    }

    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        if (liveUpdateInterval) {
            clearInterval(liveUpdateInterval);
        }
        if (mainNewsRefreshInterval) {
            clearInterval(mainNewsRefreshInterval);
        }
    });
});
</script>
@endpush