{# 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`).
#}
{% from "core/components/page_header.html" import page_header %}
{% from "core/components/csrf.html" import csrf_input %}

{% call page_header(title="Mi cuenta", subtitle=user.email) %}{% endcall %}

{% if saved == "profile" %}
<div class="mb-4 rounded-md border border-semantic-success/40 bg-semantic-success/10 px-4 py-3 text-sm text-fg" role="status">
  Perfil actualizado.
</div>
{% elif saved == "password" %}
<div class="mb-4 rounded-md border border-semantic-success/40 bg-semantic-success/10 px-4 py-3 text-sm text-fg" role="status">
  Contraseña actualizada.
</div>
{% elif error == "password-mismatch" %}
<div class="mb-4 rounded-md border border-semantic-danger/40 bg-semantic-danger/10 px-4 py-3 text-sm text-fg" role="alert">
  Las contraseñas nuevas no coinciden.
</div>
{% elif error == "wrong-password" %}
<div class="mb-4 rounded-md border border-semantic-danger/40 bg-semantic-danger/10 px-4 py-3 text-sm text-fg" role="alert">
  La contraseña actual no es correcta.
</div>
{% elif error %}
<div class="mb-4 rounded-md border border-semantic-danger/40 bg-semantic-danger/10 px-4 py-3 text-sm text-fg" role="alert">
  No se pudo guardar el cambio. Inténtalo de nuevo en unos minutos.
</div>
{% endif %}

<div class="grid gap-6 lg:grid-cols-2">

  <section class="card" aria-labelledby="dg-account-profile-title">
    <h2 id="dg-account-profile-title" class="card-title mb-1">Perfil</h2>
    <p class="card-body mb-4">Cómo te ven el resto de usuarios de la app.</p>

    <form method="post" action="/account/profile" class="space-y-4">
      {{ csrf_input(request) }}
      <div>
        <label class="form-label" for="dg-account-email">Correo electrónico</label>
        <input id="dg-account-email" type="email" class="form-input"
               value="{{ user.email }}" disabled
               aria-describedby="dg-account-email-hint">
        <p id="dg-account-email-hint" class="mt-1 text-xs text-fg-muted">
          El correo es tu identificador de acceso y no puede cambiarse desde aquí.
        </p>
      </div>
      <div>
        <label class="form-label" for="dg-account-name">Nombre</label>
        <input id="dg-account-name" name="name" type="text" class="form-input"
               value="{{ user.name or '' }}" maxlength="120"
               autocomplete="name">
      </div>
      <button type="submit" class="btn btn-primary">Guardar perfil</button>
    </form>
  </section>

  <section class="card" aria-labelledby="dg-account-password-title">
    <h2 id="dg-account-password-title" class="card-title mb-1">Contraseña</h2>
    <p class="card-body mb-4">
      Necesitas tu contraseña actual para fijar una nueva (mínimo 8 caracteres).
    </p>

    <form method="post" action="/account/password" class="space-y-4">
      {{ csrf_input(request) }}
      <div>
        <label class="form-label" for="dg-account-current">Contraseña actual</label>
        <input id="dg-account-current" name="current_password" type="password"
               class="form-input" required autocomplete="current-password">
      </div>
      <div>
        <label class="form-label" for="dg-account-new">Contraseña nueva</label>
        <input id="dg-account-new" name="password" type="password"
               class="form-input" required minlength="8"
               autocomplete="new-password">
      </div>
      <div>
        <label class="form-label" for="dg-account-confirm">Repite la contraseña nueva</label>
        <input id="dg-account-confirm" name="password_confirm" type="password"
               class="form-input" required minlength="8"
               autocomplete="new-password">
      </div>
      <button type="submit" class="btn btn-primary">Cambiar contraseña</button>
    </form>
  </section>

  <section class="card lg:col-span-2" aria-labelledby="dg-account-data-title">
    <h2 id="dg-account-data-title" class="card-title mb-1">Tus datos</h2>
    <p class="card-body mb-4">
      Exporta una copia de tus datos o solicita el borrado de tu cuenta
      (periodo de gracia antes del borrado definitivo, cancelable).
    </p>

    <div class="flex flex-wrap gap-3">
      <a class="btn btn-ghost border border-border" href="/me/data/export">
        Exportar mis datos
      </a>
      <button type="button" class="btn btn-danger" id="dg-account-delete">
        Solicitar borrado de cuenta
      </button>
      <button type="button" class="btn btn-ghost border border-border hidden"
              id="dg-account-delete-cancel">
        Cancelar borrado pendiente
      </button>
    </div>
    <p class="mt-3 text-sm text-fg-muted hidden" id="dg-account-delete-status"
       role="status"></p>
  </section>

</div>

<script>
  (function () {
    "use strict";
    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) {
      statusEl.textContent = text;
      statusEl.classList.remove("hidden");
      btnCancel.classList.toggle("hidden", !pendingCancel);
    }

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

    btnCancel.addEventListener("click", function () {
      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);
          } else {
            showStatus("No había ninguna solicitud pendiente.", false);
          }
        })
        .catch(function () { showStatus("No se pudo cancelar.", false); });
    });
  })();
</script>