{% extends "base.html" %}
{% block title %}Pago | BancaNet{% endblock %}
{% block head %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body.app-body.user-theme:has(.payb-page) {
    background: #ffffff !important;
  }
  body.app-body.user-theme:has(.payb-page) .app-shell {
    max-width: 22.5rem;
    margin: 0 auto;
    padding: 2rem 0.7rem 0.7rem !important;
    background: #ffffff;
  }
  .payb-page {
    --payb-bg-top: #152a2e;
    --payb-bg-bottom: #2a454c;
    --payb-panel: rgba(8, 18, 22, 0.42);
    --payb-line: rgba(255, 255, 255, 0.08);
    --payb-cyan: #4dd0e1;
    --payb-text: #ffffff;
    --payb-muted: rgba(255, 255, 255, 0.72);
    min-height: 38rem;
    max-width: 21.5rem;
    margin: 0 auto;
    border-radius: 1.05rem;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 100%),
      linear-gradient(180deg, var(--payb-bg-top) 0%, var(--payb-bg-bottom) 100%);
    color: var(--payb-text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .payb-page * { box-sizing: border-box; }
  .payb-top {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0.85rem 0.35rem;
  }
  .payb-lang {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.12rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
  }
  .payb-lang button {
    min-width: 1.95rem;
    height: 1.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font: 600 0.66rem Inter, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .payb-lang button.is-on {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
  }
  .payb-hero {
    text-align: center;
    padding: 0.45rem 0.9rem 1.05rem;
  }
  .payb-title {
    margin: 0;
    color: #ffffff;
    font: 700 1.08rem/1.2 Inter, sans-serif;
    letter-spacing: 0.01em;
  }
  .payb-sub {
    margin: 0.35rem 0 0;
    color: var(--payb-muted);
    font: 500 0.8rem/1.25 Inter, sans-serif;
  }
  .payb-amount {
    margin: 0.7rem 0 0;
    color: var(--payb-cyan);
    font: 700 clamp(1.45rem, 6vw, 1.75rem)/1.1 Inter, sans-serif;
    letter-spacing: 0.01em;
  }
  .payb-body {
    padding: 0 0.75rem 1.1rem;
    display: grid;
    gap: 0.85rem;
    flex: 1 1 auto;
    align-content: start;
  }
  .payb-card {
    border-radius: 0.75rem;
    background: var(--payb-panel);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0.85rem 0.85rem 0.7rem;
  }
  .payb-card-title {
    margin: 0 0 0.45rem;
    text-align: center;
    color: #ffffff;
    font: 600 0.9rem/1.2 Inter, sans-serif;
  }
  .payb-row {
    display: grid;
    grid-template-columns: minmax(5.2rem, auto) minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.58rem 0;
    border-top: 1px solid var(--payb-line);
  }
  .payb-row:first-of-type { border-top: 0; }
  .payb-row span {
    color: rgba(255, 255, 255, 0.88);
    font: 500 0.78rem/1.2 Inter, sans-serif;
  }
  .payb-row strong {
    justify-self: end;
    text-align: right;
    color: #ffffff;
    font: 600 0.82rem/1.2 Inter, sans-serif;
    word-break: break-word;
  }
  .payb-copy {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.3rem;
    background: transparent;
    color: var(--payb-cyan);
    cursor: pointer;
    padding: 0;
  }
  .payb-copy svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .payb-row--plain {
    grid-template-columns: minmax(5.2rem, auto) minmax(0, 1fr);
  }
  .payb-steps {
    border-radius: 0.75rem;
    background: var(--payb-panel);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0.85rem 0.9rem 0.95rem;
    display: grid;
    gap: 0.7rem;
  }
  .payb-step {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font: 400 0.72rem/1.4 Inter, sans-serif;
  }
  .payb-step b {
    color: var(--payb-cyan);
    font-weight: 700;
  }
  .payb-toast {
    opacity: 0;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 60;
    transform: translate(-50%, 8px);
    transition: opacity 180ms ease, transform 180ms ease;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #ffffff;
  }
  .payb-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .payb-en .payb-title { letter-spacing: 0; }
</style>
{% endblock %}
{% block content %}
{% set amount_text = "%.2f"|format(amount or 0) %}
{% set bank_name = (recharge_bank_details.bank_name if recharge_bank_details else None) or "TRANSFER" %}
{% set account_holder = (recharge_bank_details.account_holder if recharge_bank_details else None) or "Titular" %}
{% set account_number = (recharge_bank_details.account_number if recharge_bank_details else None) or "" %}
{% set clabe_value = (recharge_bank_details.clabe if recharge_bank_details else None) or account_number or "Fuera de linea por el momento" %}
{% set concept_value = "Pago" %}
{% set current_lang = (lang or 'es')|lower %}

<section class="payb-page{% if current_lang.startswith('en') %} payb-en{% endif %}" id="payb-page" data-lang="{{ 'en' if current_lang.startswith('en') else 'es' }}">
  <div class="payb-top">
    <div class="payb-lang" role="group" aria-label="Idioma">
      <button type="button" class="payb-lang-btn{% if not current_lang.startswith('en') %} is-on{% endif %}" data-lang="es">MX</button>
      <button type="button" class="payb-lang-btn{% if current_lang.startswith('en') %} is-on{% endif %}" data-lang="en">EN</button>
    </div>
  </div>

  <header class="payb-hero">
    <h1 class="payb-title" data-i18n-es="Rastreador de Gastos" data-i18n-en="Expense Tracker">Rastreador de Gastos</h1>
    <p class="payb-sub" data-i18n-es="Monto &amp; Pagar" data-i18n-en="Amount &amp; Pay">Monto &amp; Pagar</p>
    <p class="payb-amount">MXN$ {{ amount_text }}</p>
  </header>

  <div class="payb-body">
    <article class="payb-card">
      <h2 class="payb-card-title" data-i18n-es="Transferencia" data-i18n-en="Transfer">Transferencia</h2>

      <div class="payb-row payb-row--plain">
        <span data-i18n-es="Banco" data-i18n-en="Bank">Banco</span>
        <strong>{{ bank_name }}</strong>
      </div>

      <div class="payb-row">
        <span data-i18n-es="Beneficiarios" data-i18n-en="Beneficiary">Beneficiarios</span>
        <strong>{{ account_holder }}</strong>
        <button type="button" class="payb-copy" data-copy-value="{{ account_holder }}" aria-label="Copiar beneficiario">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <rect x="8" y="8" width="11" height="13" rx="2"></rect>
            <rect x="5" y="3" width="11" height="13" rx="2"></rect>
          </svg>
        </button>
      </div>

      <div class="payb-row payb-row--plain">
        <span data-i18n-es="Concepto" data-i18n-en="Concept">Concepto</span>
        <strong>{{ concept_value }}</strong>
      </div>

      <div class="payb-row">
        <span>CLABE</span>
        <strong>{{ clabe_value }}</strong>
        <button type="button" class="payb-copy" data-copy-value="{{ clabe_value }}" aria-label="Copiar CLABE">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <rect x="8" y="8" width="11" height="13" rx="2"></rect>
            <rect x="5" y="3" width="11" height="13" rx="2"></rect>
          </svg>
        </button>
      </div>
    </article>

    <article class="payb-steps">
      <p class="payb-step" data-step="1">
        <b data-i18n-es="Paso 1:" data-i18n-en="Step 1:">Paso 1:</b>
        <span data-i18n-es=" Copie el CLABE y la información de transferencia." data-i18n-en=" Copy the CLABE and transfer information."> Copie el CLABE y la información de transferencia.</span>
      </p>
      <p class="payb-step" data-step="2">
        <b data-i18n-es="Paso 2:" data-i18n-en="Step 2:">Paso 2:</b>
        <span data-i18n-es=" Ingresa a tu aplicación bancaria, pega el CLABE y la información de transferencia, luego completa el monto de recarga y realiza el pago." data-i18n-en=" Open your banking app, paste the CLABE and transfer details, enter the recharge amount, and complete the payment."> Ingresa a tu aplicación bancaria, pega el CLABE y la información de transferencia, luego completa el monto de recarga y realiza el pago.</span>
      </p>
      <p class="payb-step" data-step="3">
        <b data-i18n-es="Paso 3:" data-i18n-en="Step 3:">Paso 3:</b>
        <span data-i18n-es=" Verifica si el monto ha sido recibido (puede haber un retraso; si aún no lo has recibido, por favor, revisa nuevamente más tarde)." data-i18n-en=" Check whether the amount has been received (there may be a delay; if you have not received it yet, please check again later)."> Verifica si el monto ha sido recibido (puede haber un retraso; si aún no lo has recibido, por favor, revisa nuevamente más tarde).</span>
      </p>
    </article>
  </div>

  <span class="payb-toast">Copiado</span>
</section>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const page = document.getElementById("payb-page");
  const toast = document.querySelector(".payb-toast");
  if (!page) return;

  const applyLang = (lang) => {
    const code = lang === "en" ? "en" : "es";
    page.dataset.lang = code;
    page.classList.toggle("payb-en", code === "en");
    page.querySelectorAll(".payb-lang-btn").forEach((btn) => {
      btn.classList.toggle("is-on", btn.dataset.lang === code);
    });
    page.querySelectorAll("[data-i18n-es]").forEach((el) => {
      const text = code === "en" ? el.getAttribute("data-i18n-en") : el.getAttribute("data-i18n-es");
      if (text != null) el.textContent = text;
    });
    if (toast) toast.textContent = code === "en" ? "Copied" : "Copiado";
  };

  page.querySelectorAll(".payb-lang-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      const next = btn.dataset.lang || "es";
      applyLang(next);
      const csrf = document.querySelector('meta[name="csrf-token"]');
      if (!csrf) return;
      fetch('{{ url_for("user.set_language") }}', {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({
          csrf_token: csrf.content,
          lang: next === "en" ? "en" : "es",
        }),
      }).catch(() => {});
    });
  });

  const showToast = () => {
    if (!toast) return;
    toast.classList.add("is-visible");
    window.clearTimeout(window.__paybToastTimer);
    window.__paybToastTimer = window.setTimeout(() => toast.classList.remove("is-visible"), 1400);
  };

  const copyText = async (value) => {
    try {
      await navigator.clipboard.writeText(value);
      showToast();
    } catch (_) {
      const input = document.createElement("textarea");
      input.value = value;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      input.remove();
      showToast();
    }
  };

  page.querySelectorAll(".payb-copy[data-copy-value]").forEach((button) => {
    button.addEventListener("click", () => {
      const value = (button.dataset.copyValue || "").trim();
      if (!value || value === "Fuera de linea por el momento" || value === "Sin registrar") return;
      copyText(value);
    });
  });
})();
</script>
{% endblock %}