{% extends "base.html" %}

{% block title %}Post Discussions - Chat Rooms{% 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-7xl 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-newspaper mr-3"></i>Post Discussions
                </h1>
                <p class="text-blue-200">Chat rooms linked to community posts</p>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-6">
        <!-- Navigation -->
        <div class="flex justify-center mb-8">
            <div class="bg-white rounded-2xl shadow-xl p-2 flex space-x-2">
                <a href="{{ url_for('chat.index') }}" 
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
                    <i class="fas fa-comments mr-2"></i>All Chats
                </a>
                <span class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold">
                    <i class="fas fa-newspaper mr-2"></i>Post Discussions
                </span>
                <a href="{{ url_for('chat.create_room_form') }}" 
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
                    <i class="fas fa-plus mr-2"></i>Create Room
                </a>
            </div>
        </div>

        <!-- Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="bg-gradient-to-r from-blue-600 to-cyan-600 p-6">
                    <div class="flex items-center text-white">
                        <i class="fas fa-chart-bar text-3xl mr-4"></i>
                        <div>
                            <h3 class="text-xl font-bold">{{ total_discussions }}</h3>
                            <p class="text-blue-100">Total Post Discussions</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <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 text-white">
                        <i class="fas fa-fire text-3xl mr-4"></i>
                        <div>
                            <h3 class="text-xl font-bold">{{ active_discussions }}</h3>
                            <p class="text-green-100">Active This Week</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if rooms.items %}
        <!-- Discussion Rooms -->
        <div class="space-y-6">
            {% for room in rooms.items %}
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
                <div class="p-6">
                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                        <div class="flex-1">
                            <!-- Room Header -->
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{ room.name }}</h3>
                                    {% if room.description %}
                                    <p class="text-gray-600 mb-3">{{ room.description }}</p>
                                    {% endif %}
                                </div>
                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold ml-4">
                                    <i class="fas fa-comments mr-1"></i>{{ room.message_count or 0 }} messages
                                </span>
                            </div>
                            
                            <!-- Related Post -->
                            {% if room.related_post %}
                            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
                                <div class="flex items-start">
                                    <i class="fas fa-link text-blue-600 mr-3 mt-1"></i>
                                    <div class="flex-1">
                                        <h4 class="font-semibold text-blue-800 mb-1">Discussing Post:</h4>
                                        <a href="{{ url_for('community.post_detail', id=room.related_post.id) }}" 
                                           class="text-blue-700 hover:text-blue-900 font-medium">
                                            {{ room.related_post.title }}
                                        </a>
                                        <p class="text-blue-600 text-sm mt-1">
                                            by {{ room.related_post.author.nickname }} • 
                                            {{ room.related_post.created_at.strftime('%B %d, %Y') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            <!-- Room Info -->
                            <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                                <span>
                                    <i class="fas fa-user mr-1"></i>
                                    Created by {{ room.created_by.nickname }}
                                </span>
                                <span>
                                    <i class="fas fa-users mr-1"></i>
                                    {{ room.participants.count() }} members
                                </span>
                                <span>
                                    <i class="fas fa-clock mr-1"></i>
                                    {% if room.last_activity %}
                                        Last activity {{ room.last_activity.strftime('%m/%d/%Y at %I:%M %p') }}
                                    {% else %}
                                        No recent activity
                                    {% endif %}
                                </span>
                                {% if room.is_private %}
                                <span class="bg-amber-100 text-amber-800 px-2 py-1 rounded-full">
                                    <i class="fas fa-lock mr-1"></i>Private
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="mt-4 lg:mt-0 lg:ml-6 flex flex-col space-y-2">
                            <a href="{{ url_for('chat.room', room_id=room.id) }}" 
                               class="inline-flex items-center justify-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-sign-in-alt mr-2"></i>Join Discussion
                            </a>
                            {% if room.related_post %}
                            <a href="{{ url_for('community.post_detail', id=room.related_post.id) }}" 
                               class="inline-flex items-center justify-center px-6 py-2 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-all duration-200">
                                <i class="fas fa-eye mr-2"></i>View Post
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if rooms.pages > 1 %}
        <div class="flex justify-center mt-8">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="flex">
                    {% if rooms.has_prev %}
                    <a href="{{ url_for('chat.post_discussions', page=rooms.prev_num) }}" 
                       class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}
                    
                    {% for page_num in rooms.iter_pages() %}
                        {% if page_num %}
                            {% if page_num != rooms.page %}
                            <a href="{{ url_for('chat.post_discussions', page=page_num) }}" 
                               class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
                                {{ page_num }}
                            </a>
                            {% else %}
                            <span class="px-4 py-2 bg-blue-600 text-white">{{ page_num }}</span>
                            {% endif %}
                        {% else %}
                        <span class="px-4 py-2 text-gray-400">...</span>
                        {% endif %}
                    {% endfor %}
                    
                    {% if rooms.has_next %}
                    <a href="{{ url_for('chat.post_discussions', page=rooms.next_num) }}" 
                       class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        {% else %}
        <!-- 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-newspaper text-6xl text-white/50 mb-6"></i>
                <h3 class="text-2xl font-bold text-white mb-4">No post discussions yet</h3>
                <p class="text-blue-200 mb-8">Create the first chat room linked to a community 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 Post Discussion
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}