{# Panel de cuenta self-service.

   Contrato con `make_account_router`:
     user   → objeto con .email, .name (opcional), .is_admin (opcional)
     saved  → "profile" | "password" | "" (query param tras un POST OK)
     error  → "password-mismatch" | "wrong-password" | "password-failed"
              | "profile-failed" | ""

   Los endpoints GDPR (`/me/data/*`) los aporta `make_me_router`; aquí
   solo se pintan las acciones. Fragmento sin layout: el host lo envuelve
   (mismo contrato que `core/admin/users_panel.html`) y carga
   `htmx-events.js` (dgConfirm) y `reveal.js` (mostrar contraseña), que
   `sidebar_shell` ya trae. Estilos propios en el bloque `.dg-account` de
   `_tailwind.source.css`; pila, campos y avisos son componentes del paquete.
#}
{% from "core/components/page_header.html" import page_header %}
{% from "core/components/csrf.html" import csrf_input %}
{% from "core/components/icon.html" import icon, icon_tile %}
{% from "core/components/initials.html" import initials %}

{% set saved = saved if saved is defined else "" %}
{% set error = error if error is defined else "" %}
{% set _email = user.email or "" %}
{% set _name = user.name if (user.name is defined and user.name) else "" %}
{% set _is_admin = user.is_admin if user.is_admin is defined else false %}

{# Solo códigos conocidos: nunca se pinta texto que llegue por la URL. El
   aviso va dentro de la tarjeta del formulario que se envió (`card`), junto
   a lo que se acaba de cambiar. #}
{% if saved == "profile" %}
  {% set _flash = {"card": "profile", "tone": "success", "icon": "circle-check", "text": "Perfil actualizado."} %}
{% elif saved == "password" %}
  {% set _flash = {"card": "password", "tone": "success", "icon": "circle-check", "text": "Contraseña actualizada."} %}
{% elif error == "password-mismatch" %}
  {% set _flash = {"card": "password", "tone": "danger", "icon": "circle-alert", "text": "Las contraseñas nuevas no coinciden."} %}
{% elif error == "wrong-password" %}
  {% set _flash = {"card": "password", "tone": "danger", "icon": "circle-alert", "text": "La contraseña actual no es correcta."} %}
{% elif error %}
  {% set _flash = {"card": "profile" if error.startswith("profile") else "password", "tone": "danger", "icon": "circle-alert", "text": "No se pudo guardar el cambio. Inténtalo de nuevo en unos minutos."} %}
{% else %}
  {% set _flash = none %}
{% endif %}

{% macro _flash_box(flash, card) -%}
{%- if flash and flash.card == card %}
<div class="dg-callout dg-tone-{{ flash.tone }}" role="{{ 'status' if flash.tone == 'success' else 'alert' }}" data-dg-account-flash>
  {{ icon(flash.icon) }}
  <p>{{ flash.text }}</p>
</div>
{%- endif %}
{%- endmacro %}

<div class="dg-account dg-stack" data-dg-account>
  {{ page_header(title="Mi cuenta",
      subtitle="Tu perfil, tu contraseña y el control de tus datos personales.",
      icon="user",
      meta=[{"icon": "shield-check" if _is_admin else "user", "label": "Administrador" if _is_admin else "Usuario"}]) }}

  <div class="dg-account-grid">

    <section class="dg-account-card" aria-labelledby="dg-account-profile-title">
      <div class="dg-account-card-head">
        {{ icon_tile("user", size="sm") }}
        <div>
          <h2 id="dg-account-profile-title" class="dg-account-card-title">Perfil</h2>
          <p class="dg-account-card-desc">Cómo te ven el resto de usuarios de la app.</p>
        </div>
      </div>

      <form method="post" action="/account/profile" class="dg-account-form">
        {{ csrf_input(request) }}
        <div class="dg-account-card-body">
          {{ _flash_box(_flash, "profile") }}
          <div class="dg-account-identity">
            {# El avatar de la lateral, en grande: mismas iniciales y color. #}
            <span class="dg-user-avatar dg-account-avatar" aria-hidden="true">{{ initials(_email) }}</span>
            <div class="dg-account-identity-text">
              <p class="dg-account-identity-name{% if not _name %} is-empty{% endif %}">{{ _name or "Sin nombre" }}</p>
              <p class="dg-account-identity-email">{{ _email }}</p>
              {% if not _name %}
              <p class="form-hint">Añade tu nombre para que el resto de usuarios te identifique.</p>
              {% endif %}
            </div>
          </div>

          <div class="dg-field">
            <label class="form-label" for="dg-account-email">Correo electrónico</label>
            <div class="dg-input-control">
              <input id="dg-account-email" type="email" class="form-input"
                     value="{{ _email }}" disabled
                     aria-describedby="dg-account-email-hint">
              {{ icon("lock", class="dg-input-control-icon") }}
            </div>
            <p id="dg-account-email-hint" class="form-hint">
              El correo es tu identificador de acceso y no puede cambiarse desde aquí.
            </p>
          </div>

          <div class="dg-field">
            <label class="form-label" for="dg-account-name">Nombre</label>
            <input id="dg-account-name" name="name" type="text" class="form-input"
                   value="{{ _name }}" maxlength="120"
                   placeholder="Tu nombre y apellidos"
                   autocomplete="name"
                   aria-describedby="dg-account-name-hint">
          </div>
        </div>

        <div class="dg-account-card-foot">
          <p id="dg-account-name-hint" class="form-hint">Máximo 120 caracteres.</p>
          <button type="submit" class="btn-primary">{{ icon("save") }}Guardar perfil</button>
        </div>
      </form>
    </section>

    <section class="dg-account-card" aria-labelledby="dg-account-password-title">
      <div class="dg-account-card-head">
        {{ icon_tile("lock", size="sm") }}
        <div>
          <h2 id="dg-account-password-title" class="dg-account-card-title">Seguridad</h2>
          <p class="dg-account-card-desc">Necesitas tu contraseña actual para fijar una nueva.</p>
        </div>
      </div>

      <form method="post" action="/account/password" class="dg-account-form">
        {{ csrf_input(request) }}
        <div class="dg-account-card-body">
          {{ _flash_box(_flash, "password") }}
          <div class="dg-field">
            <label class="form-label" for="dg-account-current">Contraseña actual</label>
            <div class="dg-input-control">
              <input id="dg-account-current" name="current_password" type="password"
                     class="form-input" required autocomplete="current-password">
              <button type="button" class="dg-reveal" data-dg-reveal
                      aria-controls="dg-account-current" aria-pressed="false" aria-label="Mostrar contraseña actual" hidden>
                {{ icon("eye", attrs='data-reveal-icon="show"') }}{{ icon("eye-off", attrs='data-reveal-icon="hide"') }}
              </button>
            </div>
          </div>

          <div class="dg-field">
            <label class="form-label" for="dg-account-new">Contraseña nueva</label>
            <div class="dg-input-control">
              <input id="dg-account-new" name="password" type="password"
                     class="form-input" required minlength="8"
                     autocomplete="new-password"
                     aria-describedby="dg-account-password-reqs">
              <button type="button" class="dg-reveal" data-dg-reveal
                      aria-controls="dg-account-new" aria-pressed="false" aria-label="Mostrar contraseña nueva" hidden>
                {{ icon("eye", attrs='data-reveal-icon="show"') }}{{ icon("eye-off", attrs='data-reveal-icon="hide"') }}
              </button>
            </div>
          </div>

          <div class="dg-field">
            <label class="form-label" for="dg-account-confirm">Repite la contraseña nueva</label>
            <div class="dg-input-control">
              <input id="dg-account-confirm" name="password_confirm" type="password"
                     class="form-input" required minlength="8"
                     autocomplete="new-password"
                     aria-describedby="dg-account-password-reqs">
              <button type="button" class="dg-reveal" data-dg-reveal
                      aria-controls="dg-account-confirm" aria-pressed="false" aria-label="Mostrar confirmación de contraseña" hidden>
                {{ icon("eye", attrs='data-reveal-icon="show"') }}{{ icon("eye-off", attrs='data-reveal-icon="hide"') }}
              </button>
            </div>
          </div>

          <ul class="dg-account-reqs" id="dg-account-password-reqs" aria-label="Requisitos de la contraseña nueva">
            <li data-req="length" data-met="false">
              {{ icon("circle-dashed", attrs='data-req-icon="off"') }}{{ icon("circle-check", attrs='data-req-icon="on"') }}
              <span>Mínimo 8 caracteres</span>
              <span class="sr-only" data-req-state>(pendiente)</span>
            </li>
            <li data-req="match" data-met="false">
              {{ icon("circle-dashed", attrs='data-req-icon="off"') }}{{ icon("circle-check", attrs='data-req-icon="on"') }}
              <span>Las dos contraseñas coinciden</span>
              <span class="sr-only" data-req-state>(pendiente)</span>
            </li>
          </ul>
        </div>

        <div class="dg-account-card-foot">
          <p class="form-hint">Usa una contraseña que no uses en otros sitios.</p>
          <button type="submit" class="btn-primary">{{ icon("lock") }}Cambiar contraseña</button>
        </div>
      </form>
    </section>

    <section class="dg-account-card dg-account-card--wide" aria-labelledby="dg-account-data-title">
      <div class="dg-account-card-head">
        {{ icon_tile("shield-check", size="sm") }}
        <div>
          <h2 id="dg-account-data-title" class="dg-account-card-title">Privacidad y datos</h2>
          <p class="dg-account-card-desc">Exporta una copia de tus datos o solicita el borrado de tu cuenta.</p>
        </div>
      </div>

      <div class="dg-account-row">
        {{ icon_tile("download", size="sm") }}
        <div class="dg-account-row-text">
          <p class="dg-account-row-title">Exportar tus datos</p>
          <p class="dg-account-row-desc">Descarga un archivo con la información asociada a tu cuenta.</p>
        </div>
        <div class="dg-account-row-actions">
          <a class="btn-secondary" href="/me/data/export">{{ icon("download") }}Exportar mis datos</a>
        </div>
      </div>

      <div class="dg-account-row">
        {# Neutro como su botón: el peligro solo se marca al ir a pulsarlo. #}
        {{ icon_tile("trash-2", size="sm") }}
        <div class="dg-account-row-text">
          <p class="dg-account-row-title">Borrar tu cuenta</p>
          <p class="dg-account-row-desc">
            Tras un periodo de gracia se elimina de forma definitiva. Puedes cancelarlo mientras tanto.
          </p>
        </div>
        <div class="dg-account-row-actions">
          <button type="button" class="btn-secondary hidden" id="dg-account-delete-cancel">
            {{ icon("rotate-ccw") }}Cancelar borrado pendiente
          </button>
          <button type="button" class="btn-destructive" id="dg-account-delete">
            {{ icon("trash-2") }}Solicitar borrado de cuenta
          </button>
        </div>
        {# La región viva existe desde el principio: si apareciera junto con
           el texto, los lectores de pantalla no anunciarían el cambio. #}
        <div class="dg-account-row-status" role="status" aria-live="polite">
          <div id="dg-account-delete-status" class="dg-callout" hidden>
            {{ icon("clock", attrs='data-status-icon="warning"') }}
            {{ icon("circle-check", attrs='data-status-icon="success"') }}
            {{ icon("info", attrs='data-status-icon="neutral"') }}
            {{ icon("circle-alert", attrs='data-status-icon="danger"') }}
            <p data-status-text></p>
          </div>
        </div>
      </div>
    </section>

  </div>
</div>

<script>
  (function () {
    "use strict";
    var root = document.querySelector("[data-dg-account]");
    if (!root) return;
    var btnDelete = document.getElementById("dg-account-delete");
    var btnCancel = document.getElementById("dg-account-delete-cancel");
    var statusEl = document.getElementById("dg-account-delete-status");

    function showStatus(text, pendingCancel, tone) {
      // Ocultar el botón que tiene el foco lo manda a <body>.
      var refocus = !pendingCancel && document.activeElement === btnCancel;
      statusEl.className = "dg-callout dg-tone-" + tone;
      statusEl.setAttribute("data-tone", tone);
      statusEl.querySelector("[data-status-text]").textContent = text;
      statusEl.hidden = false;
      btnCancel.classList.toggle("hidden", !pendingCancel);
      if (refocus) btnDelete.focus();
    }

    // Un segundo clic durante la petición duplicaría la solicitud. Con
    // `disabled` el botón perdería el foco y el usuario de teclado su sitio.
    function busy(btn, on) {
      btn.setAttribute("aria-disabled", on ? "true" : "false");
      btn.setAttribute("aria-busy", on ? "true" : "false");
    }

    function isBusy(btn) {
      return btn.getAttribute("aria-disabled") === "true";
    }

    async function requestDeletion() {
      if (isBusy(btnDelete)) return;
      var ok = await dgConfirm("¿Solicitar el borrado de tu cuenta?", {
        confirmLabel: "Solicitar borrado",
        detail: "Tras el periodo de gracia se eliminará de forma definitiva. Puedes cancelarlo mientras tanto."
      });
      if (!ok) return;
      busy(btnDelete, true);
      fetch("/me/data", { method: "DELETE" })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (data.status === "scheduled" || data.status === "already-scheduled") {
            var when = new Date(data.purge_at).toLocaleDateString("es-ES", {
              day: "numeric", month: "long", year: "numeric"
            });
            showStatus("Borrado programado para el " + when + ".", true, "warning");
          } else {
            showStatus("No se pudo programar el borrado.", false, "danger");
          }
        })
        .catch(function () { showStatus("No se pudo programar el borrado.", false, "danger"); })
        .finally(function () { busy(btnDelete, false); });
    }

    function cancelDeletion() {
      if (isBusy(btnCancel)) return;
      busy(btnCancel, true);
      fetch("/me/data/delete/cancel", { method: "POST" })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (data.status === "cancelled") {
            showStatus("Solicitud de borrado cancelada.", false, "success");
          } else {
            showStatus("No había ninguna solicitud pendiente.", false, "neutral");
          }
        })
        .catch(function () { showStatus("No se pudo cancelar.", false, "danger"); })
        .finally(function () { busy(btnCancel, false); });
    }

    // El aviso del envío va en su tarjeta; en una columna, la de Seguridad
    // queda por debajo del pliegue y el resultado no se vería al volver.
    function revealFlash() {
      var flash = root.querySelector("[data-dg-account-flash]");
      if (flash && flash.getBoundingClientRect().bottom > window.innerHeight) {
        flash.closest("section").scrollIntoView({ block: "start" });
      }
    }

    function wireRequirements() {
      var pwNew = document.getElementById("dg-account-new");
      var pwConfirm = document.getElementById("dg-account-confirm");
      var reqs = document.getElementById("dg-account-password-reqs");
      function setReq(name, met) {
        var item = reqs.querySelector('[data-req="' + name + '"]');
        item.setAttribute("data-met", met ? "true" : "false");
        item.querySelector("[data-req-state]").textContent = met ? "(cumplido)" : "(pendiente)";
      }
      function sync() {
        var mismatch = pwConfirm.value !== "" && pwConfirm.value !== pwNew.value;
        setReq("length", pwNew.value.length >= 8);
        setReq("match", pwConfirm.value !== "" && !mismatch);
        // El servidor también lo rechaza; así el error llega antes del envío.
        pwConfirm.setCustomValidity(mismatch ? "Las contraseñas nuevas no coinciden." : "");
      }
      pwNew.addEventListener("input", function () {
        sync();
        // form-validate.js solo revalida el campo que se edita: se avisa al de
        // confirmación para que retire o muestre su error.
        if (pwConfirm.hasAttribute("data-dg-validated")) {
          pwConfirm.dispatchEvent(new Event("input", { bubbles: true }));
        }
      });
      pwConfirm.addEventListener("input", sync);
    }

    btnDelete.addEventListener("click", requestDeletion);
    btnCancel.addEventListener("click", cancelDeletion);
    wireRequirements();
    revealFlash();
  })();
</script>