{% extends "base.html" %}
{% block title %}My Profile - {{ current_user.nickname }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 pt-16">
    <!-- Profile Header -->
    <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">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                    <div class="flex items-center space-x-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-red-600 rounded-full flex items-center justify-center text-white font-bold text-3xl">
                            {{ current_user.nickname[0].upper() }}
                        </div>
                        <div>
                            <h1 class="text-3xl font-bold text-white mb-2">{{ current_user.nickname }}</h1>
                            <p class="text-blue-200 mb-1">
                                <i class="fas fa-envelope mr-2"></i>{{ current_user.email }}
                            </p>
                            <p class="text-blue-200">
                                <i class="fas fa-calendar mr-2"></i>Riding since {{ current_user.created_at.strftime('%B %Y') }}
                            </p>
                        </div>
                    </div>
                    <div>
                        <a href="{{ url_for('community.new_post') }}" 
                           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 transform hover:scale-105">
                            <i class="fas fa-plus mr-2"></i>Share New Adventure
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-8">
        <!-- Adventure 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-green-600 to-emerald-600 p-6">
                    <div class="flex items-center text-white">
                        <i class="fas fa-check-circle text-3xl mr-4"></i>
                        <div>
                            <div class="text-3xl font-bold">{{ published_count }}</div>
                            <div class="text-green-100">Published Adventures</div>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-600 text-sm">Visible to the community</p>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="bg-gradient-to-r from-yellow-600 to-orange-600 p-6">
                    <div class="flex items-center text-white">
                        <i class="fas fa-clock text-3xl mr-4"></i>
                        <div>
                            <div class="text-3xl font-bold">{{ pending_count }}</div>
                            <div class="text-yellow-100">Awaiting Review</div>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-600 text-sm">Pending admin approval</p>
                </div>
            </div>
        </div>

        <!-- Change Password Card -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
            <div class="cursor-pointer transition-all duration-200 hover:bg-gray-50" onclick="togglePasswordCard()">
                <div class="p-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-key text-3xl text-purple-600 mr-4"></i>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900">Change Password</h3>
                                <p class="text-gray-600">Update your account password for security</p>
                            </div>
                        </div>
                        <i id="passwordCardToggle" class="fas fa-chevron-down text-gray-400 text-xl transition-transform duration-200"></i>
                    </div>
                </div>
            </div>
            
            <!-- Password Change Form (Initially Hidden) -->
            <div id="passwordChangeForm" class="hidden border-t border-gray-200">
                <div class="p-6 bg-gray-50">
                    <form id="changePasswordForm" method="POST" action="{{ url_for('auth.change_password') }}" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <!-- Current Password -->
                            <div>
                                <label for="current_password" class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-lock mr-1"></i>Current Password
                                </label>
                                <input type="password" 
                                       id="current_password" 
                                       name="current_password" 
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
                                       placeholder="Enter current password">
                            </div>
                            
                            <!-- New Password -->
                            <div>
                                <label for="new_password" class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-key mr-1"></i>New Password
                                </label>
                                <input type="password" 
                                       id="new_password" 
                                       name="new_password" 
                                       required
                                       minlength="6"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
                                       placeholder="Enter new password">
                            </div>
                            
                            <!-- Confirm New Password -->
                            <div>
                                <label for="confirm_password" class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-check-circle mr-1"></i>Confirm Password
                                </label>
                                <input type="password" 
                                       id="confirm_password" 
                                       name="confirm_password" 
                                       required
                                       minlength="6"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
                                       placeholder="Confirm new password">
                            </div>
                        </div>
                        
                        <!-- Password Requirements -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="font-semibold text-blue-800 mb-2">Password Requirements:</h4>
                            <ul class="text-sm text-blue-700 space-y-1">
                                <li><i class="fas fa-check text-green-500 mr-1"></i>At least 6 characters long</li>
                                <li><i class="fas fa-info-circle text-blue-500 mr-1"></i>Use a unique password you don't use elsewhere</li>
                                <li><i class="fas fa-shield-alt text-green-500 mr-1"></i>Consider using a mix of letters, numbers, and symbols</li>
                            </ul>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="flex justify-end">
                            <button type="submit" 
                                    class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-200 transform hover:scale-105">
                                <i class="fas fa-save mr-2"></i>Update Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Adventures Collection Header -->
        <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
            <div class="flex items-center">
                <i class="fas fa-mountain text-3xl text-blue-600 mr-4"></i>
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">My Adventure Collection</h2>
                    <p class="text-gray-600">Manage and share your motorcycle adventures</p>
                </div>
            </div>
        </div>

        <!-- Adventures Grid -->
        {% if posts.items %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for post in posts.items %}
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
                <!-- Adventure Image -->
                {% set cover_image = post.images | selectattr('is_cover', 'equalto', True) | first %}
                {% if cover_image %}
                <div class="relative">
                    <img src="{{ cover_image.get_thumbnail_url() }}" 
                         alt="{{ post.title }}" 
                         class="w-full h-48 object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    <div class="absolute top-3 right-3">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold
                            {{ 'bg-green-500 text-white' if post.published else 'bg-yellow-500 text-black' }}">
                            {% if post.published %}
                                <i class="fas fa-check-circle mr-1"></i>Live
                            {% else %}
                                <i class="fas fa-clock mr-1"></i>Review
                            {% endif %}
                        </span>
                    </div>
                </div>
                {% else %}
                <div class="h-48 bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center relative">
                    <i class="fas fa-mountain text-white text-6xl opacity-50"></i>
                    <div class="absolute top-3 right-3">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold
                            {{ 'bg-green-500 text-white' if post.published else 'bg-yellow-500 text-black' }}">
                            {% if post.published %}
                                <i class="fas fa-check-circle mr-1"></i>Live
                            {% else %}
                                <i class="fas fa-clock mr-1"></i>Review
                            {% endif %}
                        </span>
                    </div>
                </div>
                {% endif %}

                <div class="p-6">
                    <!-- Title and Subtitle -->
                    <h3 class="text-xl font-bold text-gray-900 mb-2">{{ post.title }}</h3>
                    {% if post.subtitle %}
                    <p class="text-gray-600 text-sm mb-3">{{ post.subtitle }}</p>
                    {% endif %}

                    <!-- Difficulty Badge -->
                    <div class="mb-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-sm font-semibold">
                            {% for i in range(post.difficulty) %}
                                <i class="fas fa-star mr-1"></i>
                            {% endfor %}
                            {{ post.get_difficulty_label() }}
                        </span>
                    </div>

                    <!-- Content Preview -->
                    <p class="text-gray-600 text-sm mb-4 h-12 overflow-hidden">
                        {{ (post.content[:100] + '...') if post.content|length > 100 else post.content }}
                    </p>

                    <!-- Adventure Metadata -->
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <i class="fas fa-calendar text-blue-500 mb-1"></i>
                                <div class="text-sm font-semibold">{{ post.created_at.strftime('%m/%d') }}</div>
                                <div class="text-xs text-gray-500">Created</div>
                            </div>
                            <div>
                                <i class="fas fa-images text-green-500 mb-1"></i>
                                <div class="text-sm font-semibold">{{ post.images.count() }}</div>
                                <div class="text-xs text-gray-500">Photos</div>
                            </div>
                            <div>
                                <i class="fas fa-route text-orange-500 mb-1"></i>
                                <div class="text-sm font-semibold">{{ post.gpx_files.count() }}</div>
                                <div class="text-xs text-gray-500">Routes</div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="space-y-2">
                        {% if post.published %}
                        <a href="{{ url_for('community.post_detail', id=post.id) }}" 
                           class="block w-full text-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-all duration-200">
                            <i class="fas fa-eye mr-2"></i>View Live
                        </a>
                        {% endif %}
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ url_for('community.edit_post', id=post.id) }}" 
                               class="text-center px-3 py-2 bg-yellow-500 text-white font-semibold rounded-lg hover:bg-yellow-600 transition-all duration-200">
                                <i class="fas fa-edit mr-1"></i>Edit
                            </a>
                            <button type="button" 
                                    class="px-3 py-2 bg-red-500 text-white font-semibold rounded-lg hover:bg-red-600 transition-all duration-200"
                                    data-post-id="{{ post.id }}" 
                                    data-post-title="{{ post.title }}"
                                    onclick="confirmDelete(this)">
                                <i class="fas fa-trash mr-1"></i>Delete
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <!-- No Adventures State -->
        <div class="bg-white rounded-2xl shadow-xl p-12 text-center">
            <i class="fas fa-mountain text-6xl text-gray-400 mb-6"></i>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">Your Adventure Journey Awaits!</h3>
            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                You haven't shared any motorcycle adventures yet. Every great ride has a story worth telling!
            </p>
            <a href="{{ url_for('community.new_post') }}" 
               class="inline-flex items-center px-8 py-4 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 transform hover:scale-105">
                <i class="fas fa-plus mr-2"></i>Share Your First Adventure
            </a>
            <div class="mt-6">
                <p class="text-sm text-gray-500">
                    <i class="fas fa-lightbulb mr-1"></i>
                    Share photos, GPS tracks, and stories of your rides to inspire the community
                </p>
            </div>
        </div>
        {% endif %}

        <!-- Pagination -->
        {% if posts.pages > 1 %}
        <div class="flex justify-center mt-8">
            <div class="bg-white rounded-lg shadow-lg px-6 py-4">
                <div class="flex items-center space-x-4">
                    {% if posts.has_prev %}
                    <a href="{{ url_for('community.profile', page=posts.prev_num) }}" 
                       class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-200">
                        <i class="fas fa-chevron-left mr-1"></i>Previous
                    </a>
                    {% endif %}
                    
                    <span class="text-gray-600">
                        Page {{ posts.page }} of {{ posts.pages }}
                    </span>
                    
                    {% if posts.has_next %}
                    <a href="{{ url_for('community.profile', page=posts.next_num) }}" 
                       class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-200">
                        Next<i class="fas fa-chevron-right ml-1"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-2xl p-8 max-w-md mx-4">
        <div class="text-center">
            <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
            <h3 class="text-xl font-bold text-gray-900 mb-4">Delete Adventure</h3>
            <p class="text-gray-600 mb-6">
                Are you sure you want to delete "<span id="deletePostTitle" class="font-semibold"></span>"? 
                This action cannot be undone.
            </p>
            <div class="flex space-x-4">
                <button onclick="closeDeleteModal()" 
                        class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-all duration-200">
                    Cancel
                </button>
                <form id="deleteForm" method="POST" class="flex-1">
                    <button type="submit" 
                            class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-all duration-200">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function confirmDelete(button) {
    const postId = button.getAttribute('data-post-id');
    const postTitle = button.getAttribute('data-post-title');
    
    document.getElementById('deletePostTitle').textContent = postTitle;
    document.getElementById('deleteForm').action = `/community/delete-post/${postId}`;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
}

// Password card toggle functionality
function togglePasswordCard() {
    const form = document.getElementById('passwordChangeForm');
    const toggle = document.getElementById('passwordCardToggle');
    
    if (form && toggle) {
        if (form.classList.contains('hidden')) {
            form.classList.remove('hidden');
            toggle.classList.remove('fa-chevron-down');
            toggle.classList.add('fa-chevron-up');
        } else {
            form.classList.add('hidden');
            toggle.classList.remove('fa-chevron-up');
            toggle.classList.add('fa-chevron-down');
        }
    }
}

// Make sure DOM is loaded before attaching event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Ensure the toggle function is available globally
    window.togglePasswordCard = togglePasswordCard;
});

// Password change form validation
document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (newPassword !== confirmPassword) {
        e.preventDefault();
        alert('New password and confirm password do not match. Please try again.');
        document.getElementById('confirm_password').focus();
        return false;
    }
    
    if (newPassword.length < 6) {
        e.preventDefault();
        alert('Password must be at least 6 characters long.');
        document.getElementById('new_password').focus();
        return false;
    }
});

// Real-time password confirmation validation
document.getElementById('confirm_password').addEventListener('input', function() {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = this.value;
    
    if (confirmPassword && newPassword !== confirmPassword) {
        this.style.borderColor = '#ef4444';
        this.style.backgroundColor = '#fef2f2';
    } else if (confirmPassword && newPassword === confirmPassword) {
        this.style.borderColor = '#10b981';
        this.style.backgroundColor = '#f0fdf4';
    } else {
        this.style.borderColor = '#d1d5db';
        this.style.backgroundColor = '#ffffff';
    }
});

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});
</script>
{% endblock %}