@extends('layouts.app')

@section('content')
<!-- Main Content Container -->
<div class="max-w-6xl mx-auto px-6 lg:px-8 py-8 space-y-8">

    <!-- Empty State -->
    @if($tenants->isEmpty())
    <div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
        <div class="text-center max-w-md">
            <div class="w-20 h-20 bg-card border border-subtle rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
                <svg class="w-10 h-10 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                </svg>
            </div>
            <h2 class="text-2xl font-semibold text-main mb-3">No channels connected</h2>
            <p class="text-sm text-muted mb-8 leading-relaxed">Connect your YouTube channel to start managing your AI chatbot and engage with your live stream audience</p>
            <a href="{{ route('oauth.google.redirect') }}"
               class="inline-flex items-center px-6 py-3 bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:shadow-md transition-all">
                <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24">
                    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
                Sign in with Google
            </a>
        </div>
    </div>
    @endif

    <!-- Channels List -->
    @foreach($dashboardData as $data)
    @php
        $tenant = $data['tenant'];
        $stats = $data['stats'];
        $quota = $data['quota'];
        $roastingMode = $data['roasting_mode'];
    @endphp

    <!-- Channel Card -->
    <div class="bg-card border border-subtle rounded-2xl p-6 shadow-sm space-y-6">
        <!-- Channel Header -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-6 border-b border-subtle">
            <div>
                <div class="flex items-center space-x-3 mb-2">
                    <h2 class="text-2xl font-semibold text-main">{{ $tenant->channel_title }}</h2>
                    <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border {{ $tenant->status === 'running' ? 'bg-success/10 text-success border-success/20' : ($tenant->status === 'error' ? 'bg-danger/10 text-danger border-danger/20' : 'bg-surface text-muted border-subtle') }}">
                        <span class="w-1.5 h-1.5 rounded-full mr-2 {{ $tenant->status === 'running' ? 'bg-success animate-pulse' : ($tenant->status === 'error' ? 'bg-danger' : 'bg-muted') }}"></span>
                        {{ strtoupper($tenant->status) }}
                    </div>
                </div>
                <p class="text-sm text-muted">Channel ID: <span class="font-mono text-dimmed">{{ $tenant->channel_id }}</span></p>
            </div>
            <div class="flex items-center space-x-2">
                <a href="{{ route('oauth.google.redirect') }}"
                   class="inline-flex items-center px-4 py-2 bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:shadow-md transition-all">
                    <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    Add Google Account
                </a>
            </div>
        </div>

        <!-- Error/Info Message Display -->
        @if($tenant->last_error)
        @php
            $isWaitingForStream = str_contains($tenant->last_error, 'Waiting');
        @endphp

        @if($isWaitingForStream)
        <!-- Waiting for Stream Info (Blue/Info style) -->
        <div class="bg-accent-primary/10 border border-accent-primary/30 rounded-xl p-4">
            <div class="flex items-start space-x-3">
                <svg class="w-5 h-5 text-accent-primary flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div class="flex-1">
                    <p class="text-sm font-medium text-accent-primary mb-1">Bot Status</p>
                    <p class="text-sm text-accent-primary/90">{{ $tenant->last_error }}</p>
                    @if($tenant->last_error_at)
                    <p class="text-xs text-accent-primary/70 mt-1">{{ \Carbon\Carbon::parse($tenant->last_error_at)->diffForHumans() }}</p>
                    @endif
                    <p class="text-xs text-accent-primary/80 mt-2 flex items-center">
                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Bot will automatically connect when you start streaming
                    </p>
                </div>
            </div>
        </div>
        @else
        <!-- Actual Error (Red/Danger style) -->
        <div class="bg-danger/10 border border-danger/30 rounded-xl p-4">
            <div class="flex items-start justify-between gap-4">
                <div class="flex items-start space-x-3 flex-1">
                    <svg class="w-5 h-5 text-danger flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                    <div class="flex-1">
                        <p class="text-sm font-medium text-danger mb-1">Bot Error</p>
                        <p class="text-sm text-danger/80">{{ $tenant->last_error }}</p>
                        @if($tenant->last_error_at)
                        <p class="text-xs text-danger/60 mt-1">{{ \Carbon\Carbon::parse($tenant->last_error_at)->diffForHumans() }}</p>
                        @endif

                        @if(str_contains($tenant->last_error, 'OAuth') || str_contains($tenant->last_error, 'forbidden') || str_contains($tenant->last_error, 'scopes'))
                        <p class="text-xs text-danger/80 mt-2">
                            <strong>Fix:</strong> You need to reconnect your YouTube channel with proper permissions.
                        </p>
                        @endif
                    </div>
                </div>

                @if(str_contains($tenant->last_error, 'OAuth') || str_contains($tenant->last_error, 'forbidden') || str_contains($tenant->last_error, 'scopes'))
                <a href="{{ route('oauth.google.redirect') }}"
                   class="inline-flex items-center px-4 py-2 bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:shadow-md transition-all whitespace-nowrap">
                    <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    Reconnect with Google
                </a>
                @endif
            </div>
        </div>
        @endif
        @endif

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Messages 1min -->
            <div class="bg-surface/50 border border-subtle rounded-xl p-5 hover:border-accent-primary/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-dimmed uppercase tracking-wider">Messages / 1min</span>
                    <svg class="w-4 h-4 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                    </svg>
                </div>
                <div class="text-3xl font-bold text-main">{{ $stats['last_1min'] }}</div>
                <p class="text-xs text-muted mt-1">Last minute</p>
            </div>

            <!-- Messages 5min -->
            <div class="bg-surface/50 border border-subtle rounded-xl p-5 hover:border-accent-secondary/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-dimmed uppercase tracking-wider">Messages / 5min</span>
                    <svg class="w-4 h-4 text-accent-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                    </svg>
                </div>
                <div class="text-3xl font-bold text-main">{{ $stats['last_5min'] }}</div>
                <p class="text-xs text-muted mt-1">Last 5 minutes</p>
            </div>

            <!-- Unique Viewers -->
            <div class="bg-surface/50 border border-subtle rounded-xl p-5 hover:border-success/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-dimmed uppercase tracking-wider">Unique Viewers</span>
                    <svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </div>
                <div class="text-3xl font-bold text-main">{{ $stats['unique_viewers_1h'] }}</div>
                <p class="text-xs text-muted mt-1">Last hour</p>
            </div>

            <!-- Quota Usage -->
            <div class="bg-surface/50 border border-subtle rounded-xl p-5 hover:border-warning/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-dimmed uppercase tracking-wider">Quota Usage</span>
                    <svg class="w-4 h-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                </div>
                <div class="text-3xl font-bold text-main">{{ $quota['per_minute']['limit'] > 0 ? round(($quota['per_minute']['used'] / $quota['per_minute']['limit']) * 100) : 0 }}%</div>
                <p class="text-xs text-muted mt-1">Per minute</p>
            </div>
        </div>

        <!-- Stream Context (if available) -->
        @if($tenant->stream_type || $tenant->current_game)
        <div class="bg-accent-secondary/5 border border-accent-secondary/20 rounded-xl p-5">
            <div class="flex items-start space-x-3">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-accent-secondary/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-accent-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <div class="flex-1">
                    <div class="flex items-center space-x-2 mb-1">
                        <span class="text-sm font-medium text-main">Stream Type:</span>
                        @if($tenant->stream_type)
                        <span class="inline-flex items-center px-2 py-1 rounded-md bg-accent-secondary/10 text-accent-secondary text-xs font-medium border border-accent-secondary/20">
                            {{ ucfirst($tenant->stream_type) }}
                        </span>
                        @endif
                    </div>
                    @if($tenant->current_game)
                    <p class="text-sm text-secondary">
                        Currently playing <span class="text-accent-primary font-medium">{{ $tenant->current_game }}</span>
                    </p>
                    @endif
                </div>
            </div>
        </div>
        @endif

        <!-- Bot Controls -->
        <div class="grid sm:grid-cols-2 gap-4">
            <!-- Start/Stop Bot -->
            @if($tenant->status === 'running')
            <form method="POST" action="{{ route('tenant.stop', $tenant) }}" class="flex">
                @csrf
                <button type="submit"
                        class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-danger hover:bg-danger-hover text-white text-sm font-medium rounded-xl shadow-sm hover:shadow-md transition-all hover:scale-105">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10h6v4H9z" />
                    </svg>
                    Stop Bot
                </button>
            </form>
            @else
            <form method="POST" action="{{ route('tenant.start', $tenant) }}" class="flex">
                @csrf
                <button type="submit"
                        class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-success hover:bg-success-hover text-white text-sm font-medium rounded-xl shadow-sm hover:shadow-md transition-all hover:scale-105">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    Start Bot
                </button>
            </form>
            @endif

            <!-- Roasting Toggle -->
            <div class="flex items-center justify-between px-5 py-3 bg-surface border border-subtle rounded-xl hover:border-hover transition-colors" id="roasting-container-{{ $tenant->id }}">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center transition-all {{ $roastingMode ? 'bg-danger/10 text-danger border border-danger/20' : 'bg-surface text-muted border border-subtle' }}" id="roasting-icon-{{ $tenant->id }}">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-main">Roasting Mode</p>
                        <p class="text-xs text-muted">Dark level</p>
                    </div>
                </div>
                <button type="button"
                        onclick="toggleRoasting{{ $tenant->id }}()"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {{ $roastingMode ? 'bg-danger' : 'bg-surface border border-subtle' }}"
                        id="roasting-btn-{{ $tenant->id }}">
                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm {{ $roastingMode ? 'translate-x-6' : 'translate-x-1' }}"
                          id="roasting-switch-{{ $tenant->id }}"></span>
                </button>
            </div>

            <script>
                let roastingMode{{ $tenant->id }} = {{ $roastingMode ? 'true' : 'false' }};

                function toggleRoasting{{ $tenant->id }}() {
                    const url = '/tenants/{{ $tenant->id }}/settings/toggle/roasting_mode';

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        roastingMode{{ $tenant->id }} = !roastingMode{{ $tenant->id }};

                        const btn = document.getElementById('roasting-btn-{{ $tenant->id }}');
                        const switchEl = document.getElementById('roasting-switch-{{ $tenant->id }}');
                        const icon = document.getElementById('roasting-icon-{{ $tenant->id }}');

                        if (roastingMode{{ $tenant->id }}) {
                            btn.classList.remove('bg-surface', 'border', 'border-subtle');
                            btn.classList.add('bg-danger');
                            switchEl.classList.remove('translate-x-1');
                            switchEl.classList.add('translate-x-6');
                            icon.classList.remove('bg-surface', 'text-muted', 'border-subtle');
                            icon.classList.add('bg-danger/10', 'text-danger', 'border-danger/20');
                        } else {
                            btn.classList.add('bg-surface', 'border', 'border-subtle');
                            btn.classList.remove('bg-danger');
                            switchEl.classList.add('translate-x-1');
                            switchEl.classList.remove('translate-x-6');
                            icon.classList.add('bg-surface', 'text-muted', 'border-subtle');
                            icon.classList.remove('bg-danger/10', 'text-danger', 'border-danger/20');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Failed to toggle roasting mode');
                    });
                }
            </script>
        </div>

        <!-- Feature Buttons -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
            <!-- Commands -->
            <a href="{{ route('tenant.commands.index', $tenant) }}"
               class="flex flex-col items-center justify-center px-4 py-4 bg-surface hover:bg-surface-hover border border-subtle hover:border-hover text-center rounded-xl transition-all hover:scale-105">
                <svg class="w-6 h-6 text-accent-primary mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span class="text-sm font-medium text-secondary">Commands</span>
            </a>

            <!-- Timers -->
            <a href="{{ route('tenant.timers.index', $tenant) }}"
               class="flex flex-col items-center justify-center px-4 py-4 bg-surface hover:bg-surface-hover border border-subtle hover:border-hover text-center rounded-xl transition-all hover:scale-105">
                <svg class="w-6 h-6 text-accent-secondary mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-sm font-medium text-secondary">Timers</span>
            </a>

            <!-- Stream Info -->
            <button type="button"
                    x-data
                    @click="$dispatch('open-modal', 'stream-info-{{ $tenant->id }}')"
                    class="flex flex-col items-center justify-center px-4 py-4 bg-surface hover:bg-surface-hover border border-subtle hover:border-hover text-center rounded-xl transition-all hover:scale-105">
                <svg class="w-6 h-6 text-success mb-2" 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>
                <span class="text-sm font-medium text-secondary">Stream Info</span>
            </button>

            <!-- Remove -->
            <form method="POST" action="{{ route('tenant.destroy', $tenant) }}" onsubmit="return confirm('Are you sure you want to remove this channel?')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="w-full flex flex-col items-center justify-center px-4 py-4 bg-surface hover:bg-danger/10 border border-subtle hover:border-danger/30 text-center rounded-xl transition-all hover:scale-105">
                    <svg class="w-6 h-6 text-danger mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    <span class="text-sm font-medium text-danger">Remove</span>
                </button>
            </form>
        </div>
    </div>

    <!-- Stream Info Modal -->
    <div x-data="{ open: false }"
         @open-modal.window="open = ($event.detail === 'stream-info-{{ $tenant->id }}')"
         @close-modal.window="open = false"
         @keydown.escape.window="open = false"
         x-show="open"
         x-transition
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" @click="open = false"></div>
            <div class="relative bg-card border border-subtle rounded-2xl shadow-2xl max-w-2xl w-full p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-semibold text-main">Stream & Personal Info</h3>
                    <button @click="open = false" class="p-2 text-muted hover:text-main rounded-lg hover:bg-surface-hover transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <form method="POST" action="{{ route('tenant.stream-info.update', $tenant) }}" class="space-y-6">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Stream Type</label>
                        <select name="stream_type" class="w-full px-4 py-2 bg-surface border border-subtle rounded-lg text-main focus:outline-none focus:ring-2 focus:ring-accent-primary/50 focus:border-accent-primary">
                            <option value="">Select stream type</option>
                            <option value="gaming" {{ $tenant->stream_type === 'gaming' ? 'selected' : '' }}>🎮 Gaming</option>
                            <option value="tech" {{ $tenant->stream_type === 'tech' ? 'selected' : '' }}>💻 Tech/Coding</option>
                            <option value="music" {{ $tenant->stream_type === 'music' ? 'selected' : '' }}>🎵 Music</option>
                            <option value="cooking" {{ $tenant->stream_type === 'cooking' ? 'selected' : '' }}>🍳 Cooking</option>
                            <option value="fitness" {{ $tenant->stream_type === 'fitness' ? 'selected' : '' }}>💪 Fitness</option>
                            <option value="vlog" {{ $tenant->stream_type === 'vlog' ? 'selected' : '' }}>📹 Vlog</option>
                            <option value="education" {{ $tenant->stream_type === 'education' ? 'selected' : '' }}>📚 Education</option>
                            <option value="other" {{ $tenant->stream_type === 'other' ? 'selected' : '' }}>📺 Other</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Current Game (Optional)</label>
                        <input type="text" name="current_game" value="{{ $tenant->current_game }}"
                               placeholder="e.g., GTA V, Valorant, Minecraft"
                               class="w-full px-4 py-2 bg-surface border border-subtle rounded-lg text-main placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent-primary/50 focus:border-accent-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Personal Info (Any Language)</label>
                        <textarea name="personal_info" rows="6"
                                  placeholder="Tell viewers about yourself in any language (Urdu, English, etc.)"
                                  class="w-full px-4 py-2 bg-surface border border-subtle rounded-lg text-main placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent-primary/50 focus:border-accent-primary resize-none">{{ $tenant->personal_info }}</textarea>
                        <p class="text-xs text-muted mt-2">Bot will use this to answer questions like "What's your name?", "Where are you from?", etc.</p>
                    </div>

                    <div class="flex items-center justify-end space-x-3 pt-4 border-t border-subtle">
                        <button type="button" @click="open = false"
                                class="px-4 py-2 bg-surface hover:bg-surface-hover text-secondary hover:text-main border border-subtle hover:border-hover rounded-lg text-sm font-medium transition-colors">
                            Cancel
                        </button>
                        <button type="submit"
                                class="px-6 py-2 bg-accent-primary hover:bg-accent-primary-hover text-white text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-all">
                            Save Info
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endforeach

</div>
@endsection