{% extends "layouts/base.html" %}
{% load i18n static l10n %}
{% load itens_extras %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'marketplace/css/marketplace.css' %}?v=1.0">
<link rel="stylesheet" href="{% static 'marketplace/css/character_profile.css' %}?v=1.0">
{% endblock %}

{% block content %}
<div class="reports-container character-profile-page">
  <div class="container">
    <!-- Header -->
    <div class="marketplace-header">
      <div class="marketplace-header-icon">
        <i class="fas fa-user-ninja"></i>
      </div>
      <h1 class="marketplace-title">{{ transfer.char_name }}</h1>
      <p class="marketplace-subtitle">
        {% trans "Level" %} {{ transfer.char_level }} • {{ transfer.class_name }}
        {% if has_l2_data and transfer.clan_name %}
          • {% trans "Clã" %}: {{ transfer.clan_name }}
        {% endif %}
      </p>
    </div>

    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a>
        </li>
        <li class="breadcrumb-item">
          <a href="{% url 'marketplace:list' %}">{% trans "Marketplace" %}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ transfer.char_name }}</li>
      </ol>
    </nav>

    <div class="row">
      <!-- Coluna principal: Status, Equipamento, Inventário, Timeline -->
      <div class="col-lg-8">
        <!-- Estatísticas e status do personagem -->
        <div class="reports-card mb-4">
          <div class="reports-card-header">
            <i class="fas fa-chart-bar reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Status do Personagem" %}</h2>
            <p class="reports-card-description">{% trans "Informações e estatísticas do jogo" %}</p>
          </div>
          <div class="reports-card-body">
            <div class="character-detail-grid">
              <div class="detail-item">
                <span class="detail-label">{% trans "Nome" %}:</span>
                <span class="detail-value">{{ transfer.char_name }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">{% trans "Level" %}:</span>
                <span class="detail-value">{{ transfer.char_level }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">{% trans "Classe" %}:</span>
                <span class="detail-value">{{ transfer.class_name }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">{% trans "PvP" %}:</span>
                <span class="detail-value">{{ transfer.pvp_kills|default:"0" }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">{% trans "PK" %}:</span>
                <span class="detail-value">{{ transfer.pk_count|default:"0" }}</span>
              </div>
              {% if has_l2_data and transfer.clan_name %}
              <div class="detail-item">
                <span class="detail-label">{% trans "Clã" %}:</span>
                <span class="detail-value">{{ transfer.clan_name }}</span>
              </div>
              {% endif %}
              {% if has_l2_data and transfer.last_access %}
              <div class="detail-item">
                <span class="detail-label">{% trans "Último acesso" %}:</span>
                <span class="detail-value character-last-access">{{ transfer.last_access }}</span>
              </div>
              {% endif %}
              <div class="detail-item">
                <span class="detail-label">{% trans "Status" %}:</span>
                <span class="detail-value">
                  <span class="status-badge status-{{ transfer.status }}">
                    {{ transfer.get_status_display }}
                  </span>
                </span>
              </div>
            </div>

            {% if transfer.notes %}
            <div class="character-notes mt-3">
              <h4><i class="fas fa-comment-dots me-2"></i>{% trans "Observações do vendedor" %}</h4>
              <p>{{ transfer.notes }}</p>
            </div>
            {% endif %}
          </div>
        </div>

        {% if has_l2_data %}
        <!-- Equipamento (paperdoll) -->
        <div class="reports-card mb-4">
          <div class="reports-card-header">
            <i class="fas fa-vest reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Equipamento" %}</h2>
            <p class="reports-card-description">{% trans "Itens equipados no personagem" %}</p>
          </div>
          <div class="reports-card-body">
            {% if equipment %}
            <div class="character-equipment-grid">
              {% for item in equipment %}
              <div class="equipment-item" title="{{ item.item_name|default:'' }} {% if item.enchant_level %}+{{ item.enchant_level }}{% endif %}">
                <div class="equipment-item-icon">
                  <img src="{% item_image_url item.item_id %}" alt="{{ item.item_name|default:item.item_id }}" loading="lazy">
                  {% if item.enchant_level and item.enchant_level > 0 %}
                  <span class="enchant-badge">+{{ item.enchant_level }}</span>
                  {% endif %}
                </div>
                <div class="equipment-item-name">{% if item.item_name %}{{ item.item_name }}{% else %}Item #{{ item.item_id }}{% endif %}{% if item.count > 1 %} x{{ item.count }}{% endif %}</div>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-muted mb-0">{% trans "Nenhum item equipado ou dados não disponíveis." %}</p>
            {% endif %}
          </div>
        </div>

        <!-- Inventário -->
        <div class="reports-card mb-4">
          <div class="reports-card-header">
            <i class="fas fa-box-open reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Inventário" %}</h2>
            <p class="reports-card-description">{% trans "Itens na mochila do personagem" %} ({{ inventory|length }} {% trans "itens" %})</p>
          </div>
          <div class="reports-card-body">
            {% if inventory %}
            <div class="character-inventory-grid" id="inventory-grid">
              {% for item in inventory %}
              <div class="inventory-item" title="{{ item.item_name|default:'' }} {% if item.enchant_level %}+{{ item.enchant_level }}{% endif %}">
                <div class="inventory-item-icon">
                  <img src="{% item_image_url item.item_id %}" alt="{{ item.item_name|default:item.item_id }}" loading="lazy">
                  {% if item.enchant_level and item.enchant_level > 0 %}
                  <span class="enchant-badge">+{{ item.enchant_level }}</span>
                  {% endif %}
                </div>
                <span class="inventory-item-name">{% if item.item_name %}{{ item.item_name }}{% else %}Item #{{ item.item_id }}{% endif %}</span>
                {% if item.count > 1 %}<span class="inventory-item-count">x{{ item.count }}</span>{% endif %}
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-muted mb-0">{% trans "Inventário vazio ou dados não disponíveis." %}</p>
            {% endif %}
          </div>
        </div>

        <!-- Linha do tempo / Biografia do personagem -->
        <div class="reports-card mb-4">
          <div class="reports-card-header">
            <i class="fas fa-history reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Linha do tempo" %}</h2>
            <p class="reports-card-description">{% trans "Histórico e marcos do personagem no servidor" %}</p>
          </div>
          <div class="reports-card-body">
            <div class="character-timeline">
              {% for event in timeline_events %}
              <div class="timeline-item timeline-item-{{ event.type }}">
                <div class="timeline-marker">
                  <i class="fas {{ event.icon }}"></i>
                </div>
                <div class="timeline-content">
                  <h5 class="timeline-title">{{ event.title }}</h5>
                  <p class="timeline-description mb-0">{{ event.description }}</p>
                  {% if event.date %}
                  <small class="timeline-date text-muted">{{ event.date|date:"d/m/Y H:i" }}</small>
                  {% endif %}
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
        {% else %}
        <div class="reports-card mb-4">
          <div class="reports-card-body">
            <p class="text-muted mb-0">
              <i class="fas fa-info-circle me-2"></i>
              {% trans "Equipamento, inventário e linha do tempo estão disponíveis quando o servidor do jogo está conectado." %}
            </p>
          </div>
        </div>
        {% endif %}

        <!-- Vendedor -->
        <div class="reports-card">
          <div class="reports-card-header">
            <i class="fas fa-user-tag reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Vendedor" %}</h2>
            <p class="reports-card-description">{% trans "Informações do vendedor" %}</p>
          </div>
          <div class="reports-card-body">
            <div class="seller-info">
              <div class="seller-avatar">
                <i class="fas fa-user-circle fa-3x"></i>
              </div>
              <div class="seller-details">
                <h4>{{ transfer.seller.username }}</h4>
                <p class="text-muted">{% trans "Membro desde" %} {{ transfer.seller.date_joined|date:"d/m/Y" }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Coluna lateral: Comprar -->
      <div class="col-lg-4">
        <div class="reports-card sticky-top character-purchase-card">
          <div class="reports-card-header">
            <i class="fas fa-wallet reports-icon"></i>
            <h2 class="reports-card-title">{% trans "Comprar" %}</h2>
            <p class="reports-card-description">{% trans "Informações de compra" %}</p>
          </div>
          <div class="reports-card-body">
            <div class="price-box">
              <span class="price-label">{% trans "Preço" %}</span>
              <div class="price-display">
                <span class="currency">R$</span>
                <span class="price-amount">{{ transfer.price }}</span>
              </div>
            </div>

            <div class="purchase-info mt-3">
              <div class="info-item">
                <i class="fas fa-calendar me-2"></i>
                <span>{% trans "Listado em" %}: {{ transfer.listed_at|date:"d/m/Y" }}</span>
              </div>
            </div>

            {% if transfer.status == 'for_sale' and transfer.seller != request.user %}
            <form method="post" action="{% url 'marketplace:buy' transfer.id %}" class="mt-4">
              {% csrf_token %}
              <button type="submit" class="btn btn-success btn-lg btn-block">
                <i class="fas fa-shopping-cart me-2"></i>{% trans "Comprar Agora" %}
              </button>
            </form>
            {% elif transfer.status == 'for_sale' and transfer.seller == request.user %}
            <div class="alert alert-info mt-4">
              <i class="fas fa-info-circle me-2"></i>
              {% trans "Este é seu personagem" %}
            </div>
            <form method="post" action="{% url 'marketplace:cancel' transfer.id %}" class="mt-2">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger btn-block">
                <i class="fas fa-times-circle me-2"></i>{% trans "Cancelar Venda" %}
              </button>
            </form>
            {% else %}
            <div class="alert alert-secondary mt-4">
              <i class="fas fa-ban me-2"></i>
              {% trans "Este personagem não está mais disponível" %}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="text-center mt-4">
      <a href="{% url 'marketplace:list' %}" class="report-back-button">
        <i class="fas fa-arrow-left me-2"></i>{% trans "Voltar ao Marketplace" %}
      </a>
    </div>
  </div>
</div>
{% endblock %}

{% block extrajs %}
<script src="{% static 'marketplace/js/marketplace.js' %}?v=1.0"></script>
{% endblock %}