@extends('layouts.admin')
@section('title', '推播通知')
@section('content')

<div class="max-w-3xl space-y-6" x-data="pushAdmin()">

    {{-- 統計 --}}
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 text-center">
            <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $subscriberCount }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">訂閱用戶數</p>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 text-center">
            <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $totalSubscriptions }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">裝置訂閱數</p>
        </div>
    </div>

    {{-- 發送表單 --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            發送推播通知
        </h3>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">發送對象</label>
                <select x-model="target" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
                    <option value="all">所有訂閱者</option>
                    <option value="students">學生</option>
                    <option value="teachers">老師</option>
                    <option value="admins">管理員</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">標題</label>
                <input type="text" x-model="title" maxlength="100" placeholder="通知標題"
                       class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">內容</label>
                <textarea x-model="body" maxlength="500" rows="3" placeholder="通知內容"
                          class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500"></textarea>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">點擊連結 <span class="font-normal text-gray-400">（選填）</span></label>
                <input type="text" x-model="url" placeholder="/ 或 /practice 等"
                       class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
            </div>

            <div class="flex items-center gap-4 pt-2">
                <button @click="send()" :disabled="sending || !title || !body"
                        class="px-6 py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 shadow-lg shadow-blue-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    <span x-text="sending ? '發送中...' : '發送推播'"></span>
                </button>
                <span x-show="result" x-text="result" x-cloak
                      class="text-sm" :class="resultOk ? 'text-green-600' : 'text-red-600'"></span>
            </div>
        </div>
    </div>

    {{-- 說明 --}}
    <div class="bg-gray-50 dark:bg-slate-800/50 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
        <h4 class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-3">使用說明</h4>
        <div class="space-y-2 text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
            <p><strong class="text-gray-700 dark:text-gray-300">訂閱方式：</strong>使用者在網站上點擊導覽列的鈴鐺圖示，允許通知即完成訂閱。</p>
            <p><strong class="text-gray-700 dark:text-gray-300">推播範圍：</strong>僅推送給已訂閱的使用者，支援 Chrome、Edge、Firefox（桌面+手機）。iOS Safari 需 16.4+。</p>
            <p><strong class="text-gray-700 dark:text-gray-300">自動清理：</strong>發送失敗的過期訂閱會自動移除。</p>
        </div>
    </div>
</div>

<script>
function pushAdmin() {
    return {
        target: 'all',
        title: '',
        body: '',
        url: '',
        sending: false,
        result: '',
        resultOk: false,

        async send() {
            if (!this.title || !this.body) return;
            if (!confirm('確定發送推播通知？')) return;

            this.sending = true;
            this.result = '';
            try {
                const res = await fetch('{{ route("admin.push.send") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        title: this.title,
                        body: this.body,
                        url: this.url || '/',
                        target: this.target,
                    }),
                });
                const data = await res.json();
                this.result = data.message || '發送完成';
                this.resultOk = data.success;
            } catch (e) {
                this.result = '發送失敗：' + e.message;
                this.resultOk = false;
            }
            this.sending = false;
        }
    };
}
</script>
@endsection