@extends('layouts.app')
@section('title', '推播通知管理')

@section('content')
<div class="container-fluid px-4 py-4">
  <h4 class="fw-bold mb-4"><i class="bi bi-bell-fill me-2"></i>推播通知管理</h4>

  @foreach(['success','error'] as $t)
    @if(session($t))
      <div class="alert alert-{{ $t === 'error' ? 'danger' : 'success' }} alert-dismissible fade show">
        {{ session($t) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif
  @endforeach

  <div class="row g-4">

    {{-- 左欄：發送 + 訂閱清單 --}}
    <div class="col-lg-7">

      {{-- 發送表單 --}}
      <div class="card shadow-sm mb-4">
        <div class="card-header fw-bold">
          <i class="bi bi-send me-1 text-primary"></i>發送推播通知
        </div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label fw-semibold small">發送對象</label>
            <select class="form-select form-select-sm" id="pushTarget">
              <option value="all">所有使用者</option>
              <option value="supervisor">主管</option>
              <option value="admin">管理員</option>
              <option value="user_ids">指定使用者</option>
            </select>
          </div>
          <div class="mb-3 d-none" id="userIdsRow">
            <label class="form-label fw-semibold small">選擇使用者</label>
            <select class="form-select form-select-sm" id="pushUserIds" multiple style="height:120px">
              @foreach($allUsers as $u)
                <option value="{{ $u->id }}">{{ $u->name }}（{{ $u->department ?? $u->role }}）</option>
              @endforeach
            </select>
            <div class="form-text">按住 Ctrl（Mac: Command）可多選</div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">標題 <span class="text-muted fw-normal">（最多 100 字）</span></label>
            <input type="text" class="form-control form-control-sm" id="pushTitle" maxlength="100" placeholder="通知標題">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">內容 <span class="text-muted fw-normal">（最多 500 字）</span></label>
            <textarea class="form-control form-control-sm" id="pushBody" rows="3" maxlength="500" placeholder="通知內容"></textarea>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">點擊連結 <span class="text-muted fw-normal">（選填）</span></label>
            <input type="text" class="form-control form-control-sm" id="pushUrl" placeholder="如 /handovers 或空白則為首頁">
          </div>
          <div class="d-flex align-items-center gap-3">
            <button class="btn btn-primary btn-sm" id="pushSendBtn">
              <i class="bi bi-send me-1"></i>發送推播
            </button>
            <span id="pushResult" class="small"></span>
          </div>
        </div>
      </div>

      {{-- 訂閱清單 --}}
      <div class="card shadow-sm">
        <div class="card-header fw-bold d-flex justify-content-between align-items-center">
          <span><i class="bi bi-people me-1 text-success"></i>訂閱清單（{{ $subscribers->count() }} 位使用者）</span>
          <span class="badge bg-secondary">共 {{ $subscribers->sum('device_count') }} 部裝置</span>
        </div>
        @if($subscribers->isEmpty())
          <div class="card-body text-center text-muted py-4">
            <i class="bi bi-bell-slash fs-3 d-block mb-2"></i>目前無訂閱
          </div>
        @else
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 small">
              <thead class="table-light">
                <tr>
                  <th>使用者</th>
                  <th>部門</th>
                  <th>裝置數</th>
                  <th>最後訂閱</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach($subscribers as $sub)
                  <tr id="sub-row-{{ $sub->user_id }}">
                    <td class="fw-semibold">{{ $sub->user?->name ?? '—' }}</td>
                    <td class="text-muted">{{ $sub->user?->department ?? $sub->user?->role ?? '—' }}</td>
                    <td><span class="badge bg-info text-dark">{{ $sub->device_count }}</span></td>
                    <td class="text-muted">{{ \Carbon\Carbon::parse($sub->last_subscribed)->format('Y-m-d H:i') }}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-danger btn-del-sub"
                        data-uid="{{ $sub->user_id }}"
                        data-name="{{ $sub->user?->name }}">
                        <i class="bi bi-x-circle me-1"></i>取消訂閱
                      </button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </div>
    </div>

    {{-- 右欄：最近通知記錄 + 說明 --}}
    <div class="col-lg-5">

      <div class="card shadow-sm mb-4">
        <div class="card-header fw-bold">
          <i class="bi bi-clock-history me-1 text-warning"></i>最近發送紀錄
        </div>
        @if($recentNotifications->isEmpty())
          <div class="card-body text-center text-muted py-4">尚無發送紀錄</div>
        @else
          <ul class="list-group list-group-flush">
            @foreach($recentNotifications as $n)
              <li class="list-group-item px-3 py-2">
                <div class="d-flex justify-content-between align-items-start">
                  <div class="fw-semibold small">{{ $n->title }}</div>
                  <span class="badge bg-light text-dark ms-2 flex-shrink-0">{{ $n->recipient_count }} 人</span>
                </div>
                <div class="text-muted small text-truncate">{{ $n->body }}</div>
                <div class="text-muted" style="font-size:.75rem">
                  {{ \Carbon\Carbon::parse($n->sent_at)->format('Y-m-d H:i') }}
                  @if($n->sender)｜{{ $n->sender->name }}@endif
                </div>
              </li>
            @endforeach
          </ul>
        @endif
      </div>

      <div class="card shadow-sm">
        <div class="card-header fw-bold">
          <i class="bi bi-info-circle me-1"></i>使用說明
        </div>
        <div class="card-body small text-muted">
          <p class="mb-2"><strong class="text-body">訂閱方式：</strong>使用者點擊導覽列的鈴鐺圖示 → 允許通知即訂閱成功。</p>
          <p class="mb-2"><strong class="text-body">支援瀏覽器：</strong>Chrome、Edge、Firefox（桌面+手機）、iOS Safari 16.4+。</p>
          <p class="mb-2"><strong class="text-body">取消訂閱：</strong>點「取消訂閱」會刪除該帳號在本系統的所有裝置訂閱，下次登入可重新開啟。</p>
          <p class="mb-0"><strong class="text-body">自動通知：</strong>交接申請送出/審核通過/退回時系統會自動推播給相關人員。</p>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]').content;

// 顯示/隱藏指定使用者欄
document.getElementById('pushTarget').addEventListener('change', function() {
  document.getElementById('userIdsRow').classList.toggle('d-none', this.value !== 'user_ids');
});

// 發送推播
document.getElementById('pushSendBtn').addEventListener('click', async function() {
  const title  = document.getElementById('pushTitle').value.trim();
  const body   = document.getElementById('pushBody').value.trim();
  const url    = document.getElementById('pushUrl').value.trim();
  const target = document.getElementById('pushTarget').value;
  const result = document.getElementById('pushResult');

  if (!title || !body) { result.textContent = '請填寫標題與內容'; result.className = 'small text-danger'; return; }
  if (!confirm('確定發送推播通知？')) return;

  this.disabled = true;
  result.textContent = '發送中…';
  result.className = 'small text-muted';

  const payload = { title, body, url: url || '/', target };
  if (target === 'user_ids') {
    payload.user_ids = [...document.getElementById('pushUserIds').selectedOptions].map(o => o.value);
    if (!payload.user_ids.length) {
      result.textContent = '請選擇至少一位使用者';
      result.className = 'small text-danger';
      this.disabled = false;
      return;
    }
  }

  try {
    const res  = await fetch('{{ route("push.admin.send") }}', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
      body: JSON.stringify(payload),
    });
    const data = await res.json();
    result.textContent = data.message;
    result.className = 'small ' + (data.success ? 'text-success' : 'text-danger');
    if (data.success) {
      document.getElementById('pushTitle').value = '';
      document.getElementById('pushBody').value  = '';
      document.getElementById('pushUrl').value   = '';
      setTimeout(() => location.reload(), 1500);
    }
  } catch(e) {
    result.textContent = '發送失敗';
    result.className = 'small text-danger';
  }
  this.disabled = false;
});

// 取消訂閱
document.addEventListener('click', async function(e) {
  const btn = e.target.closest('.btn-del-sub');
  if (!btn) return;
  if (!confirm(`確定取消「${btn.dataset.name}」的推播訂閱？`)) return;

  btn.disabled = true;
  try {
    const res = await fetch(`/push/admin/subscription/${btn.dataset.uid}`, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': CSRF },
    });
    const data = await res.json();
    if (data.success) {
      document.getElementById('sub-row-' + btn.dataset.uid)?.remove();
    }
  } catch(e) {
    btn.disabled = false;
    alert('操作失敗');
  }
});
</script>
@endpush