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

    <!-- Workspace Name section -->
    <form method="POST" class="mb-10">
        {% csrf_token %}
        <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);">Workspace Name</label>
                <input type="text" id="name" name="name" value="{{ workspace.name }}" required maxlength="100"
                       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 cursor-pointer whitespace-nowrap"
                    style="background: var(--neutral-100); color: var(--text-primary);">
                Save Changes
            </button>
        </div>
    </form>

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

        <div class="flex items-center justify-between mb-10">
            <div class="flex items-center gap-4">
                <!-- Logo preview or default placeholder -->
                <template x-if="preview">
                    <div class="relative">
                        <img :src="preview" alt="Workspace logo" class="w-16 h-16 rounded-lg object-cover border" style="border-color: var(--border);">
                        <button type="button"
                                @click="preview = ''; $refs.fileInput.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 logo">
                            <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-lg 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);"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    </div>
                </template>

                <div>
                    <p class="text-sm font-semibold" style="color: var(--text-primary);">Logo</p>
                    <p class="text-xs mt-0.5" style="color: var(--text-tertiary);">JPEG, PNG, WebP, or GIF. Max 2 MB.</p>
                </div>
            </div>

            <label class="btn-surface-neutral-50 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-full cursor-pointer"
                   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 Logo
                <input type="file" name="icon" accept="image/jpeg,image/png,image/webp,image/gif" class="hidden" x-ref="fileInput"
                       @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>

    {% if is_owner_or_manager %}
    <hr class="my-10" style="border-color: var(--border);">

    <!-- Archive / Restore Workspace section -->
    <div x-data="{ showArchiveModal: false }">
        <div class="flex items-start justify-between gap-4 mb-10">
            <div>
                <h3 class="text-base font-semibold mb-1" style="color: var(--text-primary);">
                    {% if workspace.is_archived %}Restore this workspace{% else %}Archive this workspace{% endif %}
                </h3>
                <p class="text-sm" style="color: var(--text-secondary); max-width: 480px;">
                    {% if workspace.is_archived %}
                    This workspace is currently archived. Restoring it will make it visible in the sidebar and accessible to all members again.
                    {% elif can_archive %}
                    Archiving hides this workspace from the sidebar and prevents new posts. All existing data is preserved and the workspace can be restored at any time.
                    {% else %}
                    You cannot archive the last active workspace in the organization. Create another workspace first.
                    {% endif %}
                </p>
            </div>

            {% if workspace.is_archived %}
            <form method="POST">
                {% csrf_token %}
                <input type="hidden" name="action" value="unarchive_workspace">
                <button type="submit"
                        class="btn-neutral px-5 py-2 text-sm font-medium rounded-full cursor-pointer whitespace-nowrap shrink-0"
                        style="background: var(--neutral-100); color: var(--text-primary);">
                    Restore Workspace
                </button>
            </form>
            {% elif can_archive %}
            <button type="button" @click="showArchiveModal = true"
                    class="btn-amber px-5 py-2 text-sm font-medium rounded-full cursor-pointer whitespace-nowrap shrink-0"
                    style="background: #FEF3C7; color: #92400E;">
                Archive Workspace
            </button>

            <!-- Archive confirmation modal -->
            <template x-teleport="body">
                <div x-show="showArchiveModal" x-transition.opacity
                     @keydown.escape.window="showArchiveModal = false"
                     class="fixed inset-0 z-50 flex items-center justify-center"
                     style="background: rgba(0,0,0,0.4);">
                    <div @click.outside="showArchiveModal = false"
                         x-show="showArchiveModal"
                         x-transition
                         class="w-full max-w-md rounded-xl shadow-xl"
                         style="background: var(--surface-0);">
                        <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);">Archive this workspace</h3>
                            <button type="button" @click="showArchiveModal = 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>
                        <div class="px-6 py-5">
                            <p class="text-sm" style="color: var(--text-secondary);">
                                Are you sure you want to archive <strong>{{ workspace.name }}</strong>? The workspace will be hidden from the sidebar and no new posts can be created. All existing data will be preserved.
                            </p>
                        </div>
                        <div class="flex justify-end gap-3 px-6 py-4" style="border-top: 1px solid var(--border);">
                            <button type="button" @click="showArchiveModal = false"
                                    class="btn-neutral px-5 py-2 text-sm font-medium rounded-full cursor-pointer"
                                    style="background: var(--neutral-100); color: var(--text-primary);">
                                Cancel
                            </button>
                            <form method="POST">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="archive_workspace">
                                <button type="submit"
                                        class="btn-opacity px-5 py-2 text-sm font-semibold rounded-full cursor-pointer whitespace-nowrap"
                                        style="background: #92400E; color: white;">
                                    Yes, archive this workspace
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </template>
            {% endif %}
        </div>
    </div>

    <!-- Delete Workspace 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 this workspace</h3>
                <p class="text-sm" style="color: var(--text-secondary); max-width: 480px;">
                    {% if can_delete %}
                    Permanently delete this workspace and all of its data. This includes all posts, connected social accounts, media assets, and workspace memberships. This action cannot be undone.
                    {% else %}
                    You cannot delete the last active workspace in the organization. Create another workspace first.
                    {% endif %}
                </p>
            </div>

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

        {% if can_delete %}
        <!-- 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);">
                    <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 this workspace</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>
                    <div class="px-6 py-5">
                        <p class="text-sm mb-3" style="color: var(--text-secondary);">
                            Are you sure you want to permanently delete <strong>{{ workspace.name }}</strong>? This action cannot be undone.
                        </p>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            All of the following will be permanently removed:
                        </p>
                        <ul class="text-sm mt-2 ml-4 list-disc space-y-1" style="color: var(--text-secondary);">
                            <li>All scheduled and published posts</li>
                            <li>Connected social accounts</li>
                            <li>Media assets and files</li>
                            <li>Workspace memberships</li>
                        </ul>
                    </div>
                    <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"
                                style="background: var(--neutral-100); color: var(--text-primary);">
                            Cancel
                        </button>
                        <form method="POST">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_workspace">
                            <button type="submit"
                                    class="btn-opacity px-5 py-2 text-sm font-semibold rounded-full cursor-pointer whitespace-nowrap"
                                    style="background: var(--error-500, #EF4444); color: white;">
                                Yes, delete this workspace
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </template>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}