{% 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-3 gap-6 mb-8">
            <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-life-ring text-3xl mr-4"></i>
                        <div>
                            <h4 class="text-lg font-bold">Get Support</h4>
                            <p class="text-blue-100 text-sm">Need help or password reset?</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">Contact administrators for support or password reset</p>
                    <a href="{{ url_for('chat.support') }}" 
                       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-headset mr-2"></i>Get Support
                    </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-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-lg font-bold">Create Room</h4>
                            <p class="text-green-100 text-sm">Start a new discussion</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">Start a new chat room on any motorcycle topic</p>
                    <a href="{{ url_for('chat.create_room_form') }}" 
                       class="inline-flex items-center px-4 py-2 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 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-orange-600 to-red-600 p-6">
                    <div class="flex items-center text-white">
                        <i class="fas fa-key text-3xl mr-4"></i>
                        <div>
                            <h4 class="text-lg font-bold">Password Reset</h4>
                            <p class="text-orange-100 text-sm">Forgot your password?</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">Request a password reset from administrators</p>
                    <a href="{{ url_for('auth.forgot_password') }}" 
                       class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-600 to-red-600 text-white font-semibold rounded-lg hover:from-orange-700 hover:to-red-700 transition-all duration-200">
                        <i class="fas fa-unlock-alt mr-2"></i>Reset Password
                    </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 %}