@extends('layouts.app')
@section('title', '通知頻道管理')

@push('styles')
<link href="/vendor/tom-select/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
  .category-chip { display:inline-block; font-size:0.72rem; padding:2px 8px; border-radius:12px;
    background:#e0e7ff; color:#3730a3; font-weight:600; margin:1px; }
  .channel-card { transition: box-shadow .15s; }
  .channel-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
  .info-mask { font-family:monospace; font-size:0.8rem; color:#6b7280;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
  .cat-check label { cursor:pointer; user-select:none; }
  .badge-gchat { background:#1a73e8; }
  .badge-line   { background:#06c755; }
</style>
@endpush

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

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h2 class="mb-0"><i class="bi bi-chat-dots me-2 text-success"></i>通知頻道管理</h2>
      <p class="text-muted mt-1 mb-0 small">每個學校／客戶設定獨立的通知頻道（Google Chat 或 LINE），並選擇要接收的 CVE 分類</p>
    </div>
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#channelModal" onclick="openCreate()">
      <i class="bi bi-plus-lg me-1"></i>新增頻道
    </button>
  </div>

  {{-- 頻道卡片列表 --}}
  @if($channels->isEmpty())
    <div class="text-center py-5 text-muted">
      <i class="bi bi-chat-dots display-4 opacity-25"></i>
      <p class="mt-3">尚未設定任何通知頻道</p>
      <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#channelModal" onclick="openCreate()">
        <i class="bi bi-plus-lg me-1"></i>新增第一個頻道
      </button>
    </div>
  @else
    <div class="row g-3">
      @foreach($channels as $ch)
      <div class="col-md-6 col-xl-4">
        <div class="card channel-card h-100 {{ $ch->is_active ? 'border-success border-opacity-50' : 'border-secondary opacity-60' }}">
          <div class="card-header d-flex align-items-center justify-content-between py-2">
            <div class="d-flex align-items-center gap-2">
              @if($ch->channel_type === 'line')
                <span style="font-size:1.1rem;">💬</span>
              @else
                <i class="bi bi-chat-dots-fill text-primary"></i>
              @endif
              <span class="fw-bold">{{ $ch->name }}</span>
            </div>
            <div class="d-flex gap-1">
              <span class="badge {{ $ch->channel_type === 'line' ? 'badge-line' : 'badge-gchat' }} text-white" style="font-size:0.7rem;">
                {{ $ch->channel_type === 'line' ? 'LINE' : 'Google Chat' }}
              </span>
              <span class="badge {{ $ch->is_active ? 'bg-success' : 'bg-secondary' }}">
                {{ $ch->is_active ? '啟用' : '停用' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            @if($ch->client)
              <div class="text-muted small mb-2">
                <i class="bi bi-building me-1"></i>{{ $ch->client?->name ?? '未分類' }}
              </div>
            @endif

            @if($ch->channel_type === 'line')
              <div class="info-mask mb-1" title="{{ $ch->line_group_id }}">
                <i class="bi bi-people me-1"></i>Group ID：{{ Str::mask($ch->line_group_id ?? '', '*', 10) }}
              </div>
              <div class="info-mask mb-2">
                <i class="bi bi-key me-1"></i>Token：{{ Str::mask($ch->line_token ?? '', '*', 20) }}
              </div>
            @else
              <div class="info-mask mb-2" title="{{ $ch->webhook_url }}">
                <i class="bi bi-link-45deg me-1"></i>{{ Str::mask($ch->webhook_url ?? '', '*', 50) }}
              </div>
            @endif

            <div class="mb-2">
              @foreach($ch->categories ?? [] as $cat)
                <span class="category-chip">{{ $cat }}</span>
              @endforeach
            </div>

            @if($ch->last_notified_at)
              <div class="text-muted" style="font-size:0.78rem;">
                <i class="bi bi-clock-history me-1"></i>上次推送：{{ $ch->last_notified_at->format('Y-m-d H:i') }}
              </div>
            @else
              <div class="text-muted" style="font-size:0.78rem;">尚未推送過</div>
            @endif
          </div>
          <div class="card-footer bg-transparent d-flex gap-2">
            <button class="btn btn-sm btn-outline-primary flex-fill"
                    onclick="openEdit({{ $ch->id }}, {{ json_encode($ch) }})">
              <i class="bi bi-pencil me-1"></i>編輯
            </button>
            <button class="btn btn-sm btn-outline-success flex-fill test-btn"
                    data-id="{{ $ch->id }}" data-name="{{ $ch->name }}">
              <i class="bi bi-send me-1"></i>測試
            </button>
            <button class="btn btn-sm btn-outline-info flex-fill manual-send-btn"
                    data-id="{{ $ch->id }}" data-name="{{ $ch->name }}">
              <i class="bi bi-chat-dots me-1"></i>發訊息
            </button>
            <button class="btn btn-sm btn-outline-danger del-btn"
                    data-id="{{ $ch->id }}" data-name="{{ $ch->name }}">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  @endif

</div>

{{-- Modal：手動發訊息 --}}
<div class="modal fade" id="manualSendModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">發送訊息到 <span id="manualSendChannelName" class="text-info"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="manualTitle" class="form-label">標題（選填）</label>
          <input type="text" id="manualTitle" class="form-control" placeholder="訊息標題">
        </div>
        <div class="mb-3">
          <label for="manualMessage" class="form-label fw-semibold">訊息內容 <span class="text-danger">*</span></label>
          <textarea id="manualMessage" class="form-control" rows="5" placeholder="輸入要發送的訊息…"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" id="manualSendSubmit" class="btn btn-info text-white">發送</button>
      </div>
    </div>
  </div>
</div>

{{-- Modal：新增 / 編輯 --}}
<div class="modal fade" id="channelModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">新增通知頻道</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="editId">

        {{-- 頻道類型 --}}
        <div class="mb-3">
          <label class="form-label fw-semibold" id="channelTypeLabel">頻道類型 <span class="text-danger">*</span></label>
          <div class="d-flex gap-4 mt-1">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="channelType" id="type-gchat" value="google_chat" checked>
              <label class="form-check-label d-flex align-items-center gap-1" for="type-gchat">
                <i class="bi bi-chat-dots-fill text-primary"></i> Google Chat
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="channelType" id="type-line" value="line">
              <label class="form-check-label d-flex align-items-center gap-1" for="type-line">
                💬 LINE
              </label>
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="f-name" class="form-label fw-semibold">頻道名稱 <span class="text-danger">*</span></label>
          <input type="text" id="f-name" class="form-control" placeholder="例：宜蘭縣教育局 CVE 通知">
        </div>

        <div class="mb-3">
          <label for="f-client" class="form-label fw-semibold">客戶</label>
          <select id="f-client" class="form-select">
            <option value="">（不綁定客戶）</option>
            @foreach($clients as $c)
              <option value="{{ $c->id }}">{{ $c->name }}</option>
            @endforeach
          </select>
        </div>

        {{-- Google Chat 欄位 --}}
        <div id="gchat-fields">
          <div class="mb-3">
            <label for="f-webhook" class="form-label fw-semibold">Google Chat Webhook URL <span class="text-danger">*</span></label>
            <input type="url" id="f-webhook" class="form-control font-monospace"
                   placeholder="https://chat.googleapis.com/v1/spaces/xxx/messages?key=...">
            <div class="form-text">貼入 Google Chat Space 的 Webhook URL（以 <code>https://chat.googleapis.com/</code> 開頭）</div>
          </div>
          {{-- 如何取得 Google Chat Webhook --}}
          <div class="mb-3">
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2"
                    onclick="toggleGuide('gchat-guide', this)">
              <i class="bi bi-question-circle me-1"></i>如何取得 Webhook URL？
            </button>
            <div id="gchat-guide" class="mt-2 p-3 rounded border bg-light" style="display:none;font-size:0.875rem;">
              <div class="fw-semibold mb-3"><i class="bi bi-chat-dots-fill text-primary me-1"></i>在 Google Chat Space 建立 Webhook</div>

              {{-- Step 1: 進入 Google Chat --}}
              <div class="mb-3">
                <div class="fw-semibold text-secondary mb-1" style="font-size:0.8rem;letter-spacing:.04em;">STEP 1 — 進入 Google Chat</div>
                <ol class="mb-0 ps-3" style="line-height:2;">
                  <li>使用公司 Google 帳號，開啟 <strong>chat.google.com</strong>（或 Gmail 左側的 Chat 面板）</li>
                  <li>左側導覽列找到 <strong>Spaces（群組空間）</strong> 區塊</li>
                  <li>點擊要接收通知的 Space 進入聊天室<br>
                    <span class="text-muted">→ 若尚無 Space，點「<strong>+ 建立或尋找 Space</strong>」→「建立 Space」，設定名稱後邀請相關成員</span>
                  </li>
                </ol>
              </div>

              {{-- Step 2: 開啟 Webhook 設定 --}}
              <div class="mb-3">
                <div class="fw-semibold text-secondary mb-1" style="font-size:0.8rem;letter-spacing:.04em;">STEP 2 — 開啟 Webhook 設定</div>
                <ol class="mb-0 ps-3" style="line-height:2;">
                  <li>進入 Space 後，點擊頂部對話列的 <strong>Space 名稱</strong>，展開下拉選單</li>
                  <li>選擇 <strong>應用程式與整合</strong>（Apps &amp; integrations）<br>
                    <span class="text-muted">→ 舊版介面可能直接顯示「管理 Webhook」，選擇即可</span>
                  </li>
                  <li>在彈出視窗頂部切換到 <strong>Webhook</strong> 分頁</li>
                </ol>
              </div>

              {{-- Step 3: 新增並複製 --}}
              <div class="mb-3">
                <div class="fw-semibold text-secondary mb-1" style="font-size:0.8rem;letter-spacing:.04em;">STEP 3 — 新增並複製 URL</div>
                <ol class="mb-0 ps-3" style="line-height:2;">
                  <li>點擊右上角 <strong>新增 Webhook</strong>（Add webhook）</li>
                  <li>填入名稱（例如：<em>Steps 資安通知</em>），頭像可略過</li>
                  <li>按 <strong>儲存</strong>，清單中會出現剛建立的 Webhook</li>
                  <li>點擊 URL 欄旁的 <strong>複製</strong> 圖示，URL 格式如下：<br>
                    <code class="text-break" style="font-size:0.75rem;color:#1a73e8;">https://chat.googleapis.com/v1/spaces/XXXXX/messages?key=…&token=…</code>
                  </li>
                  <li>將複製的 URL 貼到上方「Webhook URL」欄位</li>
                </ol>
              </div>

              <div class="alert alert-warning py-1 px-2 mb-0" style="font-size:0.8rem;">
                <i class="bi bi-exclamation-triangle me-1"></i>
                <strong>注意：</strong>Webhook URL 含有密鑰，請勿分享給無關人員。若不慎洩漏，請立即在同一設定頁刪除該 Webhook 並重新建立。
              </div>
            </div>
          </div>
        </div>

        {{-- LINE 欄位 --}}
        <div id="line-fields" style="display:none;">
          <div class="mb-3">
            <label for="f-line-token" class="form-label fw-semibold">LINE Channel Access Token <span class="text-danger">*</span></label>
            <input type="text" id="f-line-token" class="form-control font-monospace"
                   placeholder="在 LINE Developers → Messaging API → Channel access token（長期）">
            <div class="form-text">
              前往 <a href="https://developers.line.biz/console/" target="_blank" rel="noopener">LINE Developers Console</a>
              → 選擇 Channel → Messaging API → 複製 Channel access token（長期）
            </div>
          </div>
          <div class="mb-3">
            <label for="f-line-group" class="form-label fw-semibold">群組 ID (Group ID) <span class="text-danger">*</span></label>
            <input type="text" id="f-line-group" class="form-control font-monospace"
                   placeholder="Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
            <div class="form-text">
              將 Bot 加入群組後，從 Webhook 事件 (<code>source.groupId</code>) 取得，以 <code>C</code> 開頭
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold" id="cveCategories">訂閱 CVE 分類 <span class="text-danger">*</span>（至少選一項）</label>
          <div class="d-flex flex-wrap gap-2 mt-1">
            @foreach($categories as $cat)
            <div class="form-check cat-check">
              <input class="form-check-input cat-checkbox" type="checkbox"
                     id="cat-{{ Str::slug($cat) }}" value="{{ $cat }}">
              <label class="form-check-label" for="cat-{{ Str::slug($cat) }}">
                {{ $cat }}
              </label>
            </div>
            @endforeach
          </div>
          <div class="mt-2">
            <button type="button" class="btn btn-xs btn-link p-0 text-decoration-none" id="selectAll">全選</button>
            <span class="text-muted mx-1">·</span>
            <button type="button" class="btn btn-xs btn-link p-0 text-decoration-none" id="selectNone">取消全選</button>
          </div>
        </div>

        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="f-active" checked>
          <label class="form-check-label" for="f-active">啟用此頻道</label>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-success" id="saveBtn">
          <i class="bi bi-check-lg me-1"></i>儲存
        </button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="/vendor/tom-select/tom-select.complete.min.js"></script>
<script>
const CSRF = '{{ csrf_token() }}';

// ── Tom Select 客戶搜尋 ───────────────────────────────────────────────────
let clientSelect = null;
function initClientSelect(selectedValue) {
  if (clientSelect) { clientSelect.destroy(); }
  clientSelect = new TomSelect('#f-client', {
    placeholder: '（不綁定客戶）',
    allowEmptyOption: true,
    maxOptions: null,
    searchField: ['text'],
    render: {
      no_results: () => '<div class="no-results">查無符合客戶</div>',
    },
  });
  clientSelect.setValue(selectedValue ?? '');
}

// ── 說明展開收合 ──────────────────────────────────────────────────────────
function toggleGuide(id, btn) {
  const el = document.getElementById(id);
  const show = el.style.display === 'none';
  el.style.display = show ? '' : 'none';
  btn.innerHTML = show
    ? '<i class="bi bi-chevron-up me-1"></i>收起說明'
    : '<i class="bi bi-question-circle me-1"></i>如何取得 Webhook URL？';
}

// ── 頻道類型切換 ──────────────────────────────────────────────────────────
document.querySelectorAll('input[name="channelType"]').forEach(r => {
  r.addEventListener('change', toggleTypeFields);
});

function toggleTypeFields() {
  const isLine = document.getElementById('type-line').checked;
  document.getElementById('gchat-fields').style.display = isLine ? 'none' : '';
  document.getElementById('line-fields').style.display  = isLine ? '' : 'none';
}

// ── 開啟新增 ──────────────────────────────────────────────────────────────
function openCreate() {
  document.getElementById('modalTitle').textContent = '新增通知頻道';
  document.getElementById('editId').value       = '';
  document.getElementById('f-name').value       = '';
  document.getElementById('f-webhook').value    = '';
  document.getElementById('f-line-token').value = '';
  document.getElementById('f-line-group').value = '';
  document.getElementById('f-active').checked   = true;
  document.getElementById('type-gchat').checked  = true;
  document.querySelectorAll('.cat-checkbox').forEach(c => c.checked = false);
  // 重置說明框
  const guide = document.getElementById('gchat-guide');
  if (guide) guide.style.display = 'none';
  const guideBtn = guide?.previousElementSibling;
  if (guideBtn) guideBtn.innerHTML = '<i class="bi bi-question-circle me-1"></i>如何取得 Webhook URL？';
  initClientSelect('');
  toggleTypeFields();
}

// ── 開啟編輯 ──────────────────────────────────────────────────────────────
function openEdit(id, data) {
  document.getElementById('modalTitle').textContent = '編輯通知頻道';
  document.getElementById('editId').value       = id;
  document.getElementById('f-name').value       = data.name;
  document.getElementById('f-webhook').value    = data.webhook_url || '';
  document.getElementById('f-line-token').value = data.line_token || '';
  document.getElementById('f-line-group').value = data.line_group_id || '';
  document.getElementById('f-active').checked   = !!data.is_active;
  initClientSelect(data.client_id || '');

  const isLine = data.channel_type === 'line';
  document.getElementById(isLine ? 'type-line' : 'type-gchat').checked = true;
  toggleTypeFields();

  const cats = data.categories || [];
  document.querySelectorAll('.cat-checkbox').forEach(c => {
    c.checked = cats.includes(c.value);
  });

  new bootstrap.Modal(document.getElementById('channelModal')).show();
}

// ── 全選 / 取消 ───────────────────────────────────────────────────────────
document.getElementById('selectAll').addEventListener('click', () =>
  document.querySelectorAll('.cat-checkbox').forEach(c => c.checked = true));
document.getElementById('selectNone').addEventListener('click', () =>
  document.querySelectorAll('.cat-checkbox').forEach(c => c.checked = false));

// ── 儲存 ─────────────────────────────────────────────────────────────────
document.getElementById('saveBtn').addEventListener('click', function() {
  const id          = document.getElementById('editId').value;
  const channelType = document.querySelector('input[name="channelType"]:checked').value;
  const cats        = [...document.querySelectorAll('.cat-checkbox:checked')].map(c => c.value);

  const payload = {
    name:         document.getElementById('f-name').value.trim(),
    channel_type: channelType,
    categories:   cats,
    client_id:    document.getElementById('f-client').value || null,
    is_active:    document.getElementById('f-active').checked,
  };

  if (channelType === 'line') {
    payload.line_token    = document.getElementById('f-line-token').value.trim();
    payload.line_group_id = document.getElementById('f-line-group').value.trim();
  } else {
    payload.webhook_url = document.getElementById('f-webhook').value.trim();
  }

  if (!payload.name) { alert('請填寫頻道名稱'); return; }
  if (!cats.length)  { alert('請至少選擇一個 CVE 分類'); return; }

  if (channelType === 'line') {
    if (!payload.line_token)    { alert('請填寫 LINE Channel Access Token'); return; }
    if (!payload.line_group_id) { alert('請填寫群組 ID'); return; }
  } else {
    if (!payload.webhook_url) { alert('請填寫 Webhook URL'); return; }
  }

  const url    = id ? `/settings/chat-channels/${id}` : '/settings/chat-channels';
  const method = id ? 'PUT' : 'POST';

  fetch(url, {
    method,
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    body: JSON.stringify(payload),
  })
  .then(r => r.ok ? r.json() : r.json().then(d => Promise.reject(d)))
  .then(() => location.reload())
  .catch(d => alert('❌ ' + (d.message || JSON.stringify(d.errors || d))));
});

// ── 測試推送 ─────────────────────────────────────────────────────────────
document.querySelectorAll('.test-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const id = this.dataset.id;
    this.disabled = true;
    this.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>發送中…';

    fetch(`/settings/chat-channels/${id}/test`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    })
    .then(r => r.ok ? r.json() : r.json().then(d => Promise.reject(d)))
    .then(() => {
      this.innerHTML = '<i class="bi bi-check2 me-1"></i>已發送';
      setTimeout(() => { this.disabled=false; this.innerHTML='<i class="bi bi-send me-1"></i>測試'; }, 3000);
    })
    .catch(d => {
      alert('❌ ' + (d.error || '發送失敗'));
      this.disabled = false;
      this.innerHTML = '<i class="bi bi-send me-1"></i>測試';
    });
  });
});

// ── 手動發訊息 ────────────────────────────────────────────────────────────
let manualSendChannelId = null;
document.querySelectorAll('.manual-send-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    manualSendChannelId = this.dataset.id;
    document.getElementById('manualSendChannelName').textContent = this.dataset.name;
    document.getElementById('manualTitle').value = '';
    document.getElementById('manualMessage').value = '';
    new bootstrap.Modal(document.getElementById('manualSendModal')).show();
  });
});

document.getElementById('manualSendSubmit').addEventListener('click', function() {
  const title   = document.getElementById('manualTitle').value.trim();
  const message = document.getElementById('manualMessage').value.trim();
  if (!message) { alert('請輸入訊息內容'); return; }

  this.disabled = true;
  this.textContent = '發送中…';

  fetch(`/settings/chat-channels/${manualSendChannelId}/send`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    body: JSON.stringify({ title, message }),
  })
  .then(r => r.ok ? r.json() : r.json().then(d => Promise.reject(d)))
  .then(() => {
    bootstrap.Modal.getInstance(document.getElementById('manualSendModal')).hide();
    alert('✅ 訊息已發送');
  })
  .catch(d => alert('❌ ' + (d.error || '發送失敗')))
  .finally(() => { this.disabled = false; this.textContent = '發送'; });
});

// ── 刪除 ─────────────────────────────────────────────────────────────────
document.querySelectorAll('.del-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    if (!confirm(`確定要刪除「${this.dataset.name}」頻道？`)) return;
    fetch(`/settings/chat-channels/${this.dataset.id}`, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    }).then(r => r.ok ? location.reload() : alert('刪除失敗'));
  });
});
</script>
@endpush