{% extends 'base.html' %}

{% block title %}⚡ Mis Reglas de Alerta{% endblock %}

{% block extra_head %}
<style>
  /* ── Variables ── */
  :root {
    --accent: #f5a623;
    --accent-dim: rgba(245, 166, 35, 0.15);
    --card-bg: #1a1a2e;
    --card-border: rgba(245, 166, 35, 0.2);
    --text-muted: #8a8a9a;
    --danger: #e74c3c;
    --success: #2ecc71;
  }

  body.dark-mode {
    --card-bg: #1a1a2e;
  }

  /* ── Page Layout ── */
  .wh-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
  }

  .wh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .wh-title {
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* ── Rule Cards ── */
  .rule-card {
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    background: var(--card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
  }

  body:not(.dark-mode) .rule-card {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .rule-card.inactive {
    opacity: 0.55;
  }

  .rule-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.12);
  }

  .rule-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .rule-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .badge-symbol {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
  }

  .badge-vertical {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
  }

  .badge-ic {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
  }

  .badge-risk {
    background: rgba(245, 166, 35, 0.15);
    color: #f5a623;
  }

  .rule-url {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: monospace;
    margin-top: 0.5rem;
    word-break: break-all;
  }

  .rule-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .rule-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
  }

  /* ── Form ── */
  .rule-form-card {
    border: 1px dashed var(--accent);
    border-radius: 12px;
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    background: var(--accent-dim);
  }

  body:not(.dark-mode) .rule-form-card {
    background: #fffbf0;
    border-color: #f5a623;
  }

  .rule-form-card .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
  }

  .rule-form-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* ── Empty state ── */
  .wh-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
  }

  .wh-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  /* ── Toggle switch inline ── */
  .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
  }
</style>
{% endblock %}

{% block content %}
<div class="wh-page">

  <!-- Header -->
  <div class="wh-header">
    <div class="wh-title">
      ⚡ {{ _('Mis Reglas de Alerta') }}
      <span class="badge bg-secondary ms-1" style="font-size:0.7rem;">{{ reglas|length }}</span>
    </div>
    <button class="btn btn-warning fw-semibold btn-sm" id="btnNuevaRegla">
      <i class="bi bi-plus-lg me-1"></i>{{ _('Nueva Regla') }}
    </button>
  </div>

  <!-- Formulario nueva/editar regla (oculto por defecto) -->
  <div class="rule-form-card d-none" id="ruleFormCard">
    <div class="rule-form-title">
      <i class="bi bi-pencil-square"></i>
      <span id="ruleFormTitle">{{ _('Nueva Regla') }}</span>
    </div>
    <input type="hidden" id="editRuleId" value="">
    <div class="row g-3">
      <div class="col-md-4">
        <label class="form-label">{{ _('Símbolo') }}</label>
        <select class="form-select form-select-sm" id="fSymbol">
          <option value="SPX">SPX</option>
          <option value="SPY">SPY</option>
          <option value="QQQ">QQQ</option>
          <option value="RUT">RUT</option>
          <option value="XSP">XSP</option>
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label">{{ _('Estrategia') }}</label>
        <select class="form-select form-select-sm" id="fStrategy">
          <option value="VERTICAL">Vertical</option>
          <option value="IRON_CONDOR">Iron Condor</option>
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label">{{ _('Nivel de Riesgo') }}</label>
        <select class="form-select form-select-sm" id="fRiskLevel">
          <option value="conservador">{{ _('Conservador') }}</option>
          <option value="intermedio">{{ _('Intermedio') }}</option>
          <option value="agresivo">{{ _('Agresivo') }}</option>
          <option value="ultra_agresivo">{{ _('Ultra Agresivo') }}</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label">{{ _('Crédito') }}</label>
        <select class="form-select form-select-sm" id="fCreditType" onchange="toggleCreditInput()">
          <option value="system">Credit BTM</option>
          <option value="minimum">Credit Limit</option>
        </select>
      </div>
      <div class="col-md-3" id="fMinCreditWrapper" style="display:none;">
        <label class="form-label">{{ _('Limit Price') }}</label>
        <input type="number" step="0.01" min="0" class="form-control form-control-sm" id="fMinCredit"
            placeholder="ej: 1.20">
      </div>
      <div class="col-md-2">
        <label class="form-label">{{ _('Contratos') }}</label>
        <input type="number" min="1" step="1" class="form-control form-control-sm" id="fQuantity" placeholder="1"
            value="1">
      </div>
      <div class="col-md-3">
        <label class="form-label">{{ _('Hora de entrada') }}</label>
        <select class="form-select form-select-sm" id="fTimeFrom" style="max-width:160px;">
          <option value="btm">⭐ Mejor horario BTM</option>
          {% for t in ['10:05','10:10','10:15','10:20','10:25','10:30','10:35','10:40','10:45','10:50','10:55',
          '11:00','11:05','11:10','11:15','11:20','11:25','11:30','11:35','11:40','11:45','11:50','11:55',
          '12:00','12:05','12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55',
          '13:00','13:05','13:10','13:15','13:20','13:25','13:30','13:35','13:40','13:45','13:50','13:55',
          '14:00','14:05','14:10','14:15','14:20','14:25','14:30','14:35','14:40','14:45','14:50','14:55',
          '15:00'] %}
          <option value="{{ t }}">{{ t }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-12">
        <label class="form-label">{{ _('Webhook URL') }} <span class="text-danger">*</span></label>
        <input type="url" class="form-control form-control-sm" id="fWebhookUrl"
            placeholder="https://hooks.zapier.com/...">
      </div>
      <div class="col-12">
        <label class="form-label">{{ _('Secret') }} <span class="text-muted fw-normal">({{ _('opcional, para verificar
            el payload') }})</span></label>
        <input type="text" class="form-control form-control-sm" id="fWebhookSecret" placeholder="mi_clave_secreta">
      </div>
    </div>
    <div class="d-flex gap-2 mt-3">
      <button class="btn btn-warning btn-sm fw-semibold" id="btnGuardarRegla">
        <i class="bi bi-save me-1"></i>{{ _('Guardar') }}
      </button>
      <button class="btn btn-outline-secondary btn-sm" id="btnCancelarForm">
        {{ _('Cancelar') }}
      </button>
    </div>
  </div>

  <!-- Lista de reglas -->
  <div id="rulesList">
    {% if reglas %}
    {% for rule in reglas %}
    <div class="rule-card {% if not rule.active %}inactive{% endif %}" id="ruleCard-{{ rule.id }}"
        data-rule='{{ rule.to_dict() | tojson }}'>
      <div class="rule-card-header">
        <span class="rule-badge badge-symbol">{{ rule.symbol }}</span>
        <span class="rule-badge {% if rule.strategy == 'VERTICAL' %}badge-vertical{% else %}badge-ic{% endif %}">
          {{ rule.strategy.replace('_', ' ') }}
        </span>
        <span class="rule-badge badge-risk">{{ rule.risk_level.replace('_', ' ').title() }}</span>
        <span class="ms-auto">
          <div class="form-check form-switch mb-0">
            <input class="form-check-input toggle-rule" type="checkbox" role="switch" data-id="{{ rule.id }}" {% if
                rule.active %}checked{% endif %}>
          </div>
        </span>
      </div>
      <div class="rule-meta">
        {% if rule.min_credit %}
        <span><i class="bi bi-currency-dollar"></i> {{ _('Crédito') }} ≥ {{ rule.min_credit }}</span>
        {% endif %}
        {% if rule.time_from and rule.time_to %}
        <span><i class="bi bi-clock"></i> {{ rule.time_from }} – {{ rule.time_to }} NY</span>
        {% endif %}
        {% if rule.last_fired_at %}
        <span><i class="bi bi-send-check"></i> {{ _('Último disparo') }}: {{ rule.last_fired_at.strftime('%d/%m %H:%M')
          }}</span>
        {% endif %}
      </div>
      <div class="rule-url">
        <i class="bi bi-link-45deg"></i> {{ rule.webhook_url[:60] }}{% if rule.webhook_url|length > 60 %}...{% endif %}
      </div>
      <div class="rule-actions">
        <button class="btn btn-outline-secondary btn-sm btn-edit-rule" data-id="{{ rule.id }}">
          <i class="bi bi-pencil me-1"></i>{{ _('Editar') }}
        </button>
        <button class="btn btn-outline-danger btn-sm btn-delete-rule" data-id="{{ rule.id }}">
          <i class="bi bi-trash me-1"></i>{{ _('Eliminar') }}
        </button>
      </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="wh-empty" id="emptyState">
      <div class="wh-empty-icon">⚡</div>
      <p class="fw-semibold">{{ _('No tenés reglas configuradas todavía') }}</p>
      <p class="small">{{ _('Creá tu primera regla para empezar a recibir alertas automáticas.') }}</p>
    </div>
    {% endif %}
  </div>

</div>

<!-- Modal confirmar eliminación -->
<div class="modal fade" id="modalDeleteRule" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h6 class="modal-title">{{ _('Eliminar regla') }}</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="small">{{ _('¿Seguro? Esta acción no se puede deshacer.') }}</p>
      </div>
      <div class="modal-footer border-0">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ _('Cancelar') }}</button>
        <button class="btn btn-danger btn-sm" id="btnConfirmDelete">{{ _('Eliminar') }}</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    initThemeToggle();

    const CSRF = '{{ csrf_token() }}';
    let deleteTargetId = null;
    let editMode = false;

    // ── Mostrar formulario nueva regla ──────────────────────
    document.getElementById('btnNuevaRegla').addEventListener('click', () => {
      editMode = false;
      document.getElementById('editRuleId').value = '';
      document.getElementById('ruleFormTitle').textContent = '{{ _("Nueva Regla") }}';
      clearForm();
      document.getElementById('ruleFormCard').classList.remove('d-none');
      document.getElementById('ruleFormCard').scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    document.getElementById('btnCancelarForm').addEventListener('click', () => {
      document.getElementById('ruleFormCard').classList.add('d-none');
      clearForm();
    });

    // ── Guardar (crear o editar) ────────────────────────────
    document.getElementById('btnGuardarRegla').addEventListener('click', async () => {
      const url = document.getElementById('fWebhookUrl').value.trim();

      const creditType = document.getElementById('fCreditType').value;
      const payload = {
        symbol: document.getElementById('fSymbol').value,
        strategy: document.getElementById('fStrategy').value,
        risk_level: document.getElementById('fRiskLevel').value,
        limit_price: creditType === 'minimum' ? (document.getElementById('fMinCredit').value || null) : null,
        quantity: parseInt(document.getElementById('fQuantity').value) || 1,
        time_from: document.getElementById('fTimeFrom').value || null,
        time_to: null,
        webhook_url: url,
        webhook_secret: document.getElementById('fWebhookSecret').value || null,
        active: true,
      };

      const ruleId = document.getElementById('editRuleId').value;
      const endpoint = ruleId
        ? `/webhooks/reglas/${ruleId}/editar`
        : '/webhooks/reglas/crear';

      const btn = document.getElementById('btnGuardarRegla');
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ _("Guardando...") }}';

      try {
        const res = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
          body: JSON.stringify(payload)
        });
        const data = await res.json();
        if (data.ok) {
          window.location.reload();
        } else {
          alert('Error: ' + (data.error || 'unknown'));
        }
      } catch (e) {
        alert('{{ _("Error de conexión") }}');
      } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-save me-1"></i>{{ _("Guardar") }}';
      }
    });

    // ── Editar regla ────────────────────────────────────────
    document.querySelectorAll('.btn-edit-rule').forEach(btn => {
      btn.addEventListener('click', () => {
        const card = document.getElementById('ruleCard-' + btn.dataset.id);
        const rule = JSON.parse(card.dataset.rule);
        editMode = true;
        document.getElementById('editRuleId').value = rule.id;
        document.getElementById('ruleFormTitle').textContent = '{{ _("Editar Regla") }}';
        document.getElementById('fSymbol').value = rule.symbol;
        document.getElementById('fStrategy').value = rule.strategy;
        document.getElementById('fRiskLevel').value = rule.risk_level;
        // Crédito
        if (rule.limit_price) {
          document.getElementById('fCreditType').value = 'minimum';
          document.getElementById('fMinCredit').value = rule.limit_price;
          document.getElementById('fMinCreditWrapper').style.display = 'block';
        } else {
          document.getElementById('fCreditType').value = 'system';
          document.getElementById('fMinCredit').value = '';
          document.getElementById('fMinCreditWrapper').style.display = 'none';
        }
        document.getElementById('fQuantity').value = rule.quantity || 1;
        document.getElementById('fTimeFrom').value = rule.time_from || '';
        document.getElementById('fWebhookUrl').value = rule.webhook_url;
        document.getElementById('fWebhookSecret').value = '';
        document.getElementById('ruleFormCard').classList.remove('d-none');
        document.getElementById('ruleFormCard').scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    });

    // ── Eliminar regla ──────────────────────────────────────
    document.querySelectorAll('.btn-delete-rule').forEach(btn => {
      btn.addEventListener('click', () => {
        deleteTargetId = btn.dataset.id;
        new bootstrap.Modal(document.getElementById('modalDeleteRule')).show();
      });
    });

    document.getElementById('btnConfirmDelete').addEventListener('click', async () => {
      if (!deleteTargetId) return;
      try {
        const res = await fetch(`/webhooks/reglas/${deleteTargetId}/eliminar`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF }
        });
        const data = await res.json();
        if (data.ok) window.location.reload();
        else alert('Error: ' + data.error);
      } catch (e) {
        alert('{{ _("Error de conexión") }}');
      }
    });

    // ── Toggle activo/inactivo ──────────────────────────────
    document.querySelectorAll('.toggle-rule').forEach(toggle => {
      toggle.addEventListener('change', async () => {
        const ruleId = toggle.dataset.id;
        try {
          const res = await fetch(`/webhooks/reglas/${ruleId}/toggle`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF }
          });
          const data = await res.json();
          if (data.ok) {
            const card = document.getElementById('ruleCard-' + ruleId);
            card.classList.toggle('inactive', !data.active);
          } else {
            toggle.checked = !toggle.checked; // revertir
          }
        } catch (e) {
          toggle.checked = !toggle.checked;
        }
      });
    });

    function clearForm() {
      ['fSymbol', 'fStrategy', 'fRiskLevel', 'fCreditType', 'fTimeFrom'].forEach(id => {
        document.getElementById(id).selectedIndex = 0;
      });
      ['fMinCredit', 'fQuantity', 'fWebhookUrl', 'fWebhookSecret'].forEach(id => {
        document.getElementById(id).value = '';
      });
      document.getElementById('fMinCreditWrapper').style.display = 'none';
      document.getElementById('fMinCredit').value = '';
      document.getElementById('fQuantity').value = '1';
      document.getElementById('editRuleId').value = '';
    }

  });

  // ── Global: toggle credit input ─────────────────────────
  function toggleCreditInput() {
    const type = document.getElementById('fCreditType').value;
    const wrapper = document.getElementById('fMinCreditWrapper');
    const input = document.getElementById('fMinCredit');
    if (type === 'minimum') {
      wrapper.style.display = 'block';
      input.focus();
    } else {
      wrapper.style.display = 'none';
      input.value = '';
    }
  }
</script>
{% endblock %}