{% extends "layouts/settings.html" %}
{% block title %}Profile - Settings - Redea Social{% endblock %}
{% block content %}
<div class="max-w-2xl">
    <h2 class="text-xl font-semibold mb-8" style="color: var(--text-primary);">Profile</h2>

    <!-- Photo section -->
    <form method="POST" enctype="multipart/form-data" x-data="{
        preview: '{% if user.avatar %}{{ user.avatar.url }}{% endif %}',
        hasExisting: {{ user.avatar|yesno:'true,false' }},
        fileName: ''
    }">
        {% csrf_token %}
        <input type="hidden" name="action" value="update_photo">
        <input type="hidden" name="delete_photo" :value="(!preview && hasExisting) ? '1' : '0'">

        <div class="flex items-center justify-between mb-10">
            <div class="flex items-center gap-4">
                <!-- Avatar preview or default silhouette -->
                <template x-if="preview">
                    <div class="relative">
                        <img :src="preview" alt="Profile photo" class="w-16 h-16 rounded-full object-cover border" style="border-color: var(--border);">
                        <button type="button"
                                @click="preview = ''; $refs.avatarInput.value = ''; fileName = ''"
                                class="absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center cursor-pointer"
                                style="background: var(--neutral-200); color: var(--text-secondary);"
                                title="Remove photo">
                            <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </button>
                    </div>
                </template>
                <template x-if="!preview">
                    <div class="w-16 h-16 rounded-full flex items-center justify-center" style="background: var(--neutral-200);">
                        <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--neutral-400);"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                </template>

                <div>
                    <p class="text-sm font-semibold" style="color: var(--text-primary);">Photo</p>
                    <p class="text-xs mt-0.5" style="color: var(--text-tertiary);">Please choose a photo that is at least 180×180 pixels in size.</p>
                </div>
            </div>

            <label class="btn-neutral-surface inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-full cursor-pointer transition-colors"
                   style="border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-0);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                Upload Photo
                <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" class="hidden" x-ref="avatarInput"
                       @change="if ($el.files[0]) { preview = URL.createObjectURL($el.files[0]); fileName = $el.files[0].name; hasExisting = true; $el.closest('form').requestSubmit(); }">
            </label>
        </div>
    </form>

    <!-- Name section -->
    <form method="POST" class="mb-10">
        {% csrf_token %}
        <input type="hidden" name="action" value="update_name">
        <div class="flex items-end gap-4">
            <div class="flex-1">
                <label for="name" class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">Name</label>
                <input type="text" id="name" name="name" value="{{ user.name }}" required maxlength="255"
                       class="input-focus w-full px-3 py-2 text-sm rounded-lg outline-none transition-colors"
                       style="border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-0);">
            </div>
            <button type="submit"
                    class="btn-neutral px-5 py-2 text-sm font-medium rounded-full transition-colors cursor-pointer whitespace-nowrap"
                    style="background: var(--neutral-100); color: var(--text-primary);">
                Save Changes
            </button>
        </div>
    </form>

    <!-- Email (read-only) -->
    <div class="mb-10">
        <label class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">Email</label>
        <p class="text-sm" style="color: var(--text-secondary);">{{ user.email }}</p>
    </div>

    <!-- Password section -->
    <form method="POST" class="mb-10">
        {% csrf_token %}
        <input type="hidden" name="action" value="update_password">
        <div class="space-y-4">
            <div>
                <label for="current_password" class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">Current password</label>
                <input type="password" id="current_password" name="current_password" placeholder="Current password" required
                       class="input-focus w-full px-3 py-2 text-sm rounded-lg outline-none transition-colors"
                       style="border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-0);">
            </div>
            <div>
                <label for="password" class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">New password</label>
                <input type="password" id="password" name="password" placeholder="New password" minlength="8" required
                       class="input-focus w-full px-3 py-2 text-sm rounded-lg outline-none transition-colors"
                       style="border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-0);">
            </div>
            <div>
                <label for="password_confirm" class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">Confirm new password</label>
                <input type="password" id="password_confirm" name="password_confirm" placeholder="Confirm new password" minlength="8" required
                       class="input-focus w-full px-3 py-2 text-sm rounded-lg outline-none transition-colors"
                       style="border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-0);">
            </div>
            <div>
                <button type="submit"
                        class="btn-neutral px-5 py-2 text-sm font-medium rounded-full transition-colors cursor-pointer whitespace-nowrap"
                        style="background: var(--neutral-100); color: var(--text-primary);">
                    Change Password
                </button>
            </div>
        </div>
    </form>

    <!-- Role section -->
    {% if org_membership %}
    <div class="mb-10">
        <label class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">Role</label>
        <div class="flex items-center gap-3">
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-full"
                  style="background: var(--neutral-100); color: var(--text-primary);">
                {% if org_membership.org_role == 'owner' %}
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                {% elif org_membership.org_role == 'admin' %}
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                {% else %}
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                {% endif %}
                {{ org_membership.get_org_role_display }}
            </span>
            <span class="text-xs" style="color: var(--text-tertiary);">
                in {{ org_membership.organization.name }}
            </span>
        </div>
    </div>
    {% endif %}    

    <!-- Divider -->
    <hr class="my-10" style="border-color: var(--border);">

    <!-- Delete account section -->
    <div x-data="{ showDeleteModal: false }">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h3 class="text-base font-semibold mb-1" style="color: var(--text-primary);">Delete your account</h3>
                <p class="text-sm" style="color: var(--text-secondary); max-width: 480px;">
                    When you delete your account, you lose access to Redea Social account services, and we permanently delete your personal data.
                </p>
            </div>

            <button type="button" @click="showDeleteModal = true"
                    class="btn-danger-soft px-5 py-2 text-sm font-medium rounded-full transition-colors cursor-pointer whitespace-nowrap shrink-0"
                    style="background: var(--error-soft, #FEE2E2); color: var(--error-500, #EF4444);">
                Delete Account
            </button>
        </div>

        <!-- Delete confirmation modal -->
        <template x-teleport="body">
            <div x-show="showDeleteModal" x-transition.opacity
                 @keydown.escape.window="showDeleteModal = false"
                 class="fixed inset-0 z-50 flex items-center justify-center"
                 style="background: rgba(0,0,0,0.4);">
                <div @click.outside="showDeleteModal = false"
                     x-show="showDeleteModal"
                     x-transition
                     class="w-full max-w-md rounded-xl shadow-xl"
                     style="background: var(--surface-0);">

                    <!-- Header -->
                    <div class="flex items-center justify-between px-6 py-4" style="border-bottom: 1px solid var(--border);">
                        <h3 class="text-base font-semibold" style="color: var(--text-primary);">Delete your account</h3>
                        <button type="button" @click="showDeleteModal = false" class="cursor-pointer" style="color: var(--text-tertiary);">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </button>
                    </div>

                    <!-- Body -->
                    <div class="px-6 py-5">
                        <p class="text-sm" style="color: var(--text-secondary);">
                            Are you sure you want to delete your account? This action is permanent and cannot be undone. You will lose access to all Redea Social services, and your personal data will be permanently deleted.
                        </p>
                    </div>

                    <!-- Footer -->
                    <div class="flex justify-end gap-3 px-6 py-4" style="border-top: 1px solid var(--border);">
                        <button type="button" @click="showDeleteModal = false"
                                class="btn-neutral px-5 py-2 text-sm font-medium rounded-full cursor-pointer transition-colors"
                                style="background: var(--neutral-100); color: var(--text-primary);">
                            Cancel
                        </button>
                        <form method="POST">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_account">
                            <button type="submit"
                                    class="btn-opacity px-5 py-2 text-sm font-semibold rounded-full cursor-pointer transition-colors whitespace-nowrap"
                                    style="background: var(--error-500, #EF4444); color: white;">
                                Yes, delete my account
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
{% endblock %}