{% extends "base.html" %}

{% block title %}Story 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;
    }

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

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

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

    .character-select {
        width: 100%;
        padding: 0.75rem;
        background: #2a2a3a;
        border: 1px solid #4a4a5a;
        border-radius: 6px;
        color: white;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .btn-create {
        background: #10b981;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
    }

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

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

    .session-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .session-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: #2a2a3a;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }

    .session-item a {
        color: #60a5fa;
        text-decoration: none;
    }

    .session-item a:hover {
        text-decoration: underline;
    }

    .session-meta {
        color: #9ca3af;
        font-size: 0.85rem;
    }

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

    .no-characters {
        color: #9ca3af;
        text-align: center;
        padding: 2rem;
    }

    .no-characters a {
        color: #60a5fa;
    }

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

    .success {
        background: #065f46;
        color: #a7f3d0;
        padding: 1rem;
        border-radius: 6px;
    }
</style>
{% endblock %}

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

<div class="story-container">
    <h1>Story System Tester</h1>
    <p style="color: #9ca3af;"><a href="{{ url_for('dev.index') }}" style="color: #60a5fa;">&larr; Back to Dev Tools</a></p>

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

    <div class="story-section">
        <h2>Create New Session</h2>

        {% if characters %}
        <form hx-post="{{ url_for('dev.create_session') }}"
              hx-target="#create-result"
              hx-swap="innerHTML">
            <select name="character_id" class="character-select" required>
                <option value="">-- Select a Character --</option>
                {% for char in characters %}
                <option value="{{ char.character_id }}">
                    {{ char.name }} ({{ char.class_name }} Lvl {{ char.level }})
                </option>
                {% endfor %}
            </select>

            <button type="submit" class="btn-create">
                Create Story Session
            </button>
        </form>
        <div id="create-result"></div>
        {% else %}
        <div class="no-characters">
            <p>No characters found. <a href="{{ url_for('character_views.create_origin') }}">Create a character</a> first.</p>
        </div>
        {% endif %}
    </div>

    <div class="story-section">
        <h2>Existing Sessions</h2>

        {% if sessions %}
        <ul class="session-list">
            {% for session in sessions %}
            <li class="session-item">
                <div>
                    <a href="{{ url_for('dev.story_session', session_id=session.session_id) }}">
                        Session {{ session.session_id[:8] }}...
                    </a>
                    <div class="session-meta">
                        Turn {{ session.turn_number }} | {{ session.game_state.current_location }}
                    </div>
                </div>
                <span class="session-meta">
                    {{ session.character_id[:8] }}...
                </span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p style="color: #9ca3af; text-align: center;">No active sessions. Create one above.</p>
        {% endif %}
    </div>
</div>
{% endblock %}