@extends('backEnd.layouts.master')
@section('title', 'Support Channel Settings')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-plug me-2"></i>Channel Settings</h4>
            <small class="text-muted">Facebook Messenger & WhatsApp webhook configuration</small>
        </div>
        <a href="{{ route('admin.support.inbox') }}" class="btn btn-outline-secondary btn-sm">Back to Inbox</a>
    </div>

    <div class="row g-3">
        @foreach($channels as $channel)
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100 channel-card" data-channel="{{ $channel->channel }}" data-has-token="{{ $channel->access_token ? '1' : '0' }}">
                <div class="card-header bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <span class="fw-semibold">{{ ucfirst($channel->channel) }}</span>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary channel-test-badge" id="testBadge-{{ $channel->channel }}">Not tested</span>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input channel-toggle" type="checkbox" data-channel="{{ $channel->channel }}" @checked($channel->is_enabled)>
                            <label class="form-check-label small">{{ $channel->is_enabled ? 'ON' : 'OFF' }}</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="small text-muted mb-2">
                        Webhook URL:
                        <code>{{ url('/webhook/' . $channel->channel) }}</code>
                    </p>

                    <div class="border rounded p-2 mb-3 bg-light channel-test-result" id="testResult-{{ $channel->channel }}" style="display:none">
                        <div class="small fw-semibold mb-1">Connection Test</div>
                        <ul class="list-unstyled mb-0 small channel-test-checks"></ul>
                        <div class="text-muted mt-1 channel-test-time" style="font-size:11px"></div>
                    </div>

                    <form action="{{ route('admin.support.settings.update', $channel->channel) }}" method="POST" class="channel-settings-form" data-channel="{{ $channel->channel }}">
                        @csrf
                        @if($channel->channel === 'messenger')
                        <div class="mb-2">
                            <label class="form-label small">Facebook Page ID</label>
                            <input type="text" name="page_id" class="form-control form-control-sm" value="{{ $channel->page_id }}" placeholder="e.g. 123456789012345">
                        </div>
                        @else
                        <div class="mb-2">
                            <label class="form-label small">WhatsApp Phone Number ID</label>
                            <input type="text" name="phone_number_id" class="form-control form-control-sm" value="{{ $channel->phone_number_id }}" placeholder="e.g. 123456789012345">
                        </div>
                        @endif
                        <div class="mb-2">
                            <label class="form-label small">Access Token</label>
                            <input type="password" name="access_token" class="form-control form-control-sm" placeholder="{{ $channel->access_token ? '•••••••• (saved)' : 'Paste token' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small">Webhook Verify Token</label>
                            <input type="text" name="webhook_verify_token" class="form-control form-control-sm" value="{{ $channel->webhook_verify_token }}">
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-save me-1"></i> Save</button>
                            <button type="button" class="btn btn-outline-primary btn-sm channel-test-btn" data-channel="{{ $channel->channel }}">
                                <i class="fas fa-plug-circle-check me-1"></i> Test Connection
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card shadow-sm border-0 mt-3">
        <div class="card-body small text-muted mb-0">
            <strong>Setup:</strong> Meta Developer Console → add Messenger/WhatsApp product → set webhook URL above → subscribe to <code>messages</code> → paste Page Access Token / Phone Number ID here → <strong>Save</strong> → <strong>Test Connection</strong> (auto runs when token saved).
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const csrf = document.querySelector('meta[name=csrf-token]')?.content || '';
    const testUrlTemplate = @json(route('admin.support.channels.test', ['channel' => '__CHANNEL__']));

    function testUrl(channel) {
        return testUrlTemplate.replace('__CHANNEL__', channel);
    }

    function renderTestResult(channel, data) {
        const box = document.getElementById('testResult-' + channel);
        const badge = document.getElementById('testBadge-' + channel);
        const list = box?.querySelector('.channel-test-checks');
        const timeEl = box?.querySelector('.channel-test-time');
        if (!box || !list || !badge) return;

        box.style.display = 'block';
        list.innerHTML = '';

        (data.checks || []).forEach(function (item) {
            const li = document.createElement('li');
            li.className = 'mb-1';
            li.innerHTML = '<i class="fas fa-' + (item.ok ? 'check-circle text-success' : 'times-circle text-danger') + ' me-1"></i>' +
                '<strong>' + item.label + ':</strong> ' + item.detail;
            list.appendChild(li);
        });

        if (data.success) {
            badge.className = 'badge bg-success channel-test-badge';
            badge.textContent = 'Connected';
        } else {
            badge.className = 'badge bg-danger channel-test-badge';
            badge.textContent = 'Failed';
        }

        if (timeEl) {
            timeEl.textContent = data.tested_at ? ('Last test: ' + data.tested_at) : '';
        }

        if (typeof toastr !== 'undefined') {
            if (data.success) {
                toastr.success(data.message || 'Connection OK', channel.charAt(0).toUpperCase() + channel.slice(1));
            } else if (data.message) {
                toastr.warning(data.message, channel.charAt(0).toUpperCase() + channel.slice(1));
            }
        }
    }

    function runChannelTest(channel, silent) {
        const btn = document.querySelector('.channel-test-btn[data-channel="' + channel + '"]');
        const badge = document.getElementById('testBadge-' + channel);
        if (badge) {
            badge.className = 'badge bg-warning text-dark channel-test-badge';
            badge.textContent = 'Testing...';
        }
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Testing...';
        }

        return fetch(testUrl(channel), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
            },
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                renderTestResult(channel, data);
                return data;
            })
            .catch(function () {
                if (badge) {
                    badge.className = 'badge bg-danger channel-test-badge';
                    badge.textContent = 'Error';
                }
                if (!silent && typeof toastr !== 'undefined') {
                    toastr.error('Test request failed');
                }
            })
            .finally(function () {
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-plug-circle-check me-1"></i> Test Connection';
                }
            });
    }

    document.querySelectorAll('.channel-test-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            runChannelTest(btn.dataset.channel, false);
        });
    });

    document.querySelectorAll('.channel-toggle').forEach(function (el) {
        el.addEventListener('change', function () {
            fetch(@json(route('admin.support.channels.toggle', ['channel' => '__CHANNEL__'])).replace('__CHANNEL__', el.dataset.channel), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                },
            }).then(function (r) { return r.json(); }).then(function (data) {
                el.nextElementSibling.textContent = data.is_enabled ? 'ON' : 'OFF';
                if (data.is_enabled) {
                    runChannelTest(el.dataset.channel, true);
                }
            }).catch(function () { el.checked = !el.checked; });
        });
    });

    document.querySelectorAll('.channel-card[data-has-token="1"]').forEach(function (card) {
        runChannelTest(card.dataset.channel, true);
    });
})();
</script>
@endpush