@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3>Risk Scoring Engine</h3>
    <p>Weighted supply chain risk: Weather 30% · Inflation 20% · News/Geopolitical 40% · Currency 10%</p>
</div>

<div class="row g-3">

    {{-- Left: selector + result --}}
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-body">
                <label class="form-label fw-semibold" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    Select Country
                </label>
                <select id="risk-country-select" class="form-select mb-3">
                    <option value="" disabled selected>Choose a country…</option>
                    @foreach($countriesList as $c)
                        @if(isset($c['cca3'], $c['name']['common']))
                            <option value="{{ $c['cca3'] }}" @if(request('code') === $c['cca3']) selected @endif>
                                {{ $c['flag'] ?? '' }} {{ $c['name']['common'] }}
                            </option>
                        @endif
                    @endforeach
                </select>
                <button id="btn-calculate" class="btn btn-accent w-100">
                    <i class="bi bi-calculator me-2"></i> Calculate Risk Score
                </button>
            </div>
        </div>

        {{-- Result panel --}}
        <div id="risk-result" class="d-none">
            <div class="card mb-3">
                <div class="card-body text-center">
                    <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color:#5a8099;" class="mb-1">
                        Total Risk Score
                    </div>
                    <div id="result-score" style="font-size:3.5rem; font-weight:800; line-height:1;"></div>
                    <div id="result-label" class="badge mt-2" style="font-size:.85rem; padding:6px 16px;"></div>
                    <div id="result-name" class="mt-2" style="color:#7eceff; font-size:.9rem;"></div>
                </div>
            </div>

            {{-- Component bars --}}
            <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;">
                        Risk Components
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1" style="font-size:.78rem;">
                            <span>Weather Risk (30%)</span><span id="w-val">—</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div id="w-bar" class="progress-bar bg-info" style="width:0%"></div>
                        </div>
                        <div id="w-label" style="font-size:.7rem; color:#5a8099; margin-top:3px;"></div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1" style="font-size:.78rem;">
                            <span>Inflation Risk (20%)</span><span id="i-val">—</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div id="i-bar" class="progress-bar bg-warning" style="width:0%"></div>
                        </div>
                        <div id="i-label" style="font-size:.7rem; color:#5a8099; margin-top:3px;"></div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1" style="font-size:.78rem;">
                            <span>News / Geopolitical (40%)</span><span id="n-val">—</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div id="n-bar" class="progress-bar bg-danger" style="width:0%"></div>
                        </div>
                        <div id="n-label" style="font-size:.7rem; color:#5a8099; margin-top:3px;"></div>
                    </div>
                    <div class="mb-1">
                        <div class="d-flex justify-content-between mb-1" style="font-size:.78rem;">
                            <span>Currency Risk (10%)</span><span id="c-val">—</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div id="c-bar" class="progress-bar bg-success" style="width:0%"></div>
                        </div>
                        <div id="c-label" style="font-size:.7rem; color:#5a8099; margin-top:3px;"></div>
                    </div>
                </div>
            </div>

            {{-- Sentiment --}}
            <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;">
                        News Sentiment Analysis
                    </div>
                    <div class="d-flex gap-2 mb-2">
                        <div class="flex-fill text-center p-2" style="background:rgba(40,199,111,.1); border-radius:8px;">
                            <div style="font-size:1.2rem; font-weight:700; color:#28c76f;" id="sent-pos">0%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Positive</div>
                        </div>
                        <div class="flex-fill text-center p-2" style="background:rgba(100,100,100,.1); border-radius:8px;">
                            <div style="font-size:1.2rem; font-weight:700; color:#8899aa;" id="sent-neu">0%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Neutral</div>
                        </div>
                        <div class="flex-fill text-center p-2" style="background:rgba(220,53,69,.1); border-radius:8px;">
                            <div style="font-size:1.2rem; font-weight:700; color:#ff6b6b;" id="sent-neg">0%</div>
                            <div style="font-size:.7rem; color:#5a8099;">Negative</div>
                        </div>
                    </div>
                    <div id="sent-words" style="font-size:.73rem; color:#5a8099;"></div>
                </div>
            </div>

            {{-- Related news --}}
            <div class="card" id="news-panel">
                <div class="card-body">
                    <div class="fw-semibold mb-2" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                        Related News
                    </div>
                    <div id="news-list"></div>
                </div>
            </div>
        </div>

        {{-- Loading --}}
        <div id="risk-loading" class="d-none text-center py-4" style="color:#5a8099;">
            <div class="spinner-border text-info mb-2"></div>
            <div style="font-size:.85rem;">Fetching real-time data…</div>
        </div>
    </div>

    {{-- Right: radar chart + saved scores --}}
    <div class="col-lg-8 d-flex flex-column gap-3">

        {{-- Radar chart --}}
        <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;">
                    Risk Profile Radar
                </div>
                <canvas id="risk-radar" style="max-height:300px;"></canvas>
            </div>
        </div>

        {{-- Saved scores table --}}
        <div class="card flex-grow-1">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    All Calculated Risk Scores
                </div>
                @if($savedScores->isEmpty())
                    <p class="text-center py-4" style="color:#5a8099; font-size:.85rem;">
                        No scores calculated yet. Select a country and click <em>Calculate</em>.
                    </p>
                @else
                    <div class="table-responsive">
                        <table class="table table-dark align-middle" style="font-size:.82rem;">
                            <thead>
                                <tr>
                                    <th>Country</th>
                                    <th class="text-center">Weather</th>
                                    <th class="text-center">Inflation</th>
                                    <th class="text-center">News</th>
                                    <th class="text-center">Currency</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Level</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($savedScores as $rs)
                                <tr>
                                    <td class="fw-semibold">{{ $rs->country_name }}</td>
                                    <td class="text-center">{{ round($rs->weather_risk) }}</td>
                                    <td class="text-center">{{ round($rs->inflation_risk) }}</td>
                                    <td class="text-center">{{ round($rs->news_risk) }}</td>
                                    <td class="text-center">{{ round($rs->currency_risk) }}</td>
                                    <td class="text-center fw-bold text-warning">{{ round($rs->total_score, 1) }}</td>
                                    <td class="text-center">
                                        <span class="badge risk-badge-{{ strtolower($rs->risk_label) }}" style="font-size:.7rem;">
                                            {{ $rs->risk_label }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Radar chart ──────────────────────────────────────────────────────────
    const radarCtx = document.getElementById('risk-radar').getContext('2d');
    let radarChart = new Chart(radarCtx, {
        type: 'radar',
        data: {
            labels: ['Weather', 'Inflation', 'News/Geo', 'Currency'],
            datasets: [{
                label: 'Risk Score',
                data: [0, 0, 0, 0],
                borderColor: '#00d2ff',
                backgroundColor: 'rgba(0,210,255,.15)',
                pointBackgroundColor: '#00d2ff',
                pointRadius: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    min: 0, max: 100,
                    ticks:    { color: '#5a8099', stepSize: 25, backdropColor: 'transparent' },
                    grid:     { color: 'rgba(255,255,255,.08)' },
                    pointLabels: { color: '#a0b8cc', font: { size: 12 } },
                    angleLines:  { color: 'rgba(255,255,255,.08)' },
                }
            },
            plugins: { legend: { display: false } },
        }
    });

    // ── Calculate button ─────────────────────────────────────────────────────
    document.getElementById('btn-calculate').addEventListener('click', function () {
        const code = document.getElementById('risk-country-select').value;
        if (!code) { alert('Please select a country first.'); return; }

        document.getElementById('risk-result').classList.add('d-none');
        document.getElementById('risk-loading').classList.remove('d-none');

        fetch('/api/risk/calculate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
            },
            body: JSON.stringify({ code }),
        })
        .then(r => r.json())
        .then(d => {
            document.getElementById('risk-loading').classList.add('d-none');
            document.getElementById('risk-result').classList.remove('d-none');

            // Score + label
            const scoreEl = document.getElementById('result-score');
            scoreEl.textContent = d.total_score;
            scoreEl.style.color = d.total_score >= 70 ? '#ff6b6b' : d.total_score >= 50 ? '#ffcc33' : d.total_score >= 30 ? '#00d2ff' : '#28c76f';

            const labelEl = document.getElementById('result-label');
            labelEl.textContent = d.risk_label;
            labelEl.className = 'badge mt-2';
            if (d.risk_label === 'Critical') labelEl.style.cssText = 'background:rgba(220,53,69,.3);color:#ff6b6b;font-size:.85rem;padding:6px 16px;';
            else if (d.risk_label === 'High')  labelEl.style.cssText = 'background:rgba(255,193,7,.3);color:#ffcc33;font-size:.85rem;padding:6px 16px;';
            else if (d.risk_label === 'Medium')labelEl.style.cssText = 'background:rgba(0,210,255,.3);color:#00d2ff;font-size:.85rem;padding:6px 16px;';
            else                               labelEl.style.cssText = 'background:rgba(40,199,111,.3);color:#28c76f;font-size:.85rem;padding:6px 16px;';

            document.getElementById('result-name').textContent = d.country;

            // Component bars
            setBar('w', d.weather.risk, `${d.weather.label} · ${d.weather.temp ?? '—'}°C · Wind ${d.weather.wind ?? '—'} km/h`);
            setBar('i', d.inflation.risk, `Rate: ${d.inflation.rate != null ? d.inflation.rate + '%' : 'N/A'} (${d.inflation.year ?? ''})`);
            setBar('n', d.news.risk, `Sentiment: ${d.news.sentiment}`);
            setBar('c', d.currency.risk, `${d.currency.code}: ${d.currency.rate_vs_usd != null ? d.currency.rate_vs_usd.toFixed(4) : 'N/A'} / USD`);

            // Sentiment
            document.getElementById('sent-pos').textContent = d.news.posPercent + '%';
            document.getElementById('sent-neg').textContent = d.news.negPercent + '%';
            document.getElementById('sent-neu').textContent = Math.max(0, 100 - d.news.posPercent - d.news.negPercent) + '%';

            const posW = d.news.matched.positive.length ? '🟢 ' + d.news.matched.positive.join(', ') : '';
            const negW = d.news.matched.negative.length ? '🔴 ' + d.news.matched.negative.join(', ') : '';
            document.getElementById('sent-words').innerHTML = [posW, negW].filter(Boolean).join('<br>') || 'No significant keywords found.';

            // Radar
            radarChart.data.datasets[0].data = [d.weather.risk, d.inflation.risk, d.news.risk, d.currency.risk];
            radarChart.data.datasets[0].label = d.country;
            radarChart.update();

            // News list
            const nl = document.getElementById('news-list');
            nl.innerHTML = d.articles.map(a => `
                <div class="mb-2 pb-2" style="border-bottom:1px solid rgba(255,255,255,.06);">
                    <a href="${a.url}" target="_blank" rel="noopener" style="color:#7eceff; font-size:.78rem; text-decoration:none; font-weight:600;">
                        ${a.title}
                    </a>
                    <div style="font-size:.68rem; color:#5a8099; margin-top:2px;">${a.source}</div>
                </div>
            `).join('') || '<span style="font-size:.78rem;color:#5a8099;">No articles found.</span>';
        })
        .catch(() => {
            document.getElementById('risk-loading').classList.add('d-none');
            alert('Error calculating risk. Please try again.');
        });
    });

    function setBar(prefix, value, label) {
        document.getElementById(prefix + '-val').textContent   = Math.round(value);
        document.getElementById(prefix + '-bar').style.width  = value + '%';
        document.getElementById(prefix + '-label').textContent = label;
    }
});
</script>
@endpush