@extends('admin.layout')
@section('title', 'API providers')

@section('content')
<h1 class="page-title">API providers</h1>
<p class="provider-meta" style="margin-top:-14px; margin-bottom:18px;">
    Providers are tried in priority order per service. Lower number tries first — if it fails, the next one takes over automatically.
</p>

<div x-data="apiProviders()" x-init="load()">
    <template x-for="serviceType in Object.keys(grouped)" :key="serviceType">
        <div class="panel">
            <h2 x-text="serviceType"></h2>
            <template x-for="(p, idx) in grouped[serviceType]" :key="p.id">
                <div class="provider-row">
                    <div style="display:flex; align-items:center; gap:12px;">
                        <div style="display:flex; flex-direction:column; gap:2px;">
                            <button class="btn" style="padding:2px 8px;" @click="move(p, -1)" :disabled="idx === 0">&uarr;</button>
                            <button class="btn" style="padding:2px 8px;" @click="move(p, 1)" :disabled="idx === grouped[serviceType].length - 1">&darr;</button>
                        </div>
                        <div>
                            <div class="provider-name" x-text="p.name"></div>
                            <div class="provider-meta" x-text="'priority ' + p.priority + ' · ' + p.base_url"></div>
                        </div>
                    </div>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span :class="'badge ' + (p.status === 'active' ? 'success' : p.status === 'degraded' ? 'pending' : 'failed')" x-text="p.status"></span>
                        <select @change="setStatus(p, $event.target.value)">
                            <option value="active" :selected="p.status==='active'">Active</option>
                            <option value="degraded" :selected="p.status==='degraded'">Degraded</option>
                            <option value="disabled" :selected="p.status==='disabled'">Disabled</option>
                        </select>
                    </div>
                </div>
            </template>
        </div>
    </template>
</div>

@push('scripts')
<script>
function apiProviders() {
    return {
        providers: [],
        grouped: {},
        async load() {
            const res = await fetch('/api/admin/api-providers', { headers: { 'Accept': 'application/json' } });
            this.providers = await res.json();
            this.regroup();
        },
        regroup() {
            this.grouped = {};
            for (const p of this.providers.sort((a, b) => a.priority - b.priority)) {
                (this.grouped[p.service_type] ??= []).push(p);
            }
        },
        async setStatus(p, status) {
            await fetch(`/api/admin/api-providers/${p.id}/status`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' },
                body: JSON.stringify({ status }),
            });
            p.status = status;
        },
        async move(p, direction) {
            const list = this.grouped[p.service_type];
            const idx = list.findIndex(x => x.id === p.id);
            const swapWith = list[idx + direction];
            if (!swapWith) return;

            const newPriorityForP = swapWith.priority;
            const newPriorityForOther = p.priority;

            await Promise.all([
                fetch(`/api/admin/api-providers/${p.id}/priority`, {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' },
                    body: JSON.stringify({ priority: newPriorityForP }),
                }),
                fetch(`/api/admin/api-providers/${swapWith.id}/priority`, {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' },
                    body: JSON.stringify({ priority: newPriorityForOther }),
                }),
            ]);
            p.priority = newPriorityForP;
            swapWith.priority = newPriorityForOther;
            this.regroup();
        },
    };
}
</script>
@endpush
@endsection