@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">MS Teams Integration</h4>
        <div class="text-secondary small mt-1">Configure the Microsoft Teams Direct Routing trunk and manage Teams-enabled extensions.</div>
    </div>
    <div class="mt-2 mt-md-0">
        </a>
        <a href="/trunks/teams/certificates" class="btn btn-outline-secondary btn-sm me-2">
            <i data-lucide="shield" style="width:14px;height:14px;"></i> Certificates
        </a>
        <div class="dropdown d-inline-block">
            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="teamsActionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <i data-lucide="more-vertical" style="width:14px;height:14px;"></i> Actions
            </button>
            <ul class="dropdown-menu" aria-labelledby="teamsActionsDropdown">
                <li><a class="dropdown-item" href="/trunks/teams/{{ $config->id ?? '1' }}/edit"><i data-lucide="edit-2" style="width:14px;height:14px;"></i> Edit Trunk</a></li>
                @if($config && $config->enabled)
                    <li><a class="dropdown-item text-warning" href="#" onclick="disableTrunk(); return false;"><i data-lucide="pause" style="width:14px;height:14px;"></i> Disable Trunk</a></li>
                @else
                    <li><a class="dropdown-item text-success" href="#" onclick="enableTrunk(); return false;"><i data-lucide="play" style="width:14px;height:14px;"></i> Enable Trunk</a></li>
                @endif
                <li><a class="dropdown-item" href="#" onclick="restartTrunk(); return false;"><i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Restart Trunk</a></li>
                <li><a class="dropdown-item" href="#" onclick="testConnectivity(); return false;"><i data-lucide="wifi" style="width:14px;height:14px;"></i> Test Connectivity</a></li>
                <li><a class="dropdown-item" href="/trunks/teams/certificates"><i data-lucide="shield" style="width:14px;height:14px;"></i> View Logs</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item text-danger" href="#" onclick="deleteTrunk(); return false;"><i data-lucide="trash-2" style="width:14px;height:14px;"></i> Delete Trunk</a></li>
            </ul>
        </div>
        @if($config && $config->enabled)
            <span class="badge bg-success">Enabled</span>
        @else
            <span class="badge bg-secondary">Disabled</span>
        @endif
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
@endif


<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i data-lucide="activity" style="width:16px;height:16px;"></i>
            <span class="fw-semibold">Connectivity Status</span>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="validateConnectivity()">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Test Connectivity
        </button>
    </div>
    <div class="card-body">
        <div class="row" id="healthDashboard">
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">DNS Resolution</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="dnsStatus">Unknown</span>
                        <small class="text-muted" id="dnsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">TLS Connection</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="tlsStatus">Unknown</span>
                        <small class="text-muted" id="tlsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">SIP OPTIONS</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="sipOptionsStatus">Unknown</span>
                        <small class="text-muted" id="sipOptionsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">SBC Reachable</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="sbcStatus">Unknown</span>
                        <small class="text-muted" id="sbcMessage">Not checked</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($defaultCert)
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="shield" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Certificate Status</span>
        @if($defaultCert->status === 'active')
            <span class="badge bg-success">Valid</span>
        @elseif($defaultCert->status === 'expiring_soon')
            <span class="badge bg-warning">Expiring Soon</span>
        @elseif($defaultCert->status === 'expired')
            <span class="badge bg-danger">Expired</span>
        @else
            <span class="badge bg-secondary">{{ $defaultCert->status }}</span>
        @endif
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Subject</div>
                <div class="font-monospace small">{{ $defaultCert->subject ?? '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Issuer</div>
                <div class="font-monospace small">{{ $defaultCert->issuer ?? '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Expires</div>
                <div class="small">
                    @if($defaultCert->valid_to)
                        {{ \Carbon\Carbon::parse($defaultCert->valid_to)->format('M d, Y') }}
                        @if(\Carbon\Carbon::parse($defaultCert->valid_to)->diffInDays(now()) < 30)
                            <span class="text-warning">({{ \Carbon\Carbon::parse($defaultCert->valid_to)->diffInDays(now()) }} days)</span>
                        @endif
                    @else
                        —
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif


<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="bar-chart-2" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Call Statistics (24h)</span>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Inbound Calls</div>
                    <div class="fw-bold" id="inboundCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Outbound Calls</div>
                    <div class="fw-bold" id="outboundCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Concurrent Calls</div>
                    <div class="fw-bold" id="concurrentCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Last Call</div>
                    <div class="small" id="lastCall">—</div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- TEAMS USERS STATUS --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="users" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Teams Users Status</span>
        <span class="badge bg-secondary ms-1">{{ count($extensions) }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Extension</th>
                        <th>Description</th>
                        <th>SIP Status</th>
                        <th>IP Address</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="teamsUsersTable">
                    <tr>
                        <td colspan="6" class="text-center text-secondary py-4">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


{{-- DIRECT ROUTING DIAGNOSTICS --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="activity" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Direct Routing Diagnostics</span>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testDns()">
                    <i data-lucide="globe" style="width:14px;height:14px;"></i> Test DNS
                </button>
                <div class="small text-muted mt-1" id="dnsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testTls()">
                    <i data-lucide="lock" style="width:14px;height:14px;"></i> Test TLS
                </button>
                <div class="small text-muted mt-1" id="tlsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testOptions()">
                    <i data-lucide="phone" style="width:14px;height:14px;"></i> Test OPTIONS
                </button>
                <div class="small text-muted mt-1" id="optionsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testRouting()">
                    <i data-lucide="route" style="width:14px;height:14px;"></i> Test Routing
                </button>
                <div class="small text-muted mt-1" id="routingResult">Not tested</div>
            </div>
        </div>
    </div>
</div>


<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="settings" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Trunk Configuration</span>
    </div>
    <div class="card-body">
        <form method="POST" action="/trunks/teams">
            @csrf
            @method('PUT')
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Trunk Endpoint (PJSIP ID)</label>
                    <input type="text" name="trunk_endpoint" class="form-control" value="{{ old('trunk_endpoint', $config->trunk_endpoint ?? '') }}" placeholder="e.g. 0179619839">
                    <small class="text-muted">The PJSIP endpoint ID for the Teams SBC trunk.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">SIP Domain</label>
                    <input type="text" name="sip_domain" class="form-control" value="{{ old('sip_domain', $config->sip_domain ?? 'sip.pstnhub.microsoft.com') }}">
                    <small class="text-muted">Microsoft Teams SBC domain.</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label">SIP Port</label>
                    <input type="number" name="sip_port" class="form-control" value="{{ old('sip_port', $config->sip_port ?? 5061) }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Transport</label>
                    <select name="sip_transport" class="form-select">
                        <option value="sips" {{ (old('sip_transport', $config->sip_transport ?? 'sips')) === 'sips' ? 'selected' : '' }}>SIPS (TLS)</option>
                        <option value="sip" {{ (old('sip_transport', $config->sip_transport ?? 'sips')) === 'sip' ? 'selected' : '' }}>SIP (UDP/TCP)</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">DID Prefix</label>
                    <input type="text" name="did_prefix" class="form-control" value="{{ old('did_prefix', $config->did_prefix ?? '') }}" placeholder="e.g. +2741450">
                    <small class="text-muted">Prepended to ext number for Teams E.164 URI.</small>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Country Code</label>
                    <input type="text" name="country_code" class="form-control" value="{{ old('country_code', $config->country_code ?? '') }}" placeholder="e.g. +27">
                    <small class="text-muted">Prefix Teams uses for incoming calls.</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Dial Timeout (s)</label>
                    <input type="number" name="dial_timeout" class="form-control" value="{{ old('dial_timeout', $config->dial_timeout ?? 30) }}">
                </div>
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="ring_local_sip" value="1" id="ringLocalSip"
                            {{ old('ring_local_sip', $config->ring_local_sip ?? 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="ringLocalSip">Ring SIP Phone</label>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="enabled" value="1" id="teamsEnabled"
                            {{ old('enabled', $config->enabled ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="teamsEnabled">Enabled</label>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="media_bypass" value="1" id="mediaBypass"
                            {{ old('media_bypass', $config->media_bypass ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="mediaBypass">Media Bypass</label>
                    </div>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Failover SBC Endpoint</label>
                    <input type="text" name="failover_sbc_endpoint" class="form-control" value="{{ old('failover_sbc_endpoint', $config->failover_sbc_endpoint ?? '') }}" placeholder="e.g. 0179619840">
                    <small class="text-muted">Secondary SBC endpoint for failover.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Failover SIP Domain</label>
                    <input type="text" name="failover_sip_domain" class="form-control" value="{{ old('failover_sip_domain', $config->failover_sip_domain ?? '') }}" placeholder="e.g. sip.pstnhub.microsoft.com">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Failover SIP Port</label>
                    <input type="number" name="failover_sip_port" class="form-control" value="{{ old('failover_sip_port', $config->failover_sip_port ?? 5061) }}">
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Emergency Location ID</label>
                    <input type="text" name="emergency_location_id" class="form-control" value="{{ old('emergency_location_id', $config->emergency_location_id ?? '') }}" placeholder="e.g. loc-12345">
                    <small class="text-muted">Microsoft Teams emergency location ID.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Emergency DID</label>
                    <input type="text" name="emergency_did" class="form-control" value="{{ old('emergency_did', $config->emergency_did ?? '') }}" placeholder="e.g. +27115551234">
                    <small class="text-muted">DID for emergency calls.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Voice Routing Policy</label>
                    <input type="text" name="voice_routing_policy" class="form-control" value="{{ old('voice_routing_policy', $config->voice_routing_policy ?? '') }}" placeholder="e.g. GlobalPolicy">
                    <small class="text-muted">Microsoft Teams voice routing policy name.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">PSTN Usage</label>
                    <input type="text" name="pstn_usage" class="form-control" value="{{ old('pstn_usage', $config->pstn_usage ?? '') }}" placeholder="e.g. GlobalPSTN">
                    <small class="text-muted">Microsoft Teams PSTN usage record.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Tenant ID</label>
                    <input type="text" name="tenant_id" class="form-control" value="{{ old('tenant_id', $config->tenant_id ?? '') }}" placeholder="e.g. 12345678-1234-1234-1234-123456789012">
                    <small class="text-muted">Microsoft 365 tenant ID.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Tenant Domain</label>
                    <input type="text" name="tenant_domain" class="form-control" value="{{ old('tenant_domain', $config->tenant_domain ?? '') }}" placeholder="e.g. contoso.onmicrosoft.com">
                    <small class="text-muted">Microsoft 365 tenant domain.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="federation_enabled" value="1" id="federationEnabled"
                            {{ old('federation_enabled', $config->federation_enabled ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="federationEnabled">Federation Enabled</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Federation Domain</label>
                    <input type="text" name="federation_domain" class="form-control" value="{{ old('federation_domain', $config->federation_domain ?? '') }}" placeholder="e.g. federated.contoso.com">
                </div>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary btn-sm">Save Configuration</button>
            </div>
        </form>
    </div>
</div>


<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i data-lucide="users" style="width:16px;height:16px;"></i>
            <span class="fw-semibold">Teams-Enabled Extensions</span>
            <span class="badge bg-secondary ms-1">{{ count($extensions) }}</span>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Extension</th>
                        <th>Description</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($extensions as $ext)
                    <tr>
                        <td class="font-monospace fw-semibold">{{ $ext->number }}</td>
                        <td>{{ ltrim($ext->number, '+') }}</td>
                        <td>{{ $ext->description ?? '—' }}</td>
                        <td class="text-end">
                            <form method="POST" action="/trunks/teams/extensions/{{ $ext->id }}" class="d-inline" onsubmit="return confirm('Remove this extension from Teams?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center text-secondary py-4">No Teams extensions configured. Add one below.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-3 border-top">
            <form method="POST" action="/trunks/teams/extensions" class="d-flex align-items-end gap-3">
                @csrf
                <div>
                    <label class="form-label">Extension Number</label>
                    <input type="text" name="number" class="form-control form-control-sm" placeholder="e.g. 1359" style="width:140px;">
                </div>
                <div>
                    <label class="form-label">Description</label>
                    <input type="text" name="description" class="form-control form-control-sm" placeholder="e.g. John Smith" style="width:200px;">
                </div>
                <button type="submit" class="btn btn-primary btn-sm">+ Add Extension</button>
            </form>
        </div>
    </div>
</div>

<script>
function validateConnectivity() {
    const badges = {
        dnsStatus: document.getElementById('dnsStatus'),
        tlsStatus: document.getElementById('tlsStatus'),
        sipOptionsStatus: document.getElementById('sipOptionsStatus'),
        sbcStatus: document.getElementById('sbcStatus'),
    };
    const messages = {
        dnsMessage: document.getElementById('dnsMessage'),
        tlsMessage: document.getElementById('tlsMessage'),
        sipOptionsMessage: document.getElementById('sipOptionsMessage'),
        sbcMessage: document.getElementById('sbcMessage'),
    };

    Object.values(badges).forEach(b => {
        b.className = 'badge bg-secondary';
        b.textContent = 'Checking...';
    });
    Object.values(messages).forEach(m => m.textContent = 'Checking...');

    fetch('/trunks/teams/validate-connectivity', {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.dns) {
                badges.dnsStatus.className = data.dns.status === 'pass' ? 'badge bg-success' : data.dns.status === 'disabled' ? 'badge bg-secondary' : 'badge bg-danger';
                badges.dnsStatus.textContent = data.dns.status === 'pass' ? 'OK' : data.dns.status === 'disabled' ? 'DISABLED' : 'FAIL';
                messages.dnsMessage.textContent = data.dns.message;
            }
            if (data.tls) {
                badges.tlsStatus.className = data.tls.status === 'pass' ? 'badge bg-success' : data.tls.status === 'disabled' ? 'badge bg-secondary' : 'badge bg-danger';
                badges.tlsStatus.textContent = data.tls.status === 'pass' ? 'OK' : data.tls.status === 'disabled' ? 'DISABLED' : 'FAIL';
                messages.tlsMessage.textContent = data.tls.message;
            }
            if (data.sip_options) {
                badges.sipOptionsStatus.className = data.sip_options.status === 'pass' ? 'badge bg-success' : data.sip_options.status === 'disabled' ? 'badge bg-secondary' : 'badge bg-danger';
                badges.sipOptionsStatus.textContent = data.sip_options.status === 'pass' ? 'OK' : data.sip_options.status === 'disabled' ? 'DISABLED' : 'FAIL';
                messages.sipOptionsMessage.textContent = data.sip_options.message;
            }
            if (data.sbc_reachable) {
                badges.sbcStatus.className = data.sbc_reachable.status === 'pass' ? 'badge bg-success' : data.sbc_reachable.status === 'disabled' ? 'badge bg-secondary' : 'badge bg-danger';
                badges.sbcStatus.textContent = data.sbc_reachable.status === 'pass' ? 'OK' : data.sbc_reachable.status === 'disabled' ? 'DISABLED' : 'FAIL';
                messages.sbcMessage.textContent = data.sbc_reachable.message;
            }
        })
        .catch(err => {
            console.error(err);
            Object.values(badges).forEach(b => {
                b.className = 'badge bg-danger';
                b.textContent = 'ERROR';
            });
            Object.values(messages).forEach(m => m.textContent = 'Validation failed');
        });
}

function loadCallStatistics() {
    fetch('/trunks/teams/call-statistics')
        .then(r => r.json())
        .then(data => {
            document.getElementById('inboundCalls').textContent = data.inbound_calls_24h;
            document.getElementById('outboundCalls').textContent = data.outbound_calls_24h;
            document.getElementById('concurrentCalls').textContent = data.concurrent_calls;
            if (data.last_call_time) {
                const lastCall = new Date(data.last_call_time);
                document.getElementById('lastCall').textContent = lastCall.toLocaleString();
            } else {
                document.getElementById('lastCall').textContent = 'No calls';
            }
        })
        .catch(err => console.error(err));
}

loadCallStatistics();
validateConnectivity();

function loadTeamsUsersStatus() {
    fetch('/trunks/teams/users-status')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('teamsUsersTable');
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-secondary py-4">No Teams users configured.</td></tr>';
                return;
            }
            tbody.innerHTML = data.map(user => `
                <tr>
                    <td class="font-monospace fw-semibold">${user.number}</td>
                    <td>${user.extension}</td>
                    <td>${user.description || '—'}</td>
                    <td>
                        ${user.registered 
                            ? '<span class="badge bg-success">Registered</span>' 
                            : '<span class="badge bg-secondary">Unregistered</span>'}
                    </td>
                    <td class="font-monospace small">${user.ip || '—'}</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i data-lucide="more-vertical" style="width:14px;height:14px;"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="editExtension(${user.id}, '${user.number}', '${user.description}'); return false;"><i data-lucide="edit-2" style="width:14px;height:14px;"></i> Edit Mapping</a></li>
                                <li><a class="dropdown-item text-warning" href="#" onclick="disableExtension(${user.id}); return false;"><i data-lucide="user-x" style="width:14px;height:14px;"></i> Disable Teams Integration</a></li>
                                <li><a class="dropdown-item" href="#" onclick="syncExtension(${user.id}); return false;"><i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Sync User</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="#" onclick="removeExtension(${user.id}); return false;"><i data-lucide="trash-2" style="width:14px;height:14px;"></i> Remove User</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            `).join('');
        })
        .catch(err => {
            console.error(err);
            document.getElementById('teamsUsersTable').innerHTML = '<tr><td colspan="6" class="text-center text-danger py-4">Failed to load users status.</td></tr>';
        });
}

loadTeamsUsersStatus();

function testDns() {
    document.getElementById('dnsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity', {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.dns) {
                document.getElementById('dnsResult').textContent = data.dns.status === 'pass' 
                    ? '✓ ' + data.dns.message 
                    : '✗ ' + data.dns.message;
            }
        })
        .catch(err => {
            document.getElementById('dnsResult').textContent = 'Error: ' + err.message;
        });
}

function testTls() {
    document.getElementById('tlsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity', {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.tls) {
                document.getElementById('tlsResult').textContent = data.tls.status === 'pass' 
                    ? '✓ ' + data.tls.message 
                    : '✗ ' + data.tls.message;
            }
        })
        .catch(err => {
            document.getElementById('tlsResult').textContent = 'Error: ' + err.message;
        });
}

function testOptions() {
    document.getElementById('optionsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity', {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.sip_options) {
                document.getElementById('optionsResult').textContent = data.sip_options.status === 'pass' 
                    ? '✓ ' + data.sip_options.message 
                    : '✗ ' + data.sip_options.message;
            }
        })
        .catch(err => {
            document.getElementById('optionsResult').textContent = 'Error: ' + err.message;
        });
}

function testRouting() {
    document.getElementById('routingResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity', {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.sbc_reachable) {
                document.getElementById('routingResult').textContent = data.sbc_reachable.status === 'pass' 
                    ? '✓ ' + data.sbc_reachable.message 
                    : '✗ ' + data.sbc_reachable.message;
            }
        })
        .catch(err => {
            document.getElementById('routingResult').textContent = 'Error: ' + err.message;
        });
}

// Trunk Actions

// Trunk Actions
function disableTrunk() {
    if (!confirm('Are you sure you want to disable the Teams trunk? This will stop all Teams routing.')) return;
    const id = '{{ $config->id ?? 1 }}';
    fetch(`/trunks/teams/${id}/disable`, {method: 'POST', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast('Teams trunk disabled successfully', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showToast(data.error || 'Failed to disable trunk', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

function enableTrunk() {
    if (!confirm('Are you sure you want to enable the Teams trunk?')) return;
    const id = '{{ $config->id ?? 1 }}';
    fetch(`/trunks/teams/${id}/enable`, {method: 'POST', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast('Teams trunk enabled successfully', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showToast(data.error || 'Failed to enable trunk', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

function restartTrunk() {
    if (!confirm('Restart the Teams trunk? This will briefly interrupt Teams service.')) return;
    const id = '{{ $config->id ?? 1 }}';
    fetch(`/trunks/teams/${id}/restart`, {method: 'POST', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast('Teams trunk restarted successfully', 'success');
            } else {
                showToast(data.error || 'Failed to restart trunk', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

function deleteTrunk() {
    const phrase = prompt('Type DELETE to confirm deletion of the Teams trunk:');
    if (phrase !== 'DELETE') {
        showToast('Deletion cancelled. You must type DELETE exactly.', 'warning');
        return;
    }
    const id = '{{ $config->id ?? 1 }}';
    fetch(`/trunks/teams/${id}`, {method: 'DELETE', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast('Teams trunk deleted successfully', 'success');
                setTimeout(() => window.location.href = '/trunks/teams', 1500);
            } else {
                showToast(data.error || 'Failed to delete trunk', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

// Extension Actions
function editExtension(id, currentNumber, currentDescription) {
    const newNumber = prompt('Edit Teams Number:', currentNumber);
    if (newNumber === null) return;
    const newDescription = prompt('Edit Description:', currentDescription);
    if (newDescription === null) return;
    
    fetch(`/trunks/teams/extensions/${id}/edit`, {headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Content-Type': 'application/json'}, 
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({number: newNumber, description: newDescription})
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            loadTeamsUsersStatus();
        } else {
            showToast(data.error || 'Failed to update extension', 'error');
        }
    })
    .catch(err => {
        console.error(err);
        showToast('Network error', 'error');
    });
}

function disableExtension(id) {
    if (!confirm('Disable Teams integration for this extension?')) return;
    fetch(`/trunks/teams/extensions/${id}/disable`, {method: 'POST', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                loadTeamsUsersStatus();
            } else {
                showToast(data.error || 'Failed to disable extension', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

function syncExtension(id) {
    fetch(`/trunks/teams/extensions/${id}/sync`, {method: 'POST', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
            } else {
                showToast(data.error || 'Failed to sync extension', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

function removeExtension(id) {
    if (!confirm('Remove this Teams user mapping? This cannot be undone.')) return;
    fetch(`/trunks/teams/extensions/${id}`, {method: 'DELETE', headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                loadTeamsUsersStatus();
            } else {
                showToast(data.error || 'Failed to remove extension', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            showToast('Network error', 'error');
        });
}

// Toast notification helper
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : type === 'success' ? 'success' : 'primary'} border-0`;
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    document.body.appendChild(toast);
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    toast.addEventListener('hidden.bs.toast', () => toast.remove());
}

</script>

@endsection