@*
    Site Call Audit (#22) Task 7 — three Health-dashboard KPI tiles for the
    Site Call channel: Buffered / Parked / Stuck. Renders Bootstrap card tiles
    in a single row, each acting as a navigation link to a pre-filtered Site
    Calls report view. The component is purely presentational — the parent page
    owns the refresh loop and passes the latest snapshot via the Snapshot
    parameter. Mirrors AuditKpiTiles and the Notification Outbox KPI section.
*@

@namespace ZB.MOM.WW.ScadaBridge.CentralUI.Components.Health
@inject NavigationManager Navigation

<div class="d-flex justify-content-between align-items-center mb-2">
    <h6 class="text-muted mb-0">Site Calls</h6>
    <a class="small" href="/site-calls/report">View details &rarr;</a>
</div>
<div class="row g-3 mb-3">
    @* ── Buffered tile ─────────────────────────────────────────────────────── *@
    <div class="col-lg-4 col-md-6 col-12">
        <button type="button"
                class="card h-100 w-100 text-start border-0 shadow-none p-0 site-call-kpi-tile"
                data-test="site-call-kpi-buffered"
                @onclick="NavigateToBuffered">
            <div class="card-body text-center">
                <h3 class="mb-0">@BufferedDisplay</h3>
                <small class="text-muted">Buffered</small>
            </div>
        </button>
    </div>

    @* ── Stuck tile ────────────────────────────────────────────────────────── *@
    <div class="col-lg-4 col-md-6 col-12">
        <button type="button"
                class="card h-100 w-100 text-start border-0 shadow-none p-0 site-call-kpi-tile @StuckBorderClass"
                data-test="site-call-kpi-stuck"
                @onclick="NavigateToStuck">
            <div class="card-body text-center">
                <h3 class="mb-0 @StuckTextClass">@StuckDisplay</h3>
                <small class="text-muted">Stuck</small>
            </div>
        </button>
    </div>

    @* ── Parked tile ───────────────────────────────────────────────────────── *@
    <div class="col-lg-4 col-md-6 col-12">
        <button type="button"
                class="card h-100 w-100 text-start border-0 shadow-none p-0 site-call-kpi-tile @ParkedBorderClass"
                data-test="site-call-kpi-parked"
                @onclick="NavigateToParked">
            <div class="card-body text-center">
                <h3 class="mb-0 @ParkedTextClass">@ParkedDisplay</h3>
                <small class="text-muted">Parked</small>
            </div>
        </button>
    </div>
</div>
@if (!IsAvailable && !string.IsNullOrEmpty(ErrorMessage))
{
    <div class="text-muted small mb-3">Site Call KPIs unavailable: @ErrorMessage</div>
}