@php
  $total = (int) ($spam_score['total_spam_score'] ?? 0);
  if ($total > 15) {
      $riskVariant = 'danger';
      $riskIcon = 'bi-shield-exclamation';
      $riskLabel = __('app.high_risk');
  } elseif ($total > 5) {
      $riskVariant = 'warning';
      $riskIcon = 'bi-shield-minus';
      $riskLabel = __('app.medium_risk');
  } else {
      $riskVariant = 'success';
      $riskIcon = 'bi-shield-check';
      $riskLabel = __('app.low_risk');
  }
  $meterPct = min(100, max(4, round(($total / 28) * 100)));
@endphp
<script src="{{ asset('assets/js/app.js') }}"></script>
<style>
  .spam-score-modal.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
  }
  .spam-score-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .spam-score-hero {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.07) 0%, var(--bs-body-bg) 60%);
  }
  html[data-theme-mode="dark"] .spam-score-modal .spam-score-hero {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, var(--bs-body-bg) 60%);
  }
  .spam-score-value {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .spam-score-meter {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(var(--bs-secondary-rgb), 0.2);
    overflow: hidden;
  }
  .spam-score-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
  }
  .spam-findings .list-group-item {
    border-left: 0;
    border-right: 0;
    font-size: 0.875rem;
  }
  .spam-findings .list-group-item:first-child {
    border-top: 0;
  }
</style>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg spam-score-modal">
  <div class="modal-content border-0 shadow">
    <div class="modal-header border-bottom-0 pb-0">
      <div class="d-flex align-items-start gap-3 w-100">
        <div class="flex-shrink-0">
          <span class="avatar avatar-sm avatar-rounded bg-primary-transparent text-primary d-flex align-items-center justify-content-center" style="width:2.75rem;height:2.75rem;">
            <i class="bi bi-shield-check fs-18"></i>
          </span>
        </div>
        <div class="flex-grow-1 min-w-0">
          <h5 class="modal-title fw-semibold mb-1">{{ __('app.spam_score') }}</h5>
          <p class="small mb-0">{{ __('app.spam_modal_subtitle') }}</p>
        </div>
        <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="modal" aria-label="{{ __('app.close') }}"></button>
      </div>
    </div>

    <div class="modal-body pt-3">
      <div class="rounded-3 border bg-body-secondary bg-opacity-50 p-3 mb-4">
        <div class="d-flex gap-2 align-items-start">
          <i class="bi bi-info-circle text-primary flex-shrink-0 mt-1"></i>
          <div class="small">
            <div class="fw-semibold mb-1">{{ __('app.spam_about_this_check') }}</div>
            <div>{!! __('app.spam_score_help') !!}</div>
          </div>
        </div>
      </div>

      <div class="spam-score-hero p-4 mb-4">
        <div class="row align-items-center g-4">
          <div class="col-sm-4 text-center text-sm-start">
            <div class="text-uppercase fs-11 fw-semibold letter-spacing-1 mb-2">{{ __('app.spam_assessment_summary') }}</div>
            <div class="spam-score-value">{{ $total }}</div>
            <div class="small mt-1">{{ __('app.total_spam_score') }}</div>
          </div>
          <div class="col-sm-8">
            <div class="d-flex align-items-center gap-2 mb-3">
              <span class="badge bg-{{ $riskVariant }} bg-opacity-10 text-{{ $riskVariant }} border border-{{ $riskVariant }} border-opacity-25 px-3 py-2 rounded-pill">
                <i class="bi {{ $riskIcon }} me-1"></i>{{ $riskLabel }}
              </span>
            </div>
            <div class="small mb-2">{{ __('app.spam_score_meter_caption') }}</div>
            <div class="spam-score-meter" role="progressbar" aria-valuenow="{{ $total }}" aria-valuemin="0" aria-valuemax="28" aria-label="{{ __('app.total_spam_score') }}">
              <span class="bg-{{ $riskVariant }}" style="width: {{ $meterPct }}%;"></span>
            </div>
            <div class="d-flex justify-content-between mt-1 small">
              <span>0</span>
              <span>{{ __('app.spam_scale_low') }}</span>
              <span>{{ __('app.spam_scale_elevated') }}</span>
              <span>{{ __('app.spam_scale_high') }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex align-items-center gap-2 mb-3">
        <span class="avatar avatar-xs avatar-rounded bg-light border">
          <i class="bi bi-list-check"></i>
        </span>
        <h6 class="mb-0 fw-semibold fs-14">{{ __('app.spam_findings') }}</h6>
      </div>

      <div class="card border shadow-sm spam-findings">
        <div class="card-body p-0">
          @if(!empty($spam_score['details']) && count($spam_score['details']) > 0)
            <ul class="list-group list-group-flush rounded-bottom">
              @foreach($spam_score['details'] as $line)
                <li class="list-group-item d-flex align-items-start gap-2 py-3 px-3">
                  <i class="bi bi-chevron-right text-{{ $riskVariant }} opacity-75 flex-shrink-0 mt-1 small"></i>
                  <span class="small lh-base">{{ $line }}</span>
                </li>
              @endforeach
            </ul>
          @else
            <div class="p-4 text-center">
              <span class="avatar avatar-sm avatar-rounded bg-success-transparent text-success mb-3 d-inline-flex align-items-center justify-content-center" style="width:2.5rem;height:2.5rem;">
                <i class="bi bi-check-lg"></i>
              </span>
              <p class="small mb-0">{{ __('app.spam_no_heuristic_matches') }}</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <div class="modal-footer border-top bg-body-secondary bg-opacity-25">
      <button type="button" class="btn btn-primary px-4" data-bs-dismiss="modal">
        {{ __('app.close') }}
      </button>
    </div>
  </div>
</div>