<x-app-layout>
    <x-module-hero
        title="Test Google Meet Connection"
        description="Verify your Google Meet API integration by creating test meetings"
        icon="fa-plug">
        <x-slot name="backButton">
            <a href="{{ route('config.google-meet.index') }}"
               class="inline-flex items-center gap-1 text-white/80 hover:text-white text-sm transition-colors">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </x-slot>
        <x-slot name="tabs">
            <a href="{{ route('config.google-meet.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ $config ? route('config.google-meet.edit') : route('config.google-meet.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.create') || request()->routeIs('config.google-meet.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-cog"></i> Configuration
            </a>
            <a href="{{ route('config.google-meet.test') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.test') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plug"></i> Test Connection
            </a>
            <a href="{{ route('config.google-meet.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> Activity Logs
            </a>
            <a href="{{ route('config.google-meet.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        {{-- Flash Messages --}}
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
            </div>
        @endif

        {{-- Meeting Result --}}
        @if(session('meeting_result'))
            @php $result = session('meeting_result'); @endphp
            <div class="mb-6 bg-green-50 border border-green-200 rounded-lg p-5">
                <div class="flex items-center mb-4">
                    <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                    <h3 class="text-base font-semibold text-green-800">Test Meeting Created Successfully!</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="p-3 bg-white rounded-lg border border-green-200">
                        <p class="text-xs text-gray-500 mb-1">Meeting Link</p>
                        <a href="{{ $result['meeting_link'] }}" target="_blank"
                           class="text-blue-600 hover:underline text-sm font-mono break-all">
                            {{ $result['meeting_link'] }}
                        </a>
                    </div>
                    <div class="p-3 bg-white rounded-lg border border-green-200">
                        <p class="text-xs text-gray-500 mb-1">Meeting ID</p>
                        <code class="text-sm">{{ $result['meeting_id'] ?? 'N/A' }}</code>
                    </div>
                    <div class="p-3 bg-white rounded-lg border border-green-200">
                        <p class="text-xs text-gray-500 mb-1">Calendar Event ID</p>
                        <code class="text-xs">{{ $result['calendar_event_id'] ?? 'N/A' }}</code>
                    </div>
                </div>
                <div class="mt-4 flex gap-2">
                    <a href="{{ $result['meeting_link'] }}" target="_blank"
                       class="inline-flex items-center gap-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                        <i class="fas fa-external-link-alt"></i> Open Meeting
                    </a>
                    <button onclick="navigator.clipboard.writeText('{{ $result['meeting_link'] }}').then(() => alert('Copied!'))"
                            class="inline-flex items-center gap-1 px-4 py-2 border border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition text-sm">
                        <i class="fas fa-copy"></i> Copy Link
                    </button>
                </div>
            </div>
        @endif

        @if(!$status['configured'])
            {{-- Not Configured --}}
            <div class="bg-white rounded-lg shadow-sm border border-yellow-300 p-6">
                <div class="flex items-center gap-4">
                    <i class="fas fa-exclamation-triangle text-yellow-500 text-3xl"></i>
                    <div>
                        <h3 class="text-base font-semibold text-gray-800">Configuration Required</h3>
                        <p class="text-sm text-gray-600 mt-1">
                            Please configure your Google OAuth2 credentials before testing the connection.
                        </p>
                        <a href="{{ route('config.google-meet.create') }}"
                           class="inline-flex items-center gap-1 mt-3 px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm">
                            <i class="fas fa-cog"></i> Configure Now
                        </a>
                    </div>
                </div>
            </div>
        @elseif(!$status['authenticated'])
            {{-- Not Authenticated --}}
            <div class="bg-white rounded-lg shadow-sm border border-red-300 p-6">
                <div class="flex items-center gap-4">
                    <i class="fas fa-times-circle text-red-500 text-3xl"></i>
                    <div>
                        <h3 class="text-base font-semibold text-gray-800">Authentication Required</h3>
                        <p class="text-sm text-gray-600 mt-1">
                            Your configuration exists but you need to authenticate with Google to use the API.
                        </p>
                        <a href="{{ route('config.google-meet.authenticate') }}"
                           class="inline-flex items-center gap-1 mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
                            <i class="fab fa-google"></i> Authenticate with Google
                        </a>
                    </div>
                </div>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {{-- Test Forms --}}
                <div class="lg:col-span-2 space-y-6">
                    {{-- Quick Connection Test --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="p-4 border-b border-gray-200">
                            <h2 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-bolt text-blue-500"></i> Quick Connection Test
                            </h2>
                        </div>
                        <div class="p-5">
                            <p class="text-sm text-gray-600 mb-4">
                                Click the button below to verify your Google Calendar API connection without creating a meeting.
                            </p>
                            <form method="POST" action="{{ route('config.google-meet.test') }}">
                                @csrf
                                <button type="submit"
                                        class="inline-flex items-center gap-1 px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm font-medium">
                                    <i class="fas fa-bolt"></i> Test API Connection
                                </button>
                            </form>
                        </div>
                    </div>

                    {{-- Test Meeting Creation --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="p-4 border-b border-gray-200">
                            <h2 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-video text-green-500"></i> Create Test Meeting
                            </h2>
                        </div>
                        <form method="POST" action="{{ route('config.google-meet.test-meeting') }}" class="p-5">
                            @csrf

                            <div class="grid grid-cols-1 gap-5">
                                {{-- Meeting Summary --}}
                                <div>
                                    <label for="summary" class="block text-sm font-medium text-gray-700 mb-1">
                                        Meeting Summary <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           id="summary"
                                           name="summary"
                                           value="{{ old('summary', 'Test Meeting - ' . now()->format('Y-m-d H:i')) }}"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                           required>
                                    @error('summary')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                {{-- Date and Time --}}
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label for="start_time" class="block text-sm font-medium text-gray-700 mb-1">
                                            Start Time <span class="text-red-500">*</span>
                                        </label>
                                        <input type="datetime-local"
                                               id="start_time"
                                               name="start_time"
                                               value="{{ old('start_time', now()->addHour()->format('Y-m-d\TH:i')) }}"
                                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                               required>
                                        @error('start_time')
                                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="end_time" class="block text-sm font-medium text-gray-700 mb-1">
                                            End Time <span class="text-red-500">*</span>
                                        </label>
                                        <input type="datetime-local"
                                               id="end_time"
                                               name="end_time"
                                               value="{{ old('end_time', now()->addHours(2)->format('Y-m-d\TH:i')) }}"
                                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                               required>
                                        @error('end_time')
                                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Attendees --}}
                                <div>
                                    <label for="attendees" class="block text-sm font-medium text-gray-700 mb-1">
                                        Attendees <span class="text-gray-400 font-normal">(optional)</span>
                                    </label>
                                    <input type="text"
                                           id="attendees"
                                           name="attendees"
                                           value="{{ old('attendees') }}"
                                           placeholder="email1@example.com, email2@example.com"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                                    <p class="mt-1 text-xs text-gray-500">Comma-separated email addresses</p>
                                </div>

                                {{-- Info --}}
                                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                    <div class="flex items-start gap-3">
                                        <i class="fas fa-info-circle text-blue-600 mt-0.5"></i>
                                        <div class="text-sm text-blue-700">
                                            <p class="font-medium">About Test Meetings</p>
                                            <ul class="list-disc list-inside mt-1 space-y-0.5 text-xs">
                                                <li>Test meetings are real Google Meet sessions</li>
                                                <li>You can delete them from your Google Calendar</li>
                                                <li>Attendees will receive email invitations if specified</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                {{-- Submit --}}
                                <div class="flex justify-end gap-2 pt-2 border-t border-gray-200">
                                    <a href="{{ route('config.google-meet.index') }}"
                                       class="inline-flex items-center gap-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition text-sm">
                                        Cancel
                                    </a>
                                    <button type="submit"
                                            class="inline-flex items-center gap-1 px-5 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium">
                                        <i class="fas fa-video"></i> Create Test Meeting
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Right Sidebar --}}
                <div class="space-y-4">
                    {{-- Token Status --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <i class="fas fa-key text-yellow-500"></i> Token Status
                        </h3>
                        <dl class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <dt class="text-gray-500">Status</dt>
                                <dd class="font-medium {{ $status['has_valid_token'] ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $status['has_valid_token'] ? 'Valid' : 'Expired' }}
                                </dd>
                            </div>
                            <div class="flex justify-between text-sm">
                                <dt class="text-gray-500">Expires In</dt>
                                <dd class="font-medium text-gray-800">
                                    {{ $status['minutes_until_expiration'] ? $status['minutes_until_expiration'] . ' min' : 'N/A' }}
                                </dd>
                            </div>
                            @if($config)
                                <div class="flex justify-between text-sm">
                                    <dt class="text-gray-500">Last Updated</dt>
                                    <dd class="font-medium text-gray-800">{{ $config->updated_at?->diffForHumans() ?? 'N/A' }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>

                    {{-- Quick Links --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <i class="fas fa-link text-gray-500"></i> Quick Links
                        </h3>
                        <div class="space-y-2">
                            <a href="{{ route('config.google-meet.logs') }}"
                               class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 transition text-sm text-gray-700">
                                <i class="fas fa-history text-gray-400 w-4"></i> View Activity Logs
                            </a>
                            <a href="{{ route('config.google-meet.documentation') }}"
                               class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 transition text-sm text-gray-700">
                                <i class="fas fa-book text-gray-400 w-4"></i> Documentation
                            </a>
                            <a href="{{ route('config.google-meet.edit') }}"
                               class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 transition text-sm text-gray-700">
                                <i class="fas fa-edit text-gray-400 w-4"></i> Edit Configuration
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</x-app-layout>
