@extends('layouts.admin')

@section('title', 'Article Detail - ' . Str::limit($article->title, 50))

@push('styles')
<style>
/* Article Detail styles following DaisyRisk design system */
.art-detail-card {
    background: #fff;
    border: 1px solid #EDE5C8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(212,160,23,0.05);
    margin-bottom: 24px;
}
.art-detail-header {
    padding: 16px 22px;
    background: linear-gradient(135deg, rgba(254,243,199,0.5), #fff);
    border-bottom: 1px solid #EDE5C8;
}
.art-detail-body {
    padding: 24px;
}
.art-sentiment-card {
    background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
    border: 1px solid #F2D67C;
    border-radius: 16px;
    padding: 20px;
}
.art-progress-bar {
    background: #F3F4F6;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.art-btn-primary {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.art-btn-primary:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
    box-shadow: 0 3px 12px rgba(245,158,11,0.3);
    transform: translateY(-1px);
}
</style>
@endpush

@section('content')

{{-- Page Header --}}
<div class="mb-6 flex items-center justify-between flex-wrap gap-3">
    <div>
        <nav class="text-sm text-slate-500 mb-2">
            <a href="{{ route('admin.articles.index') }}" class="hover:text-slate-800 transition-colors">Article Analysis</a>
            <span class="mx-2">/</span>
            <span class="text-slate-800 font-medium">Detail</span>
        </nav>
        <h1 class="text-2xl font-extrabold text-slate-800 leading-tight">
            Article <span style="color:#F59E0B;">Detail</span>
        </h1>
    </div>
    <div class="flex items-center gap-3">
        @if(!$article->newsSentiment)
            <form method="POST" action="{{ route('admin.articles.analyze', $article) }}" class="inline">
                @csrf
                <button type="submit" 
                        class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg shadow-sm transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                    Analyze Sentiment
                </button>
            </form>
        @endif
        
        <form method="POST" action="{{ route('admin.articles.toggle-publish', $article) }}" class="inline">
            @csrf
            @method('PATCH')
            <button type="submit" 
                    class="inline-flex items-center gap-2 px-4 py-2 {{ $article->published_at ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-green-500 hover:bg-green-600' }} text-white text-sm font-medium rounded-lg shadow-sm transition-colors">
                @if($article->published_at)
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                    </svg>
                    Set to Draft
                @else
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    Publish
                @endif
            </button>
        </form>
        
        <a href="{{ route('admin.articles.index') }}" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium rounded-lg shadow-sm transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Articles
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Article Content -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Article Header -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
            @if($article->image_url)
                <img src="{{ $article->image_url }}" 
                     alt="Article image" 
                     class="w-full h-64 object-cover rounded-lg mb-6">
            @endif
            
            <div class="flex flex-wrap items-center gap-3 mb-4">
                @if($article->country)
                    <span class="px-3 py-1 bg-blue-900 text-blue-300 rounded-full text-sm font-medium">
                        {{ $article->country->name }}
                    </span>
                @endif
                
                @if($article->newsCategory)
                    <span class="px-3 py-1 bg-purple-900 text-purple-300 rounded-full text-sm font-medium">
                        {{ $article->newsCategory->name }}
                    </span>
                @endif
                
                <span class="px-3 py-1 {{ $article->published_at ? 'bg-green-900 text-green-300' : 'bg-gray-900 text-gray-300' }} rounded-full text-sm font-medium">
                    {{ $article->published_at ? 'Published' : 'Draft' }}
                </span>
            </div>
            
            <h1 class="text-2xl font-bold text-white mb-4">{{ $article->title }}</h1>
            
            <div class="flex items-center gap-4 text-sm text-slate-400 mb-6">
                @if($article->author)
                    <span>By {{ $article->author }}</span>
                @endif
                @if($article->source)
                    <span>Source: {{ $article->source }}</span>
                @endif
                @if($article->published_at)
                    <span>{{ $article->published_at->format('F j, Y \a\t g:i A') }}</span>
                @endif
            </div>
            
            @if($article->description)
                <div class="text-slate-300 text-lg leading-relaxed mb-6">
                    {{ $article->description }}
                </div>
            @endif
            
            @if($article->content)
                <div class="prose prose-invert max-w-none">
                    <div class="text-slate-300 leading-relaxed whitespace-pre-line">{{ $article->content }}</div>
                </div>
            @endif
            
            @if($article->url)
                <div class="mt-6 pt-6 border-t border-slate-800">
                    <a href="{{ $article->url }}" 
                       target="_blank" 
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                        Read Original Article
                    </a>
                </div>
            @endif
        </div>
    </div>
    
    <!-- Analysis Sidebar -->
    <div class="space-y-6">
        <!-- Sentiment Analysis Results -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                Sentiment Analysis
            </h3>
            
            @if($article->newsSentiment)
                <div class="space-y-4">
                    <!-- Overall Sentiment -->
                    <div class="text-center">
                        @php
                            $sentiment = $article->newsSentiment->sentiment;
                            $bgClass = $sentiment === 'positive' ? 'bg-green-900 text-green-300' : 
                                      ($sentiment === 'negative' ? 'bg-red-900 text-red-300' : 'bg-yellow-900 text-yellow-300');
                        @endphp
                        <div class="inline-flex items-center gap-2 px-4 py-2 {{ $bgClass }} rounded-lg text-lg font-semibold mb-2">
                            @if($sentiment === 'positive')
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1.01M15 10h1.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            @elseif($sentiment === 'negative')
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h1.01M15 10h1.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            @else
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            @endif
                            {{ ucfirst($sentiment) }}
                        </div>
                    </div>
                    
                    <!-- Sentiment Breakdown -->
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-400">Positive</span>
                            <span class="text-sm font-medium text-green-400">{{ number_format($article->newsSentiment->positive_percentage, 1) }}%</span>
                        </div>
                        <div class="w-full bg-slate-800 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: {{ $article->newsSentiment->positive_percentage }}%"></div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-400">Negative</span>
                            <span class="text-sm font-medium text-red-400">{{ number_format($article->newsSentiment->negative_percentage, 1) }}%</span>
                        </div>
                        <div class="w-full bg-slate-800 rounded-full h-2">
                            <div class="bg-red-500 h-2 rounded-full" style="width: {{ $article->newsSentiment->negative_percentage }}%"></div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-400">Neutral</span>
                            <span class="text-sm font-medium text-yellow-400">{{ number_format($article->newsSentiment->neutral_percentage, 1) }}%</span>
                        </div>
                        <div class="w-full bg-slate-800 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: {{ $article->newsSentiment->neutral_percentage }}%"></div>
                        </div>
                    </div>
                    
                    <!-- Analysis Details -->
                    <div class="pt-4 border-t border-slate-800 space-y-3">
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-400">Total Words</span>
                            <span class="text-sm text-white">{{ number_format($article->newsSentiment->total_words) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-400">Analyzed Words</span>
                            <span class="text-sm text-white">{{ number_format($article->newsSentiment->analyzed_words) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-400">Positive Score</span>
                            <span class="text-sm text-green-400">{{ number_format($article->newsSentiment->positive_score, 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-400">Negative Score</span>
                            <span class="text-sm text-red-400">{{ number_format($article->newsSentiment->negative_score, 2) }}</span>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-12 h-12 mx-auto mb-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                    <p class="text-slate-400 mb-4">Belum dianalisis</p>
                    <form method="POST" action="{{ route('admin.articles.analyze', $article) }}" class="inline">
                        @csrf
                        <button type="submit" 
                                class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
                            Analyze Now
                        </button>
                    </form>
                </div>
            @endif
        </div>
        
        <!-- Risk Impact -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                Risk Impact
            </h3>
            
            @if($article->newsSentiment)
                @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);
                    }
                @endphp
                
                <div class="text-center mb-6">
                    <div class="text-3xl font-bold mb-2 {{ $impact > 0 ? 'text-green-400' : ($impact < 0 ? 'text-red-400' : 'text-slate-400') }}">
                        @if($impact > 0) +{{ $impact }} @elseif($impact < 0) {{ $impact }} @else 0 @endif
                    </div>
                    <p class="text-sm text-slate-400">Impact Score</p>
                </div>
                
                <!-- Affected Components -->
                <div class="space-y-3">
                    <h4 class="text-sm font-medium text-slate-300">Affected Components</h4>
                    
                    @if($article->country)
                        <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                <span class="text-sm text-slate-300">Country Risk</span>
                            </div>
                            <span class="text-sm {{ $impact !== 0 ? ($impact > 0 ? 'text-green-400' : 'text-red-400') : 'text-slate-400' }}">
                                {{ $impact !== 0 ? ($impact > 0 ? '+' . abs($impact) : $impact) : '0' }}
                            </span>
                        </div>
                    @endif
                    
                    @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['economy', 'financial', 'trade']))
                        <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                <span class="text-sm text-slate-300">Economy</span>
                            </div>
                            <span class="text-sm {{ $impact !== 0 ? ($impact > 0 ? 'text-green-400' : 'text-red-400') : 'text-slate-400' }}">
                                {{ $impact !== 0 ? ($impact > 0 ? '+' . abs($impact) : $impact) : '0' }}
                            </span>
                        </div>
                    @endif
                    
                    @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['weather', 'climate', 'disaster']))
                        <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                <span class="text-sm text-slate-300">Weather</span>
                            </div>
                            <span class="text-sm {{ $impact !== 0 ? ($impact > 0 ? 'text-green-400' : 'text-red-400') : 'text-slate-400' }}">
                                {{ $impact !== 0 ? ($impact > 0 ? '+' . abs($impact) : $impact) : '0' }}
                            </span>
                        </div>
                    @endif
                    
                    @if($article->newsCategory && in_array(strtolower($article->newsCategory->name), ['shipping', 'port', 'logistics']))
                        <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
                                <span class="text-sm text-slate-300">Port Operations</span>
                            </div>
                            <span class="text-sm {{ $impact !== 0 ? ($impact > 0 ? 'text-green-400' : 'text-red-400') : 'text-slate-400' }}">
                                {{ $impact !== 0 ? ($impact > 0 ? '+' . abs($impact) : $impact) : '0' }}
                            </span>
                        </div>
                    @endif
                </div>
            @else
                <div class="text-center py-6">
                    <p class="text-slate-400">Analisis sentimen diperlukan untuk menghitung risk impact</p>
                </div>
            @endif
        </div>
        
        <!-- Publish Status -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                Publish Status
            </h3>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-slate-400">Current Status</span>
                    <span class="px-3 py-1 {{ $article->published_at ? 'bg-green-900 text-green-300' : 'bg-gray-900 text-gray-300' }} rounded-full text-sm font-medium">
                        {{ $article->published_at ? 'Published' : 'Draft' }}
                    </span>
                </div>
                
                @if($article->published_at)
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-slate-400">Published At</span>
                        <span class="text-sm text-slate-300">{{ $article->published_at->format('M d, Y g:i A') }}</span>
                    </div>
                @endif
                
                <div class="pt-3 border-t border-slate-800">
                    <p class="text-xs text-slate-500">
                        {{ $article->published_at ? 'Artikel ini akan tampil pada halaman News user.' : 'Artikel ini tidak akan tampil pada halaman News user.' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection