{% extends "base.html" %}

{% block title %}Playing - Code of Conquest{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
{% endblock %}

{% block content %}
<div class="play-container">
    {# ===== LEFT SIDEBAR - Character Panel ===== #}
    <aside class="play-panel play-sidebar play-sidebar--left" id="character-panel">
        {% include "game/partials/character_panel.html" %}
    </aside>

    {# ===== MIDDLE - Narrative Panel ===== #}
    <section class="play-panel play-main">
        {% include "game/partials/narrative_panel.html" %}
    </section>

    {# ===== RIGHT SIDEBAR - Accordions ===== #}
    <aside class="play-panel play-sidebar play-sidebar--right accordion-panel">
        {# History Accordion #}
        <div class="accordion" data-accordion="history">
            <button class="accordion-header" onclick="toggleAccordion(this)">
                <span>History <span class="accordion-count">({{ history|length }})</span></span>
                <span class="accordion-icon">▼</span>
            </button>
            <div class="accordion-content" id="accordion-history">
                {% include "game/partials/sidebar_history.html" %}
            </div>
        </div>

        {# Quests Accordion #}
        <div class="accordion collapsed" data-accordion="quests">
            <button class="accordion-header" onclick="toggleAccordion(this)">
                <span>Quests <span class="accordion-count">({{ quests|length }})</span></span>
                <span class="accordion-icon">▼</span>
            </button>
            <div class="accordion-content" id="accordion-quests">
                {% include "game/partials/sidebar_quests.html" %}
            </div>
        </div>

        {# NPCs Accordion #}
        <div class="accordion collapsed" data-accordion="npcs">
            <button class="accordion-header" onclick="toggleAccordion(this)">
                <span>NPCs Here <span class="accordion-count">({{ npcs|length }})</span></span>
                <span class="accordion-icon">▼</span>
            </button>
            <div class="accordion-content" id="accordion-npcs">
                {% include "game/partials/sidebar_npcs.html" %}
            </div>
        </div>

        {# Map Accordion #}
        <div class="accordion collapsed" data-accordion="map">
            <button class="accordion-header" onclick="toggleAccordion(this)">
                <span>Map <span class="accordion-count">({{ discovered_locations|length }})</span></span>
                <span class="accordion-icon">▼</span>
            </button>
            <div class="accordion-content" id="accordion-map">
                {% include "game/partials/sidebar_map.html" %}
            </div>
        </div>
    </aside>
</div>

{# Modal Container #}
<div id="modal-container"></div>
{% endblock %}

{% block scripts %}
<script>
// Accordion Toggle (right sidebar)
function toggleAccordion(button) {
    const accordion = button.closest('.accordion');
    accordion.classList.toggle('collapsed');
}

// Panel Accordion Toggle (character panel)
function togglePanelAccordion(button) {
    const accordion = button.closest('.panel-accordion');
    accordion.classList.toggle('collapsed');
}

// Toggle Ambient Details
function toggleAmbient() {
    const section = document.querySelector('.ambient-section');
    section.classList.toggle('collapsed');
}

// Close Modal
function closeModal() {
    const modal = document.querySelector('.modal-overlay');
    if (modal) {
        modal.remove();
    }
}

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModal();
    }
});

// Close modal on overlay click
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal-overlay')) {
        closeModal();
    }
});

// Clear chat input after submission
document.body.addEventListener('htmx:afterSwap', function(e) {
    // Clear chat input if it was a chat form submission
    if (e.target.closest('.chat-history')) {
        const form = document.querySelector('.chat-input-form');
        if (form) {
            const input = form.querySelector('.chat-input');
            if (input) {
                input.value = '';
                input.focus();
            }
        }
    }

    // Clear player action input after submission
    if (e.target.id === 'narrative-content') {
        const textarea = document.querySelector('.player-input-textarea');
        if (textarea) {
            textarea.value = '';
            textarea.focus();
        }
    }
});

// Player input: Enter to submit, Shift+Enter for new line
document.addEventListener('keydown', function(e) {
    if (e.target.classList.contains('player-input-textarea')) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            const form = e.target.closest('form');
            if (form && e.target.value.trim()) {
                htmx.trigger(form, 'submit');
            }
        }
    }
});
</script>

<!-- Responsive Modal Navigation -->
<script src="{{ url_for('static', filename='js/responsive-modals.js') }}"></script>
{% endblock %}