@if (show()) { @if (alert(); as a) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 animate-fade-in">
    <div class="bg-white dark:bg-surface-100 rounded-xl shadow-2xl w-full max-w-lg mx-4 animate-slide-up overflow-hidden">

      <!-- Header -->
      <div class="flex items-center justify-between px-6 py-4 border-b" [class]="headerBgClass() + ' ' + headerBorderClass()">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0"
            [class]="iconBgClass()">
            @if (a.severity === 'low') {
              <fa-icon [icon]="faCircleInfo" size="lg" [class]="iconColorClass()" />
            } @else {
              <fa-icon [icon]="faTriangleExclamation" size="lg" [class]="iconColorClass()" />
            }
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h2 class="text-base font-bold text-surface-900 dark:text-surface-900">{{ severityLabel() }}</h2>
              @if (escalationLabel()) {
                <span class="inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-[11px] font-semibold"
                  [class.bg-negative-100]="escalationLevel() === 3"
                  [class.text-negative-700]="escalationLevel() === 3"
                  [class.dark:bg-negative-100/30]="escalationLevel() === 3"
                  [class.bg-critical-100]="escalationLevel() === 2"
                  [class.text-critical-700]="escalationLevel() === 2"
                  [class.dark:bg-critical-100/30]="escalationLevel() === 2">
                  <fa-icon [icon]="faArrowUp" size="xs" />
                  {{ escalationLabel() }}
                </span>
              }
            </div>
            <div class="flex items-center gap-1 text-xs text-surface-400 mt-0.5">
              <fa-icon [icon]="faClock" size="xs" />
              <span>{{ elapsedLabel() }} · {{ formattedTime() }}</span>
            </div>
          </div>
        </div>
        <button
          (click)="close()"
          class="w-8 h-8 rounded-full flex items-center justify-center text-surface-400 hover:text-surface-600 hover:bg-surface-100 dark:hover:bg-surface-200 transition-colors flex-shrink-0">
          <fa-icon [icon]="faTimes" />
        </button>
      </div>

      <!-- Body -->
      <div class="p-6 space-y-4">
        <!-- Meta info cards -->
        <div class="grid grid-cols-2 gap-3">
          @if (a.groupName) {
            <div class="rounded-lg bg-surface-50 dark:bg-surface-200/50 px-3 py-2.5">
              <div class="text-[11px] font-semibold text-surface-400 uppercase tracking-wide">关联群聊</div>
              <div class="text-sm font-semibold text-surface-800 dark:text-surface-800 mt-0.5 truncate">{{ a.groupName }}</div>
            </div>
          }
          @if (a.communityName && a.communityName !== '未知小区') {
            <div class="rounded-lg bg-surface-50 dark:bg-surface-200/50 px-3 py-2.5">
              <div class="text-[11px] font-semibold text-surface-400 uppercase tracking-wide">所属小区</div>
              <div class="text-sm font-semibold text-surface-800 dark:text-surface-800 mt-0.5 truncate">{{ a.communityName }}</div>
            </div>
          }
          @if (a.store; as store) {
            <div class="rounded-lg bg-surface-50 dark:bg-surface-200/50 px-3 py-2.5">
              <div class="text-[11px] font-semibold text-surface-400 uppercase tracking-wide">所属门店</div>
              <div class="text-sm font-semibold text-surface-800 dark:text-surface-800 mt-0.5 truncate">{{ store.name }}</div>
            </div>
          }
          @if (a.district; as district) {
            <div class="rounded-lg bg-surface-50 dark:bg-surface-200/50 px-3 py-2.5">
              <div class="text-[11px] font-semibold text-surface-400 uppercase tracking-wide">所属区域</div>
              <div class="text-sm font-semibold text-surface-800 dark:text-surface-800 mt-0.5 truncate">{{ district.name }}</div>
            </div>
          }
        </div>

        <!-- Description -->
        <div class="rounded-lg border p-4"
          [class.border-negative-100]="a.severity === 'high'"
          [class.bg-negative-50/40]="a.severity === 'high'"
          [class.dark:border-negative-100/30]="a.severity === 'high'"
          [class.dark:bg-negative-50/5]="a.severity === 'high'"
          [class.border-critical-100]="a.severity === 'medium'"
          [class.bg-critical-50/40]="a.severity === 'medium'"
          [class.dark:border-critical-100/30]="a.severity === 'medium'"
          [class.dark:bg-critical-50/5]="a.severity === 'medium'"
          [class.border-info-100]="a.severity === 'low'"
          [class.bg-info-50/40]="a.severity === 'low'"
          [class.dark:border-info-100/30]="a.severity === 'low'"
          [class.dark:bg-info-50/5]="a.severity === 'low'">
          <p class="text-sm text-surface-700 dark:text-surface-700 leading-relaxed whitespace-pre-line">{{ a.description }}</p>
        </div>

        <!-- Keywords -->
        @if (a.keywords && a.keywords.length > 0) {
          <div class="flex flex-wrap items-center gap-1.5">
            <span class="text-[11px] font-semibold text-surface-400 uppercase tracking-wide">触发词</span>
            @for (kw of a.keywords; track kw) {
              <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-surface-100 dark:bg-surface-200 text-surface-600 dark:text-surface-600">{{ kw }}</span>
            }
          </div>
        }
      </div>

      <!-- Footer -->
      <div class="flex items-center justify-between px-6 py-4 border-t border-surface-100 dark:border-surface-300 bg-surface-50/30 dark:bg-surface-200/20 rounded-b-xl">
        @if (queueLength() > 0) {
          <span class="text-xs text-surface-400">还有 <strong class="text-surface-600">{{ queueLength() }}</strong> 条待处理</span>
        } @else {
          <span></span>
        }
        <div class="flex items-center gap-3 ml-auto">
          <button
            (click)="close()"
            class="text-sm text-surface-500 hover:text-surface-700 dark:text-surface-500 dark:hover:text-surface-400 transition-colors px-1">
            知道了
          </button>
          <button
            (click)="navigate()"
            class="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg text-sm font-semibold text-white transition-all shadow-sm hover:shadow-md active:scale-[0.98]"
            [class]="primaryBtnClass()">
            查看详情
            <fa-icon [icon]="faArrowRight" size="xs" />
          </button>
        </div>
      </div>

    </div>
  </div>
} }