@extends('layouts.admin')
@section('title', 'Registration Links - ' . $event->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Registration Links</h1>
                <a href="{{ route('admin.events.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                    Back to Events
                </a>
            </div>
        </div>

        <div class="p-6">
            <!-- Event Information -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ $event->name }}</h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">{!! $event->description !!}</p>
                
                <div class="flex items-center space-x-4 mb-4">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                        👥 {{ $event->users->count() }} users
                    </span>
                </div>

                <div class="flex space-x-3">
                    <a href="{{ route('admin.events.manage-users', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        Manage Users
                    </a>
                    <a href="{{ route('admin.events.show', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        View Event Details
                    </a>
                </div>
            </div>

            @if($event->allow_registration)
                <!-- Registration Status -->
                <div class="mb-8">
                    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                        <h3 class="text-lg font-medium text-green-800 dark:text-green-200 mb-2">Registration Enabled</h3>
                        <p class="text-green-700 dark:text-green-300">Users can register for this event using the links below.</p>
                    </div>
                </div>

                <!-- Registration Links -->
                <div class="grid md:grid-cols-2 gap-6 mb-8">
                    <!-- New User Registration -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-3">New User Registration</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">For users who don't have an account yet:</p>
                        
                        <div class="space-y-3">
                            <div class="flex">
                                <input type="text" 
                                       id="registration-link" 
                                       value="{{ route('event.register', $event->registration_token) }}" 
                                       readonly 
                                       class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <button onclick="copyToClipboard('registration-link')" 
                                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-r-md transition duration-150 ease-in-out">
                                    Copy
                                </button>
                            </div>
                            
                            <a href="{{ route('event.register', $event->registration_token) }}" 
                               target="_blank"
                               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                                Test Registration Link
                            </a>
                        </div>
                    </div>

                    <!-- Existing User Login -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Existing User Login</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">For users who already have an account:</p>
                        
                        <div class="space-y-3">
                            <div class="flex">
                                <input type="text" 
                                       id="login-link" 
                                       value="{{ route('event.login', $event->registration_token) }}" 
                                       readonly 
                                       class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
                                <button onclick="copyToClipboard('login-link')" 
                                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-r-md transition duration-150 ease-in-out">
                                    Copy
                                </button>
                            </div>
                            
                            <a href="{{ route('event.login', $event->registration_token) }}" 
                               target="_blank"
                               class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                                Test Login Link
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Registration Token Information -->
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Registration Token Information</h3>
                            <p class="text-gray-600 dark:text-gray-300 mb-2">
                                <strong>Token:</strong> 
                                <code class="bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded text-sm">{{ $event->registration_token }}</code>
                            </p>
                            @if($event->registration_message)
                                <div class="mt-3">
                                    <p class="text-gray-600 dark:text-gray-300 font-medium mb-1">Custom Message:</p>
                                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-3">
                                        <p class="text-blue-800 dark:text-blue-200">{{ $event->registration_message }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div>
                            <form method="POST" action="{{ route('admin.events.generate-token', $event) }}" 
                                  onsubmit="return confirm('This will invalidate the current registration links. Continue?')">
                                @csrf
                                <button type="submit" 
                                        class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                                    Regenerate Token
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Usage Instructions -->
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-6">How to Use These Links</h3>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-base font-medium text-blue-600 dark:text-blue-400 mb-3">Registration Link</h4>
                            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Share with new users who need to create an account
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Automatically associates them with this event
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    If email already exists for same client, logs them in
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Prevents cross-client account conflicts
                                </li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-base font-medium text-green-600 dark:text-green-400 mb-3">Login Link</h4>
                            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Share with existing users who have accounts
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Automatically associates them with this event
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Only works for users in the same client organization
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Maintains existing user data and progress
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            @else
                <!-- Registration Disabled -->
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
                    <h3 class="text-lg font-medium text-yellow-800 dark:text-yellow-200 mb-2">Registration Disabled</h3>
                    <p class="text-yellow-700 dark:text-yellow-300 mb-4">Registration is currently disabled for this event. Enable registration in the event settings to generate registration links.</p>
                    <a href="{{ route('admin.events.edit', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        Edit Event Settings
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        document.execCommand('copy');
        
        // Show success feedback
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = 'Copied!';
        button.classList.add('bg-green-600', 'hover:bg-green-700');
        button.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'bg-green-600', 'hover:bg-green-700');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600', 'hover:bg-green-700');
            if (elementId.includes('registration')) {
                button.classList.add('bg-blue-600', 'hover:bg-blue-700');
            } else {
                button.classList.add('bg-green-600', 'hover:bg-green-700');
            }
        }, 2000);
    } catch (err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy to clipboard. Please copy manually.');
    }
}
</script>
@endsection