@extends('layouts.superadmin')

@section('content')
<div dir="rtl" style="max-width:980px;margin:0 auto;padding:18px;">
    <div style="margin-bottom:22px;">
        <h1 style="font-size:2rem;font-weight:950;margin:0;color:#111827;">إعدادات غرف الوفاء الصوتية</h1>
        <p style="font-weight:800;color:#64748b;margin-top:8px;">لا يتم قبول أو تفعيل أي سيرفر إلا بعد فحص AJAX وظهوره أخضر.</p>
        <a href="{{ route('voice.index') }}" style="display:inline-block;margin-top:8px;text-decoration:none;background:#d4af37;color:#111827;border-radius:14px;padding:11px 18px;font-weight:950;">عرض المركز</a>
    </div>

    @if(session('success'))
        <div style="background:#dcfce7;border:1px solid #86efac;color:#166534;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-weight:900;">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div style="background:#fee2e2;border:1px solid #fecaca;color:#991b1b;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-weight:900;">{{ session('error') }}</div>
    @endif

    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:18px;margin-bottom:18px;box-shadow:0 12px 35px rgba(15,23,42,.08);">
        <h2 style="margin:0 0 14px;font-size:1.35rem;font-weight:950;color:#111827;">إضافة سيرفر</h2>

        <form id="serverForm" method="POST" action="{{ route('superadmin.voice.servers.store') }}">
            @csrf

            <div style="position:relative;margin-bottom:10px;">
                <input name="name" id="serverName" value="{{ old('name', 'Jitsi') }}" placeholder="اسم السيرفر" required style="width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:14px;padding:13px 52px 13px 13px;font-weight:850;">
                <span id="trafficLight" title="لم يتم الفحص" style="position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 8px rgba(239,68,68,.12);"></span>
            </div>

            <select name="provider" id="provider" required style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;">
                <option value="jitsi" selected>Jitsi</option>
                <option value="external">External</option>
                <option value="livekit">LiveKit</option>
            </select>

            <input name="server_url" id="serverUrl" value="{{ old('server_url', 'https://meet.jit.si') }}" placeholder="https://meet.jit.si" required style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;direction:ltr;text-align:left;">

            <input name="room_prefix" id="roomPrefix" value="{{ old('room_prefix', 'golden-loyalty') }}" placeholder="بادئة الغرف مثل golden-loyalty" style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;">

            <div id="probeMessage" style="margin:8px 0 12px;font-weight:950;color:#dc2626;">لم يتم الفحص بعد</div>

            <button id="saveServerBtn" type="submit" disabled style="width:100%;border:0;border-radius:16px;padding:14px;background:#ead98b;color:#64748b;font-size:1rem;font-weight:950;cursor:not-allowed;">
                فحص وحفظ السيرفر
            </button>
        </form>
    </div>

    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:18px;margin-bottom:18px;box-shadow:0 12px 35px rgba(15,23,42,.08);">
        <h2 style="margin:0 0 14px;font-size:1.35rem;font-weight:950;color:#111827;">إضافة غرفة</h2>

        <form method="POST" action="{{ route('superadmin.voice.rooms.store') }}">
            @csrf

            <input name="title" placeholder="اسم الغرفة" required style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;">

            <select name="voice_server_id" required style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;">
                <option value="">اختر سيرفر أخضر</option>
                @foreach($servers as $s)
                    @php
                        $status = (string)($s->status ?? $s->health_status ?? 'bad');
                        $ok = in_array($status, ['ok','active','ready','healthy','green'], true);
                    @endphp
                    @if($ok)
                        <option value="{{ $s->id }}">{{ $s->name }} — {{ $s->server_url }}</option>
                    @endif
                @endforeach
            </select>

            <select name="room_type" style="width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:14px;padding:13px;font-weight:850;">
                <option value="general">عام</option>
                <option value="team">فريق</option>
                <option value="admin">إدارة</option>
            </select>

            <button type="submit" style="width:100%;border:0;border-radius:16px;padding:14px;background:#111827;color:#fff;font-size:1rem;font-weight:950;">
                إنشاء غرفة وربطها
            </button>
        </form>
    </div>

    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:18px;margin-bottom:18px;box-shadow:0 12px 35px rgba(15,23,42,.08);">
        <h2 style="margin:0 0 14px;font-size:1.35rem;font-weight:950;color:#111827;">السيرفرات</h2>

        @forelse($servers as $s)
            @php
                $status = (string)($s->status ?? $s->health_status ?? 'bad');
                $ok = in_array($status, ['ok','active','ready','healthy','green'], true);
                $isDefault = (int)($s->is_default ?? $s->is_active ?? 0) === 1;
            @endphp

            <div style="border:1px solid {{ $ok ? '#86efac' : '#fecaca' }};background:{{ $ok ? '#f0fdf4' : '#fff1f2' }};border-radius:18px;padding:12px;margin-bottom:10px;">
                <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;">
                    <div>
                        <b style="font-size:1rem;color:#111827;">{{ $s->name }}</b>
                        <br>
                        <small style="color:#475569;font-weight:800;">{{ $s->provider }} — {{ $s->server_url }}</small>
                        <br>
                        <small style="font-weight:950;color:{{ $ok ? '#16a34a' : '#dc2626' }};">
                            {{ $ok ? '🟢 أخضر جاهز' : '🔴 غير جاهز' }}
                            @if($isDefault) — افتراضي @endif
                        </small>
                    </div>

                    <div style="display:flex;gap:7px;flex-wrap:wrap;">
                        <form method="POST" action="{{ route('superadmin.voice.servers.test', $s->id) }}">
                            @csrf
                            <button style="border:0;border-radius:12px;padding:9px 12px;background:#e2e8f0;font-weight:900;">فحص</button>
                        </form>

                        <form method="POST" action="{{ route('superadmin.voice.servers.activate', $s->id) }}">
                            @csrf
                            <button style="border:0;border-radius:12px;padding:9px 12px;background:#d4af37;color:#111827;font-weight:950;">تفعيل</button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <div style="color:#64748b;font-weight:900;">لا يوجد سيرفرات بعد.</div>
        @endforelse
    </div>

    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:18px;box-shadow:0 12px 35px rgba(15,23,42,.08);">
        <h2 style="margin:0 0 14px;font-size:1.35rem;font-weight:950;color:#111827;">الغرف</h2>

        @forelse($rooms as $r)
            <div style="border:1px solid #e2e8f0;border-radius:18px;padding:12px;margin-bottom:10px;">
                <b>{{ $r->title }}</b>
                <br>
                <small style="color:#64748b;font-weight:800;">{{ $r->status }} — {{ $r->external_url }}</small>
                <br>
                <a href="{{ route('voice.rooms.show', $r->id) }}" style="display:inline-block;margin-top:8px;text-decoration:none;background:#111827;color:#fff;border-radius:12px;padding:8px 12px;font-weight:900;">فتح الغرفة</a>
            </div>
        @empty
            <div style="color:#64748b;font-weight:900;">لا يوجد غرف بعد.</div>
        @endforelse
    </div>
</div>

<script>
(function () {
    const urlInput = document.getElementById('serverUrl');
    const provider = document.getElementById('provider');
    const light = document.getElementById('trafficLight');
    const msg = document.getElementById('probeMessage');
    const btn = document.getElementById('saveServerBtn');
    const token = document.querySelector('#serverForm input[name="_token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.content || '';

    let timer = null;
    let controller = null;

    function state(color, text) {
        const map = {
            red: ['#ef4444', 'rgba(239,68,68,.12)', '#dc2626'],
            yellow: ['#f59e0b', 'rgba(245,158,11,.18)', '#b45309'],
            green: ['#22c55e', 'rgba(34,197,94,.16)', '#16a34a']
        };

        const c = map[color] || map.red;
        light.style.background = c[0];
        light.style.boxShadow = '0 0 0 8px ' + c[1];
        msg.style.color = c[2];
        msg.textContent = text;

        if (color === 'green') {
            btn.disabled = false;
            btn.style.cursor = 'pointer';
            btn.style.background = '#d4af37';
            btn.style.color = '#111827';
        } else {
            btn.disabled = true;
            btn.style.cursor = 'not-allowed';
            btn.style.background = '#ead98b';
            btn.style.color = '#64748b';
        }
    }

    async function probe() {
        const url = (urlInput.value || '').trim();

        if (!url || !/^https?:\/\//i.test(url)) {
            state('red', 'الرابط غير صحيح');
            return;
        }

        if (controller) controller.abort();
        controller = new AbortController();

        state('yellow', 'جاري الفحص الفوري...');

        try {
            const res = await fetch("{{ route('superadmin.voice.servers.ajax_test') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    server_url: url,
                    base_url: url,
                    provider: provider.value
                }),
                signal: controller.signal
            });

            const text = await res.text();
            let data = null;

            try {
                data = JSON.parse(text);
            } catch (e) {
                state('red', 'رد غير مفهوم من الخادم: HTTP ' + res.status);
                return;
            }

            if (data.ok) {
                state('green', data.message || 'السيرفر أخضر وجاهز');
            } else {
                state('red', data.message || 'السيرفر غير جاهز');
            }
        } catch (e) {
            if (e.name === 'AbortError') return;
            state('red', 'Server Error: ' + (e.message || 'فشل AJAX'));
        }
    }

    function schedule() {
        clearTimeout(timer);
        timer = setTimeout(probe, 650);
    }

    urlInput.addEventListener('input', schedule);
    provider.addEventListener('change', schedule);

    if ((urlInput.value || '').trim()) {
        schedule();
    }
})();
</script>
@endsection