@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">

  {{-- 標題列 --}}
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2">
      <a href="{{ route('hosts.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i>
      </a>
      <h4 class="mb-0">
        <i class="bi bi-bell-fill text-warning me-2"></i>主機監控通知
      </h4>
      @if($stats['unread'] > 0)
        <span class="badge bg-danger">{{ $stats['unread'] }} 未讀</span>
      @endif
    </div>
    <div class="d-flex gap-2">
      {{-- 批次操作工具列（選取後顯示） --}}
      <div id="bulkToolbar" class="d-none d-flex align-items-center gap-2">
        <span class="text-muted small" id="selectedCount"></span>
        <button id="bulkMarkReadBtn" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-check2-all me-1"></i>標記已讀
        </button>
        <button id="bulkDeleteBtn" class="btn btn-sm btn-outline-danger">
          <i class="bi bi-trash me-1"></i>刪除
        </button>
        <button id="bulkCancelBtn" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-x me-1"></i>取消選取
        </button>
      </div>
      <div id="defaultToolbar" class="d-flex gap-2">
        <form method="POST" action="{{ route('host-alerts.mark-all-read') }}" class="d-inline">
          @csrf @method('PATCH')
          <button class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-check2-all me-1"></i>全部已讀
          </button>
        </form>
        <form method="POST" action="{{ route('host-alerts.destroy-read') }}" class="d-inline"
              onsubmit="return confirm('確定刪除所有已讀告警？')">
          @csrf @method('DELETE')
          <button class="btn btn-sm btn-outline-danger">
            <i class="bi bi-trash me-1"></i>清除已讀
          </button>
        </form>
      </div>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show py-2 small">
      {{ session('success') }}
      <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
  @endif

  {{-- 統計卡片 --}}
  <div class="row g-2 mb-3">
    @foreach([
      ['label'=>'全部', 'val'=>$stats['total'],    'icon'=>'bi-bell',                     'bg'=>'#f1f5f9','color'=>'#64748b','q'=>[]],
      ['label'=>'已讀', 'val'=>$stats['read'],     'icon'=>'bi-check2-circle',            'bg'=>'#f0fdf4','color'=>'#16a34a','q'=>['read'=>'1']],
      ['label'=>'未讀', 'val'=>$stats['unread'],   'icon'=>'bi-bell-fill',                'bg'=>'#fee2e2','color'=>'#ef4444','q'=>['read'=>'0']],
      ['label'=>'嚴重', 'val'=>$stats['critical'], 'icon'=>'bi-x-octagon-fill',           'bg'=>'#fee2e2','color'=>'#dc2626','q'=>['level'=>'critical']],
      ['label'=>'錯誤', 'val'=>$stats['error'],    'icon'=>'bi-exclamation-octagon-fill', 'bg'=>'#ffedd5','color'=>'#ea580c','q'=>['level'=>'error']],
      ['label'=>'警告', 'val'=>$stats['warn'],     'icon'=>'bi-exclamation-triangle-fill','bg'=>'#fef3c7','color'=>'#d97706','q'=>['level'=>'warn']],
      ['label'=>'資訊', 'val'=>$stats['info'],     'icon'=>'bi-info-circle-fill',         'bg'=>'#eff6ff','color'=>'#3b82f6','q'=>['level'=>'info']],
    ] as $s)
    <div class="col-6 col-sm-4 col-md-3 col-lg">
      <a href="{{ route('host-alerts.index', $s['q']) }}" class="card border-0 shadow-sm text-decoration-none">
        <div class="card-body d-flex align-items-center gap-3 py-2 px-3">
          <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
               style="width:40px;height:40px;background:{{ $s['bg'] }};">
            <i class="bi {{ $s['icon'] }} fs-5" style="color:{{ $s['color'] }};"></i>
          </div>
          <div>
            <div class="fw-bold lh-1 mb-0" style="font-size:1.4rem;color:{{ $s['color'] }}">{{ $s['val'] }}</div>
            <div class="text-muted small">{{ $s['label'] }}</div>
          </div>
        </div>
      </a>
    </div>
    @endforeach
  </div>

  {{-- 類別快捷鈕 --}}
  <div class="d-flex gap-2 mb-3 flex-wrap">
    <a href="{{ route('host-alerts.index', request()->except('category')) }}"
       class="btn btn-sm {{ !request('category') ? 'btn-dark' : 'btn-outline-secondary' }}">
      全部類別
    </a>
    @foreach($categories as $key => $cat)
    <a href="{{ route('host-alerts.index', array_merge(request()->except('category'), ['category'=>$key])) }}"
       class="btn btn-sm {{ request('category')===$key ? 'btn-'.$cat['color'] : 'btn-outline-'.$cat['color'] }}">
      <i class="bi {{ $cat['icon'] }} me-1"></i>{{ $cat['label'] }}
    </a>
    @endforeach
  </div>

  {{-- 篩選列 --}}
  <form method="GET" action="{{ route('host-alerts.index') }}" class="card border-0 shadow-sm mb-3">
    <div class="card-body py-2 px-3">
      <div class="row g-2 align-items-center">
        <div class="col-sm-4 col-md-3">
          <div class="input-group input-group-sm">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" name="q" class="form-control" placeholder="案件編號 / 客戶 / 主機 / IP"
                   value="{{ request('q') }}">
          </div>
        </div>
        <div class="col-sm-4 col-md-3">
          <select name="project_id" class="form-select form-select-sm">
            <option value="">── 所有專案 ──</option>
            @foreach($projects as $proj)
              <option value="{{ $proj->id }}" {{ request('project_id') == $proj->id ? 'selected' : '' }}>
                {{ $proj->client?->name ? $proj->client->name . ' / ' : '' }}{{ $proj->name }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-3 col-md-2">
          <select name="level" class="form-select form-select-sm">
            <option value="">── 所有等級 ──</option>
            <option value="info"     {{ request('level')==='info'     ? 'selected':'' }}>資訊</option>
            <option value="warn"     {{ request('level')==='warn'     ? 'selected':'' }}>警告</option>
            <option value="error"    {{ request('level')==='error'    ? 'selected':'' }}>錯誤</option>
            <option value="critical" {{ request('level')==='critical' ? 'selected':'' }}>嚴重</option>
          </select>
        </div>
        <div class="col-sm-3 col-md-2">
          <select name="read" class="form-select form-select-sm">
            <option value="">── 所有狀態 ──</option>
            <option value="0" {{ request('read')==='0' ? 'selected':'' }}>未讀</option>
            <option value="1" {{ request('read')==='1' ? 'selected':'' }}>已讀</option>
          </select>
        </div>
        <input type="hidden" name="category" value="{{ request('category') }}">
        <input type="hidden" name="sort" value="{{ request('sort') }}">
        <input type="hidden" name="dir"  value="{{ request('dir') }}">
        <div class="col-sm-auto">
          <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
            @foreach([20,50,100] as $n)
              <option value="{{ $n }}" {{ $perPage == $n ? 'selected' : '' }}>每頁 {{ $n }} 筆</option>
            @endforeach
          </select>
        </div>
        <div class="col-auto">
          <button class="btn btn-sm btn-primary px-3">篩選</button>
          <a href="{{ route('host-alerts.index') }}" class="btn btn-sm btn-outline-secondary">清除</a>
        </div>
      </div>
    </div>
  </form>

  {{-- 告警列表 --}}
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <style>#alertTable th, #alertTable td { padding-left: 28px; padding-right: 28px; }
#alertTable th:nth-child(1), #alertTable td:nth-child(1) { padding-left: 12px; padding-right: 6px; }
#alertTable th:nth-child(2), #alertTable td:nth-child(2) { padding-left: 6px; padding-right: 6px; }
#alertTable th:nth-child(3), #alertTable td:nth-child(3) { padding-left: 10px; padding-right: 10px; }</style>
      <table class="table table-hover align-middle mb-0 small" id="alertTable">
        <thead class="table-light">
          <tr>
            <th class="ps-3" style="width:36px;">
              <input type="checkbox" id="selectAll" class="form-check-input mt-0" title="全選">
            </th>
            <th style="width:8px;"></th>
            @php
              $sortUrl = fn($f) => route('host-alerts.index', array_merge(request()->except(['sort','dir','page']), [
                  'sort' => $f,
                  'dir'  => ($sortField === $f && $sortDir === 'asc') ? 'desc' : 'asc',
              ]));
              $sortIcon = fn($f) => $sortField === $f
                  ? ($sortDir === 'asc' ? '<i class="bi bi-sort-up ms-1"></i>' : '<i class="bi bi-sort-down ms-1"></i>')
                  : '<i class="bi bi-arrow-down-up ms-1 opacity-25"></i>';
            @endphp
            <th style="width:1%;white-space:nowrap;">案件編號</th>
            <th style="width:1%;white-space:nowrap;">
              <a href="{{ $sortUrl('level') }}" class="text-decoration-none text-dark">等級{!! $sortIcon('level') !!}</a>
            </th>
            <th style="width:1%;white-space:nowrap;">問題種類</th>
            <th style="width:1%;white-space:nowrap;">
              <a href="{{ $sortUrl('client') }}" class="text-decoration-none text-dark">客戶{!! $sortIcon('client') !!}</a>
            </th>
            <th style="width:1%;white-space:nowrap;">
              <a href="{{ $sortUrl('host') }}" class="text-decoration-none text-dark">主機{!! $sortIcon('host') !!}</a>
            </th>
            <th>摘要</th>
            <th style="width:1%;white-space:nowrap;">
              <a href="{{ $sortUrl('time') }}" class="text-decoration-none text-dark">時間{!! $sortIcon('time') !!}</a>
            </th>
            <th style="width:1%;white-space:nowrap;"></th>
          </tr>
        </thead>
        <tbody>
          @forelse($alerts as $alert)
          @php
            $host    = $alert->host;
            $proj    = $host?->project;
            $client  = $proj?->client;
            $isRead  = $alert->isRead();
            $isCrit  = $alert->level === 'critical';
            $levelBadge = match($alert->level) {
                'critical' => ['bg'=>'bg-danger',            'icon'=>'bi-x-octagon',          'label'=>'嚴重'],
                'error'    => ['bg'=>'',                     'icon'=>'bi-exclamation-octagon', 'label'=>'錯誤', 'style'=>'background:#ea580c;color:#fff'],
                'warn'     => ['bg'=>'bg-warning text-dark', 'icon'=>'bi-exclamation-triangle','label'=>'警告'],
                default    => ['bg'=>'bg-info text-dark',    'icon'=>'bi-info-circle',         'label'=>'資訊'],
            };
            $caseNo  = 'ALR-' . $alert->created_at->format('Y') . '-' . str_pad($alert->id, 5, '0', STR_PAD_LEFT);

            $normalizedAlerts = collect($alert->alerts ?? [])->map(fn($item) =>
                is_string($item) ? ['category'=>'system','level'=>'warn','message'=>$item,'suggestion'=>null] : $item
            );
            $byCategory = $normalizedAlerts->groupBy('category');

            $modalData = json_encode([
                'id'         => $alert->id,
                'case_no'    => $caseNo,
                'level'      => $alert->level,
                'time'       => $alert->created_at->format('Y-m-d H:i:s'),
                'time_rel'   => $alert->created_at->diffForHumans(),
                'client'     => $client?->name ?? '',
                'host'       => $host?->name ?? '已刪除',
                'ip'         => $host?->ip_address ?? '',
                'host_url'   => $host ? route('hosts.show', $host) : '',
                'email_sent' => $alert->email_sent,
                'read'       => $isRead,
                'alerts'     => $normalizedAlerts->values()->toArray(),
                'categories' => $alert->categories ?? [],
            ], JSON_UNESCAPED_UNICODE);
          @endphp
          <tr class="alert-row {{ $isRead ? '' : 'unread-row' }}"
              data-alert='{{ $modalData }}'
              data-id="{{ $alert->id }}"
              style="{{ !$isRead ? 'background:#fffdf0;' : '' }}">
            {{-- 勾選框 --}}
            <td class="ps-3" onclick="event.stopPropagation()">
              <input type="checkbox" class="form-check-input row-check mt-0" value="{{ $alert->id }}">
            </td>
            {{-- 未讀紅點 --}}
            <td>
              @if(!$isRead)
                <span class="rounded-circle d-inline-block bg-danger" style="width:7px;height:7px;"></span>
              @endif
            </td>
            {{-- 案件編號 --}}
            <td class="font-monospace text-nowrap" style="font-size:.75rem;cursor:pointer;color:#6b7280;"
                onclick="openRowModal(this.closest('tr'))">
              {{ $caseNo }}
            </td>
            {{-- 等級（只顯示一次） --}}
            <td>
              <span class="badge px-2 {{ $levelBadge['bg'] }}"
                    @if(!empty($levelBadge['style'])) style="{{ $levelBadge['style'] }}" @endif>
                <i class="bi {{ $levelBadge['icon'] }} me-1"></i>{{ $levelBadge['label'] }}
              </span>
            </td>
            {{-- 問題種類（類別標籤，緊接等級後） --}}
            <td style="cursor:pointer;" onclick="openRowModal(this.closest('tr'))">
              <div class="d-flex flex-wrap gap-1" style="max-width:160px;">
                @foreach($byCategory as $catKey => $catItems)
                @php $catDef = \App\Models\HostAlert::CATEGORIES[$catKey] ?? ['label'=>$catKey,'color'=>'secondary','icon'=>'bi-bell']; @endphp
                <span class="badge bg-{{ $catDef['color'] }}-subtle text-{{ $catDef['color'] }} border border-{{ $catDef['color'] }}-subtle"
                      style="font-size:.67rem;">
                  <i class="bi {{ $catDef['icon'] }} me-1"></i>{{ $catDef['label'] }}
                </span>
                @endforeach
              </div>
            </td>
            {{-- 客戶（獨立欄） --}}
            <td style="cursor:pointer;white-space:nowrap;" onclick="openRowModal(this.closest('tr'))">
              @if($client)
                <span class="fw-semibold" style="font-size:.85rem;">{{ $client->name }}</span>
              @else
                <span class="text-muted small">—</span>
              @endif
            </td>
            {{-- 主機（獨立欄） --}}
            <td style="cursor:pointer;white-space:nowrap;" onclick="openRowModal(this.closest('tr'))">
              @if($host)
                <span class="{{ $isRead ? 'text-muted' : 'fw-semibold' }}" style="font-size:.85rem;">{{ $host->name }}</span>
                @if($host->ip_address)
                  <span class="text-muted font-monospace ms-1" style="font-size:.72rem;">{{ $host->ip_address }}</span>
                @endif
              @else
                <span class="text-muted small">已刪除</span>
              @endif
            </td>
            {{-- 摘要（最多 2 行，其餘點進去看） --}}
            <td style="cursor:pointer;max-width:200px;" onclick="openRowModal(this.closest('tr'))">
              <div style="font-size:.77rem;line-height:1.6;">
                @foreach($normalizedAlerts->take(2) as $ai)
                  <div class="{{ $ai['level']==='critical' ? 'text-danger' : 'text-secondary' }}"
                       style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    <i class="bi {{ $ai['level']==='critical' ? 'bi-exclamation-circle' : 'bi-dot' }} me-1"></i>{{ $ai['message'] }}
                  </div>
                @endforeach
                @if($normalizedAlerts->count() > 2)
                  <div class="text-muted" style="font-size:.7rem;">… 還有 {{ $normalizedAlerts->count()-2 }} 項</div>
                @endif
              </div>
            </td>
            {{-- 時間 --}}
            <td class="font-monospace text-nowrap" style="font-size:.75rem;cursor:pointer;"
                onclick="openRowModal(this.closest('tr'))">
              {{ $alert->created_at->format('Y/m/d H:i') }}
              <span class="text-muted ms-1" style="font-size:.68rem;">{{ $alert->created_at->diffForHumans() }}</span>
            </td>
            {{-- 操作 --}}
            <td class="text-end pe-2" onclick="event.stopPropagation()">
              <div class="d-flex gap-1 justify-content-end">
                @if(!$isRead)
                  <form method="POST" action="{{ route('host-alerts.mark-read', $alert) }}">
                    @csrf @method('PATCH')
                    <button class="btn btn-xs btn-outline-secondary" style="font-size:.7rem;padding:2px 6px;"
                            title="已讀"><i class="bi bi-check2"></i></button>
                  </form>
                @endif
                <form method="POST" action="{{ route('host-alerts.destroy', $alert) }}"
                      onsubmit="return confirm('確定刪除？')">
                  @csrf @method('DELETE')
                  <button class="btn btn-xs btn-outline-danger" style="font-size:.7rem;padding:2px 6px;"
                          title="刪除"><i class="bi bi-trash"></i></button>
                </form>
              </div>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="10" class="text-center text-muted py-5">
              <i class="bi bi-bell-slash fs-2 d-block mb-2 opacity-25"></i>
              沒有符合條件的告警記錄
            </td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if($alerts->hasPages())
    <div class="card-footer py-2 px-3 d-flex justify-content-between align-items-center">
      <small class="text-muted">共 {{ $alerts->total() }} 筆，第 {{ $alerts->currentPage() }}/{{ $alerts->lastPage() }} 頁</small>
      {{ $alerts->links('pagination::bootstrap-5') }}
    </div>
    @endif
  </div>

</div>

{{-- ════════════════════════════════════════════════════
     告警詳細 Modal
════════════════════════════════════════════════════ --}}
<div class="modal fade" id="alertDetailModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2 px-4" id="alertModalHeader">
        <div>
          <h6 class="modal-title mb-0 fw-bold" id="alertModalTitle"></h6>
          <div class="text-muted small" id="alertModalSub"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body px-4 py-3">
        <div class="mb-2 pb-2 border-bottom">
          <span class="font-monospace text-muted small" id="mdCaseNo"></span>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-sm-4">
            <div class="text-muted small mb-1">客戶</div>
            <div class="fw-semibold" id="mdClient"></div>
          </div>
          <div class="col-sm-4">
            <div class="text-muted small mb-1">主機</div>
            <div class="fw-bold" id="mdHost"></div>
            <div class="font-monospace text-muted small" id="mdIp"></div>
          </div>
          <div class="col-sm-4">
            <div class="text-muted small mb-1">等級 ／ 通知</div>
            <div id="mdLevelBadge" class="mb-1"></div>
            <div id="mdEmailBadge"></div>
          </div>
        </div>
        <div class="mb-3">
          <div class="text-muted small mb-1">問題種類</div>
          <div id="mdCategories" class="d-flex flex-wrap gap-1"></div>
        </div>
        <div class="mb-3">
          <div class="text-muted small mb-2">告警明細</div>
          <div id="mdDetail"></div>
        </div>
        <div class="text-muted small">
          <i class="bi bi-clock me-1"></i><span id="mdTime"></span>
        </div>
      </div>
      <div class="modal-footer py-2 px-4 d-flex justify-content-between">
        <a id="mdHostLink" href="#" class="btn btn-sm btn-outline-primary" target="_blank">
          <i class="bi bi-bar-chart-line me-1"></i>查看主機報告
        </a>
        <div class="d-flex gap-2">
          <button id="mdMarkReadBtn" class="btn btn-sm btn-outline-secondary d-none">
            <i class="bi bi-check2 me-1"></i>標記已讀
          </button>
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">關閉</button>
        </div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
const CATEGORIES  = @json(\App\Models\HostAlert::CATEGORIES);
const CSRF_TOKEN  = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
const alertModal  = new bootstrap.Modal(document.getElementById('alertDetailModal'));
const MARK_SEL_URL   = '{{ route("host-alerts.mark-selected-read") }}';
const DELETE_SEL_URL = '{{ route("host-alerts.destroy-selected") }}';

// ── 勾選邏輯 ──────────────────────────────────────
const selectAll     = document.getElementById('selectAll');
const bulkToolbar   = document.getElementById('bulkToolbar');
const defaultToolbar= document.getElementById('defaultToolbar');
const selectedCount = document.getElementById('selectedCount');

function getChecked() {
  return [...document.querySelectorAll('.row-check:checked')].map(c => c.value);
}

function updateBulkToolbar() {
  const checked = getChecked();
  if (checked.length > 0) {
    bulkToolbar.classList.remove('d-none');
    defaultToolbar.classList.add('d-none');
    selectedCount.textContent = `已選 ${checked.length} 筆`;
  } else {
    bulkToolbar.classList.add('d-none');
    defaultToolbar.classList.remove('d-none');
  }
  // 更新全選狀態
  const all = document.querySelectorAll('.row-check');
  selectAll.indeterminate = checked.length > 0 && checked.length < all.length;
  selectAll.checked = all.length > 0 && checked.length === all.length;
}

selectAll.addEventListener('change', function() {
  document.querySelectorAll('.row-check').forEach(c => c.checked = this.checked);
  updateBulkToolbar();
});

document.querySelectorAll('.row-check').forEach(cb => {
  cb.addEventListener('change', updateBulkToolbar);
});

document.getElementById('bulkCancelBtn').addEventListener('click', () => {
  document.querySelectorAll('.row-check').forEach(c => c.checked = false);
  selectAll.checked = false;
  updateBulkToolbar();
});

document.getElementById('bulkMarkReadBtn').addEventListener('click', () => {
  const ids = getChecked();
  if (!ids.length) return;
  fetch(MARK_SEL_URL, {
    method: 'POST',
    headers: {'Content-Type':'application/json','X-CSRF-TOKEN': CSRF_TOKEN},
    body: JSON.stringify({ids}),
  }).then(r => r.json()).then(d => {
    if (d.ok) {
      ids.forEach(id => {
        const row = document.querySelector(`tr[data-id="${id}"]`);
        if (!row) return;
        row.style.background = '';
        row.classList.remove('unread-row');
        const dot = row.querySelector('.bg-danger.rounded-circle');
        if (dot) dot.remove();
        // 更新 data-alert 的 read 旗標
        try {
          const d = JSON.parse(row.dataset.alert);
          d.read = true;
          row.dataset.alert = JSON.stringify(d);
        } catch(e){}
      });
      document.querySelectorAll('.row-check').forEach(c => c.checked = false);
      selectAll.checked = false;
      updateBulkToolbar();
    }
  });
});

document.getElementById('bulkDeleteBtn').addEventListener('click', () => {
  const ids = getChecked();
  if (!ids.length) return;
  if (!confirm(`確定刪除已選取的 ${ids.length} 筆告警？此操作無法復原。`)) return;
  fetch(DELETE_SEL_URL, {
    method: 'DELETE',
    headers: {'Content-Type':'application/json','X-CSRF-TOKEN': CSRF_TOKEN},
    body: JSON.stringify({ids}),
  }).then(r => r.json()).then(d => {
    if (d.ok) {
      ids.forEach(id => document.querySelector(`tr[data-id="${id}"]`)?.remove());
      selectAll.checked = false;
      updateBulkToolbar();
    }
  });
});

// ── 點擊行開啟 modal ──────────────────────────────
function openRowModal(row) {
  const d = JSON.parse(row.dataset.alert);
  openAlertModal(d);
  if (!d.read) markReadAjax(d.id, row);
}

document.querySelectorAll('.alert-row').forEach(row => {
  // 只有沒有 onclick 屬性的 td 才綁定（避免 checkbox 欄誤觸）
  // 使用 openRowModal 統一處理
});

const LEVEL_META = {
  critical: { label:'嚴重', headerBg:'bg-danger bg-opacity-10',   badge:'<span class="badge bg-danger px-2 py-1"><i class="bi bi-x-octagon me-1"></i>嚴重</span>' },
  error:    { label:'錯誤', headerBg:'bg-warning bg-opacity-25',  badge:'<span class="badge px-2 py-1" style="background:#ea580c;color:#fff"><i class="bi bi-exclamation-octagon me-1"></i>錯誤</span>' },
  warn:     { label:'警告', headerBg:'bg-warning bg-opacity-10',  badge:'<span class="badge bg-warning text-dark px-2 py-1"><i class="bi bi-exclamation-triangle me-1"></i>警告</span>' },
  info:     { label:'資訊', headerBg:'bg-info bg-opacity-10',     badge:'<span class="badge bg-info text-dark px-2 py-1"><i class="bi bi-info-circle me-1"></i>資訊</span>' },
};
function levelMeta(level) { return LEVEL_META[level] || LEVEL_META['warn']; }

function openAlertModal(d) {
  const meta = levelMeta(d.level);
  const header = document.getElementById('alertModalHeader');
  header.className = 'modal-header py-2 px-4 ' + meta.headerBg;

  document.getElementById('alertModalTitle').textContent =
    '【' + meta.label + '】 ' + (d.client ? d.client + ' › ' : '') + d.host;
  document.getElementById('alertModalSub').textContent = d.case_no + '　' + d.time + '　' + d.time_rel;

  document.getElementById('mdCaseNo').textContent = '案件編號：' + (d.case_no || '');
  document.getElementById('mdClient').textContent = d.client || '（未分類）';
  document.getElementById('mdHost').textContent   = d.host;
  document.getElementById('mdIp').textContent     = d.ip || '';

  document.getElementById('mdLevelBadge').innerHTML = levelMeta(d.level).badge;

  document.getElementById('mdEmailBadge').innerHTML = d.email_sent
    ? '<span class="badge bg-info text-dark"><i class="bi bi-envelope-check me-1"></i>已寄信通知</span>'
    : '<span class="text-muted small">推播通知</span>';

  const catEl = document.getElementById('mdCategories');
  catEl.innerHTML = '';
  (d.categories || []).forEach(key => {
    const cat = CATEGORIES[key] || {label: key, color: 'secondary', icon: 'bi-bell'};
    const span = document.createElement('span');
    span.className = `badge bg-${cat.color}-subtle text-${cat.color} border border-${cat.color}-subtle`;
    span.style.fontSize = '.8rem';
    span.innerHTML = `<i class="bi ${cat.icon} me-1"></i>${cat.label}`;
    catEl.appendChild(span);
  });

  const detailEl = document.getElementById('mdDetail');
  detailEl.innerHTML = '';
  const grouped = {};
  (d.alerts || []).forEach(item => {
    const cat = item.category || 'system';
    if (!grouped[cat]) grouped[cat] = [];
    grouped[cat].push(item);
  });
  Object.entries(grouped).forEach(([catKey, items]) => {
    const cat = CATEGORIES[catKey] || {label: catKey, color: 'secondary', icon: 'bi-bell'};
    const topLevel = items.reduce((best, i) => {
      const order = {critical:3, error:2, warn:1, info:0};
      return (order[i.level]||0) > (order[best]||0) ? i.level : best;
    }, 'info');
    const topMeta = levelMeta(topLevel);
    const section = document.createElement('div');
    section.className = `card border-${cat.color} border-opacity-50 mb-3`;
    const itemsHtml = items.map(i => {
      const lm = levelMeta(i.level);
      const suggHtml = i.suggestion
        ? `<div class="mt-2 p-2 rounded" style="background:#f0fdf4;border-left:3px solid #22c55e;font-size:.8rem;color:#166534;">
             <i class="bi bi-lightbulb-fill me-1" style="color:#16a34a;"></i><strong>建議改善：</strong>${escHtml(i.suggestion)}
           </div>`
        : '';
      return `<li class="list-group-item px-3 py-2" style="font-size:.84rem;">
        <div class="d-flex align-items-start gap-2">
          ${lm.badge.replace('px-2 py-1','px-1').replace(/<\/span>/,'</span>').replace('font-size:.65rem;','')}
          <div class="flex-grow-1">
            <div class="${i.level==='critical'?'text-danger fw-semibold':i.level==='error'?'fw-semibold':''}">${escHtml(i.message)}</div>
            ${suggHtml}
          </div>
        </div>
      </li>`;
    }).join('');
    section.innerHTML = `
      <div class="card-header py-2 px-3 bg-${cat.color}-subtle d-flex align-items-center justify-content-between" style="font-size:.85rem;">
        <span class="fw-semibold text-${cat.color}"><i class="bi ${cat.icon} me-1"></i>${cat.label}</span>
        <span style="font-size:.7rem;">${topMeta.badge}</span>
      </div>
      <ul class="list-group list-group-flush">${itemsHtml}</ul>`;
    detailEl.appendChild(section);
  });

  document.getElementById('mdTime').textContent = d.time + '（' + d.time_rel + '）';
  const link = document.getElementById('mdHostLink');
  if (d.host_url) { link.href = d.host_url; link.style.display = ''; }
  else link.style.display = 'none';

  const markBtn = document.getElementById('mdMarkReadBtn');
  markBtn.dataset.id = d.id;
  d.read ? markBtn.classList.add('d-none') : markBtn.classList.remove('d-none');

  alertModal.show();
}

document.getElementById('mdMarkReadBtn').addEventListener('click', function() {
  const row = document.querySelector(`tr[data-id="${this.dataset.id}"]`);
  markReadAjax(this.dataset.id, row);
  this.classList.add('d-none');
});

function markReadAjax(id, row) {
  fetch(`/host-alerts/${id}/mark-read`, {
    method: 'POST',
    headers: {'X-HTTP-Method-Override':'PATCH','X-CSRF-TOKEN': CSRF_TOKEN,'Content-Type':'application/json'},
    body: JSON.stringify({_method:'PATCH'}),
  }).then(() => {
    if (!row) return;
    row.style.background = '';
    row.classList.remove('unread-row');
    const dot = row.querySelector('.bg-danger.rounded-circle');
    if (dot) dot.remove();
    try {
      const d = JSON.parse(row.dataset.alert);
      d.read = true;
      row.dataset.alert = JSON.stringify(d);
    } catch(e){}
  });
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
@endpush

@endsection