{{--
    Status proportion infographic — a thin horizontal bar showing the
    proportional split of three status buckets (pending / approved / rejected),
    plus a legend with absolute counts.

    Required props:
      $stats   array{total:int, pending:int, approved:int, rejected:int}
      $title   string  Card title (e.g. "Profile pipeline")
--}}

@php
    $sTotal    = (int) max(1, $stats['total']);   // avoid division-by-zero
    $sPending  = (int) ($stats['pending']  ?? 0);
    $sApproved = (int) ($stats['approved'] ?? 0);
    $sRejected = (int) ($stats['rejected'] ?? 0);
    $pPending  = $sTotal > 0 ? ($sPending  / $sTotal) * 100 : 0;
    $pApproved = $sTotal > 0 ? ($sApproved / $sTotal) * 100 : 0;
    $pRejected = $sTotal > 0 ? ($sRejected / $sTotal) * 100 : 0;
@endphp

@if(($stats['total'] ?? 0) > 0)
<section class="proportion-card" aria-label="{{ $title ?? 'Status proportion' }}">
    <div class="proportion-head">
        <div class="proportion-title">{{ $title ?? 'Pipeline' }}</div>
        <div class="proportion-total"><strong>{{ number_format($stats['total']) }}</strong> total</div>
    </div>
    <div class="proportion-bar" role="img" aria-label="Approved {{ round($pApproved) }}%, Pending {{ round($pPending) }}%, Rejected {{ round($pRejected) }}%">
        @if($sApproved > 0)<div class="proportion-seg s-success" style="width: {{ $pApproved }}%;" title="Approved — {{ $sApproved }} ({{ round($pApproved) }}%)"></div>@endif
        @if($sPending  > 0)<div class="proportion-seg s-warning" style="width: {{ $pPending  }}%;" title="Pending — {{ $sPending }} ({{ round($pPending) }}%)"></div>@endif
        @if($sRejected > 0)<div class="proportion-seg s-danger"  style="width: {{ $pRejected }}%;" title="Rejected — {{ $sRejected }} ({{ round($pRejected) }}%)"></div>@endif
    </div>
    <div class="proportion-legend">
        <span class="proportion-legend-item"><span class="proportion-dot s-success"></span>Approved <strong>{{ number_format($sApproved) }}</strong> <span class="proportion-pct">({{ round($pApproved) }}%)</span></span>
        <span class="proportion-legend-item"><span class="proportion-dot s-warning"></span>Pending <strong>{{ number_format($sPending) }}</strong> <span class="proportion-pct">({{ round($pPending) }}%)</span></span>
        <span class="proportion-legend-item"><span class="proportion-dot s-danger"></span>Rejected <strong>{{ number_format($sRejected) }}</strong> <span class="proportion-pct">({{ round($pRejected) }}%)</span></span>
    </div>
</section>

@once
@push('styles')
<style>
    .proportion-card { padding: 14px 18px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 16px; box-shadow: var(--shadow-xs); }
    .proportion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .proportion-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-tertiary); font-weight: 700; }
    .proportion-total { font-size: 12.5px; color: var(--text-secondary); }
    .proportion-total strong { font-family: 'Space Grotesk', Inter, sans-serif; color: var(--text-primary); font-size: 16px; font-weight: 800; margin-right: 2px; }
    .proportion-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-surface-2); border: 1px solid var(--border); }
    .proportion-seg { transition: opacity .15s; }
    .proportion-seg:hover { opacity: .85; }
    .proportion-seg.s-success { background: var(--success-500); }
    .proportion-seg.s-warning { background: var(--warning-500); }
    .proportion-seg.s-danger  { background: var(--danger-500); }
    .proportion-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; font-size: 12px; }
    .proportion-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 600; }
    .proportion-legend-item strong { color: var(--text-primary); margin-left: 2px; font-family: 'Space Grotesk', Inter, sans-serif; }
    .proportion-pct { color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11.5px; margin-left: 2px; }
    .proportion-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
    .proportion-dot.s-success { background: var(--success-500); }
    .proportion-dot.s-warning { background: var(--warning-500); }
    .proportion-dot.s-danger  { background: var(--danger-500); }
</style>
@endpush
@endonce
@endif