{% extends 'base.html' %}

{% block title %}
{{ _('Registro') }} - {{ _('BackTestingMarket') }}
{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="card-title text-center mb-4">{{ _('Crea tu cuenta') }}</h2>

          <!-- Formulario de registro -->
          <form method="POST" action="{{ url_for('register') }}" id="registerForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <!-- Nombre de usuario -->
            <div class="mb-3">
              <label for="username" class="form-label">{{ _('Nombre y apellido') }}</label>
              <input type="text" class="form-control" id="username" name="username" value="{{ username or '' }}"
                  placeholder="{{ _('Ingresa tu nombre y apellido') }}" required>
            </div>

            <!-- Correo electrónico -->
            <div class="mb-3">
              <label for="email" class="form-label">{{ _('Correo electrónico') }}</label>
              <input type="email" class="form-control" id="email" name="email" value="{{ email or '' }}"
                  placeholder="{{ _('Ingresa tu correo electrónico') }}" required>
            </div>

            <!-- Contraseña (input+ojo a la izquierda, medidor a la derecha) -->
            <div class="mb-3">
              <label for="password" class="form-label">{{ _('Contraseña') }}</label>

              <div class="password-row">
                <!-- izquierda -->
                <div class="password-left input-group">
                  <input type="password" class="form-control" id="password" name="password"
                      placeholder="{{ _('Ingresa tu contraseña') }}" value="{{ password or '' }}"
                      autocomplete="new-password" required aria-describedby="passwordHelp passwordStrengthText">
                  <button class="btn btn-outline-secondary" type="button" id="togglePwdBtn"
                      aria-label="{{ _('Mostrar/Ocultar contraseña') }}">
                    <i class="fa-regular fa-eye" aria-hidden="true"></i>
                  </button>
                </div>

                <!-- derecha: medidor compacto -->
                <div class="strength-inline" aria-hidden="true" title="{{ _('Fortaleza de contraseña') }}">
                  <div class="progress strength-inline-bar">
                    <div id="passwordStrengthInlineBar" class="progress-bar" style="width:0%"></div>
                  </div>
                  <small id="passwordStrengthText" class="strength-inline-text"></small>
                </div>
              </div>

              <!-- <div id="passwordHelp" class="form-text mt-1">
                {{ _('Mínimo 8 caracteres, incluye mayúscula, minúscula, número y símbolo.') }}
              </div> -->
            </div>

            <!-- Confirmar Contraseña -->
            <div class="mb-3">
              <label for="confirm_password" class="form-label">{{ _('Confirmar Contraseña') }}</label>

              <div class="password-row">
                <div class="password-left input-group">
                  <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                      placeholder="{{ _('Confirma tu contraseña') }}" value="{{ confirm_password or '' }}"
                      autocomplete="new-password" required aria-describedby="confirmFeedback">
                  <button class="btn btn-outline-secondary" type="button" id="toggleConfirmBtn"
                      aria-label="{{ _('Mostrar/Ocultar confirmación') }}">
                    <i class="fa-regular fa-eye" aria-hidden="true"></i>
                  </button>
                </div>

                <!-- espacio del tamaño del medidor para alinear -->
                <div class="strength-inline strength-inline--spacer" aria-hidden="true"></div>
              </div>

              <div id="confirmFeedback" class="form-text"></div>
            </div>

            <!-- Teléfono (opcional) -->
            <div class="mb-3">
              <label for="phone" class="form-label">{{ _('Teléfono') }}</label>
              <input type="tel" class="form-control" id="phone" name="phone_display"
                  placeholder="{{ _('Ej: +1 555 123 4567') }}" aria-describedby="phoneHelp">
              <div id="phoneHelp" class="form-label" style="font-size: smaller;">
                {{ _('Opcional. Incluye el código de país (ej.: +1, +34, +54).') }}
              </div>

              <input type="hidden" id="phone_e164" name="phone_e164" value="">
              <input type="hidden" id="phone_country_iso2" name="phone_country_iso2" value="">
            </div>

            <!-- ¿Cómo nos conoció? -->
            <div class="mb-3">
              <label for="how_heard" class="form-label">{{ _('¿Cómo nos conociste?') }}</label>
              <input list="howHeardOptions" class="form-control" id="how_heard" name="how_heard"
                  placeholder="{{ _('Ej.: YouTube, Instagram, Referido, Google...') }}" value="{{ how_heard or '' }}"
                  maxlength="250">
              <datalist id="howHeardOptions">
                <option value="YouTube"></option>
                <option value="Instagram"></option>
                <option value="TikTok"></option>
                <option value="Google"></option>
                <option value="TradingView"></option>
                <option value="Referido"></option>
                <option value="WhatsApp - BTM Tribe"></option>
                <option value="Otro"></option>
              </datalist>
              <div class="form-text">
                {{ _('Opcional. Puedes escribir libremente o elegir una sugerencia.') }}
              </div>
            </div>

            <!-- reCAPTCHA -->
            <div class="mb-3">
              <div class="g-recaptcha" data-sitekey="6LfhXTUrAAAAABzWs4Y4ErXI6l0ssvxds3jDxtBF"></div>
            </div>

            <!-- Botón de registro -->
            <button type="submit" class="btn btn-primary w-100" id="registerButton">
              {{ _('Registrarse') }}
            </button>

            <input type="hidden" name="referrer_code" id="referrer_code_input">
          </form>

          <p class="mt-3 text-center">
            {{ _("¿Ya tienes una cuenta?") }}
            <a href="{{ url_for('login') }}">{{ _('Inicia sesión aquí') }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ====== ESTILOS (inline, tal como te funcionan) ====== -->
<style>
  /* Layout de filas de password */
  .password-row {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .password-left {
    flex: 1 1 auto;
  }

  /* Medidor compacto (ajusta width 100–200px a gusto) */
  .strength-inline {
    width: 160px;
    min-width: 120px;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .strength-inline-bar {
    height: 6px;
    border-radius: 4px;
    overflow: hidden;
  }

  .strength-inline-text {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    text-align: right;
    opacity: .8;
  }

  /* Spacer: sin contenido visible */
  .strength-inline--spacer .strength-inline-bar,
  .strength-inline--spacer .strength-inline-text {
    display: none;
  }

  /* Responsive */
  @media (max-width:576px) {
    .password-row {
      flex-wrap: wrap;
    }

    .strength-inline {
      width: 120px;
    }
  }

  /* intl-tel-input base + dark */
  .iti {
    width: 100%;
  }

  .iti__country-list {
    z-index: 10000;
  }

  :root[data-theme="dark"] .iti__country-list {
    background: var(--bs-body-bg, #0f1115);
    color: var(--bs-body-color, #e6e6e6);
    border-color: var(--bs-border-color, #2a2f3a);
  }

  :root[data-theme="dark"] .iti__dial-code {
    color: var(--bs-secondary-color, #c8c8c8);
    opacity: 1;
  }

  :root[data-theme="dark"] .strength-inline-text {
    color: var(--bs-secondary-color, #c8c8c8);
  }

  /* (Light) codigos negros (tenemos otro override abajo para ganar al plugin si es necesario) */
  :root:not([data-theme="dark"]) .iti .iti__selected-dial-code,
  :root:not([data-theme="dark"]) .iti .iti__country .iti__dial-code,
  :root:not([data-theme="dark"]) .iti .iti__country-list .iti__dial-code {
    color: #000;
    opacity: 1;
  }
</style>

<!-- reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- ====== CSS del plugin (NO MOVER de aquí hacia abajo) ====== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.7.3/build/css/intlTelInput.css">

<!-- ====== OVERRIDE FINAL: nombres y códigos NEGROS en modo claro; legibles en dark ====== -->
<style>
  /* LIGHT: negro para nombre y código (input y lista) */
  :root:not([data-theme="dark"]) .iti .iti__country-list,
  :root:not([data-theme="dark"]) .iti .iti__country,
  :root:not([data-theme="dark"]) .iti .iti__country .iti__country-name,
  :root:not([data-theme="dark"]) .iti .iti__country .iti__dial-code,
  :root:not([data-theme="dark"]) .iti .iti__country-list .iti__country-name,
  :root:not([data-theme="dark"]) .iti .iti__selected-dial-code {
    color: #000 !important;
    opacity: 1 !important;
  }

  /* DARK: contraste correcto */
  :root[data-theme="dark"] .iti .iti__country .iti__country-name {
    color: #e6e6e6 !important;
  }

  :root[data-theme="dark"] .iti .iti__country .iti__dial-code,
  :root[data-theme="dark"] .iti .iti__selected-dial-code {
    color: #c8c8c8 !important;
  }
</style>

<!-- JS del plugin -->
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.7.3/build/js/intlTelInput.min.js"></script>
{% endblock %}

{% block scripts %}
{{ super() }}

<script>
  document.addEventListener('DOMContentLoaded', () => {
    initThemeToggle?.();

    // --- Referral cookie ---
    const urlParams = new URLSearchParams(window.location.search);
    const ref = urlParams.get('ref');
    if (ref) document.cookie = `referrer_code=${ref}; path=/; max-age=2592000`;
    const refCookie = document.cookie.split('; ').find(r => r.startsWith('referrer_code='));
    if (refCookie) {
      const refValue = refCookie.split('=')[1];
      const refInput = document.getElementById('referrer_code_input');
      if (refInput) refInput.value = decodeURIComponent(refValue);
    }

    // --- Elements ---
    const form = document.getElementById('registerForm');
    const registerButton = document.getElementById('registerButton');
    const pwd = document.getElementById('password');
    const cpw = document.getElementById('confirm_password');
    const togglePwdBtn = document.getElementById('togglePwdBtn');
    const toggleConfirmBtn = document.getElementById('toggleConfirmBtn');
    const strengthInlineBar = document.getElementById('passwordStrengthInlineBar');
    const strengthText = document.getElementById('passwordStrengthText');
    const confirmFeedback = document.getElementById('confirmFeedback');

    // --- Toggle ojo ---
    const toggleVisibility = (input, btn) => {
      if (!input || !btn) return;
      const asText = input.type === 'text';
      input.type = asText ? 'password' : 'text';
      const icon = btn.querySelector('i');
      if (icon) { icon.classList.toggle('fa-eye'); icon.classList.toggle('fa-eye-slash'); }
      btn.setAttribute('aria-pressed', String(!asText));
    };
    togglePwdBtn?.addEventListener('click', () => toggleVisibility(pwd, togglePwdBtn));
    toggleConfirmBtn?.addEventListener('click', () => toggleVisibility(cpw, toggleConfirmBtn));

    // --- Strength + match ---
    const MAX_SCORE = 6;
    function scorePassword(v) {
      if (!v) return 0;
      const rules = [ v.length >= 8, /[a-z]/.test(v), /[A-Z]/.test(v), /\d/.test(v), /[^A-Za-z0-9]/.test(v) ];
      let score = rules.reduce((acc, ok) => acc + (ok ? 1 : 0), 0);
      if (v.length >= 12 && score >= 4) score += 1;
      return Math.min(score, MAX_SCORE);
    }
    function renderStrength(v) {
      if (!strengthInlineBar || !strengthText) return;
      const score = scorePassword(v);
      const pct = Math.round((score / MAX_SCORE) * 100);
      strengthInlineBar.style.width = pct + '%';
      strengthInlineBar.classList.remove('bg-danger','bg-warning','bg-success');
      let label = '';
      if (score <= 1) { strengthInlineBar.classList.add('bg-danger');  label = "{{ _('Muy débil') }}"; }
      else if (score <= 2) { strengthInlineBar.classList.add('bg-danger');  label = "{{ _('Débil') }}"; }
      else if (score <= 4) { strengthInlineBar.classList.add('bg-warning'); label = "{{ _('Aceptable') }}"; }
      else if (score === 5) { strengthInlineBar.classList.add('bg-success'); label = "{{ _('Fuerte') }}"; }
      else { strengthInlineBar.classList.add('bg-success'); label = "{{ _('Muy fuerte') }}"; }
      strengthText.textContent = v ? label : '';
    }
    function renderMatch() {
      if (!cpw || !pwd || !confirmFeedback) return;
      const v1 = (pwd.value || '').trim();
      const v2 = (cpw.value || '').trim();
      if (!v2) {
        cpw.classList.remove('is-valid','is-invalid');
        confirmFeedback.textContent = '';
        confirmFeedback.classList.remove('text-success','text-danger');
        return;
      }
      const ok = v1 === v2;
      cpw.classList.toggle('is-valid', ok);
      cpw.classList.toggle('is-invalid', !ok);
      confirmFeedback.textContent = ok ? "{{ _('Las contraseñas coinciden.') }}" : "{{ _('Las contraseñas no coinciden.') }}";
      confirmFeedback.classList.toggle('text-success', ok);
      confirmFeedback.classList.toggle('text-danger', !ok);
    }
    pwd?.addEventListener('input', () => { renderStrength(pwd.value); renderMatch(); });
    cpw?.addEventListener('input', renderMatch);
    renderStrength(pwd?.value || '');
    renderMatch();

    // --- Teléfono (intl-tel-input) ---
    const phoneInput = document.getElementById('phone');
    let iti = null;
    if (phoneInput && window.intlTelInput) {
      iti = window.intlTelInput(phoneInput, {
        initialCountry: 'auto',
        nationalMode: false,
        separateDialCode: true
        // sin utilsScript y sin validaciones
      });
    }

    // --- Submit (enviar teléfono con código de país) ---
    form?.addEventListener('submit', function (e) {
      const passwordValue = (pwd?.value || '').trim();
      const confirmPasswordValue = (cpw?.value || '').trim();

      if (passwordValue.length < 8) {
        e.preventDefault();
        showFlashMessage?.("{{ _('La contraseña debe tener al menos 8 caracteres.') }}", "warning");
        return;
      }
      if (passwordValue !== confirmPasswordValue) {
        e.preventDefault();
        showFlashMessage?.("{{ _('Las contraseñas no coinciden.') }}", "warning");
        return;
      }

      // 1) Lo que escribió el usuario
      const raw = phoneInput ? phoneInput.value.trim() : '';

      // 2) Prefijo del país desde el selector (si existe)
      const data = iti ? iti.getSelectedCountryData() : null;
      const dial = (data && data.dialCode) ? `+${data.dialCode}` : '';

      // 3) Construimos el valor final: si ya empieza con "+", lo dejamos;
      //    si no, le anteponemos el prefijo seleccionado (si hay).
      let phoneFinal = raw;
      if (raw) {
        if (raw.startsWith('+')) {
          phoneFinal = raw.replace(/\s+/g, '');
        } else if (dial) {
          // quitamos espacios, guiones, paréntesis y pegamos
          const cleaned = raw.replace(/[^\d]/g, '');
          phoneFinal = (dial + cleaned).replace(/[^\d+]/g, '');
        } // si no hay dial, se va tal cual escribió
      }

      // 4) Guardamos en los ocultos
      const hiddenE164 = document.getElementById('phone_e164');
      const hiddenISO2 = document.getElementById('phone_country_iso2');
      if (hiddenE164) hiddenE164.value = phoneFinal; // e.g. +5491122334455
      if (hiddenISO2) hiddenISO2.value = data && data.iso2 ? data.iso2.toUpperCase() : '';

      if (registerButton) {
        registerButton.disabled = true;
        registerButton.textContent = "{{ _('Procesando...') }}";
      }
    });
  });
</script>
{% endblock %}