{% extends "base.html" %}

{% block title %}Create Chat Room{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 pt-16">
    <!-- Header Section -->
    <div class="relative overflow-hidden py-12">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h1 class="text-3xl font-bold text-white mb-2">
                    <i class="fas fa-plus-circle mr-3"></i>Create New Chat Room
                </h1>
                <p class="text-blue-200">Start a discussion with the motorcycle community</p>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-6">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
                <div class="flex items-center justify-between text-white">
                    <div class="flex items-center">
                        <i class="fas fa-comments text-2xl mr-3"></i>
                        <div>
                            <h2 class="text-xl font-bold">Room Configuration</h2>
                            <p class="text-green-100 text-sm">Set up your chat room details</p>
                        </div>
                    </div>
                    <a href="{{ url_for('chat.index') }}" class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg transition-all duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Chat
                    </a>
                </div>
            </div>
            
            <div class="p-8">
                <form method="POST" action="{{ url_for('chat.create_room') }}" class="space-y-6">
                    <!-- Room Name -->
                    <div class="space-y-2">
                        <label for="room_name" class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-tag mr-2 text-green-600"></i>Room Name *
                        </label>
                        <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200" 
                               id="room_name" name="room_name" 
                               placeholder="Enter a descriptive room name" required maxlength="100">
                        <p class="text-xs text-gray-500">Choose a clear, descriptive name for your chat room</p>
                    </div>
                    
                    <!-- Description -->
                    <div class="space-y-2">
                        <label for="description" class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-align-left mr-2 text-green-600"></i>Description
                        </label>
                        <textarea class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200" 
                                  id="description" name="description" rows="3" 
                                  placeholder="Describe what this room is about..." maxlength="500"></textarea>
                        <p class="text-xs text-gray-500">Optional: Help others understand the room's purpose</p>
                    </div>
                    
                    <!-- Post Binding Section -->
                    <div class="space-y-4 p-6 bg-blue-50 rounded-xl border border-blue-200">
                        <div class="flex items-center">
                            <i class="fas fa-link mr-3 text-blue-600 text-lg"></i>
                            <h3 class="text-lg font-semibold text-gray-800">Link to Post (Optional)</h3>
                        </div>
                        
                        <div class="space-y-2">
                            <label for="related_post_id" class="block text-sm font-semibold text-gray-700">
                                Select a post to discuss
                            </label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" 
                                    id="related_post_id" name="related_post_id">
                                <option value="">No specific post - General discussion</option>
                                {% for post in posts %}
                                <option value="{{ post.id }}" {% if pre_selected_post and post.id == pre_selected_post %}selected{% endif %}>
                                    {{ post.title }} - by {{ post.author.nickname }}
                                </option>
                                {% endfor %}
                            </select>
                            <p class="text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                Link this room to a specific post for focused discussions
                            </p>
                        </div>
                    </div>
                    
                    <!-- Room Type -->
                    <div class="space-y-2">
                        <label for="room_type" class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-folder mr-2 text-green-600"></i>Room Category
                        </label>
                        <select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200" 
                                id="room_type" name="room_type">
                            <option value="general">General Discussion</option>
                            <option value="technical">Technical Support</option>
                            <option value="social">Social Chat</option>
                            <option value="post_discussion">Post Discussion</option>
                        </select>
                        <p class="text-xs text-gray-500">Category will auto-update based on post selection</p>
                    </div>
                    
                    <!-- Privacy Setting -->
                    <div class="space-y-3 p-6 bg-amber-50 rounded-xl border border-amber-200">
                        <div class="flex items-center">
                            <i class="fas fa-shield-alt mr-3 text-amber-600 text-lg"></i>
                            <h3 class="text-lg font-semibold text-gray-800">Privacy Settings</h3>
                        </div>
                        
                        <div class="flex items-start space-x-3">
                            <input class="mt-1 w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500" 
                                   type="checkbox" id="is_private" name="is_private">
                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="is_private">
                                    Make this room private
                                </label>
                                <p class="text-xs text-gray-500 mt-1">
                                    Private rooms are only visible to invited members. Public rooms can be joined by anyone.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row gap-4 pt-6">
                        <a href="{{ url_for('chat.index') }}" 
                           class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 font-semibold rounded-xl hover:bg-gray-200 transition-all duration-200 text-center">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit" 
                                class="flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-xl hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                            <i class="fas fa-plus mr-2"></i>Create Chat Room
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Recent Posts Preview -->
        {% if posts %}
        <div class="mt-8 bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6">
                <div class="flex items-center text-white">
                    <i class="fas fa-newspaper text-2xl mr-3"></i>
                    <div>
                        <h3 class="text-xl font-bold">Recent Community Posts</h3>
                        <p class="text-blue-100 text-sm">Available for discussion rooms</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for post in posts[:6] %}
                    <div class="bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-all duration-200 cursor-pointer post-preview" 
                         data-post-id="{{ post.id }}" data-post-title="{{ post.title }}">
                        <h4 class="font-semibold text-gray-800 mb-2 line-clamp-2">
                            {{ post.title }}
                        </h4>
                        <p class="text-gray-600 text-sm mb-3 line-clamp-3">
                            {{ post.content[:120] }}{% if post.content|length > 120 %}...{% endif %}
                        </p>
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>by {{ post.author.nickname }}</span>
                            <span>{{ post.created_at.strftime('%m/%d') }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
// Auto-update room type when post is selected
document.getElementById('related_post_id').addEventListener('change', function() {
    const roomTypeSelect = document.getElementById('room_type');
    if (this.value) {
        roomTypeSelect.value = 'post_discussion';
        document.getElementById('room_name').placeholder = 'Discussion: ' + this.options[this.selectedIndex].text.split(' - ')[0];
    } else {
        roomTypeSelect.value = 'general';
        document.getElementById('room_name').placeholder = 'Enter a descriptive room name';
    }
});

// Post preview selection
document.querySelectorAll('.post-preview').forEach(preview => {
    preview.addEventListener('click', function() {
        const postId = this.dataset.postId;
        const postTitle = this.dataset.postTitle;
        
        // Update the select dropdown
        document.getElementById('related_post_id').value = postId;
        
        // Update room name suggestion
        document.getElementById('room_name').value = `Discussion: ${postTitle}`;
        
        // Update room type
        document.getElementById('room_type').value = 'post_discussion';
        
        // Visual feedback
        document.querySelectorAll('.post-preview').forEach(p => p.classList.remove('ring-2', 'ring-blue-500', 'bg-blue-100'));
        this.classList.add('ring-2', 'ring-blue-500', 'bg-blue-100');
        
        // Scroll to form
        document.querySelector('form').scrollIntoView({ behavior: 'smooth' });
    });
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const roomName = document.getElementById('room_name').value.trim();
    if (!roomName) {
        e.preventDefault();
        alert('Please enter a room name');
        document.getElementById('room_name').focus();
    }
});
</script>

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
{% endblock %}