@php
    $tenant = auth()->user()->tenants()->first();
@endphp

@if($tenant)
<div class="space-y-6">
    <!-- Header -->
    <div>
        <h3 class="text-lg font-semibold text-db-text-primary mb-1 flex items-center gap-2">
            <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
            </svg>
            Commands & Games Control
        </h3>
        <p class="text-sm text-db-text-muted">Enable or disable commands for your channel</p>
    </div>

    <!-- XP Gambling Games -->
    <div>
        <h4 class="text-xs font-semibold text-db-text-dim uppercase tracking-wider mb-3 flex items-center gap-2">
            <span class="w-1.5 h-1.5 rounded-full bg-yellow-500"></span>
            XP Gambling Games
        </h4>
        <div class="space-y-2">
            <!-- Gamble -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🎲</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!gamble</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount]</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">45% win, random 1x-3x multiplier</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_gamble', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_gamble ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_gamble ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_gamble ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>

            <!-- Coinflip -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🪙</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!coinflip</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount]</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">50/50 heads or tails</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_coinflip', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_coinflip ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_coinflip ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_coinflip ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>

            <!-- Slots -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🎰</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!slots</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount]</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">Slot machine, match symbols to win</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_slots', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_slots ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_slots ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_slots ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>

            <!-- Roulette -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🔴</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!roulette</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amt] [color]</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">Red/Black 2x, Green 10x</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_roulette', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_roulette ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_roulette ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_roulette ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Multiplayer Games -->
    <div>
        <h4 class="text-xs font-semibold text-db-text-dim uppercase tracking-wider mb-3 flex items-center gap-2">
            <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span>
            Multiplayer Games
        </h4>
        <div class="space-y-2">
            <!-- Duel -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">⚔️</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!duel</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">Challenge user, winner +50 XP</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_duel', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_duel ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_duel ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_duel ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>

            <!-- Jackpot -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">💰</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!jackpot</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount]</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">Pool game, random winner after 60s</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_jackpot', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_jackpot ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_jackpot ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_jackpot ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>

            <!-- Rob -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🔫</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!rob</span>
                            <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user</code>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">30% success, steal XP or pay fine</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_rob', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_rob ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_rob ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_rob ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Free Games -->
    <div>
        <h4 class="text-xs font-semibold text-db-text-dim uppercase tracking-wider mb-3 flex items-center gap-2">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Free Games
        </h4>
        <div class="space-y-2">
            <!-- Fish -->
            <div class="flex items-center justify-between p-3 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <span class="text-xl">🎣</span>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-db-text-primary">!fish</span>
                            <span class="text-xs text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded">FREE</span>
                        </div>
                        <p class="text-xs text-db-text-muted truncate">500-15000 XP catches, 2min cooldown</p>
                    </div>
                </div>
                <button type="button" onclick="toggleGameFeature({{ $tenant->id }}, 'game_fish', this)"
                        class="toggle-switch relative inline-flex h-5 w-9 items-center rounded-full flex-shrink-0 ml-3"
                        aria-checked="{{ $tenant->game_fish ? 'true' : 'false' }}"
                        style="background-color: {{ $tenant->game_fish ? '#10b981' : '#3f3f46' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_fish ? 'translate-x-4' : 'translate-x-1' }}"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Info -->
    <div class="pt-2 border-t border-db-border">
        <p class="text-xs text-db-text-dim">Disabled commands will show "disabled" message when used.</p>
    </div>
</div>

<script>
function toggleGameFeature(tenantId, feature, button) {
    const currentState = button.getAttribute('aria-checked') === 'true';
    const newState = !currentState;
    const span = button.querySelector('span');

    // Optimistic update
    button.setAttribute('aria-checked', newState);
    button.style.backgroundColor = newState ? '#10b981' : '#3f3f46';
    span.classList.toggle('translate-x-4', newState);
    span.classList.toggle('translate-x-1', !newState);

    fetch(`/dashboard/tenant/${tenantId}/toggle-feature`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ feature: feature, enabled: newState })
    })
    .then(r => r.json())
    .then(d => {
        if (!d.success) {
            button.setAttribute('aria-checked', currentState);
            button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
            span.classList.toggle('translate-x-4', currentState);
            span.classList.toggle('translate-x-1', !currentState);
        }
    })
    .catch(() => {
        button.setAttribute('aria-checked', currentState);
        button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
        span.classList.toggle('translate-x-4', currentState);
        span.classList.toggle('translate-x-1', !currentState);
    });
}
</script>
@else
<div class="text-center py-8">
    <p class="text-db-text-muted">Connect your YouTube channel first to manage game settings.</p>
</div>
@endif