@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3>Watchlist</h3>
    <p>Monitor your favorite countries for supply chain risks in one place</p>
</div>

@if(session('success'))
    <div class="alert-dark-info p-3 mb-3" role="alert">
        <i class="bi bi-check-circle me-2"></i> {{ session('success') }}
    </div>
@endif

<div class="row g-3">

    {{-- Add to watchlist --}}
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    <i class="bi bi-bookmark-plus me-1"></i> Add Country
                </div>
                <form action="{{ route('watchlist.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" style="font-size:.75rem; color:#5a8099;">Country</label>
                        <select name="country_code" id="wl-select" class="form-select" required
                                onchange="fillCountryName(this)">
                            <option value="" disabled selected>Select a country…</option>
                            @foreach($countriesList as $c)
                                @if(isset($c['cca3']))
                                    <option value="{{ $c['cca3'] }}"
                                            data-name="{{ $c['name']['common'] ?? '' }}"
                                            data-region="{{ $c['region'] ?? '' }}">
                                        {{ $c['flag'] ?? '' }} {{ $c['name']['common'] ?? '' }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <input type="hidden" name="country_name" id="wl-name">
                    <input type="hidden" name="region"       id="wl-region">
                    <div class="mb-3">
                        <label class="form-label" style="font-size:.75rem; color:#5a8099;">Notes (optional)</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="Why are you watching this country?"></textarea>
                    </div>
                    <button type="submit" class="btn btn-accent w-100">
                        <i class="bi bi-bookmark-check me-1"></i> Add to Watchlist
                    </button>
                </form>
            </div>
        </div>

        {{-- Stats --}}
        <div class="card">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    Summary
                </div>
                @php
                    $total    = $watchlist->count();
                    $critical = $watchlist->filter(fn($w) => $w->risk && $w->risk->risk_label === 'Critical')->count();
                    $high     = $watchlist->filter(fn($w) => $w->risk && $w->risk->risk_label === 'High')->count();
                    $medium   = $watchlist->filter(fn($w) => $w->risk && $w->risk->risk_label === 'Medium')->count();
                    $low      = $watchlist->filter(fn($w) => $w->risk && in_array($w->risk->risk_label, ['Low', null]))->count();
                @endphp
                <div class="d-flex flex-column gap-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:.8rem;">Total monitored</span>
                        <span class="fw-bold text-info">{{ $total }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:.8rem;">Critical risk</span>
                        <span class="badge risk-badge-critical">{{ $critical }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:.8rem;">High risk</span>
                        <span class="badge risk-badge-high">{{ $high }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:.8rem;">Medium risk</span>
                        <span class="badge risk-badge-medium">{{ $medium }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:.8rem;">Low / Unscored</span>
                        <span class="badge risk-badge-low">{{ $total - $critical - $high - $medium }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Watchlist cards --}}
    <div class="col-lg-8">
        @if($watchlist->isEmpty())
            <div class="card p-5 text-center" style="color:#5a8099;">
                <i class="bi bi-bookmark-x" style="font-size:2.5rem; margin-bottom:10px;"></i>
                <p style="font-size:.95rem;">Your watchlist is empty.</p>
                <p style="font-size:.82rem;">Add countries using the form on the left to track their supply chain risk.</p>
            </div>
        @else
            <div class="row g-3">
                @foreach($watchlist as $item)
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <div class="fw-bold" style="font-size:.95rem; color:#e0e8f0;">
                                        {{ $item->country_name }}
                                    </div>
                                    <div style="font-size:.73rem; color:#5a8099;">
                                        {{ $item->region }} · Added {{ $item->created_at->diffForHumans() }}
                                    </div>
                                </div>
                                <form action="{{ route('watchlist.destroy', $item->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm p-1" style="background:none; color:#5a8099;"
                                            onclick="return confirm('Remove {{ $item->country_name }} from watchlist?')"
                                            title="Remove">
                                        <i class="bi bi-x-circle"></i>
                                    </button>
                                </form>
                            </div>

                            @if($item->risk)
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between mb-1" style="font-size:.72rem; color:#5a8099;">
                                        <span>Risk Score</span>
                                        <span class="fw-bold" style="color:#ffcc33;">{{ round($item->risk->total_score, 1) }}</span>
                                    </div>
                                    <div class="progress" style="height:6px;">
                                        <div class="progress-bar"
                                             style="width:{{ min(100, $item->risk->total_score) }}%;
                                                    background:{{ $item->risk->total_score >= 70 ? '#dc3545' : ($item->risk->total_score >= 50 ? '#ffc107' : ($item->risk->total_score >= 30 ? '#0dcaf0' : '#28c76f')) }};">
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex gap-1 flex-wrap mb-2">
                                    <span style="font-size:.67rem; background:rgba(255,255,255,.06); padding:2px 7px; border-radius:4px; color:#8899aa;">
                                        ☁ {{ round($item->risk->weather_risk) }}
                                    </span>
                                    <span style="font-size:.67rem; background:rgba(255,255,255,.06); padding:2px 7px; border-radius:4px; color:#8899aa;">
                                        📈 {{ round($item->risk->inflation_risk) }}
                                    </span>
                                    <span style="font-size:.67rem; background:rgba(255,255,255,.06); padding:2px 7px; border-radius:4px; color:#8899aa;">
                                        📰 {{ round($item->risk->news_risk) }}
                                    </span>
                                    <span class="badge risk-badge-{{ strtolower($item->risk->risk_label) }}" style="font-size:.67rem;">
                                        {{ $item->risk->risk_label }}
                                    </span>
                                </div>
                            @else
                                <div class="mb-2" style="font-size:.77rem; color:#5a8099;">
                                    No risk score yet.
                                </div>
                            @endif

                            @if($item->notes)
                                <div style="font-size:.73rem; color:#7a9ab5; font-style:italic;">
                                    "{{ $item->notes }}"
                                </div>
                            @endif

                            <div class="mt-3 d-flex gap-2">
                                <a href="{{ route('risk') }}?code={{ $item->country_code }}"
                                   class="btn btn-sm btn-accent flex-fill" style="font-size:.72rem;">
                                    <i class="bi bi-shield-check me-1"></i> Recalculate
                                </a>
                                <a href="{{ route('comparison') }}"
                                   class="btn btn-sm flex-fill" style="background:rgba(255,255,255,.07); color:#e0e8f0; font-size:.72rem;">
                                    <i class="bi bi-bar-chart-line me-1"></i> Compare
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
function fillCountryName(select) {
    const opt = select.options[select.selectedIndex];
    document.getElementById('wl-name').value   = opt.dataset.name   || '';
    document.getElementById('wl-region').value = opt.dataset.region || '';
}
</script>
@endpush