@extends('layouts.app-sidebar')

@section('content')
<div class="min-h-screen db-bg-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-10">

        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold db-text-primary">Quota Management</h1>
                    <p class="text-sm db-text-muted mt-1">Manage message rate limits for each tenant</p>
                </div>
            </div>

        </div>

        @if(session('success'))
        <div class="mb-6 bg-green-500/10 border border-green-500/20 text-green-400 px-6 py-4 rounded-xl">
            {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="mb-6 bg-red-500/10 border border-red-500/20 text-red-400 px-6 py-4 rounded-xl">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <!-- Quotas Table -->
        <div class="db-card db-border rounded-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-[#2a2a2a]">
                <h3 class="text-xl font-bold db-text-primary">Tenant Message Quotas</h3>
                <p class="text-sm db-text-muted mt-1">Default: 200/min, 2000/hour</p>
            </div>

            <!-- Mobile Card View -->
            <div class="md:hidden p-4 space-y-3">
                @forelse($tenants as $tenant)
                <div class="bg-[#1a1a1a] rounded-xl p-4" x-data="{ editing: false }">
                    <div class="flex items-start justify-between gap-3 mb-3">
                        <div class="flex items-center gap-3 min-w-0">
                            @if($tenant->channel_avatar_url)
                            <img src="{{ $tenant->channel_avatar_url }}" class="w-10 h-10 rounded-full flex-shrink-0" alt="Avatar">
                            @endif
                            <div class="min-w-0">
                                <p class="text-sm font-medium db-text-primary truncate">{{ $tenant->channel_title }}</p>
                                <p class="text-xs db-text-muted truncate">{{ $tenant->user->name }}</p>
                            </div>
                        </div>
                        @if($tenant->status === 'running' && $tenant->live_chat_id)
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-500/15 text-green-400 flex-shrink-0">Live</span>
                        @elseif($tenant->status === 'running')
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-500/15 text-blue-400 flex-shrink-0">Waiting</span>
                        @elseif($tenant->status === 'error')
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-red-500/15 text-red-400 flex-shrink-0">Error</span>
                        @else
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-500/15 text-gray-400 flex-shrink-0">Stopped</span>
                        @endif
                    </div>

                    <!-- Display Mode -->
                    <div x-show="!editing" class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-4">
                            <div class="text-center">
                                <span class="text-lg font-bold text-purple-400">{{ $tenant->quotas['per_minute'] ?? 200 }}</span>
                                <span class="text-xs db-text-muted block">/min</span>
                            </div>
                            <div class="text-center">
                                <span class="text-lg font-bold text-purple-400">{{ $tenant->quotas['per_hour'] ?? 2000 }}</span>
                                <span class="text-xs db-text-muted block">/hour</span>
                            </div>
                        </div>
                        <button type="button" @click="editing = true"
                            class="inline-flex items-center px-3 py-1.5 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 text-xs font-medium rounded-lg transition-colors border border-purple-500/30">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                            Edit
                        </button>
                    </div>

                    <!-- Edit Mode -->
                    <form x-show="editing" style="display: none;" action="{{ route('admin.tenants.quota', $tenant) }}" method="POST" class="space-y-3">
                        @csrf
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="text-xs db-text-muted block mb-1">Per Minute</label>
                                <input type="number" name="per_minute" value="{{ $tenant->quotas['per_minute'] ?? 200 }}" min="1" max="1000" required
                                    class="w-full px-3 py-2 bg-[#0a0a0a] border border-[#3a3a3a] rounded-lg db-text-primary text-sm">
                            </div>
                            <div>
                                <label class="text-xs db-text-muted block mb-1">Per Hour</label>
                                <input type="number" name="per_hour" value="{{ $tenant->quotas['per_hour'] ?? 2000 }}" min="1" max="10000" required
                                    class="w-full px-3 py-2 bg-[#0a0a0a] border border-[#3a3a3a] rounded-lg db-text-primary text-sm">
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <button type="submit" class="flex-1 px-3 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 text-xs font-medium rounded-lg border border-green-500/30">
                                Save
                            </button>
                            <button type="button" @click="editing = false" class="flex-1 px-3 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-gray-400 text-xs font-medium rounded-lg border border-gray-500/30">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
                @empty
                <div class="px-6 py-12 text-center db-text-muted">No tenants found</div>
                @endforelse
            </div>

            <!-- Desktop Table View -->
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full divide-y divide-[#2a2a2a]">
                    <thead class="bg-[#1a1a1a]">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Channel</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">User</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Status</th>
                            <th class="px-6 py-4 text-center text-xs font-semibold db-text-muted uppercase">Per Minute</th>
                            <th class="px-6 py-4 text-center text-xs font-semibold db-text-muted uppercase">Per Hour</th>
                            <th class="px-6 py-4 text-right text-xs font-semibold db-text-muted uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#2a2a2a]">
                        @forelse($tenants as $tenant)
                        <tr class="hover:bg-[#1e1e1e] transition-colors" x-data="{ editing: false }">
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    @if($tenant->channel_avatar_url)
                                    <img src="{{ $tenant->channel_avatar_url }}" class="w-10 h-10 rounded-full mr-3" alt="Avatar">
                                    @endif
                                    <div>
                                        <p class="text-sm font-medium db-text-primary">{{ $tenant->channel_title }}</p>
                                        <p class="text-xs db-text-muted">{{ Str::limit($tenant->channel_id, 20) }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-sm db-text-secondary">{{ $tenant->user->name }}</p>
                                <p class="text-xs db-text-muted">{{ $tenant->user->email }}</p>
                            </td>
                            <td class="px-6 py-4">
                                @if($tenant->status === 'running' && $tenant->live_chat_id)
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-500/15 text-green-400 border border-green-500/25">
                                    Live
                                </span>
                                @elseif($tenant->status === 'running')
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-500/15 text-blue-400 border border-blue-500/25">
                                    Waiting
                                </span>
                                @elseif($tenant->status === 'error')
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-500/15 text-red-400 border border-red-500/25">
                                    Error
                                </span>
                                @else
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-500/15 text-gray-400 border border-gray-500/25">
                                    Stopped
                                </span>
                                @endif
                            </td>

                            <!-- Display Mode -->
                            <td class="px-6 py-4 text-center" x-show="!editing">
                                <span class="text-lg font-bold text-purple-400">
                                    {{ $tenant->quotas['per_minute'] ?? 200 }}
                                </span>
                                <span class="text-xs db-text-muted block">messages/min</span>
                            </td>
                            <td class="px-6 py-4 text-center" x-show="!editing">
                                <span class="text-lg font-bold text-purple-400">
                                    {{ $tenant->quotas['per_hour'] ?? 2000 }}
                                </span>
                                <span class="text-xs db-text-muted block">messages/hour</span>
                            </td>

                            <!-- Edit Mode -->
                            <td class="px-6 py-4 text-center" x-show="editing" style="display: none;">
                                <form action="{{ route('admin.tenants.quota', $tenant) }}" method="POST" class="inline-flex items-center gap-2">
                                    @csrf
                                    <input type="number" name="per_minute"
                                        value="{{ $tenant->quotas['per_minute'] ?? 200 }}"
                                        min="1" max="1000" required
                                        class="w-20 px-2 py-1 bg-[#1a1a1a] border border-[#3a3a3a] rounded db-text-primary text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                            </td>
                            <td class="px-6 py-4 text-center" x-show="editing" style="display: none;">
                                    <input type="number" name="per_hour"
                                        value="{{ $tenant->quotas['per_hour'] ?? 2000 }}"
                                        min="1" max="10000" required
                                        class="w-20 px-2 py-1 bg-[#1a1a1a] border border-[#3a3a3a] rounded db-text-primary text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                            </td>

                            <td class="px-6 py-4 text-right">
                                <!-- Edit Button -->
                                <button type="button" @click="editing = true" x-show="!editing"
                                    class="inline-flex items-center px-3 py-1.5 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 text-xs font-medium rounded-lg transition-colors border border-purple-500/30">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>

                                <!-- Save/Cancel Buttons -->
                                <div x-show="editing" style="display: none;" class="inline-flex gap-2">
                                    <button type="submit"
                                        class="inline-flex items-center px-3 py-1.5 bg-green-500/20 hover:bg-green-500/30 text-green-400 text-xs font-medium rounded-lg transition-colors border border-green-500/30">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                        Save
                                    </button>
                                    <button type="button" @click="editing = false"
                                        class="inline-flex items-center px-3 py-1.5 bg-gray-500/20 hover:bg-gray-500/30 text-gray-400 text-xs font-medium rounded-lg transition-colors border border-gray-500/30">
                                        Cancel
                                    </button>
                                </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center db-text-muted">
                                No tenants found
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="mt-6 bg-blue-500/10 border border-blue-500/20 rounded-xl p-6">
            <div class="flex items-start">
                <svg class="w-6 h-6 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <h4 class="db-text-primary font-semibold mb-2">About Quotas</h4>
                    <ul class="text-sm db-text-secondary space-y-1">
                        <li><strong>Per Minute:</strong> Maximum messages the bot can send per minute (1-1000)</li>
                        <li><strong>Per Hour:</strong> Maximum messages the bot can send per hour (1-10000)</li>
                        <li><strong>Default Values:</strong> 200 messages/minute, 2000 messages/hour</li>
                        <li><strong>Rate Limiting:</strong> Prevents YouTube API quota exhaustion and spam</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection