{{--
    Compact risk indicator — a clickable pill. Clicking it opens a modal
    listing the flagged risk factors, banners, and any auto-upgrade notice.

    Expects: $registration, $riskResult, $priorVisit (nullable), $draftVisit

    Design rationale: multiple stacked banners (risk + triage reminder +
    severity banners + close warnings) cluttered the encounter. Most of the
    time the risk is low and the clinician doesn't need to see anything.
    When the risk is moderate/high, a single amber or red pill is enough to
    signal "open this to see why".

    For LOW risk with no flags, this partial renders nothing.
--}}
@php
    $level        = $riskResult['level'] ?? 'low';
    $factors      = $riskResult['factors'] ?? [];
    $banners      = $riskResult['banners'] ?? [];
    $autoUpgraded = $riskResult['auto_upgraded'] ?? false;

    // Nothing to show? Stay out of the way.
    $hasAnything = count($factors) > 0 || count($banners) > 0 || $level !== 'low' || $autoUpgraded;

    $palette = [
        'low'      => ['bg' => '#ecfdf5', 'bar' => '#10b981', 'text' => '#065f46', 'label' => 'LOW RISK'],
        'moderate' => ['bg' => '#fffbeb', 'bar' => '#f59e0b', 'text' => '#92400e', 'label' => 'MODERATE RISK'],
        'high'     => ['bg' => '#fef2f2', 'bar' => '#dc2626', 'text' => '#991b1b', 'label' => 'HIGH RISK'],
    ];
    $c = $palette[$level] ?? $palette['low'];
@endphp

@if($hasAnything)
<div style="margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
    <button type="button" onclick="document.getElementById('anc-risk-modal').classList.add('is-open');document.body.style.overflow='hidden'"
            style="background:{{ $c['bg'] }};border:1px solid {{ $c['bar'] }};color:{{ $c['text'] }};padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px">
        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $c['bar'] }}"></span>
        {{ $c['label'] }}
        @if(count($factors) || count($banners))
            <span style="background:#fff;color:{{ $c['text'] }};font-size:10px;padding:1px 7px;border-radius:999px;margin-left:4px">{{ count($factors) + count($banners) }}</span>
        @endif
        <span style="font-size:10px;opacity:.7;margin-left:2px">▸ view</span>
    </button>

    @if(! ($draftVisit->triage_complete ?? false))
        <span style="background:#fef3c7;border:1px solid #fde68a;color:#92400e;padding:4px 10px;border-radius:999px;font-size:10.5px">
            Triage incomplete — record BP, pulse, temp, weight
        </span>
    @endif
</div>

{{-- Modal (hidden by default) --}}
<div id="anc-risk-modal" class="anc-risk-modal" aria-hidden="true" role="dialog">
    <div class="anc-risk-modal-backdrop" onclick="document.getElementById('anc-risk-modal').classList.remove('is-open');document.body.style.overflow=''"></div>
    <div class="anc-risk-modal-panel">
        <header style="display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #f3f4f6;background:{{ $c['bg'] }}">
            <div>
                <strong style="color:{{ $c['text'] }};font-size:13px;letter-spacing:.3px">{{ $c['label'] }}</strong>
                @if($autoUpgraded)
                    <span style="background:#fff;color:#991b1b;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;border:1px solid #fca5a5;margin-left:8px">AUTO-UPGRADED</span>
                @endif
            </div>
            <button type="button" onclick="document.getElementById('anc-risk-modal').classList.remove('is-open');document.body.style.overflow=''"
                    style="background:transparent;border:none;font-size:22px;cursor:pointer;color:#6b7280;line-height:1;padding:0 4px">&times;</button>
        </header>
        <div style="padding:16px 18px;max-height:70vh;overflow-y:auto">

            @if($priorVisit)
            <div style="background:#f9fafb;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:11.5px;color:#4b5563;display:flex;gap:16px;flex-wrap:wrap">
                <span>Last visit: <strong>{{ $priorVisit->visit_date?->format('d M Y') ?? '—' }}</strong></span>
                <span>Hb: <strong>{{ $priorVisit->hemoglobin ?? '—' }}</strong></span>
                <span>BP: <strong>{{ $priorVisit->bp_display ?? $priorVisit->blood_pressure ?? '—' }}</strong></span>
            </div>
            @endif

            @if(count($factors))
                <div style="margin-bottom:14px">
                    <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 8px">
                        Flagged risk factors ({{ count($factors) }})
                    </h4>
                    <div style="display:flex;flex-wrap:wrap;gap:6px">
                        @foreach($factors as $f)
                            <span style="background:{{ $c['bg'] }};color:{{ $c['text'] }};font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid {{ $c['bar'] }}">{{ $f }}</span>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(count($banners))
                <div>
                    <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 8px">
                        Advisories
                    </h4>
                    @php
                        $sev = [
                            'danger'  => ['bg' => '#fee2e2', 'bar' => '#dc2626', 'text' => '#7f1d1d'],
                            'warning' => ['bg' => '#fef3c7', 'bar' => '#d97706', 'text' => '#78350f'],
                            'info'    => ['bg' => '#dbeafe', 'bar' => '#2563eb', 'text' => '#1e3a8a'],
                        ];
                    @endphp
                    @foreach($banners as $b)
                        @php $sc = $sev[$b['severity']] ?? $sev['info']; @endphp
                        <div style="background:{{ $sc['bg'] }};border-left:3px solid {{ $sc['bar'] }};border-radius:0 6px 6px 0;padding:8px 12px;margin-bottom:6px;color:{{ $sc['text'] }}">
                            <div style="font-weight:600;font-size:12px">{{ $b['title'] }}</div>
                            <div style="font-size:11.5px;margin-top:2px">{{ $b['message'] }}</div>
                        </div>
                    @endforeach
                </div>
            @endif

            @if(! count($factors) && ! count($banners))
                <p style="font-size:12px;color:#9ca3af;text-align:center;padding:20px 0">
                    No specific risk factors flagged. Risk level auto-set by the evaluator.
                </p>
            @endif
        </div>
    </div>
</div>
@endif

@once
<style>
.anc-risk-modal { position:fixed; inset:0; display:none; z-index:120; }
.anc-risk-modal.is-open { display:block; }
.anc-risk-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.45); }
.anc-risk-modal-panel {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(560px, 92vw); max-height:86vh;
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    display:flex; flex-direction:column;
}
</style>
@endonce