{% extends "base.html" %}

{% block title %}Combat Tester - Dev Tools{% endblock %}

{% block extra_head %}
<style>
    .dev-banner {
        background: #dc2626;
        color: white;
        padding: 0.5rem 1rem;
        text-align: center;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .combat-hub {
        max-width: 900px;
        margin: 2rem auto;
        padding: 0 1rem;
    }

    .dev-section {
        background: rgba(30, 30, 40, 0.9);
        border: 1px solid #4a4a5a;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .dev-section h2 {
        color: #f59e0b;
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        border-bottom: 1px solid #4a4a5a;
        padding-bottom: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        display: block;
        color: #9ca3af;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
    }

    .form-select {
        width: 100%;
        padding: 0.75rem;
        background: #1a1a2a;
        border: 1px solid #4a4a5a;
        border-radius: 6px;
        color: #e5e7eb;
        font-size: 1rem;
    }

    .form-select:focus {
        outline: none;
        border-color: #f59e0b;
    }

    .enemy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .enemy-option {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        background: #2a2a3a;
        border: 1px solid #4a4a5a;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .enemy-option:hover {
        background: #3a3a4a;
        border-color: #5a5a6a;
    }

    .enemy-option.selected {
        background: #3b3b5b;
        border-color: #f59e0b;
    }

    .enemy-option input[type="checkbox"] {
        margin-right: 0.75rem;
        width: 18px;
        height: 18px;
        accent-color: #f59e0b;
    }

    .enemy-info {
        flex: 1;
    }

    .enemy-name {
        color: #e5e7eb;
        font-weight: 500;
    }

    .enemy-level {
        color: #9ca3af;
        font-size: 0.8rem;
    }

    .btn-start {
        width: 100%;
        padding: 1rem;
        background: #10b981;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

    .btn-start:hover {
        background: #059669;
    }

    .btn-start:disabled {
        background: #4a4a5a;
        cursor: not-allowed;
    }

    #create-result {
        margin-top: 1rem;
    }

    .session-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .session-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: #2a2a3a;
        border: 1px solid #4a4a5a;
        border-radius: 6px;
    }

    .session-info {
        flex: 1;
    }

    .session-id {
        color: #f59e0b;
        font-family: monospace;
        font-size: 0.85rem;
    }

    .session-character {
        color: #e5e7eb;
        font-weight: 500;
    }

    .session-status {
        color: #10b981;
        font-size: 0.85rem;
    }

    .btn-resume {
        padding: 0.5rem 1rem;
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .btn-resume:hover {
        background: #2563eb;
    }

    .empty-state {
        text-align: center;
        color: #6b7280;
        padding: 2rem;
        font-style: italic;
    }

    .error {
        background: #7f1d1d;
        color: #fecaca;
        padding: 0.75rem;
        border-radius: 6px;
        margin-bottom: 1rem;
    }

    .success {
        background: #064e3b;
        color: #a7f3d0;
        padding: 0.75rem;
        border-radius: 6px;
    }

    .back-link {
        display: inline-block;
        margin-bottom: 1rem;
        color: #60a5fa;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .back-link:hover {
        text-decoration: underline;
    }

    .helper-text {
        color: #9ca3af;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dev-banner">
    DEV MODE - Combat System Tester
</div>

<div class="combat-hub">
    <a href="{{ url_for('dev.index') }}" class="back-link">&larr; Back to Dev Tools</a>

    {% if error %}
    <div class="error">{{ error }}</div>
    {% endif %}

    <!-- Start New Combat -->
    <div class="dev-section">
        <h2>Start New Combat</h2>

        <form hx-post="{{ url_for('dev.start_combat') }}"
              hx-target="#create-result"
              hx-swap="innerHTML">

            <!-- Session Selection -->
            <div class="form-group">
                <label class="form-label">Select Session (must have a character)</label>
                <select name="session_id" class="form-select" required>
                    <option value="">-- Select a session --</option>
                    {% for char in characters %}
                    <option value="{{ char.session_id if char.session_id else '' }}"
                            {% if not char.session_id %}disabled{% endif %}>
                        {{ char.name }} ({{ char.class_name }} Lv.{{ char.level }})
                        {% if not char.session_id %} - No active session{% endif %}
                    </option>
                    {% endfor %}
                </select>
                <p class="helper-text">You need an active story session to start combat. Create one in the Story Tester first.</p>
            </div>

            <!-- Enemy Selection -->
            <div class="form-group">
                <label class="form-label">Select Enemies (check multiple for group encounter)</label>
                {% if enemies %}
                <div class="enemy-grid">
                    {% for enemy in enemies %}
                    <label class="enemy-option" onclick="this.classList.toggle('selected')">
                        <input type="checkbox" name="enemy_ids" value="{{ enemy.enemy_id }}">
                        <div class="enemy-info">
                            <div class="enemy-name">{{ enemy.name }}</div>
                            <div class="enemy-level">{{ enemy.difficulty | capitalize }} · {{ enemy.experience_reward }} XP</div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    No enemy templates available. Check that the API has enemy data loaded.
                </div>
                {% endif %}
            </div>

            <button type="submit" class="btn-start" {% if not enemies %}disabled{% endif %}>
                Start Combat
            </button>
        </form>

        <div id="create-result"></div>
    </div>

    <!-- Active Combat Sessions -->
    <div class="dev-section">
        <h2>Active Combat Sessions</h2>

        {% if sessions_in_combat %}
        <div class="session-list">
            {% for session in sessions_in_combat %}
            <div class="session-card">
                <div class="session-info">
                    <div class="session-id">{{ session.session_id[:12] }}...</div>
                    <div class="session-character">{{ session.character_name or 'Unknown Character' }}</div>
                    <div class="session-status">In Combat - Round {{ session.game_state.combat_round or 1 }}</div>
                </div>
                <a href="{{ url_for('dev.combat_session', session_id=session.session_id) }}" class="btn-resume">
                    Resume Combat
                </a>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            No active combat sessions. Start a new combat above.
        </div>
        {% endif %}
    </div>
</div>

<script>
// Toggle selected state on checkbox change
document.querySelectorAll('.enemy-option input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        this.closest('.enemy-option').classList.toggle('selected', this.checked);
    });
});
</script>
{% endblock %}