@extends('layouts.app')
@section('title', 'Log 分析收集器')

@section('content')
@php
  $activeTab = request('tab', 'logs');
  $kibanaUrl = config('services.elasticsearch.kibana_url');
  if (!$kibanaUrl || str_contains($kibanaUrl, 'localhost')) {
      $kibanaUrl = request()->getScheme() . '://' . request()->getHost() . ':5601';
  }
@endphp
<div class="container-fluid pb-5">

  {{-- 頁首 --}}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-journal-code me-2 text-primary"></i>Log 分析收集器</h4>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadModal">
      <i class="bi bi-upload me-1"></i>上傳 Log
    </button>
  </div>

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

  {{-- ── 頁籤導航 ─────────────────────────────────────────────────── --}}
  <ul class="nav nav-tabs mb-3">
    <li class="nav-item">
      <a class="nav-link {{ $activeTab === 'logs' ? 'active' : '' }}"
         href="{{ route('log-analysis.index') }}">
        <i class="bi bi-clock-history me-1"></i>Log 記錄
        @if($stats['errors'] > 0)
          <span class="badge bg-danger ms-1" style="font-size:.6rem">{{ number_format($stats['errors']) }}</span>
        @endif
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link {{ $activeTab === 'alerts' ? 'active' : '' }}"
         href="{{ route('log-analysis.index') }}?tab=alerts">
        <i class="bi bi-bell me-1"></i>告警規則
        @if($alertRules->isNotEmpty())
          <span class="badge bg-secondary ms-1" style="font-size:.6rem">{{ $alertRules->count() }}</span>
        @endif
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link {{ $activeTab === 'es' ? 'active' : '' }}"
         href="{{ route('log-analysis.index') }}?tab=es">
        <i class="bi bi-bar-chart-line me-1"></i>趨勢分析
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link {{ $activeTab === 'setup' ? 'active' : '' }}"
         href="{{ route('log-analysis.index') }}?tab=setup">
        <i class="bi bi-gear me-1"></i>設定說明
      </a>
    </li>
  </ul>

  {{-- ════════════════════════════════════════════════════════════════ --}}
  {{-- Tab: Log 記錄                                                   --}}
  {{-- ════════════════════════════════════════════════════════════════ --}}
  @if($activeTab === 'logs')

  {{-- 頂部統計 --}}
  <div class="row g-2 mb-2">
    <div class="col-6 col-sm-4 col-md-2">
      <div class="card border-0 shadow-sm text-center py-2 h-100">
        <div class="fw-bold fs-4 text-primary">{{ $stats['hosts'] }}</div>
        <div class="text-muted small">主機數</div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-md-2">
      <div class="card border-0 shadow-sm text-center py-2 h-100">
        <div class="fw-bold fs-4 text-secondary">{{ number_format($stats['total']) }}</div>
        <div class="text-muted small">全部筆數</div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-md-2">
      <div class="card border-0 shadow-sm text-center py-2 h-100">
        <div class="fw-bold fs-4 text-danger">{{ number_format($stats['errors']) }}</div>
        <div class="text-muted small">錯誤筆數</div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-md-2">
      <div class="card border-0 shadow-sm text-center py-2 h-100">
        <div class="fw-bold fs-4 text-warning">{{ number_format($stats['warnings']) }}</div>
        <div class="text-muted small">警告筆數</div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-md-2">
      <div class="card border-0 shadow-sm text-center py-2 h-100">
        <div class="fw-bold fs-4 text-success">{{ number_format($stats['info']) }}</div>
        <div class="text-muted small">資訊筆數</div>
      </div>
    </div>
    {{-- Log 類型分布 --}}
    <div class="col-12 col-md-2">
      <div class="card border-0 shadow-sm py-2 px-3 h-100">
        <div class="text-muted small fw-semibold mb-1" style="font-size:.7rem">LOG 類型分布</div>
        @php
          $typeColors = ['syslog'=>'primary','auth'=>'warning','apache_access'=>'info','apache_error'=>'danger','nginx_access'=>'info','nginx_error'=>'danger','app'=>'success','other'=>'secondary'];
          $typeLabels = ['syslog'=>'Syslog','auth'=>'Auth','apache_access'=>'Apache','apache_error'=>'Apache Err','nginx_access'=>'Nginx','nginx_error'=>'Nginx Err','app'=>'App','other'=>'其他'];
        @endphp
        @forelse($stats['by_type'] as $ltype => $row)
        <div class="d-flex justify-content-between align-items-center" style="font-size:.72rem">
          <span class="text-{{ $typeColors[$ltype] ?? 'secondary' }}">{{ $typeLabels[$ltype] ?? $ltype }}</span>
          <span class="text-muted">{{ number_format($row->cnt) }}
            @if($row->errs > 0)<span class="text-danger">({{ $row->errs }}E)</span>@endif
          </span>
        </div>
        @empty
        <span class="text-muted" style="font-size:.72rem">—</span>
        @endforelse
      </div>
    </div>
  </div>

  {{-- 主體：左側主機 + 右側表格 --}}
  <div class="row g-3">

    {{-- 左側主機列表 --}}
    <div class="col-md-2">
      <div class="card shadow-sm border-0">
        <div class="card-header py-2 bg-white">
          <span class="fw-semibold small"><i class="bi bi-server me-1 text-muted"></i>主機列表</span>
        </div>
        {{-- 搜尋框 --}}
        <div class="px-2 py-1 border-bottom">
          <input id="hostSearch" type="text" class="form-control form-control-sm"
                 placeholder="搜尋主機 / 客戶…" autocomplete="off">
        </div>
        <div id="hostListScroll" style="overflow-y:auto;max-height:68vh">
          @php
            $paramsNoHost = array_filter([
              'log_type' => request('log_type'),
              'severity' => request('severity'),
            ]);
            $groupedHosts = $hostList->groupBy('client_name');
          @endphp
          {{-- 全部 --}}
          <a href="{{ route('log-analysis.index', $paramsNoHost) }}"
             class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2 border-0
                    host-item {{ !request('host') ? 'active' : '' }}"
             data-label="全部">
            <span class="small"><i class="bi bi-list me-1"></i>全部</span>
            <span class="badge {{ !request('host') ? 'bg-white text-primary' : 'bg-secondary-subtle text-secondary' }} rounded-pill">
              {{ $stats['total'] }}
            </span>
          </a>

          {{-- 依客戶分組 --}}
          @foreach($groupedHosts as $clientName => $items)
          <div class="host-group" data-client="{{ $clientName }}">
            <div class="px-2 py-1 bg-light border-top border-bottom d-flex align-items-center justify-content-between">
              <span class="text-muted fw-semibold" style="font-size:.68rem;text-transform:uppercase;letter-spacing:.05em">
                <i class="bi bi-building me-1"></i>{{ $clientName }}
              </span>
              <span class="badge bg-secondary-subtle text-secondary rounded-pill" style="font-size:.6rem">
                {{ $items->count() }}
              </span>
            </div>
            @foreach($items as $hItem)
            @php
              $hKey   = $hItem->host_id ? (string)$hItem->host_id : 'ip_'.str_replace('.','_',$hItem->source_ip);
              $hActive = request('host') == $hKey;
              $label  = $hItem->host_name ?? $hItem->hostname ?? $hItem->source_ip;
            @endphp
            <a href="{{ route('log-analysis.index', array_merge($paramsNoHost, ['host'=>$hKey])) }}"
               class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2 border-0 ps-3
                      host-item {{ $hActive ? 'active' : '' }}"
               data-label="{{ strtolower($label) }} {{ strtolower($clientName) }} {{ $hItem->source_ip }}"
               title="{{ $label }} · {{ $hItem->source_ip }}">
              <span class="small text-truncate me-1" style="max-width:95px">
                @if($hItem->err_sum > 0 && !$hActive)
                  <i class="bi bi-exclamation-circle text-danger me-1"></i>
                @else
                  <i class="bi bi-hdd me-1 opacity-50"></i>
                @endif
                {{ $label }}
              </span>
              <span class="badge {{ $hActive ? 'bg-white text-primary' : ($hItem->err_sum > 0 ? 'bg-danger' : 'bg-secondary-subtle text-secondary') }} rounded-pill">
                {{ $hItem->cnt }}
              </span>
            </a>
            @endforeach
          </div>{{-- /host-group --}}
          @endforeach

        </div>{{-- /hostListScroll --}}
      </div>
    </div>

    {{-- 右側 --}}
    <div class="col-md-10">

      {{-- 篩選列 --}}
      @php
        $logTypeDefs = [
          'syslog'        => ['label'=>'Syslog',       'color'=>'primary',   'icon'=>'bi-activity'],
          'auth'          => ['label'=>'Auth',          'color'=>'warning',   'icon'=>'bi-shield-lock'],
          'apache_access' => ['label'=>'Apache Access', 'color'=>'info',      'icon'=>'bi-globe'],
          'apache_error'  => ['label'=>'Apache Error',  'color'=>'danger',    'icon'=>'bi-exclamation-circle'],
          'nginx_access'  => ['label'=>'Nginx Access',  'color'=>'teal',      'icon'=>'bi-globe2'],
          'nginx_error'   => ['label'=>'Nginx Error',   'color'=>'danger',    'icon'=>'bi-x-circle'],
          'app'           => ['label'=>'App',           'color'=>'success',   'icon'=>'bi-code-square'],
          'other'         => ['label'=>'Other',         'color'=>'secondary', 'icon'=>'bi-file-text'],
        ];
        $paramsNoType = array_filter(['host'=>request('host'), 'severity'=>request('severity')]);
        $paramsNoSev  = array_filter(['host'=>request('host'), 'log_type'=>request('log_type')]);
      @endphp
      <div class="card shadow-sm border-0 mb-2">
        <div class="card-body py-2 px-3">
          <div class="d-flex flex-wrap align-items-center gap-1 mb-2">
            <span class="text-muted me-1 flex-shrink-0" style="font-size:.73rem;width:32px">類型</span>
            <a href="{{ route('log-analysis.index', $paramsNoType) }}"
               class="btn btn-sm py-0 {{ !request('log_type') ? 'btn-secondary' : 'btn-outline-secondary' }}"
               style="font-size:.73rem">全部</a>
            @foreach($logTypeDefs as $typeKey => $typeDef)
            <a href="{{ route('log-analysis.index', array_merge($paramsNoType, ['log_type'=>$typeKey])) }}"
               class="btn btn-sm py-0 {{ request('log_type')===$typeKey ? 'btn-'.$typeDef['color'] : 'btn-outline-secondary' }}"
               style="font-size:.73rem">
              <i class="bi {{ $typeDef['icon'] }} me-1"></i>{{ $typeDef['label'] }}
            </a>
            @endforeach
          </div>
          <div class="d-flex flex-wrap align-items-center gap-1">
            <span class="text-muted me-1 flex-shrink-0" style="font-size:.73rem;width:32px">嚴重</span>
            <a href="{{ route('log-analysis.index', $paramsNoSev) }}"
               class="btn btn-sm py-0 {{ !request('severity') ? 'btn-secondary' : 'btn-outline-secondary' }}"
               style="font-size:.73rem">全部</a>
            <a href="{{ route('log-analysis.index', array_merge($paramsNoSev, ['severity'=>'error'])) }}"
               class="btn btn-sm py-0 {{ request('severity')==='error' ? 'btn-danger' : 'btn-outline-danger' }}"
               style="font-size:.73rem">
              <i class="bi bi-exclamation-triangle me-1"></i>有 Error
            </a>
            <a href="{{ route('log-analysis.index', array_merge($paramsNoSev, ['severity'=>'warning'])) }}"
               class="btn btn-sm py-0 {{ request('severity')==='warning' ? 'btn-warning' : 'btn-outline-warning' }}"
               style="font-size:.73rem">
              <i class="bi bi-exclamation-circle me-1"></i>有 Warning
            </a>
            <a href="{{ route('log-analysis.index', array_merge($paramsNoSev, ['severity'=>'info'])) }}"
               class="btn btn-sm py-0 {{ request('severity')==='info' ? 'btn-success' : 'btn-outline-success' }}"
               style="font-size:.73rem">
              <i class="bi bi-check-circle me-1"></i>正常
            </a>
          </div>
        </div>
      </div>

      {{-- Log 記錄表格 --}}
      <div class="card shadow-sm border-0">
        <div class="card-header py-2 bg-white d-flex align-items-center gap-2 flex-wrap">
          {{-- 預設工具列 --}}
          <div id="defaultToolbar" class="d-flex align-items-center gap-2 flex-wrap w-100">
            <span class="fw-semibold small">
              @if(request('host'))
                <i class="bi bi-hdd me-1 text-primary"></i>{{ $selectedHostName }}
              @else
                <i class="bi bi-clock-history me-1 text-muted"></i>全部主機
              @endif
            </span>
            @if(request('log_type') && isset($logTypeDefs[request('log_type')]))
              @php $td = $logTypeDefs[request('log_type')]; @endphp
              <span class="badge bg-{{ $td['color'] }}-subtle text-{{ $td['color'] }} border border-{{ $td['color'] }}-subtle" style="font-size:.68rem">
                <i class="bi {{ $td['icon'] }} me-1"></i>{{ $td['label'] }}
              </span>
            @endif
            @if(request('severity') === 'error')
              <span class="badge bg-danger-subtle text-danger border border-danger-subtle" style="font-size:.68rem">
                <i class="bi bi-exclamation-triangle me-1"></i>有 Error
              </span>
            @elseif(request('severity') === 'warning')
              <span class="badge bg-warning-subtle text-warning border border-warning-subtle" style="font-size:.68rem">
                <i class="bi bi-exclamation-circle me-1"></i>有 Warning
              </span>
            @elseif(request('severity') === 'info')
              <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size:.68rem">
                <i class="bi bi-check-circle me-1"></i>正常
              </span>
            @endif
            <span class="ms-auto text-muted small">共 {{ $collections->total() }} 筆</span>
            @if(request('host') || request('log_type') || request('severity'))
              <a href="{{ route('log-analysis.index') }}" class="btn btn-outline-secondary btn-sm py-0"
                 style="font-size:.73rem"><i class="bi bi-x me-1"></i>清除篩選</a>
            @endif
          </div>
          {{-- 批量工具列（選取後替換預設） --}}
          <div id="bulkToolbar" class="d-none d-flex align-items-center gap-2 w-100">
            <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 ms-auto">
              <i class="bi bi-x me-1"></i>取消選取
            </button>
          </div>
        </div>

        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 align-middle" id="logTable">
              <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>
                  <th>主機</th>
                  <th>Log 類型</th>
                  <th>來源</th>
                  <th class="text-center" style="color:#dc3545;" title="Error 數">E</th>
                  <th class="text-center" style="color:#fd7e14;" title="Warning 數">W</th>
                  <th class="text-center text-muted" title="總行數">行</th>
                  <th>狀態</th>
                  <th>收到時間</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @forelse($collections as $c)
                <tr data-id="{{ $c->id }}" class="log-row {{ $c->is_read ? '' : 'unread-row' }}"
                    style="{{ !$c->is_read ? 'background:#fffdf0;' : '' }}">
                  <td class="ps-3" onclick="event.stopPropagation()">
                    <input type="checkbox" class="form-check-input row-check mt-0" value="{{ $c->id }}">
                  </td>
                  {{-- 未讀紅點 --}}
                  <td>
                    @if(!$c->is_read)
                      <span class="rounded-circle d-inline-block bg-danger unread-dot"
                            style="width:7px;height:7px;"></span>
                    @endif
                  </td>
                  <td>
                    @if($c->host)
                      @php $hKey = (string)$c->host_id; @endphp
                      <a href="{{ route('log-analysis.index', array_merge(array_filter(['log_type'=>request('log_type'),'severity'=>request('severity')]),['host'=>$hKey])) }}"
                         class="text-decoration-none {{ $c->is_read ? 'text-muted' : 'fw-semibold' }}">
                        {{ $c->host->name }}
                      </a>
                    @else
                      <span class="{{ $c->is_read ? 'text-muted' : '' }}">{{ $c->hostname ?? $c->source_ip ?? '—' }}</span>
                    @endif
                  </td>
                  <td>
                    <span class="badge bg-{{ $c->typeColor() }}-subtle text-{{ $c->typeColor() }} border border-{{ $c->typeColor() }}-subtle"
                          style="font-size:.68rem">
                      <i class="bi {{ $c->typeIcon() }} me-1"></i>{{ $c->typeLabel() }}
                    </span>
                  </td>
                  <td class="text-muted small">
                    @if($c->receive_method === 'rsyslog')
                      <i class="bi bi-plug text-primary me-1"></i>rsyslog
                    @elseif($c->receive_method === 'http_upload')
                      <i class="bi bi-cloud-upload text-success me-1"></i>API
                    @else
                      <i class="bi bi-upload text-secondary me-1"></i>手動
                    @endif
                  </td>
                  <td class="text-center fw-bold" style="color:#dc3545;">
                    {{ $c->error_count > 0 ? $c->error_count : '·' }}
                  </td>
                  <td class="text-center fw-bold" style="color:#fd7e14;">
                    {{ $c->warning_count > 0 ? $c->warning_count : '·' }}
                  </td>
                  <td class="text-center text-muted small">
                    {{ $c->line_count ? number_format($c->line_count) : '—' }}
                  </td>
                  <td>
                    @php
                      $sc = ['pending'=>'secondary','analyzing'=>'info','done'=>'success','error'=>'danger'][$c->status] ?? 'secondary';
                      $sl = ['pending'=>'待分析','analyzing'=>'分析中','done'=>'完成','error'=>'錯誤'][$c->status] ?? $c->status;
                    @endphp
                    @if($c->status === 'analyzing')
                      <span class="badge bg-info" style="font-size:.68rem">
                        <span class="spinner-border spinner-border-sm me-1" style="width:.55rem;height:.55rem"></span>{{ $sl }}
                      </span>
                    @else
                      <span class="badge bg-{{ $sc }}" style="font-size:.68rem">{{ $sl }}</span>
                    @endif
                  </td>
                  <td class="text-muted small text-nowrap">{{ $c->created_at->format('m-d H:i') }}</td>
                  <td onclick="event.stopPropagation()">
                    <div class="d-flex gap-1 justify-content-end pe-1">
                      @if(!$c->is_read)
                      <button class="btn btn-outline-secondary mark-read-btn"
                              style="font-size:.7rem;padding:2px 6px;"
                              data-id="{{ $c->id }}"
                              data-url="{{ route('log-analysis.mark-read', $c) }}"
                              title="標記已讀">
                        <i class="bi bi-check2"></i>
                      </button>
                      @endif
                      @if($c->status === 'done')
                      <a href="{{ route('log-analysis.show', $c) }}"
                         class="btn btn-outline-secondary" style="font-size:.7rem;padding:2px 6px;" title="查看">
                        <i class="bi bi-eye"></i>
                      </a>
                      @endif
                      <form method="POST" action="{{ route('log-analysis.destroy', $c) }}"
                            class="d-inline" onsubmit="return confirm('確定刪除此 Log 記錄？')">
                        @csrf @method('DELETE')
                        <button class="btn 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="11" class="text-center text-muted py-5">
                    <i class="bi bi-journal-x fs-3 d-block mb-2 opacity-25"></i>
                    尚無符合條件的 Log 記錄
                    @if(!request('host') && !request('log_type') && !request('severity'))
                      ，<button class="btn btn-sm btn-outline-primary"
                              data-bs-toggle="modal" data-bs-target="#uploadModal">立即上傳</button>
                      或參考
                      <a href="{{ route('log-analysis.index') }}?tab=setup">設定說明</a>
                    @endif
                  </td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
        @if($collections->hasPages())
        <div class="card-footer bg-white py-2">{{ $collections->links() }}</div>
        @endif
      </div>

    </div>{{-- /col-md-10 --}}
  </div>{{-- /row --}}

  {{-- ════════════════════════════════════════════════════════════════ --}}
  {{-- Tab: 告警規則                                                   --}}
  {{-- ════════════════════════════════════════════════════════════════ --}}
  @elseif($activeTab === 'alerts')

  <div class="row g-3">
    <div class="col-lg-8">

      {{-- 最近告警事件 --}}
      <div class="card shadow-sm border-0 mb-3">
        <div class="card-header py-2 bg-white d-flex align-items-center gap-2">
          <span class="fw-semibold small"><i class="bi bi-bell-fill me-1 text-danger"></i>最近告警事件</span>
          @if($recentAlerts->isNotEmpty())
            <span class="badge bg-danger">{{ $recentAlerts->count() }}</span>
          @endif
        </div>
        @if($recentAlerts->isNotEmpty())
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0 align-middle small">
            <thead class="table-light">
              <tr><th>規則</th><th>主機</th><th>符合內容</th><th>時間</th></tr>
            </thead>
            <tbody>
              @foreach($recentAlerts as $ev)
              <tr>
                <td>
                  <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                    {{ $ev->rule->name ?? '—' }}
                  </span>
                </td>
                <td class="text-muted">{{ $ev->host?->name ?? '—' }}</td>
                <td class="text-truncate" style="max-width:380px" title="{{ $ev->matched_line }}">
                  <code style="font-size:.78rem">{{ $ev->matched_line }}</code>
                </td>
                <td class="text-muted text-nowrap">{{ $ev->occurred_at?->format('m-d H:i') }}</td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        @else
        <div class="card-body py-3 text-center text-muted small">
          <i class="bi bi-bell-slash fs-3 d-block mb-2 opacity-25"></i>尚無告警事件
        </div>
        @endif
      </div>

      {{-- 告警規則列表 --}}
      <div class="card shadow-sm border-0">
        <div class="card-header py-2 bg-white d-flex align-items-center gap-2">
          <span class="fw-semibold small"><i class="bi bi-funnel me-1 text-warning"></i>告警規則</span>
          @if($alertRules->isNotEmpty())
            <span class="badge bg-secondary-subtle text-secondary">{{ $alertRules->count() }}</span>
          @endif
          <button class="btn btn-warning btn-sm ms-auto"
                  data-bs-toggle="modal" data-bs-target="#alertModal">
            <i class="bi bi-plus me-1"></i>新增規則
          </button>
        </div>
        @if($alertRules->isNotEmpty())
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0 align-middle small">
            <thead class="table-light">
              <tr><th>名稱</th><th>關鍵字</th><th>嚴重度</th><th>主機</th><th>通知</th><th>狀態</th><th></th></tr>
            </thead>
            <tbody>
              @foreach($alertRules as $rule)
              <tr>
                <td class="fw-semibold">{{ $rule->name }}</td>
                <td><code style="font-size:.78rem">{{ Str::limit($rule->pattern, 45) }}</code></td>
                <td>
                  <span class="badge bg-secondary-subtle text-secondary border" style="font-size:.65rem">
                    {{ ['any'=>'任意','error'=>'Error+','critical'=>'Critical+','warning'=>'Warning'][$rule->severity_filter] ?? $rule->severity_filter }}
                  </span>
                </td>
                <td class="text-muted">{{ $rule->host?->name ?? '全部' }}</td>
                <td class="text-muted">
                  @if($rule->notify_email)
                    <i class="bi bi-envelope me-1" title="{{ $rule->notify_email }}"></i>
                  @endif
                  @if($rule->notify_webhook)
                    <i class="bi bi-link-45deg me-1" title="Webhook"></i>
                  @endif
                  @if(!$rule->notify_email && !$rule->notify_webhook)—@endif
                </td>
                <td>
                  <span class="badge {{ $rule->enabled ? 'bg-success' : 'bg-secondary' }}" style="font-size:.65rem">
                    {{ $rule->enabled ? '啟用' : '停用' }}
                  </span>
                </td>
                <td>
                  <div class="d-flex gap-1">
                    {{-- 編輯 --}}
                    <button class="btn btn-sm btn-outline-primary edit-rule-btn" title="編輯"
                            data-id="{{ $rule->id }}"
                            data-name="{{ $rule->name }}"
                            data-pattern="{{ $rule->pattern }}"
                            data-severity="{{ $rule->severity_filter }}"
                            data-host="{{ $rule->host_id ?? '' }}"
                            data-email="{{ $rule->notify_email ?? '' }}"
                            data-webhook="{{ $rule->notify_webhook ?? '' }}"
                            data-url="{{ route('log-analysis.alert-rules.update', $rule) }}">
                      <i class="bi bi-pencil"></i>
                    </button>
                    {{-- 啟用 / 停用 --}}
                    <form method="POST" action="{{ route('log-analysis.alert-rules.toggle', $rule) }}">
                      @csrf
                      <button class="btn btn-sm {{ $rule->enabled ? 'btn-outline-secondary' : 'btn-outline-success' }}"
                              title="{{ $rule->enabled ? '停用' : '啟用' }}">
                        <i class="bi {{ $rule->enabled ? 'bi-toggle-on' : 'bi-toggle-off' }}"></i>
                      </button>
                    </form>
                    {{-- 刪除 --}}
                    <form method="POST" action="{{ route('log-analysis.alert-rules.destroy', $rule) }}"
                          onsubmit="return confirm('確認刪除「{{ $rule->name }}」？')">
                      @csrf @method('DELETE')
                      <button class="btn btn-sm btn-outline-danger" title="刪除">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        @else
        <div class="card-body py-4 text-center text-muted">
          <i class="bi bi-funnel fs-3 d-block mb-2 opacity-25"></i>
          尚無告警規則，
          <button class="btn btn-sm btn-outline-warning"
                  data-bs-toggle="modal" data-bs-target="#alertModal">立即新增</button>
        </div>
        @endif
      </div>

    </div>

    {{-- 右側說明 --}}
    <div class="col-lg-4">
      <div class="card shadow-sm border-0">
        <div class="card-header py-2 bg-white fw-semibold small">
          <i class="bi bi-info-circle me-1 text-secondary"></i>告警規則說明
        </div>
        <div class="card-body small text-muted">
          <p class="mb-2">當 Log 分析後發現符合規則的內容，系統會立即送出通知。</p>
          <ul class="ps-3 mb-2">
            <li class="mb-1"><strong>關鍵字</strong>：純文字比對（不區分大小寫）</li>
            <li class="mb-1"><strong>Regex</strong>：用 <code>/pattern/i</code> 格式</li>
            <li class="mb-1"><strong>嚴重度過濾</strong>：只對指定等級以上的 log 行比對</li>
            <li class="mb-1"><strong>主機</strong>：可限定只對特定主機的 log 套用規則</li>
          </ul>
          <div class="bg-light rounded p-2 small">
            <div class="fw-semibold mb-1">範例規則</div>
            <div>名稱：SSH 登入失敗</div>
            <div>關鍵字：<code>Failed password</code></div>
            <div>嚴重度：任意</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- ════════════════════════════════════════════════════════════════ --}}
  {{-- Tab: 趨勢分析（ES 自訂看板）                                    --}}
  {{-- ════════════════════════════════════════════════════════════════ --}}
  @elseif($activeTab === 'es')
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div class="d-flex gap-2 flex-wrap">
        <select id="esFilterDays" aria-label="時間範圍" class="form-select form-select-sm" style="width:auto">
          <option value="1">最近 1 天</option>
          <option value="7" selected>最近 7 天</option>
          <option value="30">最近 30 天</option>
          <option value="">全部</option>
        </select>
        <select id="esFilterSeverity" aria-label="嚴重等級" class="form-select form-select-sm" style="width:auto">
          <option value="">所有等級</option>
          <option value="error">Error</option>
          <option value="warning">Warning</option>
          <option value="critical">Critical</option>
          <option value="info">Info</option>
        </select>
        <select id="esFilterHostname" aria-label="主機" class="form-select form-select-sm" style="width:auto">
          <option value="">所有主機</option>
        </select>
        <input id="esFilterKeyword" type="text" aria-label="關鍵字搜尋" class="form-control form-control-sm" style="width:200px" placeholder="關鍵字搜尋…">
        <button id="esApply" class="btn btn-sm btn-primary"><i class="bi bi-search me-1"></i>查詢</button>
      </div>
      <a href="{{ route('log-analysis.kibana-proxy') }}" target="_blank" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-box-arrow-up-right me-1"></i>原始 Kibana
      </a>
    </div>

    {{-- 摘要卡片 --}}
    <div class="row g-3 mb-3" id="esCards">
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3">
          <div class="text-muted small mb-1">總筆數</div>
          <div class="fs-4 fw-bold" id="esTotal">—</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3 border-start border-3 border-danger">
          <div class="text-muted small mb-1">錯誤</div>
          <div class="fs-4 fw-bold text-danger" id="esErrors">—</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3 border-start border-3 border-warning">
          <div class="text-muted small mb-1">警告</div>
          <div class="fs-4 fw-bold text-warning" id="esWarnings">—</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3 border-start border-3 border-info">
          <div class="text-muted small mb-1">主機數</div>
          <div class="fs-4 fw-bold text-info" id="esHosts">—</div>
        </div>
      </div>
    </div>

    <div class="row g-3 mb-3">
      {{-- 等級分佈 --}}
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-white fw-semibold small py-2"><i class="bi bi-layers me-1"></i>等級分佈</div>
          <div class="card-body" id="esSeverityList" style="font-size:.85rem;"></div>
        </div>
      </div>
      {{-- Log 類型 --}}
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-white fw-semibold small py-2"><i class="bi bi-tag me-1"></i>Log 類型</div>
          <div class="card-body" id="esLogTypeList" style="font-size:.85rem;"></div>
        </div>
      </div>
      {{-- 主機分佈 --}}
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-white fw-semibold small py-2"><i class="bi bi-hdd-network me-1"></i>主機分佈</div>
          <div class="card-body" id="esHostList" style="font-size:.85rem;"></div>
        </div>
      </div>
    </div>

    {{-- 日誌列表 --}}
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white fw-semibold small py-2 d-flex justify-content-between">
        <span><i class="bi bi-list-ul me-1"></i>最新日誌 <span id="esLogCount" class="text-muted fw-normal"></span></span>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0 align-middle" style="font-size:.8rem;">
            <thead class="table-light">
              <tr>
                <th style="width:130px">時間</th>
                <th style="width:90px">等級</th>
                <th style="width:110px">主機</th>
                <th style="width:80px">類型</th>
                <th>訊息</th>
              </tr>
            </thead>
            <tbody id="esLogTable">
              <tr><td colspan="5" class="text-center text-muted py-4">載入中…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  {{-- ════════════════════════════════════════════════════════════════ --}}
  {{-- Tab: 設定說明                                                   --}}
  {{-- ════════════════════════════════════════════════════════════════ --}}
  @elseif($activeTab === 'setup')
    @include('log_analysis._setup')
  @endif

</div>

{{-- 上傳 Modal --}}
<div class="modal fade" id="uploadModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ route('log-analysis.upload') }}" enctype="multipart/form-data">
      @csrf
      <div class="modal-content">
        <div class="modal-header py-2">
          <h5 class="modal-title fs-6"><i class="bi bi-upload me-1"></i>手動上傳 Log</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label for="upload-host-id" class="form-label small fw-semibold">選擇主機（可選）</label>
            <select id="upload-host-id" name="host_id" class="form-select form-select-sm">
              <option value="">— 未指定 —</option>
              @foreach($hosts as $h)
              <option value="{{ $h->id }}">{{ $h->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-2">
            <label for="upload-log-type" class="form-label small fw-semibold">Log 類型 <span class="text-danger">*</span></label>
            <select id="upload-log-type" name="log_type" class="form-select form-select-sm" required>
              @foreach(\App\Models\LogCollection::$LOG_TYPES as $key => $meta)
              <option value="{{ $key }}">{{ $meta['label'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-1">
            <label for="upload-file" class="form-label small fw-semibold">Log 檔案 <span class="text-danger">*</span>（最大 20MB）</label>
            <input id="upload-file" type="file" name="file" class="form-control form-control-sm"
                   required accept=".log,.txt,.gz">
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-upload me-1"></i>上傳並分析
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- 編輯告警規則 Modal --}}
<div class="modal fade" id="editAlertModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="editAlertForm" method="POST">
      @csrf @method('PATCH')
      <div class="modal-content">
        <div class="modal-header py-2">
          <h5 class="modal-title fs-6"><i class="bi bi-pencil-fill me-1 text-primary"></i>編輯告警規則</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label small fw-semibold">規則名稱 <span class="text-danger">*</span></label>
            <input id="edit-name" type="text" name="name" class="form-control form-control-sm" required>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">比對關鍵字 / Regex <span class="text-danger">*</span></label>
            <input id="edit-pattern" type="text" name="pattern" class="form-control form-control-sm font-monospace" required
                   placeholder="Failed password  或  /CRIT/i">
            <div class="form-text">純字串或 regex（如 /pattern/i）皆可</div>
          </div>
          <div class="row g-2 mb-2">
            <div class="col-6">
              <label class="form-label small fw-semibold">嚴重度過濾</label>
              <select id="edit-severity" name="severity_filter" class="form-select form-select-sm">
                <option value="any">任意</option>
                <option value="error">Error 以上</option>
                <option value="critical">Critical 以上</option>
                <option value="warning">Warning</option>
              </select>
            </div>
            <div class="col-6">
              <label class="form-label small fw-semibold">套用主機（可選）</label>
              <select id="edit-host" name="host_id" class="form-select form-select-sm">
                <option value="">全部主機</option>
                @foreach($hosts as $h)
                <option value="{{ $h->id }}">{{ $h->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">通知 Email（可選）</label>
            <input id="edit-email" type="email" name="notify_email" class="form-control form-control-sm">
          </div>
          <div class="mb-1">
            <label class="form-label small fw-semibold">Webhook URL（可選）</label>
            <input id="edit-webhook" type="url" name="notify_webhook" class="form-control form-control-sm">
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-check-lg me-1"></i>儲存變更
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- 告警規則 Modal --}}
<div class="modal fade" id="alertModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ route('log-analysis.alert-rules.store') }}">
      @csrf
      <div class="modal-content">
        <div class="modal-header py-2">
          <h5 class="modal-title fs-6"><i class="bi bi-bell-fill me-1 text-warning"></i>新增告警規則</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label for="alert-name" class="form-label small fw-semibold">規則名稱 <span class="text-danger">*</span></label>
            <input id="alert-name" type="text" name="name" class="form-control form-control-sm"
                   required placeholder="例：SSH 登入失敗">
          </div>
          <div class="mb-2">
            <label for="alert-pattern" class="form-label small fw-semibold">比對關鍵字 / Regex <span class="text-danger">*</span></label>
            <input id="alert-pattern" type="text" name="pattern"
                   class="form-control form-control-sm font-monospace"
                   required placeholder="Failed password  或  /CRIT/i">
            <div class="form-text">純字串或 regex（如 /pattern/i）皆可</div>
          </div>
          <div class="row g-2 mb-2">
            <div class="col-6">
              <label for="alert-severity" class="form-label small fw-semibold">嚴重度過濾</label>
              <select id="alert-severity" name="severity_filter" class="form-select form-select-sm">
                <option value="any">任意</option>
                <option value="error">Error 以上</option>
                <option value="critical">Critical 以上</option>
                <option value="warning">Warning</option>
              </select>
            </div>
            <div class="col-6">
              <label for="alert-host-id" class="form-label small fw-semibold">套用主機（可選）</label>
              <select id="alert-host-id" name="host_id" class="form-select form-select-sm">
                <option value="">全部主機</option>
                @foreach($hosts as $h)
                <option value="{{ $h->id }}">{{ $h->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="mb-2">
            <label for="alert-email" class="form-label small fw-semibold">通知 Email（可選）</label>
            <input id="alert-email" type="email" name="notify_email" class="form-control form-control-sm">
          </div>
          <div class="mb-1">
            <label for="alert-webhook" class="form-label small fw-semibold">Webhook URL（可選）</label>
            <input id="alert-webhook" type="url" name="notify_webhook" class="form-control form-control-sm">
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-warning btn-sm">
            <i class="bi bi-bell-fill me-1"></i>儲存規則
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
@push('scripts')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
const BULK_READ_URL   = '{{ route("log-analysis.bulk-read") }}';
const BULK_DELETE_URL = '{{ route("log-analysis.bulk-destroy") }}';

// ── 主機搜尋 ────────────────────────────────────────────────────────────
const hostInput = document.getElementById('hostSearch');
if (hostInput) {
  hostInput.addEventListener('input', function () {
    const q = this.value.toLowerCase().trim();
    document.querySelectorAll('#hostListScroll .host-group').forEach(grp => {
      let any = false;
      grp.querySelectorAll('.host-item').forEach(item => {
        const match = !q
          || (item.dataset.label||'').toLowerCase().includes(q)
          || (grp.dataset.client||'').toLowerCase().includes(q);
        item.style.display = match ? '' : 'none';
        if (match) any = true;
      });
      grp.style.display = any ? '' : 'none';
    });
  });
}

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

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

function updateToolbar() {
  const ids = getCheckedIds();
  if (ids.length > 0) {
    bulkToolbar.classList.remove('d-none');
    defaultToolbar.classList.add('d-none');
    selectedCount.textContent = `已選 ${ids.length} 筆`;
  } else {
    bulkToolbar.classList.add('d-none');
    defaultToolbar.classList.remove('d-none');
  }
  const all = document.querySelectorAll('.row-check');
  if (selectAll) {
    selectAll.indeterminate = ids.length > 0 && ids.length < all.length;
    selectAll.checked = all.length > 0 && ids.length === all.length;
  }
}

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

document.addEventListener('change', e => {
  if (e.target?.classList.contains('row-check')) updateToolbar();
});

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

// ── 批量標已讀（AJAX）───────────────────────────────────────────────────
document.getElementById('bulkMarkReadBtn')?.addEventListener('click', () => {
  const ids = getCheckedIds();
  if (!ids.length) return;
  fetch(BULK_READ_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ ids }),
  }).then(r => r.json()).then(d => {
    if (!d.ok) return;
    ids.forEach(id => markRowRead(id));
    document.querySelectorAll('.row-check').forEach(c => c.checked = false);
    if (selectAll) { selectAll.checked = false; selectAll.indeterminate = false; }
    updateToolbar();
  });
});

// ── 批量刪除（AJAX）─────────────────────────────────────────────────────
document.getElementById('bulkDeleteBtn')?.addEventListener('click', () => {
  const ids = getCheckedIds();
  if (!ids.length) return;
  if (!confirm(`確定刪除已選取的 ${ids.length} 筆記錄？此操作無法復原。`)) return;
  fetch(BULK_DELETE_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ ids }),
  }).then(r => r.json()).then(d => {
    if (!d.ok) return;
    ids.forEach(id => document.querySelector(`tr[data-id="${id}"]`)?.remove());
    if (selectAll) { selectAll.checked = false; selectAll.indeterminate = false; }
    updateToolbar();
  });
});

// ── 單筆標已讀（AJAX）───────────────────────────────────────────────────
document.addEventListener('click', e => {
  const btn = e.target.closest('.mark-read-btn');
  if (!btn) return;
  const url = btn.dataset.url;
  const id  = btn.dataset.id;
  fetch(url, {
    method: 'POST',
    headers: { 'X-HTTP-Method-Override': 'PATCH', 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' },
    body: JSON.stringify({ _method: 'PATCH' }),
  }).then(r => r.json()).then(d => {
    if (d.ok) markRowRead(id);
  });
});

function markRowRead(id) {
  const row = document.querySelector(`tr[data-id="${id}"]`);
  if (!row) return;
  row.style.background = '';
  row.classList.remove('unread-row');
  const dot = row.querySelector('.unread-dot');
  if (dot) dot.remove();
  const markBtn = row.querySelector('.mark-read-btn');
  if (markBtn) markBtn.remove();
  // 主機名稱去粗體
  const hostLink = row.querySelector('td:nth-child(3) a, td:nth-child(3) span');
  if (hostLink) { hostLink.classList.remove('fw-semibold'); hostLink.classList.add('text-muted'); }
}

// ── 編輯告警規則 ─────────────────────────────────────────────────────────
document.addEventListener('click', e => {
  const btn = e.target.closest('.edit-rule-btn');
  if (!btn) return;

  const form = document.getElementById('editAlertForm');
  form.action = btn.dataset.url;

  document.getElementById('edit-name').value     = btn.dataset.name;
  document.getElementById('edit-pattern').value  = btn.dataset.pattern;
  document.getElementById('edit-severity').value = btn.dataset.severity;
  document.getElementById('edit-email').value    = btn.dataset.email;
  document.getElementById('edit-webhook').value  = btn.dataset.webhook;
  document.getElementById('edit-host').value     = btn.dataset.host ?? '';

  bootstrap.Modal.getOrCreateInstance(document.getElementById('editAlertModal')).show();
});
@if($activeTab === 'es')
// ── ES 趨勢分析 ───────────────────────────────────────────────────────────
const ES_URL = '{{ route("log-analysis.es-dashboard") }}';
const SEVERITY_LABEL = { error:'錯誤', critical:'嚴重', alert:'警報', emergency:'緊急', warning:'警告', notice:'注意', info:'資訊', debug:'除錯', unknown:'未知' };
const SEVERITY_COLOR = { error:'danger', critical:'danger', alert:'danger', emergency:'danger', warning:'warning', notice:'info', info:'secondary', debug:'light', unknown:'secondary' };
const LOG_TYPE_LABEL = { syslog:'系統', auth:'認證', apache_access:'Apache 存取', apache_error:'Apache 錯誤', nginx_access:'Nginx 存取', nginx_error:'Nginx 錯誤', app:'應用程式', other:'其他' };

function esFilters() {
  return {
    days:     document.getElementById('esFilterDays').value,
    severity: document.getElementById('esFilterSeverity').value,
    hostname: document.getElementById('esFilterHostname').value,
    keyword:  document.getElementById('esFilterKeyword').value,
  };
}

function bar(count, max, color) {
  const pct = max > 0 ? Math.round(count / max * 100) : 0;
  return `<div class="d-flex align-items-center gap-2 mb-2">
    <div class="flex-grow-1 bg-light rounded" style="height:8px;">
      <div class="bg-${color} rounded" style="height:8px;width:${pct}%"></div>
    </div>
    <span class="text-muted" style="min-width:40px;text-align:right;">${count.toLocaleString()}</span>
  </div>`;
}

async function esLoad() {
  const params = new URLSearchParams(Object.fromEntries(Object.entries(esFilters()).filter(([,v]) => v)));
  const r = await fetch(ES_URL + '?' + params, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } });
  if (!r.ok) {
    document.getElementById('esLogTable').innerHTML = '<tr><td colspan="5" class="text-center text-danger py-3">Elasticsearch 未啟動或無資料</td></tr>';
    return;
  }
  const { stats, logs } = await r.json();

  // 摘要卡片
  document.getElementById('esTotal').textContent    = (stats.total || 0).toLocaleString();
  document.getElementById('esErrors').textContent   = ((stats.by_severity?.error || 0) + (stats.by_severity?.critical || 0) + (stats.by_severity?.alert || 0) + (stats.by_severity?.emergency || 0)).toLocaleString();
  document.getElementById('esWarnings').textContent = (stats.by_severity?.warning || 0).toLocaleString();
  document.getElementById('esHosts').textContent    = Object.keys(stats.by_hostname || {}).length;

  // 等級分佈
  const sevData = stats.by_severity || {};
  const sevMax  = Math.max(...Object.values(sevData), 1);
  document.getElementById('esSeverityList').innerHTML = Object.entries(sevData)
    .sort((a, b) => b[1] - a[1])
    .map(([k, v]) => `<div class="d-flex justify-content-between align-items-center mb-1">
      <span><span class="badge bg-${SEVERITY_COLOR[k] || 'secondary'} me-1">${SEVERITY_LABEL[k] || k}</span></span>
    </div>${bar(v, sevMax, SEVERITY_COLOR[k] || 'secondary')}`)
    .join('') || '<span class="text-muted">無資料</span>';

  // Log 類型
  const typeData = stats.by_log_type || {};
  const typeMax  = Math.max(...Object.values(typeData), 1);
  document.getElementById('esLogTypeList').innerHTML = Object.entries(typeData)
    .sort((a, b) => b[1] - a[1])
    .map(([k, v]) => `<div class="d-flex justify-content-between mb-1">
      <span class="text-truncate">${LOG_TYPE_LABEL[k] || k}</span>
    </div>${bar(v, typeMax, 'primary')}`)
    .join('') || '<span class="text-muted">無資料</span>';

  // 主機分佈
  const hostData = stats.by_hostname || {};
  const hostMax  = Math.max(...Object.values(hostData), 1);

  // 填主機下拉選單
  const sel = document.getElementById('esFilterHostname');
  const curHost = sel.value;
  sel.innerHTML = '<option value="">所有主機</option>' +
    Object.keys(hostData).map(h => `<option value="${h}" ${h===curHost?'selected':''}>${h}</option>`).join('');

  document.getElementById('esHostList').innerHTML = Object.entries(hostData)
    .sort((a, b) => b[1] - a[1]).slice(0, 10)
    .map(([k, v]) => `<div class="d-flex justify-content-between mb-1">
      <span class="text-truncate font-monospace" style="font-size:.78rem;">${k || '—'}</span>
    </div>${bar(v, hostMax, 'info')}`)
    .join('') || '<span class="text-muted">無資料</span>';

  // 日誌列表
  document.getElementById('esLogCount').textContent = `（${logs.length} 筆）`;
  document.getElementById('esLogTable').innerHTML = logs.length ? logs.map(l => {
    const ts   = l['@timestamp'] ? l['@timestamp'].replace('T', ' ').substring(0, 19) : '—';
    const sev  = l.severity || 'unknown';
    const msg  = (l.message || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return `<tr>
      <td class="font-monospace text-muted" style="font-size:.75rem;">${ts}</td>
      <td><span class="badge bg-${SEVERITY_COLOR[sev] || 'secondary'}">${SEVERITY_LABEL[sev] || sev}</span></td>
      <td class="text-truncate" style="max-width:110px;" title="${l.hostname || ''}">${l.hostname || '—'}</td>
      <td><small class="text-muted">${LOG_TYPE_LABEL[l.log_type] || l.log_type || '—'}</small></td>
      <td class="text-break" style="font-size:.78rem;">${msg}</td>
    </tr>`;
  }).join('') : '<tr><td colspan="5" class="text-center text-muted py-3">無符合條件的日誌</td></tr>';
}

document.getElementById('esApply')?.addEventListener('click', esLoad);
document.querySelectorAll('#esFilterDays, #esFilterSeverity').forEach(el => el.addEventListener('change', esLoad));
esLoad();
@endif
</script>
@endpush
@endsection