@extends('layouts.user')

@section('title', 'Global News Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<style>
/* News Intelligence specific styles */
.news-sentiment-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.news-sentiment-positive {
    background: #DCFCE7;
    color: #166534;
}
.news-sentiment-negative {
    background: #FEE2E2;
    color: #991B1B;
}
.news-sentiment-neutral {
    background: #FEF3C7;
    color: #92400E;
}
.news-risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}
.news-risk-high {
    background: #FEE2E2;
    color: #991B1B;
}
.news-risk-medium {
    background: #FFEDD5;
    color: #9A3412;
}
.news-risk-low {
    background: #DCFCE7;
    color: #166534;
}
.news-component-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    margin: 2px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}
</style>
@endpush

@section('content')

{{-- Flower Decorations --}}
<div class="flower-decorations">
    <div class="flower-left">
        <img src="{{ asset('assets/bunga1.png') }}" alt="Decorative Flower">
    </div>
    <div class="flower-right">
        <img src="{{ asset('assets/bunga2.png') }}" alt="Decorative Flower">
    </div>
</div>

<div class="dashboard-content">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="mb-8">
        <h1 class="text-3xl font-bold tracking-tight text-slate-800">
            Global News <span class="text-amber-600">Intelligence</span>
        </h1>
        <p class="mt-2 text-slate-600">Comprehensive supply chain news analysis with AI-powered sentiment insights and risk assessment.</p>
    </div>

    {{-- ── Summary Cards ──────────────────────────────────────────────── --}}
    <div class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="stat-card-glass border-blue-200 group">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-2xl leading-none">📰</span>
            </div>
            <p class="text-3xl font-bold text-blue-600">{{ number_format($stats['total_articles']) }}</p>
            <p class="mt-1 text-sm text-slate-600">Total Articles</p>
        </div>
        
        <div class="stat-card-glass border-emerald-200 group">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-2xl leading-none">📈</span>
            </div>
            <p class="text-3xl font-bold text-emerald-600">{{ number_format($stats['positive_articles']) }}</p>
            <p class="mt-1 text-sm text-slate-600">Positive Articles</p>
        </div>
        
        <div class="stat-card-glass border-amber-200 group">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-2xl leading-none">➖</span>
            </div>
            <p class="text-3xl font-bold text-amber-600">{{ number_format($stats['neutral_articles']) }}</p>
            <p class="mt-1 text-sm text-slate-600">Neutral Articles</p>
        </div>
        
        <div class="stat-card-glass border-red-200 group">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-2xl leading-none">📉</span>
            </div>
            <p class="text-3xl font-bold text-red-600">{{ number_format($stats['negative_articles']) }}</p>
            <p class="mt-1 text-sm text-slate-600">Negative Articles</p>
        </div>
    </div>

    {{-- ── Today's Analysis Summary ────────────────────────────────── --}}
    <div class="mb-8">
        <div class="stat-card-glass border-purple-200">
            <div class="mb-4">
                <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    🔍 Today's Analysis Summary
                </h3>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div class="text-center">
                    <p class="text-2xl font-bold text-purple-600">{{ number_format($stats['today_analyzed']) }}</p>
                    <p class="text-xs text-slate-600">Articles Analyzed</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-blue-600">{{ number_format($stats['countries_affected']) }}</p>
                    <p class="text-xs text-slate-600">Countries Affected</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-red-600">{{ number_format($stats['high_risk_articles']) }}</p>
                    <p class="text-xs text-slate-600">High Risk Articles</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-orange-600">{{ number_format($stats['medium_risk_articles']) }}</p>
                    <p class="text-xs text-slate-600">Medium Risk Articles</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-green-600">{{ number_format($stats['low_risk_articles']) }}</p>
                    <p class="text-xs text-slate-600">Low Risk Articles</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ── News Articles with Sentiment Analysis ────────────────────── --}}
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2">
        @foreach($news ?? [] as $article)
            <div class="widget-card hover:shadow-lg transition-shadow">
                @if($article->image_url)
                    <img src="{{ $article->image_url }}" alt="{{ $article->title }}" class="h-48 w-full object-cover rounded-t-lg">
                @else
                    <div class="h-48 w-full bg-slate-100 flex items-center justify-center rounded-t-lg">
                        <span class="text-slate-400 text-2xl">📰</span>
                    </div>
                @endif
                
                <div class="widget-body">
                    {{-- Category, Country, and Sentiment Row --}}
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-medium text-slate-500">{{ $article->newsCategory?->name ?? $article->category ?? 'General' }}</span>
                            @if($article->country)
                                <span class="text-xs">•</span>
                                <div class="flex items-center gap-1">
                                    @if($article->country->flag_url)
                                        <img src="{{ $article->country->flag_url }}" alt="{{ $article->country->name }}" class="w-4 h-3 object-cover rounded-sm">
                                    @endif
                                    <span class="text-xs font-medium text-slate-600">{{ $article->country->name }}</span>
                                </div>
                            @endif
                        </div>
                        
                        {{-- Sentiment Badge --}}
                        @if($article->newsSentiment)
                            @php
                                $sentiment = $article->newsSentiment->sentiment;
                                $badgeClass = $sentiment === 'positive' ? 'news-sentiment-positive' : 
                                             ($sentiment === 'negative' ? 'news-sentiment-negative' : 'news-sentiment-neutral');
                            @endphp
                            <span class="news-sentiment-badge {{ $badgeClass }}">
                                {{ ucfirst($sentiment) }}
                            </span>
                        @endif
                    </div>
                    
                    <h3 class="font-semibold text-slate-800 line-clamp-2 mb-2 leading-tight">
                        <a href="{{ $article->url ?? '#' }}" target="_blank" class="hover:text-amber-600 transition-colors">
                            {{ $article->title ?? 'News Article' }}
                        </a>
                    </h3>
                    
                    <p class="text-sm text-slate-600 line-clamp-3 mb-4 leading-relaxed">
                        {{ $article->description ?? 'No description available.' }}
                    </p>
                    
                    {{-- Risk Impact and Affected Components --}}
                    @if($article->newsSentiment)
                        <div class="mb-4 space-y-2">
                            {{-- Risk Impact --}}
                            @php
                                $impact = 0;
                                if ($article->newsSentiment->sentiment === 'positive') {
                                    $impact = round($article->newsSentiment->positive_score * 10);
                                } elseif ($article->newsSentiment->sentiment === 'negative') {
                                    $impact = -round($article->newsSentiment->negative_score * 10);
                                }
                                
                                $riskLevel = 'low';
                                if (abs($impact) >= 7) $riskLevel = 'high';
                                elseif (abs($impact) >= 4) $riskLevel = 'medium';
                            @endphp
                            
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-medium text-slate-500">Risk Impact:</span>
                                @if($impact !== 0)
                                    <span class="news-risk-badge news-risk-{{ $riskLevel }}">
                                        {{ $impact > 0 ? '+' : '' }}{{ $impact }} Risk
                                    </span>
                                @else
                                    <span class="news-risk-badge news-risk-low">No Impact</span>
                                @endif
                            </div>
                            
                            {{-- Affected Components --}}
                            <div class="flex flex-wrap items-start gap-1">
                                <span class="text-xs font-medium text-slate-500 mr-1">Components:</span>
                                
                                @if($article->country)
                                    <span class="news-component-badge">Country</span>
                                @endif
                                
                                @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['economy', 'financial', 'trade']))
                                    <span class="news-component-badge">Economy</span>
                                @endif
                                
                                @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['weather', 'climate', 'disaster']))
                                    <span class="news-component-badge">Weather</span>
                                @endif
                                
                                @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['shipping', 'port', 'logistics']))
                                    <span class="news-component-badge">Port</span>
                                @endif
                                
                                @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['currency', 'exchange', 'forex']))
                                    <span class="news-component-badge">Currency</span>
                                @endif
                            </div>
                        </div>
                    @endif
                    
                    {{-- Source and Date --}}
                    <div class="flex items-center justify-between text-xs text-slate-500 pt-4 border-t border-slate-200">
                        <span class="font-medium">{{ $article->source ?? 'Unknown Source' }}</span>
                        <span>{{ $article->published_at ? \Carbon\Carbon::parse($article->published_at)->diffForHumans() : 'Unknown date' }}</span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Pagination --}}
    @if(isset($news) && method_exists($news, 'links'))
        <div class="mt-8">
            {{ $news->links() }}
        </div>
    @endif
</div>

@endsection