{% extends 'base.html.twig' %}

{% block title %}Mi Perfil{% endblock %}
{% block page_title %}Mi perfil{% endblock %}

{% block body %}
  {% set userPhoto = usuario.foto ? '/' ~ usuario.foto|trim('/') : null %}

  <div class="mx-auto max-w-5xl space-y-6">
    <section class="relative overflow-hidden rounded-[2rem] bg-slate-950 px-6 py-8 text-white shadow-2xl sm:px-8">
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(59,130,246,0.35),_transparent_32%),radial-gradient(circle_at_bottom_left,_rgba(244,114,182,0.24),_transparent_28%)]"></div>
      <div class="relative flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
        <div class="flex items-center gap-4">
          {% if userPhoto %}
            <img src="{{ userPhoto }}" alt="{{ usuario.nombre }}" class="h-20 w-20 rounded-[1.75rem] border border-white/20 object-cover shadow-lg">
          {% else %}
            <div class="flex h-20 w-20 items-center justify-center rounded-[1.75rem] bg-white/10 text-2xl font-semibold text-white shadow-lg">
              {{ usuario.nombre|slice(0, 2)|upper }}
            </div>
          {% endif %}
          <div>
            <p class="text-xs uppercase tracking-[0.24em] text-slate-300">Perfil personal</p>
            <h2 class="mt-2 text-3xl font-semibold text-white">{{ usuario.nombre }}</h2>
            <p class="mt-2 text-sm text-slate-300">{{ get_user_role_name(usuario) }} · actualiza tu identidad y foto visible en el sistema.</p>
          </div>
        </div>
        <a href="{{ path('home') }}" class="inline-flex items-center justify-center rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-sm font-medium text-white transition hover:bg-white/10">Volver al dashboard</a>
      </div>
    </section>

    <form method="post" enctype="multipart/form-data" class="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
      <aside class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
        <div class="border-b border-secondary-200 px-6 py-5">
          <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Foto</p>
          <h3 class="mt-2 text-xl font-semibold text-secondary-900">Imagen de perfil</h3>
        </div>
        <div class="space-y-5 px-6 py-6">
          <div class="flex flex-col items-center gap-4 rounded-[1.5rem] bg-secondary-50 px-5 py-6 text-center">
            {% if userPhoto %}
              <img src="{{ userPhoto }}" alt="{{ usuario.nombre }}" class="h-28 w-28 rounded-[1.75rem] object-cover shadow-lg">
            {% else %}
              <div class="flex h-28 w-28 items-center justify-center rounded-[1.75rem] bg-primary-600 text-3xl font-semibold text-white shadow-lg">
                {{ usuario.nombre|slice(0, 2)|upper }}
              </div>
            {% endif %}
            <p class="text-sm text-secondary-500">Esta foto aparecera en el sidebar, encabezado y dashboard.</p>
          </div>

          <div>
            <label for="foto" class="form-label">Subir nueva foto</label>
            <input type="file" id="foto" name="foto" accept="image/png,image/jpeg,image/webp,image/gif" class="form-control">
            <p class="mt-2 text-xs text-secondary-500">JPG, PNG, WEBP o GIF. Maximo 3 MB.</p>
          </div>

          {% if userPhoto %}
            <label class="flex items-center gap-3 rounded-2xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm text-secondary-700">
              <input type="checkbox" name="foto_eliminar" value="1" class="h-4 w-4 rounded border-secondary-300 text-primary-600">
              Quitar foto actual
            </label>
          {% endif %}
        </div>
      </aside>

      <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
        <div class="border-b border-secondary-200 px-6 py-5">
          <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Datos personales</p>
          <h3 class="mt-2 text-xl font-semibold text-secondary-900">Actualiza tu perfil</h3>
          <p class="mt-2 text-sm text-secondary-500">Solo cambia la contrasena si realmente deseas reemplazarla.</p>
        </div>

        <div class="grid gap-5 px-6 py-6 md:grid-cols-2">
          <div class="md:col-span-2">
            <label for="nombre" class="form-label">Nombre completo *</label>
            <input type="text" id="nombre" name="nombre" value="{{ usuario.nombre }}" required class="form-control" placeholder="Ejemplo: Juan Perez">
          </div>

          <div class="md:col-span-2">
            <label for="email" class="form-label">Email *</label>
            <input type="email" id="email" name="email" value="{{ usuario.email }}" required class="form-control" placeholder="usuario@empresa.com">
          </div>

          <div class="md:col-span-2">
            <label for="password" class="form-label">Nueva contrasena</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="Deja en blanco para conservar la actual">
          </div>

          <div>
            <label class="form-label">Rol actual</label>
            <div class="rounded-2xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm font-medium text-secondary-700">{{ get_user_role_name(usuario) }}</div>
          </div>

          <div>
            <label class="form-label">Estado</label>
            <div class="rounded-2xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm font-medium text-secondary-700">{{ usuario.activo ? 'Activo' : 'Inactivo' }}</div>
          </div>
        </div>

        <div class="flex flex-col gap-3 border-t border-secondary-200 px-6 py-5 sm:flex-row sm:justify-end">
          <a href="{{ path('home') }}" class="inline-flex items-center justify-center rounded-2xl border border-secondary-200 px-5 py-3 text-sm font-medium text-secondary-700 transition hover:bg-secondary-50">Cancelar</a>
          <button type="submit" class="inline-flex items-center justify-center rounded-2xl bg-primary-600 px-5 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-primary-700">Guardar cambios</button>
        </div>
      </section>
    </form>
  </div>
{% endblock %}