@extends('layouts.app')
@section('title', 'Google Chat Bot 訂閱管理')

@section('content')
<div class="container my-4">
  <h2 class="mb-1">Google Chat Bot 訂閱管理</h2>
  <p class="text-muted mb-4">管理透過 Chat Bot 訂閱 CVE 通知的使用者</p>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  {{-- 設定說明 --}}
  <div class="card mb-4">
    <div class="card-header fw-semibold">⚙️ Google Cloud 設定步驟</div>
    <div class="card-body">
      <ol class="mb-3">
        <li>前往 <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a>，啟用 <strong>Google Chat API</strong></li>
        <li>建立 Chat App，連接方式選擇 <strong>HTTP endpoint</strong></li>
        <li>將以下 Endpoint URL 填入 Chat App 設定：</li>
      </ol>
      <div class="input-group mb-3" style="max-width:600px">
        <input type="text" class="form-control font-monospace" value="{{ $endpointUrl }}" id="endpointUrl" readonly>
        <button class="btn btn-outline-secondary" onclick="navigator.clipboard.writeText(document.getElementById('endpointUrl').value); this.textContent='✓ 已複製'">複製</button>
      </div>
      <ol start="4">
        <li>設定完成後，使用者在 Google Chat 搜尋您的 Bot 名稱加入對話</li>
        <li>使用者輸入「訂閱」或按按鈕即可選擇 CVE 類別</li>
      </ol>
      <div class="alert alert-info mb-0 mt-2">
        <strong>可用指令：</strong>
        <code>訂閱</code> / <code>/subscribe</code> — 設定訂閱分類 &nbsp;|&nbsp;
        <code>我的訂閱</code> / <code>/my</code> — 查看目前訂閱 &nbsp;|&nbsp;
        <code>說明</code> / <code>/help</code> — 顯示說明
      </div>
    </div>
  </div>

  {{-- 訂閱者清單 --}}
  <div class="card">
    <div class="card-header fw-semibold">📋 已訂閱使用者（{{ $subscriptions->count() }} 人）</div>
    <div class="card-body p-0">
      @if($subscriptions->isEmpty())
        <p class="text-muted text-center py-4">目前尚無使用者透過 Bot 訂閱</p>
      @else
        <div class="table-responsive"><table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>使用者</th>
              <th>訂閱分類</th>
              <th>狀態</th>
              <th>最後更新</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @foreach($subscriptions as $sub)
            <tr>
              <td>{{ $sub->display_name ?? $sub->google_user_id }}</td>
              <td>
                @forelse($sub->categories ?? [] as $cat)
                  <span class="badge bg-primary me-1">{{ $cat }}</span>
                @empty
                  <span class="text-muted">（未設定）</span>
                @endforelse
              </td>
              <td>
                @if($sub->is_active)
                  <span class="badge bg-success">啟用</span>
                @else
                  <span class="badge bg-secondary">停用</span>
                @endif
              </td>
              <td class="text-muted small">{{ $sub->updated_at->format('Y-m-d H:i') }}</td>
              <td>
                <form action="{{ route('chat-app.destroy', $sub) }}" method="POST" class="d-inline">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger" onclick="return confirm('確定移除此訂閱？')">移除</button>
                </form>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table></div>
      @endif
    </div>
  </div>
</div>
@endsection