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

{% block extrastyle %}
<style>
.mgr-bg { background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%); min-height: 100vh; padding: 20px 0; }
.card-glow { background: linear-gradient(to bottom right, #1a1a2e, #121220); border: 2px solid #6f42c1; border-radius: 12px; box-shadow: 0 0 15px rgba(111,66,193,.5), 0 0 25px rgba(13,202,240,.3); }
.monster-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin-right: 8px; }

/* Melhorias de Cores */
.card-glow .card-header {
  color: #e2e8f0 !important;
  font-weight: 600;
  font-size: 1rem;
  background: rgba(111, 66, 193, 0.15);
  border-bottom: 1px solid rgba(111, 66, 193, 0.3);
  padding: 0.75rem 1rem !important;
}

.card-glow .card-body label {
  color: #cbd5e0 !important;
  font-weight: 500;
  margin-bottom: 0.25rem;
  display: block;
  font-size: 0.85rem;
}

.card-glow .card-body {
  padding: 1rem !important;
}

.card-glow .card-body input,
.card-glow .card-body select {
  background: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
}

.card-glow .card-body input:focus,
.card-glow .card-body select:focus {
  border-color: #0dcaf0 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.2) !important;
}

.table-dark thead th {
  color: #e2e8f0 !important;
  font-weight: 600;
  background: rgba(13, 202, 240, 0.1) !important;
  border-bottom: 2px solid #0dcaf0 !important;
}

.table-dark tbody td {
  color: #cbd5e0 !important;
  font-weight: 500;
  vertical-align: middle;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-warning:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.btn-outline-danger {
  border: 2px solid #ef4444 !important;
  color: #ef4444 !important;
  background: transparent !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-outline-danger:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: translateY(-2px) !important;
}

.text-white-50 {
  color: #cbd5e0 !important;
}

/* Legenda */
.legend-box {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  border: 1px solid rgba(13, 202, 240, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.legend-title {
  color: #0dcaf0;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-content {
  color: #cbd5e0;
  line-height: 1.5;
  font-size: 0.9rem;
}

.legend-item {
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}

.legend-item:before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #0dcaf0;
  font-weight: bold;
}

.legend-item strong {
  color: #e2e8f0;
  font-weight: 600;
}

.legend-divider {
  border-top: 1px solid rgba(13, 202, 240, 0.2);
  margin: 0.5rem 0;
}

.btn-outline-info {
  border: 2px solid #0dcaf0 !important;
  color: #0dcaf0 !important;
  background: transparent !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-outline-info:hover {
  background: linear-gradient(135deg, #0dcaf0 0%, #0891b2 100%) !important;
  color: #0b132b !important;
  border-color: #0dcaf0 !important;
  transform: translateY(-2px) !important;
}

.form-control-sm {
  background: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
}

.form-control-sm:focus {
  border-color: #0dcaf0 !important;
  box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.2) !important;
}

.form-control-sm::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.table-responsive {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: auto;
}

.table-responsive::-webkit-scrollbar {
  width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(111, 66, 193, 0.5);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 66, 193, 0.8);
}

.monster-img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(111, 66, 193, 0.5);
  transition: all 0.3s ease;
}

.monster-img-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6f42c1 0%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  border: 2px solid rgba(111, 66, 193, 0.5);
}

.monster-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.2;
}

.monster-level {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.1rem;
}

.monster-row {
  transition: all 0.2s ease;
}

.monster-row:hover .monster-img {
  border-color: #0dcaf0;
  transform: scale(1.05);
}

.monster-row:hover .monster-name {
  color: #0dcaf0;
}

.stat-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 50px;
}

.stat-weapon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.stat-fragment {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.stat-respawn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.inline-edit-group {
  position: relative;
  display: inline-block;
}

.inline-edit-input {
  width: 70px;
  background: #2d3748 !important;
  border: 2px solid #4a5568 !important;
  color: #ffffff !important;
  padding: 0.4rem 0.3rem 0.4rem 1.8rem !important;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.inline-edit-input:focus {
  border-color: #0dcaf0 !important;
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.15) !important;
  outline: none;
  background: #374151 !important;
}

.inline-edit-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  pointer-events: none;
}

.btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  padding: 0;
}

.btn-icon-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-icon-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-icon-delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.btn-icon-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.table-dark tbody tr {
  transition: all 0.3s ease;
}

.table-dark tbody tr {
  border-bottom: 1px solid rgba(111, 66, 193, 0.2);
}

.table-dark tbody tr:hover {
  background: rgba(111, 66, 193, 0.15) !important;
}

.table-dark thead th:first-child {
  min-width: 200px;
}

.table-dark thead th {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-dark thead th:nth-child(5) {
  min-width: 300px;
}

.table-dark tbody td {
  padding: 0.5rem 0.75rem !important;
  vertical-align: middle !important;
}

.table-dark thead th {
  padding: 0.75rem !important;
  font-size: 0.9rem;
}

.card-glow .card-body input[type="file"] {
  padding: 0.4rem;
  font-size: 0.85rem;
}

.card-glow .card-body input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, #6f42c1 0%, #a855f7 100%);
  border: none;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: all 0.3s ease;
}

.card-glow .card-body input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, #a855f7 0%, #6f42c1 100%);
  transform: translateY(-1px);
}

@media (max-width: 1200px) {
  .inline-edit-input {
    width: 60px;
  }
  
  .table-dark thead th:nth-child(5) {
    min-width: 280px;
  }
  
  .stat-badge {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}
</style>
{% endblock %}

{% block content %}
<div class="mgr-bg">
  <div class="container-fluid" style="max-width: 1600px; padding: 0 2rem;">
    <div class="d-flex justify-content-between align-items-center mb-3 text-white">
      <h3 class="m-0" style="color: #e2e8f0;">
        <i class="fas fa-gamepad me-2" style="color: #0dcaf0;"></i>
        {% trans "Gerenciar Batalha Mortal" %}
      </h3>
      <a href="{% url 'games:economy-game' %}" class="btn btn-outline-info rounded-pill">
        <i class="fas fa-eye me-1"></i>{% trans "Ver Jogo" %}
      </a>
    </div>

    <div class="row g-2">
      <div class="col-12 col-xl-4">
        <div class="card card-glow mb-2">
          <div class="card-header">
            <i class="fas fa-trophy me-2"></i>{% trans "Nova Recompensa Padrão (+10)" %}
          </div>
          <div class="card-body">
            <form method="post" class="row g-2">
              {% csrf_token %}
              <input type="hidden" name="action" value="set_reward" />
              <div class="col-8">
                <label class="form-label">
                  <i class="fas fa-gift me-2"></i>{{ reward_form.item.label }}
                </label>
                {{ reward_form.item }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-hashtag me-2"></i>{{ reward_form.amount.label }}
                </label>
                {{ reward_form.amount }}
              </div>
              <div class="col-12 text-end">
                <button class="btn btn-warning rounded-pill" type="submit">
                  <i class="fas fa-save me-1"></i>{% trans "Salvar" %}
                </button>
              </div>
            </form>
            {% if reward %}
              <div class="mt-2 p-2 rounded" style="background: rgba(13, 202, 240, 0.1); border-left: 3px solid #0dcaf0;">
                <small style="color: #0dcaf0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem;">
                  <i class="fas fa-check-circle me-1"></i>{% trans "Atual:" %}
                </small>
                <div style="color: #e2e8f0; font-weight: 600; font-size: 0.9rem; margin-top: 0.15rem;">
                  {{ reward.item.name }} +{{ reward.item.enchant }} 
                  <span style="color: #ffc107;">(x{{ reward.amount }})</span>
                </div>
              </div>
            {% endif %}
          </div>
        </div>

        <div class="card card-glow">
          <div class="card-header">
            <i class="fas fa-plus-circle me-2"></i>{% trans "Adicionar Monstro" %}
          </div>
          <div class="card-body">
            <form method="post" enctype="multipart/form-data" class="row g-2">
              {% csrf_token %}
              <input type="hidden" name="action" value="add_monster" />
              <div class="col-12">
                <label class="form-label">
                  <i class="fas fa-signature me-2"></i>{{ monster_form.name.label }}
                </label>
                {{ monster_form.name }}
              </div>
              <div class="col-6">
                <label class="form-label">
                  <i class="fas fa-chart-line me-2"></i>{{ monster_form.level.label }}
                </label>
                {{ monster_form.level }}
              </div>
              <div class="col-6">
                <label class="form-label">
                  <i class="fas fa-sword me-2"></i>{{ monster_form.required_weapon_level.label }}
                </label>
                {{ monster_form.required_weapon_level }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-gem me-2"></i>{{ monster_form.fragment_reward.label }}
                </label>
                {{ monster_form.fragment_reward }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-clock me-2"></i>{{ monster_form.respawn_seconds.label }}
                </label>
                {{ monster_form.respawn_seconds }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-image me-2"></i>{{ monster_form.image.label }}
                </label>
                {{ monster_form.image }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-fist-raised me-2"></i>{{ monster_form.attack.label }}
                </label>
                {{ monster_form.attack }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-shield-alt me-2"></i>{{ monster_form.defense.label }}
                </label>
                {{ monster_form.defense }}
              </div>
              <div class="col-4">
                <label class="form-label">
                  <i class="fas fa-heart me-2"></i>{{ monster_form.hp.label }}
                </label>
                {{ monster_form.hp }}
              </div>
              <div class="col-12 text-end">
                <button class="btn btn-primary" type="submit">
                  <i class="fas fa-plus me-1"></i>{% trans "Adicionar" %}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="col-12 col-xl-8">
        <div class="card card-glow h-100">
          <div class="card-header">
            <i class="fas fa-dragon me-2"></i>{% trans "Monstros" %}
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-dark table-striped mb-0">
                <thead>
                  <tr>
                    <th style="min-width: 200px;">
                      <i class="fas fa-dragon me-2"></i>{% trans "Monstro" %}
                    </th>
                    <th style="width: 90px;" class="text-center">
                      <i class="fas fa-sword me-1"></i>{% trans "Arma" %}
                    </th>
                    <th style="width: 90px;" class="text-center">
                      <i class="fas fa-gem me-1"></i>{% trans "Frag" %}
                    </th>
                    <th style="width: 100px;" class="text-center">
                      <i class="fas fa-clock me-1"></i>{% trans "Tempo" %}
                    </th>
                    <th style="min-width: 300px;" class="text-end">
                      <i class="fas fa-sliders-h me-1"></i>{% trans "Editar" %}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {% for m in monsters %}
                  <tr class="monster-row">
                    <td>
                      <div class="d-flex align-items-center gap-2">
                        {% if m.image %}
                          <img class="monster-img" src="{{ m.image.url }}" alt="" />
                        {% else %}
                          <div class="monster-img-placeholder">
                            <i class="fas fa-dragon"></i>
                          </div>
                        {% endif %}
                        <div>
                          <div class="monster-name">{{ m.name }}</div>
                          <div class="monster-level">
                            <i class="fas fa-chart-line" style="font-size: 0.7rem;"></i> Level {{ m.level }}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="text-center">
                      <span class="stat-badge stat-weapon">+{{ m.required_weapon_level }}</span>
                    </td>
                    <td class="text-center">
                      <span class="stat-badge stat-fragment">{{ m.fragment_reward }}</span>
                    </td>
                    <td class="text-center">
                      <span class="stat-badge stat-respawn">{{ m.respawn_seconds }}s</span>
                    </td>
                    <td class="text-end">
                      <div class="d-flex gap-1 align-items-center justify-content-end">
                        <form method="post" enctype="multipart/form-data" class="d-flex gap-1 align-items-center">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="update_monster" />
                          <input type="hidden" name="monster_id" value="{{ m.id }}" />
                          
                          <div class="inline-edit-group">
                            <input type="number" name="fragment_reward" value="{{ m.fragment_reward }}" class="inline-edit-input" min="1" required title="{% trans 'Fragmentos' %}" />
                            <span class="inline-edit-icon">💎</span>
                          </div>
                          
                          <div class="inline-edit-group">
                            <input type="number" name="respawn_seconds" value="{{ m.respawn_seconds }}" class="inline-edit-input" min="1" required title="{% trans 'Respawn (segundos)' %}" />
                            <span class="inline-edit-icon">⏱️</span>
                          </div>
                          
                          <button class="btn-icon btn-icon-save" type="submit" title="{% trans 'Salvar alterações' %}">
                            <i class="fas fa-check"></i>
                          </button>
                        </form>
                        
                        <form method="post">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="delete_monster" />
                          <input type="hidden" name="monster_id" value="{{ m.id }}" />
                          <button class="btn-icon btn-icon-delete" type="submit" onclick="return confirm('{% trans 'Tem certeza que deseja remover este monstro?' %}')" title="{% trans 'Remover monstro' %}">
                            <i class="fas fa-trash-alt"></i>
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                  {% empty %}
                  <tr>
                    <td colspan="5" class="text-center py-5">
                      <div style="color: #94a3b8;">
                        <i class="fas fa-dragon" style="font-size: 3rem; opacity: 0.3; margin-bottom: 1rem;"></i>
                        <div style="font-size: 1.1rem; font-weight: 500;">{% trans "Nenhum monstro cadastrado." %}</div>
                        <small style="color: #64748b;">{% trans "Use o formulário ao lado para adicionar o primeiro monstro." %}</small>
                      </div>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Legenda Explicativa -->
    <div class="row g-2 mt-2">
      <div class="col-12">
        <div class="card card-glow">
          <div class="card-body">
            <div class="legend-box">
              <div class="legend-title">
                <i class="fas fa-book"></i>
                {% trans "Guia de Parâmetros do Jogo" %}
              </div>
              <div class="legend-content">
                <div class="legend-item">
                  <strong>{% trans "Nome:" %}</strong> {% trans "Nome do monstro que aparecerá no jogo." %}
                </div>
                
                <div class="legend-item">
                  <strong>{% trans "Level:" %}</strong> {% trans "Nível do monstro. Monstros de nível mais alto são mais difíceis de derrotar." %}
                </div>
                
                <div class="legend-item">
                  <strong>{% trans "Required Weapon Level (+Arma):" %}</strong> {% trans "Nível mínimo de encantamento da arma necessário para o jogador poder batalhar contra este monstro. Por exemplo, '+5' significa que o jogador precisa ter uma arma +5 ou superior." %}
                </div>
                
                <div class="legend-divider"></div>
                
                <div class="legend-item">
                  <strong>{% trans "Fragment Reward (Frag):" %}</strong> {% trans "Quantidade de fragmentos que o jogador recebe ao derrotar o monstro. Fragmentos são usados para encantar armas no jogo." %}
                </div>
                
                <div class="legend-item">
                  <strong>{% trans "Respawn Time (segundos):" %}</strong> {% trans "Tempo em segundos que o monstro leva para reaparecer após ser derrotado. Por exemplo, '60' significa que o monstro reaparecerá após 1 minuto." %}
                </div>
                
                <div class="legend-divider"></div>
                
                <div class="legend-item">
                  <strong>{% trans "Attack:" %}</strong> {% trans "Poder de ataque do monstro. Quanto maior, mais dano ele causa no jogador." %}
                </div>
                
                <div class="legend-item">
                  <strong>{% trans "Defense:" %}</strong> {% trans "Defesa do monstro. Quanto maior, mais difícil é derrotá-lo." %}
                </div>
                
                <div class="legend-item">
                  <strong>{% trans "HP:" %}</strong> {% trans "Pontos de vida do monstro. Determina quanto dano o monstro pode receber antes de ser derrotado." %}
                </div>
                
                <div class="legend-divider"></div>
                
                <div class="legend-item">
                  <strong>{% trans "Recompensa Padrão (+10):" %}</strong> {% trans "Item e quantidade que o jogador recebe automaticamente quando sua arma atinge o encantamento +10. Esta é uma recompensa especial de conquista." %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}