{% extends 'base.html' %}
{% block title %}Station MUD{% endblock %}
{% block content %}
<section class="mud-shell" data-mud data-action-url="{{ url_for('mud.perform_action') }}" data-updates-url="{{ url_for('mud.updates') }}" data-disconnect-url="{{ url_for('mud.disconnect') }}" data-csrf="{{ session.csrf_token }}">
  {% if character.creation_state == 'legacy' %}<div class="mud-legacy-notice" role="note">Your existing character can be customized once while keeping levels, inventory, quests, and achievements. <a class="button secondary" href="{{ url_for('mud.create_character') }}">CUSTOMIZE CHARACTER</a></div>{% endif %}
  <header class="mud-header">
    <div>
      <p class="eyebrow">STATION MUD</p>
      <h1>Station MUD</h1>
    </div>
    <div class="mud-header-actions">
      {% if g.mud_can_build %}<a class="button secondary" href="{{ url_for('mud.builder') }}">WORLD BUILDER</a>{% endif %}
      <span class="mud-link-state">FOUNDATION ONLINE</span>
    </div>
  </header>

  <div class="mud-layout">
    <section class="mud-main" aria-label="MUD terminal">
      <section class="mud-room" data-mud-room aria-live="polite" aria-atomic="true">
        <p class="eyebrow">CURRENT LOCATION</p>
        <h2 data-mud-room-name>{{ room.name }}</h2>
        <p data-mud-room-description>{{ room.description }}</p>
        <p class="mud-room-instructions" data-mud-room-instructions {% if not room.instructions %}hidden{% endif %}>{{ room.instructions }}</p>
        <div class="mud-room-facts" aria-label="Room details">
          <p class="mud-room-exits"><span>EXITS</span> <span data-mud-room-exits>{% if room.exits %}{% for exit in room.exits %}{{ exit.direction or exit.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% else %}none{% endif %}</span></p>
          <p class="mud-room-exits"><span>ITEMS</span> <span data-mud-room-items>{% if room['items'] %}{% for item in room['items'] %}{{ item.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% else %}none{% endif %}</span></p>
          <p class="mud-room-exits"><span>NPCS</span> <span data-mud-room-npcs>{% if room.npcs %}{% for npc in room.npcs %}{{ npc.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% else %}none{% endif %}</span></p>
        </div>
        <div class="mud-combat-status" data-mud-combat aria-label="Nearby enemies">
          {% for enemy in combat.enemies %}<article class="mud-enemy {% if enemy.status=='defeated' %}defeated{% endif %}"><span><strong>{{ enemy.name }}</strong><small>{{ enemy.status|upper }}</small></span><progress value="{{ enemy.health }}" max="{{ enemy.maximum_health }}">{{ enemy.health }}/{{ enemy.maximum_health }}</progress><output>{{ enemy.health }} / {{ enemy.maximum_health }} HP</output></article>{% endfor %}
        </div>
        <div class="mud-occupants" data-mud-occupants aria-label="Other players in this room">
          <span>PLAYERS</span>
          <div>{% if room.occupants %}{% for player in room.occupants %}<span class="mud-entity" data-player-id="{{ player.id }}" data-character-id="{{ player.character_id or '' }}">{{ player.character_name or 'Adventurer' }}</span>{% endfor %}{% else %}<span class="muted" data-mud-no-occupants>none</span>{% endif %}</div>
        </div>
      </section>
      <section class="mud-context" aria-labelledby="mud-actions-heading">
        <div class="mud-section-heading"><span id="mud-actions-heading">QUICK ACTIONS</span><small>Context-sensitive</small></div>
        <div class="mud-action-groups" data-mud-actions>
          {% for group in mud_actions|groupby('group') %}
          <div class="mud-action-group" data-action-group="{{ group.grouper }}">
            <span>{{ group.grouper }}</span>
            <div>{% for action in group.list %}<button type="button" class="secondary" data-mud-action="{{ action.key }}" data-mud-parameters='{{ action.parameters|tojson }}' title="{{ action.description }}">{{ action.label }}</button>{% endfor %}</div>
          </div>
          {% endfor %}
        </div>
      </section>

      <details class="mud-history" open>
        <summary><span>EVENT LOG</span><small>Chat, system messages, and history</small></summary>
        <div class="mud-events" data-mud-events role="log" aria-live="polite" aria-label="MUD events">
          <article class="mud-event mud-event-system">
            <span>SYSTEM</span>
            <p>Connected. Use the navigation controls or /help for commands.</p>
          </article>
          {% for event in events %}
          <article class="mud-event mud-event-{{ event.event_type }}" data-event-id="{{ event.id }}">
            <span>{{ event.event_type|upper }}</span><p>{{ event.body }}</p>
          </article>
          {% endfor %}
        </div>
      </details>

      <form class="mud-command" data-mud-command>
        <label for="mud-command-input">ROOM CHAT / COMMAND INPUT</label>
        <div>
          <input id="mud-command-input" name="command" data-command-input maxlength="1000" autocomplete="off" placeholder="Say something, or use /help" aria-describedby="mud-command-help" required>
          <button>SEND</button>
        </div>
        <small id="mud-command-help">Plain text is speech; gameplay commands start with /. Use /combat or /attack &lt;enemy&gt; to fight.</small>
        <span class="mud-error" data-mud-error role="alert"></span>
      </form>
    </section>

    <aside class="mud-sidebar" aria-label="Character information">
      <section class="mud-panel collapsible-panel" data-collapsible-panel data-panel-key="mud-character">
        <button type="button" class="collapsible-panel-toggle" data-panel-toggle aria-expanded="true" aria-controls="mud-character-panel">
          <span class="collapsible-panel-heading"><span class="eyebrow">PLAYER DATA</span><span class="collapsible-panel-title">Character</span></span>
          <span class="collapsible-panel-chevron" aria-hidden="true"></span>
        </button>
        <div id="mud-character-panel" data-panel-content>
          <div class="mud-character-heading">
            <strong data-character-name>{{ character.name }}</strong>
            <span data-character-level>LEVEL {{ character.level }}</span>
          </div>
          <p class="mud-character-track" data-character-track>{{ character.progression_label }}</p>
          <p class="mud-character-origin" data-character-origin>{% if character.race %}{{ character.race }} · {{ character['class'] }}{% endif %}</p>
          <p class="mud-character-skills" data-character-skills>{% for skill in character.skills %}{{ skill.name }} {{ skill.rank }}{% if not loop.last %} · {% endif %}{% endfor %}</p>
          <small data-character-mode>{{ character.mode|title }} mode</small>
          <div class="mud-character-meter">
            <span><span>HEALTH</span><output data-character-health>{{ character.health }} / {{ character.maximum_health }}</output></span>
            <progress data-character-health-bar value="{{ character.health }}" max="{{ character.maximum_health }}">{{ character.health }} / {{ character.maximum_health }}</progress>
          </div>
          <div class="mud-character-meter">
            <span><span>EXPERIENCE</span><output data-character-experience>{{ character.experience_into_level }} / {{ character.experience_for_next_level }}</output></span>
            <progress data-character-experience-bar value="{{ character.experience_into_level }}" max="{{ character.experience_for_next_level }}">{{ character.experience_into_level }} / {{ character.experience_for_next_level }}</progress>
            <small data-character-experience-remaining>{{ character.experience_to_next_level }} XP to next level</small>
          </div>
          <dl class="mud-attributes">
            <div><dt>STR</dt><dd data-character-attribute="strength">{{ character.attributes.strength }}</dd></div>
            <div><dt>AGI</dt><dd data-character-attribute="agility">{{ character.attributes.agility }}</dd></div>
            <div><dt>INT</dt><dd data-character-attribute="intellect">{{ character.attributes.intellect }}</dd></div>
            <div><dt>VIT</dt><dd data-character-attribute="vitality">{{ character.attributes.vitality }}</dd></div>
          </dl>
        </div>
      </section>
      <section class="mud-panel collapsible-panel" data-collapsible-panel data-panel-key="mud-inventory">
        <button type="button" class="collapsible-panel-toggle" data-panel-toggle aria-expanded="false" aria-controls="mud-inventory-panel">
          <span class="collapsible-panel-heading"><span class="eyebrow">POSSESSIONS</span><span class="collapsible-panel-title">Inventory</span></span>
          <span class="collapsible-panel-chevron" aria-hidden="true"></span>
        </button>
        <div id="mud-inventory-panel" data-panel-content hidden>
          <div class="mud-inventory-list" data-mud-inventory>
            <small data-mud-inventory-scope>{{ 'Shared across modes' if inventory.sharing == 'shared' else (inventory.mode|title ~ ' only') }}</small>
            <strong>CARRIED</strong>
            <div data-mud-carried>{% for item in inventory.inventory %}<button type="button" class="secondary" data-mud-action="look" data-mud-parameters='{{ {"target": item.id}|tojson }}'>{{ item.name }}</button>{% else %}<span class="muted">nothing carried</span>{% endfor %}</div>
            <strong>EQUIPPED</strong>
            <div data-mud-equipped>{% for item in inventory.equipment %}<button type="button" class="secondary" data-mud-action="look" data-mud-parameters='{{ {"target": item.id}|tojson }}'>{{ item.equipped_slot|replace('_',' ') }}: {{ item.name }}</button>{% else %}<span class="muted">nothing equipped</span>{% endfor %}</div>
            <small>Click an item to inspect it; its available actions appear in the contextual controls.</small>
          </div>
        </div>
      </section>
      <section class="mud-panel collapsible-panel" data-collapsible-panel data-panel-key="mud-quests">
        <button type="button" class="collapsible-panel-toggle" data-panel-toggle aria-expanded="false" aria-controls="mud-quests-panel">
          <span class="collapsible-panel-heading"><span class="eyebrow">OBJECTIVES</span><span class="collapsible-panel-title">Quests <span data-mud-quest-count>{{ quests.active|length }}</span></span></span>
          <span class="collapsible-panel-chevron" aria-hidden="true"></span>
        </button>
        <div id="mud-quests-panel" data-panel-content hidden>
          <div class="mud-quest-list" data-mud-quests>
            {% for quest in quests.active %}<article><strong>{{ quest.name }}</strong><p>{{ quest.description }}</p><ul>{% for objective in quest.objectives %}<li class="{% if objective.completed_at %}complete{% endif %}">{{ '✓' if objective.completed_at else '·' }} {{ objective.description }} <span>{{ objective.progress }}/{{ objective.required_count }}</span></li>{% endfor %}</ul></article>{% else %}<span class="muted">no active quests</span>{% endfor %}
          </div>
        </div>
      </section>
    </aside>
  </div>
</section>
<script src="{{ url_for('static',filename='mud.js') }}" defer></script>
{% endblock %}