{% extends "base.html" %}
{% load static %}

{% block title %}Editar Perfil{% endblock %}

{% block content %}
<style>
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .crop-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:1rem}
    .crop-overlay.active{display:flex}
    .crop-box{background:#fff;border-radius:1.25rem;overflow:hidden;width:100%;max-width:400px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
    .crop-ring{position:relative;width:280px;height:280px;margin:0 auto;overflow:hidden;border-radius:50%;border:3px solid rgba(232,51,106,.4);background:#e5e7eb;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
    .crop-ring:active{cursor:grabbing}
    .crop-ring img{position:absolute;top:0;left:0;max-width:none;pointer-events:none;will-change:transform,width,height}
</style>

<section class="min-h-[calc(100vh-72px)] relative overflow-hidden py-10 px-4">
    <!-- Fondo gradiente igual al hero -->
    <div class="absolute inset-0 bg-gradient-to-br from-[#FDF2F5] via-[#FBE8ED] to-[#F5E6D8]"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_20%,rgba(232,51,106,0.05)_0%,transparent_50%),radial-gradient(ellipse_at_85%_75%,rgba(212,175,55,0.04)_0%,transparent_45%)]"></div>
    <!-- Partículas decorativas -->
    <div class="absolute top-[12%] left-[6%] w-3 h-3 rounded-full bg-rosa/20" style="animation:float 6s ease-in-out infinite"></div>
    <div class="absolute top-[20%] right-[10%] w-2 h-2 rounded-full bg-dorado/30" style="animation:float 8s ease-in-out infinite"></div>
    <div class="absolute bottom-[35%] left-[12%] w-4 h-4 rounded-full bg-dorado/15" style="animation:float 6s ease-in-out infinite 2s"></div>
    <div class="absolute top-[55%] right-[7%] w-2.5 h-2.5 rounded-full bg-rosa/15" style="animation:float 8s ease-in-out infinite 1s"></div>

    <div class="relative z-10 max-w-2xl mx-auto">

        <!-- Header con navegación -->
        <div class="flex items-center justify-between mb-6">
            <a href="{% url 'users:panel_paciente' %}" class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-rosa transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                Voltar ao painel
            </a>
            <div class="flex items-center gap-2 bg-white/70 backdrop-blur-sm px-4 py-2 rounded-full border border-white/50 shadow-sm">
                {% if request.user.foto_perfil %}
                <img src="{{ request.user.foto_perfil.url }}" alt="{{ request.user.nombre }}" class="w-7 h-7 rounded-full object-cover">
                {% else %}
                <div class="w-7 h-7 bg-rosa-bg rounded-full flex items-center justify-center">
                    <span class="text-rosa font-semibold text-[10px]">{{ request.user.nombre.0 }}{{ request.user.apellido.0 }}</span>
                </div>
                {% endif %}
                <span class="text-xs text-gray-600 font-medium">{{ request.user.get_full_name }}</span>
            </div>
        </div>

        <!-- Card principal -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">

            <!-- Header -->
            <div class="px-6 py-5 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                </div>
                <div>
                    <h1 class="font-poppins font-semibold text-dark text-lg">Editar Perfil</h1>
                    <p class="text-gray-400 text-sm">Atualize as suas informações pessoais</p>
                </div>
            </div>

            {% if messages %}
            <div class="px-6 pt-5 space-y-2">
                {% for message in messages %}
                <div class="flex items-start gap-3 p-3 rounded-xl text-sm
                    {% if message.tags == 'success' %}bg-green-50 text-green-700 border border-green-200
                    {% elif message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200
                    {% else %}bg-blue-50 text-blue-700 border border-blue-200{% endif %}">
                    <span>{{ message }}</span>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <form id="profile-form" method="post" enctype="multipart/form-data" novalidate class="p-6 space-y-6">
                {% csrf_token %}
                <!-- Campo oculto para imagen recortada -->
                <input type="hidden" id="cropped-data" name="foto_perfil_cropped">

                <!-- Foto de perfil -->
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-3">Foto de perfil</label>
                    <div class="flex items-center gap-5">
                        <div class="relative w-24 h-24 rounded-full bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center overflow-hidden flex-shrink-0" id="preview-container">
                            {% if request.user.foto_perfil %}
                            <img id="photo-preview" class="absolute inset-0 w-full h-full object-cover" src="{{ request.user.foto_perfil.url }}" alt="Foto actual">
                            <svg class="w-10 h-10 text-gray-300 hidden" id="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            {% else %}
                            <svg class="w-10 h-10 text-gray-300" id="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            <img id="photo-preview" class="absolute inset-0 w-full h-full object-cover hidden" alt="Preview">
                            {% endif %}
                        </div>
                        <div>
                            <label for="foto-input" class="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-600 hover:border-rosa/40 hover:text-rosa transition-all duration-300">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                Alterar foto
                            </label>
                            <input type="file" id="foto-input" name="foto_perfil" accept="image/*" class="hidden">
                            <p class="text-gray-400 text-[11px] mt-1.5">JPG, PNG. Máx 2 MB</p>
                        </div>
                    </div>
                    {% if form.foto_perfil.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ form.foto_perfil.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Nombre + Apellido -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="id_nombre" class="block text-sm font-medium text-gray-600 mb-1.5">Nome</label>
                        {{ form.nombre }}
                        {% if form.nombre.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.nombre.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label for="id_apellido" class="block text-sm font-medium text-gray-600 mb-1.5">Apelido</label>
                        {{ form.apellido }}
                        {% if form.apellido.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.apellido.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>

                <!-- Teléfono -->
                <div>
                    <label for="id_telefono" class="block text-sm font-medium text-gray-600 mb-1.5">Telefone</label>
                    {{ form.telefono }}
                    {% if form.telefono.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ form.telefono.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Email (solo lectura) -->
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1.5">Email</label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-500 text-sm">
                        {{ request.user.email }}
                    </div>
                    <p class="text-gray-400 text-[11px] mt-1">O email não pode ser alterado</p>
                </div>

                <!-- Botones -->
                <div class="flex items-center gap-3 pt-2">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-rosa text-white font-semibold rounded-xl shadow-sm hover:shadow-md hover:bg-rosa/90 transition-all duration-300 text-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Guardar alterações
                    </button>
                    <a href="{% url 'users:panel_paciente' %}" class="inline-flex items-center gap-2 px-6 py-3 border border-gray-200 text-gray-500 font-medium rounded-xl hover:border-gray-300 transition-all duration-300 text-sm">
                        Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Modal de recorte nativo -->
<div class="crop-overlay" id="crop-modal">
    <div class="crop-box">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center gap-3">
            <div class="w-8 h-8 bg-rosa-bg rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <div>
                <h3 class="font-poppins font-semibold text-dark text-sm">Ajustar foto</h3>
                <p class="text-gray-400 text-[11px]">Arraste para mover · +/- para zoom</p>
            </div>
        </div>
        <div class="flex justify-center py-5 bg-gray-50">
            <div class="crop-ring" id="crop-ring">
                <img id="crop-img" src="" alt="">
            </div>
        </div>
        <div class="px-5 pb-2 flex items-center justify-center gap-4">
            <button type="button" id="btn-zout" class="w-10 h-10 rounded-xl border border-gray-200 flex items-center justify-center text-gray-500 hover:border-rosa hover:text-rosa transition-all active:scale-95">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
            </button>
            <span class="text-xs text-gray-400 font-medium w-14 text-center" id="zlabel">100%</span>
            <button type="button" id="btn-zin" class="w-10 h-10 rounded-xl border border-gray-200 flex items-center justify-center text-gray-500 hover:border-rosa hover:text-rosa transition-all active:scale-95">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            </button>
        </div>
        <div class="px-5 pb-5 pt-2 flex items-center gap-3">
            <button type="button" id="crop-cancel" class="flex-1 px-4 py-2.5 border border-gray-200 text-gray-500 font-medium rounded-xl text-sm hover:border-gray-300 transition-all">Cancelar</button>
            <button type="button" id="crop-apply" class="flex-1 px-4 py-2.5 bg-rosa text-white font-semibold rounded-xl text-sm hover:bg-rosa/90 transition-all shadow-sm">
                <span class="flex items-center justify-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Aplicar
                </span>
            </button>
        </div>
    </div>
</div>

<script>
(function(){
    var fileInput   = document.getElementById('foto-input');
    var preview     = document.getElementById('photo-preview');
    var placeholder = document.getElementById('placeholder-icon');
    var pCont       = document.getElementById('preview-container');
    var modal       = document.getElementById('crop-modal');
    var ring        = document.getElementById('crop-ring');
    var cImg        = document.getElementById('crop-img');
    var btnCancel   = document.getElementById('crop-cancel');
    var btnApply    = document.getElementById('crop-apply');
    var btnZin      = document.getElementById('btn-zin');
    var btnZout     = document.getElementById('btn-zout');
    var zlabel      = document.getElementById('zlabel');
    var hiddenField = document.getElementById('cropped-data');

    var SIZE = 280;
    var origSrc = null, nw = 0, nh = 0;
    var sc = 1, baseSc = 1, px = 0, py = 0;
    var drag = false, sx = 0, sy = 0;

    function put(){
        cImg.style.transform = 'translate(' + Math.round(px) + 'px,' + Math.round(py) + 'px)';
        cImg.style.width  = Math.round(nw * sc) + 'px';
        cImg.style.height = Math.round(nh * sc) + 'px';
    }
    function fitCenter(){
        baseSc = Math.max(SIZE / nw, SIZE / nh);
        sc = baseSc;
        px = (SIZE - nw * sc) / 2;
        py = (SIZE - nh * sc) / 2;
        put(); lbl();
    }
    function lbl(){ zlabel.textContent = Math.round(sc / baseSc * 100) + '%'; }

    fileInput.addEventListener('change', function(){
        var f = this.files && this.files[0];
        if(!f) return;
        if(f.size > 2*1024*1024){ alert('A imagem não pode exceder 2 MB'); this.value=''; return; }
        var r = new FileReader();
        r.onload = function(e){
            origSrc = e.target.result;
            var img = new Image();
            img.onload = function(){
                nw = img.naturalWidth; nh = img.naturalHeight;
                cImg.src = origSrc;
                fitCenter();
                modal.classList.add('active');
            };
            img.src = origSrc;
        };
        r.readAsDataURL(f);
    });

    // Mouse drag
    ring.addEventListener('mousedown', function(e){ e.preventDefault(); drag=true; sx=e.clientX-px; sy=e.clientY-py; });
    document.addEventListener('mousemove', function(e){ if(!drag)return; px=e.clientX-sx; py=e.clientY-sy; clamp(); put(); });
    document.addEventListener('mouseup', function(){ drag=false; });

    // Touch drag
    ring.addEventListener('touchstart', function(e){
        if(e.touches.length===1){ e.preventDefault(); drag=true; sx=e.touches[0].clientX-px; sy=e.touches[0].clientY-py; }
    }, {passive:false});
    document.addEventListener('touchmove', function(e){
        if(!drag||e.touches.length!==1)return;
        px=e.touches[0].clientX-sx; py=e.touches[0].clientY-sy; clamp(); put();
    }, {passive:false});
    document.addEventListener('touchend', function(){ drag=false; });

    // Clamp position so image always covers the circle
    function clamp(){
        var iw = nw * sc, ih = nh * sc;
        if(px > 0) px = 0;
        if(py > 0) py = 0;
        if(px < SIZE - iw) px = SIZE - iw;
        if(py < SIZE - ih) py = SIZE - ih;
    }

    // Zoom +/-
    function zoomBy(delta){
        var oldSc = sc;
        sc = Math.max(baseSc, Math.min(baseSc * 5, sc + delta));
        if(sc === oldSc) return;
        var cx = SIZE/2, cy = SIZE/2;
        px = cx - (cx - px) * (sc / oldSc);
        py = cy - (cy - py) * (sc / oldSc);
        clamp(); put(); lbl();
    }
    btnZin.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); zoomBy(baseSc * 0.2); });
    btnZout.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); zoomBy(-baseSc * 0.2); });

    // Mouse wheel zoom
    ring.addEventListener('wheel', function(e){
        e.preventDefault();
        zoomBy(e.deltaY < 0 ? baseSc * 0.15 : -baseSc * 0.15);
    }, {passive:false});

    // Cancel
    btnCancel.addEventListener('click', function(){ modal.classList.remove('active'); fileInput.value=''; });

    // Apply
    btnApply.addEventListener('click', function(){
        if(!origSrc){ alert('Selecione uma imagem primeiro.'); return; }
        var img = new Image();
        img.onload = function(){
            var c = document.createElement('canvas');
            c.width = 400; c.height = 400;
            var ctx = c.getContext('2d');
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, 400, 400);
            var ssx = -px / sc, ssy = -py / sc, ssw = SIZE / sc, ssh = SIZE / sc;
            ctx.drawImage(img, ssx, ssy, ssw, ssh, 0, 0, 400, 400);
            var url = c.toDataURL('image/jpeg', 0.92);
            preview.src = url;
            preview.classList.remove('hidden');
            if(placeholder) placeholder.classList.add('hidden');
            pCont.classList.remove('border-dashed','border-gray-300');
            pCont.style.borderStyle = 'solid';
            pCont.style.borderColor = 'rgba(232,51,106,0.4)';
            hiddenField.value = url;
            fileInput.value = '';
            modal.classList.remove('active');
        };
        img.src = origSrc;
    });

    // Close on overlay
    modal.addEventListener('click', function(e){ if(e.target===modal) btnCancel.click(); });
})();
</script>
{% endblock %}