@php
    $globalApi = \App\Models\WabaPlatformSetting::rateLimit('global_api_per_minute', 60);
    $globalMessage = \App\Models\WabaPlatformSetting::rateLimit('global_message_per_minute', 30);
    $burstEnabled = \App\Models\WabaPlatformSetting::rateLimit('burst_protection_enabled', true);
@endphp

<!-- Header Card -->
<div class="card shadow-sm border-0 mb-4" style="background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);">
    <div class="card-body text-white py-4">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="bg-white bg-opacity-25 rounded-circle p-3">
                    <i class="ti ti-clock-bolt fs-1"></i>
                </div>
            </div>
            <div class="col">
                <h4 class="mb-1">Batas Request API</h4>
                <p class="mb-0 opacity-75">Konfigurasi rate limiting per tipe paket</p>
            </div>
            <div class="col-auto">
                @if($burstEnabled)
                    <span class="badge bg-success fs-6 px-3 py-2">
                        <i class="ti ti-shield-check me-1"></i> Burst Protection ON
                    </span>
                @else
                    <span class="badge bg-warning text-dark fs-6 px-3 py-2">
                        <i class="ti ti-shield-off me-1"></i> Burst Protection OFF
                    </span>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Global Settings Card -->
<div class="card shadow-sm mb-4 border-dark">
    <div class="card-header bg-dark text-white">
        <h6 class="mb-0"><i class="ti ti-world me-2"></i>Pengaturan Global</h6>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-4">
            <i class="ti ti-info-circle me-1"></i>
            Pengaturan default yang berlaku untuk semua client jika tidak ada setting khusus per paket.
        </p>
        <div class="row">
            @foreach($settings[$groupKey] ?? [] as $setting)
                @if($setting['key'] === 'global_api_per_minute')
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-api text-primary me-1"></i> API Request / Menit
                        </label>
                        <div class="input-group">
                            <input type="number" 
                                   class="form-control form-control-lg" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   min="1">
                            <span class="input-group-text">req/min</span>
                        </div>
                        <small class="text-muted">Maksimal request API per menit</small>
                    </div>
                @endif
                @if($setting['key'] === 'global_message_per_minute')
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-message text-success me-1"></i> Pesan / Menit
                        </label>
                        <div class="input-group">
                            <input type="number" 
                                   class="form-control form-control-lg" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   min="1">
                            <span class="input-group-text">msg/min</span>
                        </div>
                        <small class="text-muted">Maksimal pengiriman pesan per menit</small>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

<!-- Package-specific Rate Limits -->
<div class="row">
    <!-- Shared Package -->
    <div class="col-md-4">
        <div class="card shadow-sm mb-4 border-secondary">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0">
                    <i class="ti ti-users me-2"></i>Paket Shared
                </h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Menggunakan nomor WABA bersama
                </p>
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'shared_api_per_minute')
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-api me-1"></i> API / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">req</span>
                            </div>
                        </div>
                    @endif
                    @if($setting['key'] === 'shared_message_per_minute')
                        <div class="mb-0">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-message me-1"></i> Pesan / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">msg</span>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- Dedicated Package -->
    <div class="col-md-4">
        <div class="card shadow-sm mb-4 border-primary">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="ti ti-user-star me-2"></i>Paket Dedicated
                </h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Nomor WABA khusus, dikelola platform
                </p>
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'dedicated_api_per_minute')
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-api me-1"></i> API / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">req</span>
                            </div>
                        </div>
                    @endif
                    @if($setting['key'] === 'dedicated_message_per_minute')
                        <div class="mb-0">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-message me-1"></i> Pesan / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">msg</span>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- Self Service Package -->
    <div class="col-md-4">
        <div class="card shadow-sm mb-4 border-success">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="ti ti-rocket me-2"></i>Paket Self Service
                </h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Client kelola sendiri via OAuth
                </p>
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'self_service_api_per_minute')
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-api me-1"></i> API / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">req</span>
                            </div>
                        </div>
                    @endif
                    @if($setting['key'] === 'self_service_message_per_minute')
                        <div class="mb-0">
                            <label class="form-label small fw-semibold">
                                <i class="ti ti-message me-1"></i> Pesan / Menit
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1">
                                <span class="input-group-text">msg</span>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Burst Protection -->
<div class="card shadow-sm mb-4 border-warning">
    <div class="card-header bg-warning bg-opacity-75">
        <h6 class="mb-0"><i class="ti ti-shield-bolt me-2"></i>Proteksi Burst Request</h6>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-4">
            <i class="ti ti-info-circle me-1"></i>
            Mencegah client mengirim request secara massal dalam waktu singkat (flood protection).
        </p>
        <div class="row align-items-end">
            @foreach($settings[$groupKey] ?? [] as $setting)
                @if($setting['key'] === 'burst_protection_enabled')
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-shield me-1"></i> Status Proteksi
                        </label>
                        <div class="form-check form-switch">
                            <input type="hidden" name="settings[{{ $groupKey }}][{{ $setting['key'] }}]" value="0">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="1"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   style="width: 3rem; height: 1.5rem;"
                                   {{ $setting['value'] ? 'checked' : '' }}>
                            <label class="form-check-label ms-2 fw-semibold" for="{{ $groupKey }}_{{ $setting['key'] }}">
                                {{ $setting['value'] ? 'Aktif' : 'Nonaktif' }}
                            </label>
                        </div>
                    </div>
                @endif
                @if($setting['key'] === 'max_burst_requests')
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-stack me-1"></i> Maks. Burst Request
                        </label>
                        <div class="input-group">
                            <input type="number" 
                                   class="form-control" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   min="1">
                            <span class="input-group-text">request</span>
                        </div>
                        <small class="text-muted">Maksimal request dalam burst window</small>
                    </div>
                @endif
                @if($setting['key'] === 'burst_window_seconds')
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-clock me-1"></i> Burst Window
                        </label>
                        <div class="input-group">
                            <input type="number" 
                                   class="form-control" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   min="1">
                            <span class="input-group-text">detik</span>
                        </div>
                        <small class="text-muted">Window waktu untuk deteksi burst</small>
                    </div>
                @endif
            @endforeach
        </div>

        <div class="alert alert-light border mb-0 mt-3">
            <h6 class="alert-heading small"><i class="ti ti-bulb me-1"></i>Cara Kerja:</h6>
            <p class="small mb-0">
                Jika diaktifkan dengan setting di atas, client yang mengirim lebih dari 
                <strong>{{ \App\Models\WabaPlatformSetting::rateLimit('max_burst_requests', 10) }} request</strong> 
                dalam <strong>{{ \App\Models\WabaPlatformSetting::rateLimit('burst_window_seconds', 5) }} detik</strong> 
                akan di-throttle sementara.
            </p>
        </div>
    </div>
</div>

<!-- Comparison Table -->
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h6 class="mb-0"><i class="ti ti-table me-2"></i>Perbandingan Rate Limit per Paket</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Paket</th>
                        <th class="text-center">API / Menit</th>
                        <th class="text-center">Pesan / Menit</th>
                        <th class="text-center">Tier</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="badge bg-secondary me-2">Shared</span> Paket Shared</td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('shared_api_per_minute', 30) }}</strong></td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('shared_message_per_minute', 20) }}</strong></td>
                        <td class="text-center"><span class="badge bg-secondary">Basic</span></td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary me-2">Dedicated</span> Paket Dedicated</td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('dedicated_api_per_minute', 100) }}</strong></td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('dedicated_message_per_minute', 50) }}</strong></td>
                        <td class="text-center"><span class="badge bg-primary">Standard</span></td>
                    </tr>
                    <tr class="table-success">
                        <td><span class="badge bg-success me-2">Self Service</span> Paket Self Service</td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('self_service_api_per_minute', 200) }}</strong></td>
                        <td class="text-center"><strong>{{ \App\Models\WabaPlatformSetting::rateLimit('self_service_message_per_minute', 100) }}</strong></td>
                        <td class="text-center"><span class="badge bg-success">Premium</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>