{% extends "base.html" %}

{% block title %}Chat - Community Discussions{% 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-16">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                <h1 class="text-4xl font-bold text-white mb-4">
                    <i class="fas fa-comments mr-3"></i>Community Chat
                </h1>
                <p class="text-blue-200 text-lg">Connect with fellow motorcycle adventurers</p>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-8">
        <!-- Community Guidelines Card -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
            <div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
                <div class="flex items-center text-white">
                    <i class="fas fa-shield-alt text-3xl mr-4"></i>
                    <div>
                        <h3 class="text-xl font-bold">Community Guidelines</h3>
                        <p class="text-green-100">Keep our community safe and welcoming</p>
                    </div>
                </div>
            </div>
            <div class="p-6 bg-green-50">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>Be respectful to all community members</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>Share motorcycle adventures and tips</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>Help others with technical questions</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
                <div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
                    <div class="flex items-center text-white">
                        <i class="fas fa-plus-circle text-3xl mr-4"></i>
                        <div>
                            <h4 class="text-xl font-bold">Create Chat Room</h4>
                            <p class="text-green-100">Start a new discussion</p>
                        </div>
                    </div>
                </div>
                <div class="p-6 text-center">
                    <p class="text-gray-600 mb-6">Start a new chat room on any motorcycle topic or connect it to a specific post</p>
                    <a href="{{ url_for('chat.create_room_form') }}" 
                       class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                        <i class="fas fa-plus mr-2"></i>Create New Room
                    </a>
                </div>
            </div>
            
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
                <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-3xl mr-4"></i>
                        <div>
                            <h4 class="text-xl font-bold">Post Discussions</h4>
                            <p class="text-blue-100">Chat about community posts</p>
                        </div>
                    </div>
                </div>
                <div class="p-6 text-center">
                    <p class="text-gray-600 mb-6">Join discussions about specific community posts and share your thoughts</p>
                    <a href="{{ url_for('chat.post_discussions') }}" 
                       class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
                        <i class="fas fa-comments mr-2"></i>View Discussions
                    </a>
                </div>
            </div>
        </div>

        {% if user_rooms %}
        <!-- Your Recent Chats -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
                <i class="fas fa-history mr-3"></i>Your Recent Chats
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for room in user_rooms %}
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
                    <div class="bg-gradient-to-r 
                        {% if room.room_type == 'support' %}from-purple-600 to-indigo-600
                        {% elif room.room_type == 'public' %}from-blue-600 to-cyan-600
                        {% elif room.room_type == 'group' %}from-green-600 to-teal-600
                        {% else %}from-gray-600 to-slate-600{% endif %} p-6">
                        <div class="flex items-center justify-between text-white">
                            <div>
                                <h3 class="text-lg font-bold">{{ room.name }}</h3>
                                <p class="text-sm opacity-80">{{ room.room_type.replace('_', ' ').title() }}</p>
                            </div>
                            <i class="fas 
                                {% if room.room_type == 'support' %}fa-headset
                                {% elif room.room_type == 'public' %}fa-users
                                {% elif room.room_type == 'group' %}fa-user-friends
                                {% else %}fa-comments{% endif %} text-2xl"></i>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">{{ room.description or 'No description available' }}</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">
                                <i class="fas fa-clock mr-1"></i>
                                {{ room.last_activity.strftime('%m/%d %H:%M') if room.last_activity else 'No activity' }}
                            </span>
                            <a href="{{ url_for('chat.room', room_id=room.id) }}" 
                               class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
                                <i class="fas fa-sign-in-alt mr-2"></i>Join Chat
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if public_rooms %}
        <!-- Public Chat Rooms -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
                <i class="fas fa-globe mr-3"></i>Public Chat Rooms
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for room in public_rooms %}
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
                    <div class="bg-gradient-to-r 
                        {% if room.room_type == 'support' %}from-purple-600 to-indigo-600
                        {% elif room.room_type == 'public' %}from-blue-600 to-cyan-600
                        {% elif room.room_type == 'group' %}from-green-600 to-teal-600
                        {% else %}from-gray-600 to-slate-600{% endif %} p-6">
                        <div class="flex items-center justify-between text-white">
                            <div>
                                <h3 class="text-lg font-bold">{{ room.name }}</h3>
                                <p class="text-sm opacity-80">{{ room.room_type.replace('_', ' ').title() }}</p>
                            </div>
                            <div class="text-right">
                                <i class="fas 
                                    {% if room.room_type == 'support' %}fa-headset
                                    {% elif room.room_type == 'public' %}fa-users
                                    {% elif room.room_type == 'group' %}fa-user-friends
                                    {% else %}fa-comments{% endif %} text-2xl"></i>
                                <p class="text-xs mt-1">{{ room.participants.count() }} members</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-3">{{ room.description or 'Join the conversation!' }}</p>
                        {% if room.related_post %}
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
                            <p class="text-sm text-blue-700">
                                <i class="fas fa-link mr-1"></i>Related to: {{ room.related_post.title }}
                            </p>
                        </div>
                        {% endif %}
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">
                                <i class="fas fa-clock mr-1"></i>
                                {{ room.last_activity.strftime('%m/%d %H:%M') if room.last_activity else 'No activity' }}
                            </span>
                            <a href="{{ url_for('chat.room', room_id=room.id) }}" 
                               class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
                                <i class="fas fa-sign-in-alt mr-2"></i>Join Chat
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if not user_rooms and not public_rooms %}
        <!-- Empty State -->
        <div class="text-center py-16">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-12 border border-white/20">
                <i class="fas fa-comments text-6xl text-white/50 mb-6"></i>
                <h3 class="text-2xl font-bold text-white mb-4">No chat rooms available</h3>
                <p class="text-blue-200 mb-8">Be the first to start a conversation!</p>
                <a href="{{ url_for('chat.create_room_form') }}" 
                   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                    <i class="fas fa-plus mr-2"></i>Create First Room
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Mobile app detection and API guidance
if (window.ReactNativeWebView || window.flutter_inappwebview) {
    console.log('Mobile app detected - use API endpoints for better performance');
    document.body.classList.add('mobile-app-view');
}

// Auto-refresh room list every 60 seconds (increased from 30s to reduce server load)
let refreshInterval;
function startAutoRefresh() {
    refreshInterval = setInterval(() => {
        if (document.visibilityState === 'visible' && !document.hidden) {
            window.location.reload();
        }
    }, 60000);
}

// Pause refresh when page is hidden
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        clearInterval(refreshInterval);
    } else {
        startAutoRefresh();
    }
});

// Start auto-refresh on page load
startAutoRefresh();

// Smooth scrolling for better UX
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>
{% endblock %}