@extends('root')
@section('title', 'API Settings')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'API Settings',
        'links' => [
            ['url' => route('reseller.dashboard'), 'label' => 'Dashboard Reseller'],
        ],
        'current' => 'API Key & Server Key'
    ])

    <div class="row">
        <div class="col-md-6">
            <div class="card card-body">
                <h5 class="mb-3">Informasi Reseller</h5>
                <p><strong>Nama:</strong> {{ $reseller->name }}</p>
                <p><strong>Username:</strong> {{ $reseller->email }}</p>
            </div>

            <div class="card card-body mt-3">
                <h5 class="mb-3">API Credentials</h5>

                <div class="mb-3">
                    <label class="form-label">API Key</label>
                    <div class="input-group">
                        <input type="text" id="api_key" class="form-control" value="{{ $reseller->api_key ?? '-' }}" readonly>
                        <button type="button" class="btn btn-outline-secondary" id="btn-copy-api-key">Copy</button>
                        <button type="button" class="btn btn-outline-warning" id="btn-regenerate-api-key"
                                data-url="{{ route('reseller.settings.api-key.regenerate') }}">
                            Regenerate
                        </button>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Server Key</label>
                    <div class="input-group">
                        <input type="text" id="server_key" class="form-control" value="{{ $reseller->server_key ?? '-' }}" readonly>
                        <button type="button" class="btn btn-outline-secondary" id="btn-copy-server-key">Copy</button>
                        <button type="button" class="btn btn-outline-warning" id="btn-regenerate-server-key"
                                data-url="{{ route('reseller.settings.server-key.regenerate') }}">
                            Regenerate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card card-body">
                <h5 class="mb-3">Contoh Request API: Create Client</h5>
                <p class="text-muted mb-2">
                    Gunakan <code>API Key</code> dan <code>Server Key</code di header untuk autentikasi ketika membuat client baru melalui API.
                </p>

                <pre class="bg-dark text-white p-3 rounded" style="font-size: 12px; white-space: pre-wrap;">
POST /api/v1/clients
Headers:
  x-api-key: {{ $reseller->api_key ?? 'YOUR_API_KEY' }}
  x-server-key: {{ $reseller->server_key ?? 'YOUR_SERVER_KEY' }}
Body:
{
  "account": "3301",
  "email": "client@example.com",
  "password": "client123.",
  "package": "shared",
  "rate_limit_per_minute": 60
}
                </pre>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copyToClipboard(selector) {
    var el = document.querySelector(selector);
    if (!el) return;
    var value = el.value || el.textContent || '';
    if (!value || value === '-') {
        window.toastr && toastr.warning('Tidak ada key untuk disalin');
        return;
    }
    navigator.clipboard.writeText(value)
        .then(function () {
            window.toastr && toastr.success('Berhasil menyalin ke clipboard');
        })
        .catch(function () {
            window.toastr && toastr.error('Gagal menyalin ke clipboard');
        });
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn-copy-api-key').addEventListener('click', function () {
        copyToClipboard('#api_key');
    });
    document.getElementById('btn-copy-server-key').addEventListener('click', function () {
        copyToClipboard('#server_key');
    });

    document.getElementById('btn-regenerate-api-key').addEventListener('click', function () {
        var url = this.getAttribute('data-url');
        if (!confirm('Yakin ingin me-regenerate API Key? Semua integrasi lama harus diperbarui.')) return;

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(function (res) {
                if (res.meta && res.meta.status === 'success') {
                    document.getElementById('api_key').value = res.data.api_key || '';
                    window.toastr && toastr.success(res.meta.message || 'API Key berhasil diregenerate');
                } else {
                    window.toastr && toastr.error(res.meta && res.meta.message ? res.meta.message : 'Gagal regenerate API Key');
                }
            })
            .catch(function () {
                window.toastr && toastr.error('Terjadi kesalahan saat regenerate API Key');
            });
    });

    document.getElementById('btn-regenerate-server-key').addEventListener('click', function () {
        var url = this.getAttribute('data-url');
        if (!confirm('Yakin ingin me-regenerate Server Key? Semua integrasi lama harus diperbarui.')) return;

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(function (res) {
                if (res.meta && res.meta.status === 'success') {
                    document.getElementById('server_key').value = res.data.server_key || '';
                    window.toastr && toastr.success(res.meta.message || 'Server Key berhasil diregenerate');
                } else {
                    window.toastr && toastr.error(res.meta && res.meta.message ? res.meta.message : 'Gagal regenerate Server Key');
                }
            })
            .catch(function () {
                window.toastr && toastr.error('Terjadi kesalahan saat regenerate Server Key');
            });
    });
});
</script>
@endpush