{% extends "base.html" %}
{% block title %}{{ project.name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>{{ project.name }}</h1>
        
        <div class="btn-group" role="group">
            {% if project.id != current_user.current_project_id %}
                <a href="{{ url_for('projects.switch_project', project_id=project.id) }}" class="btn btn-success">
                    <i class="fas fa-exchange-alt"></i> {{ _('Switch to this project') }}
                </a>
            {% endif %}
            
            <a href="{{ url_for('projects.my_projects') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{ _('Back to My Projects') }}
            </a>
            
            {% if project.created_by_id == current_user.id %}
                {% if not project.is_project_over() %}
                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#endProjectModal">
                        <i class="fas fa-flag-checkered"></i> {{ _('End Project') }}
                    </button>
                {% endif %}
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteProjectModal">
                    <i class="fas fa-trash"></i> {{ _('Delete Project') }}
                </button>
            {% endif %}            
        </div>
    </div>
    
    {% if project.description %}
        <p class="lead">{{ project.description }}</p>
    {% endif %}
    
    <div class="card mb-4">
        <div class="card-header">
            <h5>{{ _('Project Information') }}</h5>
        </div>
        <div class="card-body">
            <p><strong>{{ _('Creator') }}:</strong> 
                {% if project.created_by_id == current_user.id %}
                    {{ _('You') }}
                {% else %}
                    {{ project.created_by.name }}
                {% endif %}
            </p>
            
            <p><strong>{{ _('Created') }}:</strong> {{ project.created_at.strftime('%Y-%m-%d') }}</p>
            
            <p><strong>{{ _('Members') }}:</strong> {{ project.memberships|length }}</p>
            
            {% if project.end_date %}
                <p><strong>{{ _('End Date') }}:</strong> {{ project.end_date.strftime('%Y-%m-%d %H:%M') }}</p>
            {% endif %}
            
            {% if project.is_project_over() %}
                <div class="alert alert-warning">
                    <i class="fas fa-flag-checkered"></i> {{ _('This project has ended') }}
                </div>
            {% elif project.id == current_user.current_project_id %}
                <div class="alert alert-success">
                    <i class="fas fa-check-circle"></i> {{ _('This is your current active project') }}
                </div>
            {% endif %}
            
            {% if project.created_by_id == current_user.id %}
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="toggleResultsVisibility" 
                           {% if project.only_show_results_after_end %}checked{% endif %}
                           {% if project.is_project_over() %}disabled{% endif %}>
                    <label class="form-check-label" for="toggleResultsVisibility">
                        <i class="fas fa-eye-slash"></i> {{ _("Only show results after project ends") }}
                    </label>
                </div>
            {% elif project.only_show_results_after_end %}
                <p><i class="fas fa-eye-slash"></i> {{ _("Results will only be visible after the project ends") }}</p>
            {% endif %}
            
            <h5 class="mt-3">{{ _('Invitation Link') }}</h5>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="invitation-link" 
                       value="{{ request.url_root.rstrip('/') }}{{ project.invitation_link }}" readonly>
                <button class="btn btn-outline-secondary" type="button" onclick="copyInvitationLink()">
                    <i class="fas fa-copy"></i> {{ _('Copy') }}
                </button>
            </div>
            <p class="text-muted">{{ _('Share this link to invite others to join your project.') }}</p>
        </div>
    </div>
    
    <h2>{{ _('Project Thoughts') }}</h2>
    
    <div class="mb-3">
        <a href="{{ url_for('main.submit_thought') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> {{ _('Submit New Thought') }}
        </a>
    </div>
    
    {% if not show_results and project.only_show_results_after_end %}
        <div class="alert alert-info">
            <i class="fas fa-eye-slash"></i> {{ _('Results are hidden until the project ends.') }}
            <p>{{ _('You can still submit thoughts, but rankings will only be visible after the project is marked as ended.') }}</p>
        </div>
    {% elif thoughts %}
        <div class="list-group">
            {% for thought in thoughts %}
                <div class="list-group-item">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">{{ thought.content }}</h5>
                        <span class="badge bg-primary rounded-pill">{{ thought.total_points() }}</span>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info">
            <p>{{ _('No thoughts have been submitted to this project yet.') }}</p>
            <p>{{ _('Be the first to submit a thought!') }}</p>
        </div>
    {% endif %}
</div>

<!-- End Project Modal -->
<div class="modal fade" id="endProjectModal" tabindex="-1" aria-labelledby="endProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title" id="endProjectModalLabel">{{ _('End Project') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{{ _('You are about to mark this project as ended.') }}</p>
                {% if project.only_show_results_after_end %}
                    <p>{{ _('Once ended, all results will become visible to project members.') }}</p>
                {% endif %}
                <p>{{ _('Are you sure you want to end this project?') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
                <form action="{{ url_for('projects.end_project', project_id=project.id) }}" method="POST">
                    <button type="submit" class="btn btn-warning">{{ _('End Project') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Project Modal -->
<div class="modal fade" id="deleteProjectModal" tabindex="-1" aria-labelledby="deleteProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteProjectModalLabel">{{ _('Delete Project') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>{{ _('Warning') }}:</strong> {{ _('You are about to delete this project.') }}</p>
                <p>{{ _('This action cannot be undone. All thoughts and rankings in this project will be permanently deleted.') }}</p>
                <p>{{ _('Are you sure you want to continue?') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
                <form action="{{ url_for('projects.delete_project', project_id=project.id) }}" method="POST">
                    <button type="submit" class="btn btn-danger">{{ _('Delete Project') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function copyInvitationLink() {
    var copyText = document.getElementById("invitation-link");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
    
    // Show a toast notification
    showToast("{{ _('Invitation link copied to clipboard!') }}", "success");
}

// Handle toggle for results visibility
document.addEventListener('DOMContentLoaded', function() {
    const toggleSwitch = document.getElementById('toggleResultsVisibility');
    if (toggleSwitch) {
        toggleSwitch.addEventListener('change', function() {
            // Send AJAX request to update the setting
            fetch('{{ url_for("projects.toggle_results_visibility", project_id=project.id) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    showToast(data.value ? 
                        "{{ _('Results will now be hidden until the project ends') }}" : 
                        "{{ _('Results are now visible to all project members') }}", 
                        "success");
                    
                    // Reload the page to reflect changes
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    // Show error message
                    showToast(data.message, "error");
                    // Reset the toggle to its previous state
                    toggleSwitch.checked = !toggleSwitch.checked;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast("{{ _('An error occurred. Please try again.') }}", "error");
                // Reset the toggle to its previous state
                toggleSwitch.checked = !toggleSwitch.checked;
            });
        });
    }
});
</script>
{% endblock %}