{% extends "hub/base.html" %}
{% load static %}
{% block title %}{{ workspace.name }} Settings - SciTeX Orochi{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'hub/style/style-base.css' %}?v=135">
    <link rel="stylesheet" href="{% static 'hub/style/style-main.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-messages.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-composer.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-agents.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-channels.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-menus.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-modals.css' %}?v=135">
    <link rel="stylesheet" href="{% static 'hub/settings.css' %}">
{% endblock %}
{% block body_class %}page-app{% endblock %}
{% block body %}
    <div id="app">
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src="{% static 'hub/orochi-icon.png' %}"
                     alt="Orochi"
                     class="sidebar-logo">
                <h2>SciTeX Orochi</h2>
                <span class="workspace-name">{{ workspace.name }}</span>
            </div>
            <div class="sidebar-section">
                <h3>Navigation</h3>
                <ul id="channel-list">
                    <li>
                        <a href="/">Dashboard</a>
                    </li>
                    <li class="active">Settings</li>
                </ul>
            </div>
            <div class="sidebar-footer">
                <span>{{ request.user.username }}</span>
                <a href="{% url 'signout' %}">Logout</a>
            </div>
        </nav>
        <main id="chat-area" class="settings-area">
            <div class="settings-content" id="settings-content">
                {% if messages %}
                    {% for message in messages %}<div class="settings-msg {{ message.tags }}">{{ message }}</div>{% endfor %}
                {% endif %}
                <div class="settings-mode-tabs">
                    <button type="button" class="settings-mode-btn active" data-mode="user">User</button>
                    {% if is_admin %}<button type="button" class="settings-mode-btn" data-mode="workspace">Workspace</button>{% endif %}
                </div>
                <div class="settings-mode-pane" data-mode="user">
                    <section class="settings-section">
                        <h4>You</h4>
                        <p class="settings-desc">Account-level settings for the signed-in user.</p>
                        <table class="settings-table">
                            <tbody>
                                <tr>
                                    <td class="info-label">Username</td>
                                    <td>
                                        <code>{{ request.user.username }}</code>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="info-label">Email</td>
                                    <td>{{ request.user.email|default:"—" }}</td>
                                </tr>
                                <tr>
                                    <td class="info-label">Joined</td>
                                    <td>{{ request.user.date_joined|date:"Y-m-d" }}</td>
                                </tr>
                                <tr>
                                    <td class="info-label">Workspaces</td>
                                    <td>{{ request.user.workspace_memberships.count }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="{% url 'signout' %}"
                           class="btn-small btn-danger"
                           style="margin-top:8px;
                                  display:inline-block">Sign out</a>
                    </section>
                    <section class="settings-section">
                        <h4>🔔 Push Notifications</h4>
                        <p class="settings-desc">
                            Receive mobile push notifications when you are @mentioned or #escalation messages arrive. Works on Chrome and Safari (iOS 16.4+).
                        </p>
                        <button type="button"
                                id="push-toggle"
                                class="btn-small push-off"
                                onclick="togglePush()">Notifications: OFF</button>
                        <p class="settings-desc"
                           id="push-status-msg"
                           style="margin-top:6px;
                                  font-size:11px;
                                  color:#888"></p>
                    </section>
                    <section class="settings-section">
                        <h4>Change Password</h4>
                        <p class="settings-desc">Update your account password via the secure password change page.</p>
                        <a href="/accounts/password/change/"
                           class="btn-small btn-primary password-change-link"
                           style="margin-top:4px;
                                  display:inline-block">&#128274; Change Password</a>
                    </section>
                </div>
                <div class="settings-mode-pane" data-mode="workspace" style="display:none">
                    <section class="settings-section">
                        <h4>Workspace Info</h4>
                        <p class="settings-desc">Basic information about this workspace.</p>
                        <table class="settings-table">
                            <tbody>
                                <tr>
                                    <td class="info-label">Name</td>
                                    <td>
                                        <code>{{ workspace.name }}</code>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="info-label">Description</td>
                                    <td>{{ workspace.description|default:"No description set." }}</td>
                                </tr>
                                <tr>
                                    <td class="info-label">Created</td>
                                    <td>{{ workspace.created_at|date:"Y-m-d H:i" }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                    <section class="settings-section">
                        <h4>Workspace Icon</h4>
                        <p class="settings-desc">Click the icon to pick an emoji, or upload an image below.</p>
                        <div class="ws-icon-preview ws-icon-clickable ws-icon-preview-box"
                             id="ws-icon-preview"
                             title="Click to change icon">
                            {% if workspace.icon_image %}
                                <img src="{{ workspace.icon_image }}" alt="" class="ws-icon-preview-image">
                            {% elif workspace.icon %}
                                {{ workspace.icon }}
                            {% else %}
                                🐍
                            {% endif %}
                        </div>
                        <form method="post" class="settings-form settings-form-icon">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="set_icon">
                            <input type="hidden" name="icon" value="" id="icon-input">
                        </form>
                        <form method="post"
                              action="/api/workspace/icon/"
                              enctype="multipart/form-data"
                              class="settings-form settings-form-icon-upload">
                            {% csrf_token %}
                            <input type="file" name="file" accept="image/*" id="ws-icon-file-input">
                            <button type="submit" class="btn-small btn-primary">Upload image</button>
                            {% if workspace.icon_image %}
                                <button type="button"
                                        class="btn-small"
                                        id="ws-icon-remove-btn"
                                        title="Remove uploaded image (keeps emoji)">Remove image</button>
                            {% endif %}
                        </form>
                    </section>
                    <section class="settings-section">
                        <h4>Agent Tokens</h4>
                        <p class="settings-desc">Tokens allow AI agents to connect to this workspace via WebSocket.</p>
                        <table class="settings-table">
                            <thead>
                                <tr>
                                    <th>Label</th>
                                    <th>Token</th>
                                    <th>Created</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for t in tokens %}
                                    <tr>
                                        <td>{{ t.label }}</td>
                                        <td>
                                            <code class="token-masked" data-token="{{ t.token }}">{{ t.token|truncatechars:12 }}...</code>
                                            <button type="button"
                                                    class="btn-small btn-token-show"
                                                    title="Show/hide token"
                                                    onclick="toggleToken(this)">Show</button>
                                            <button type="button"
                                                    class="btn-small btn-token-copy"
                                                    title="Copy token"
                                                    onclick="copyToken(this)">Copy</button>
                                        </td>
                                        <td>{{ t.created_at|date:"Y-m-d" }}</td>
                                        <td>
                                            <form method="post" class="inline-form">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="revoke_token">
                                                <input type="hidden" name="token_id" value="{{ t.id }}">
                                                <button type="submit" class="btn-small btn-danger">Revoke</button>
                                            </form>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="4">No tokens yet.</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        <form method="post" class="settings-form">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="create_token">
                            <input type="text" name="label" placeholder="Token label (e.g. my-agent)">
                            <button type="submit" class="btn-small btn-primary">Create Token</button>
                        </form>
                    </section>
                    <section class="settings-section">
                        <h4>Members</h4>
                        <p class="settings-desc">Invite users to this workspace.</p>
                        <table class="settings-table">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Role</th>
                                    <th>Joined</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for m in members %}
                                    <tr>
                                        <td>{{ m.user.username }}</td>
                                        <td>{{ m.role }}</td>
                                        <td>{{ m.joined_at|date:"Y-m-d" }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        <form method="post" class="settings-form">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="add_member">
                            <input type="text" name="username" placeholder="Username to invite" required>
                            <button type="submit" class="btn-small btn-primary">Invite</button>
                        </form>
                    </section>
                    <section class="settings-section">
                        <h4>Email Invitations</h4>
                        <p class="settings-desc">Invite people by email. They'll get a link to sign up and join this workspace.</p>
                        {% if invitations %}
                            <table class="settings-table">
                                <thead>
                                    <tr>
                                        <th>Email</th>
                                        <th>Invited</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for inv in invitations %}
                                        <tr>
                                            <td>{{ inv.email }}</td>
                                            <td>{{ inv.created_at|date:"Y-m-d" }}</td>
                                            <td>Pending</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% endif %}
                        <form method="post" class="settings-form">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="invite_email">
                            <input type="email" name="email" placeholder="email@example.com" required>
                            <button type="submit" class="btn-small btn-primary">Send Invite</button>
                        </form>
                    </section>
                    <section class="settings-section">
                        <h4>Pending invite requests</h4>
                        <p class="settings-desc">
                            Requests submitted via the landing page. Approving creates an invitation and emails the requester the signup link.
                        </p>
                        {% if pending_invite_requests %}
                            <table class="settings-table">
                                <thead>
                                    <tr>
                                        <th>Email</th>
                                        <th>Name</th>
                                        <th>Affiliation</th>
                                        <th>Message</th>
                                        <th>Requested</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for req in pending_invite_requests %}
                                        <tr>
                                            <td>{{ req.email }}</td>
                                            <td>{{ req.name|default:"—" }}</td>
                                            <td>{{ req.affiliation|default:"—" }}</td>
                                            <td>
                                                <span title="{{ req.message }}">{{ req.message|truncatechars:40|default:"—" }}</span>
                                            </td>
                                            <td>{{ req.created_at|date:"Y-m-d H:i" }}</td>
                                            <td>
                                                <form method="post" style="display:inline">
                                                    <!-- hook-bypass: inline-style -->
                                                    {% csrf_token %}
                                                    <input type="hidden" name="action" value="approve_invite_request">
                                                    <input type="hidden" name="request_id" value="{{ req.id }}">
                                                    <button type="submit" class="btn-small btn-primary">Approve</button>
                                                </form>
                                                <form method="post" style="display:inline">
                                                    <!-- hook-bypass: inline-style -->
                                                    {% csrf_token %}
                                                    <input type="hidden" name="action" value="deny_invite_request">
                                                    <input type="hidden" name="request_id" value="{{ req.id }}">
                                                    <button type="submit" class="btn-small">Deny</button>
                                                </form>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            <p class="settings-desc">
                                <em>No pending requests.</em>
                            </p>
                        {% endif %}
                    </section>
                    <section class="settings-section">
                        <h4>GitHub Integration</h4>
                        <p class="settings-desc">GitHub access for issue tracking and repository integration.</p>
                        <div class="settings-info-box">
                            <code>GITHUB_TOKEN</code> is configured per-server, not per-user or per-workspace.
                            It is set as an environment variable on the Orochi server process.
                            Contact your server administrator to configure or rotate the token.
                        </div>
                    </section>
                    {% if is_admin %}
                        <section class="settings-section">
                            <h4>Rename Workspace</h4>
                            <p class="settings-desc">Change the workspace URL. This will change the subdomain used to access this workspace.</p>
                            <form method="post" class="settings-form">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="rename_workspace">
                                <input type="text"
                                       name="new_name"
                                       value="{{ workspace.name }}"
                                       pattern="[a-z0-9]([a-z0-9\-]*[a-z0-9])?"
                                       title="Lowercase letters, numbers, and hyphens only"
                                       required>
                                <button type="submit" class="btn-small btn-primary">Rename</button>
                            </form>
                            <p class="settings-desc settings-note">Note: This will change the workspace URL.</p>
                        </section>
                        <section class="settings-section danger-zone">
                            <h4>Danger Zone</h4>
                            <div class="danger-box">
                                <div class="danger-box-header">
                                    <strong>Delete this workspace</strong>
                                    <p class="settings-desc">
                                        Once you delete a workspace, there is no going back. All channels, messages, tokens, and members will be permanently removed.
                                    </p>
                                </div>
                                <form method="post" class="danger-form" id="delete-workspace-form">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="delete_workspace">
                                    <label class="danger-label" for="confirm-delete-name">
                                        Type <strong>{{ workspace.name }}</strong> to confirm:
                                    </label>
                                    <div class="danger-form-row">
                                        <input type="text"
                                               id="confirm-delete-name"
                                               name="confirm_name"
                                               placeholder="{{ workspace.name }}"
                                               autocomplete="off"
                                               required>
                                        <button type="submit"
                                                id="btn-delete-workspace"
                                                class="btn-small btn-danger"
                                                disabled>Delete this workspace</button>
                                    </div>
                                </form>
                            </div>
                        </section>
                    {% endif %}
                </div>
                <!-- /.settings-mode-pane[workspace] -->
            </div>
        </main>
    </div>
{% endblock %}
{% block extra_js %}
    <!-- hook-bypass: inline-script — Django template vars must be injected server-side -->
    <script>
      window.__orochiWorkspaceIcon = "{{ workspace.icon|escapejs }}";
      window.__orochiWorkspaceIconImage = "{{ workspace.icon_image|escapejs }}";
      window.__orochiWorkspaceName = "{{ workspace.name|escapejs }}";
      window.__orochiCsrfToken = "{{ csrf_token }}";
    </script>
    <script src="{% static 'hub/app/state.js' %}?v=149"></script>
    <script src="{% static 'hub/app/members.js' %}?v=149"></script>
    <script src="{% static 'hub/app/channel-prefs.js' %}?v=149"></script>
    <script src="{% static 'hub/app/context-menus.js' %}?v=149"></script>
    <script src="{% static 'hub/app/agent-actions.js' %}?v=149"></script>
    <script src="{% static 'hub/app/utils.js' %}?v=149"></script>
    <script src="{% static 'hub/app/websocket.js' %}?v=149"></script>
    <script src="{% static 'hub/app/sidebar-agents.js' %}?v=149"></script>
    <script src="{% static 'hub/app/sidebar-channel-tree.js' %}?v=149"></script>
    <script src="{% static 'hub/app/sidebar-stats.js' %}?v=149"></script>
    <script src="{% static 'hub/app/keyboard.js' %}?v=149"></script>
    <script src="{% static 'hub/settings.js' %}"></script>
    <script src="{% static 'hub/emoji-picker.js' %}?v=1"></script>
{% endblock %}