{% extends "layouts/settings.html" %}
{% block title %}General - Settings - 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>

    <!-- Organization 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);">Organization Name</label>
                <input type="text" id="name" name="name" value="{{ organization.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>

    <!-- Default Timezone section -->
    <form method="POST" class="mb-10">
        {% csrf_token %}
        <input type="hidden" name="action" value="update_timezone">
        <div class="flex items-end gap-4">
            <div class="flex-1">
                <label for="timezone" class="block text-sm font-semibold mb-1" style="color: var(--text-primary);">Default Timezone</label>
                <p class="text-xs mb-2" style="color: var(--text-tertiary);">Used as the fallback for workspaces that don't set their own.</p>
                <select id="timezone" name="timezone"
                        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);">
                    <optgroup label="Common">
                        {% for tz in common_timezones %}
                        <option value="{{ tz }}" {% if tz == organization.default_timezone %}selected{% endif %}>{{ tz }}</option>
                        {% endfor %}
                    </optgroup>
                    <optgroup label="All Timezones">
                        {% for tz in all_timezones %}
                        <option value="{{ tz }}" {% if tz == organization.default_timezone %}selected{% endif %}>{{ tz }}</option>
                        {% endfor %}
                    </optgroup>
                </select>
            </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>

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

    <!-- Delete Organization section -->
    {% if organization.is_deletion_pending %}
    <!-- Pending deletion state -->
    <div x-data="{ showImmediateDeleteModal: false }"
         class="rounded-lg p-4 mb-4"
         style="background: var(--error-soft, #FEE2E2); border: 1px solid var(--error-500, #EF4444);">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h3 class="text-sm font-semibold mb-1" style="color: var(--error-500, #EF4444);">Deletion scheduled</h3>
                <p class="text-sm" style="color: var(--text-secondary);">
                    This organization is scheduled for deletion on <strong>{{ organization.deletion_scheduled_for|date:"F j, Y" }}</strong>.
                    All workspaces, posts, social accounts, media, and team data will be permanently removed after this date.
                </p>
            </div>
            <div class="flex flex-col gap-3 shrink-0">
                <form method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="cancel_deletion">
                    <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);">
                        Cancel Deletion
                    </button>
                </form>
                <button type="button" @click="showImmediateDeleteModal = true"
                        class="btn-opacity px-5 py-2 text-sm font-medium rounded-full cursor-pointer whitespace-nowrap"
                        style="background: var(--error-500, #EF4444); color: white;">
                    Delete Now
                </button>
            </div>
        </div>

        <!-- Immediate delete confirmation modal -->
        <template x-teleport="body">
            <div x-show="showImmediateDeleteModal" x-transition.opacity
                 @keydown.escape.window="showImmediateDeleteModal = false"
                 class="fixed inset-0 z-50 flex items-center justify-center"
                 style="background: rgba(0,0,0,0.4);">
                <div @click.outside="showImmediateDeleteModal = false"
                     x-show="showImmediateDeleteModal"
                     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 immediately?</h3>
                        <button type="button" @click="showImmediateDeleteModal = 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 mb-3" style="color: var(--text-secondary);">
                            This will permanently delete <strong>{{ organization.name }}</strong> right now, bypassing the 14-day grace period. 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 workspaces and their settings</li>
                            <li>All scheduled and published posts</li>
                            <li>Connected social accounts and credentials</li>
                            <li>Media assets and files</li>
                            <li>Team memberships and invitations</li>
                        </ul>
                    </div>

                    <!-- Footer -->
                    <div class="flex justify-end gap-3 px-6 py-4" style="border-top: 1px solid var(--border);">
                        <button type="button" @click="showImmediateDeleteModal = 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_organization_now">
                            <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 permanently
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </template>
    </div>
    {% else %}
    <!-- Normal state -->
    <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 organization</h3>
                <p class="text-sm" style="color: var(--text-secondary); max-width: 480px;">
                    Permanently delete this organization and all of its data. This includes all workspaces, scheduled posts, social accounts, media assets, and team memberships.
                </p>
            </div>

            <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 Organization
            </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 this organization</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 mb-3" style="color: var(--text-secondary);">
                            Are you sure you want to delete <strong>{{ organization.name }}</strong>? This will schedule the organization for permanent deletion in 14 days.
                        </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 workspaces and their settings</li>
                            <li>All scheduled and published posts</li>
                            <li>Connected social accounts and credentials</li>
                            <li>Media assets and files</li>
                            <li>Team memberships and invitations</li>
                        </ul>
                    </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"
                                style="background: var(--neutral-100); color: var(--text-primary);">
                            Cancel
                        </button>
                        <form method="POST">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_organization">
                            <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 organization
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </template>
    </div>
    {% endif %}
    {% endif %}
</div>
{% endblock %}