{% extends "base.html" %}
{% block title %}Account Settings – Memlord{% endblock %}
{% block content %}
<style>[x-cloak]{display:none!important;}</style>

<div class="page-header">
    <h1 class="page-title">Account Settings</h1>
</div>

{% if request.query_params.get('name_updated') %}
<div class="alert alert-success">Display name updated.</div>
{% endif %}
{% if request.query_params.get('pw_updated') %}
<div class="alert alert-success">Password changed successfully.</div>
{% endif %}
{% if request.query_params.get('key_deleted') %}
<div class="alert alert-success">API key deleted.</div>
{% endif %}

<!-- Display name -->
<div class="detail-card" style="margin-bottom:1.25rem;">
    <div class="section-title">Display name</div>
    {% if name_error %}
    <div class="alert alert-error">{{ name_error }}</div>
    {% endif %}
    <form method="post" action="/ui/account/display-name">
        <div class="form-group">
            <label class="form-label" for="display_name">Name</label>
            <input class="form-input" id="display_name" name="display_name"
                   type="text" value="{{ user.display_name }}" minlength="3" required>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
</div>

<!-- Change password -->
<div class="detail-card" style="margin-bottom:1.25rem;">
    <div class="section-title">Change password</div>
    {% if pw_error %}
    <div class="alert alert-error">{{ pw_error }}</div>
    {% endif %}
    <form method="post" action="/ui/account/change-password">
        <div class="form-group">
            <label class="form-label" for="current_password">Current password</label>
            <input class="form-input" id="current_password" name="current_password"
                   type="password" autocomplete="current-password" required>
        </div>
        <div class="form-group">
            <label class="form-label" for="new_password">New password</label>
            <input class="form-input" id="new_password" name="new_password"
                   type="password" autocomplete="new-password" minlength="6" required>
        </div>
        <div class="form-group">
            <label class="form-label" for="new_password2">Confirm new password</label>
            <input class="form-input" id="new_password2" name="new_password2"
                   type="password" autocomplete="new-password" minlength="6" required>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Change password</button>
        </div>
    </form>
</div>

<!-- API keys -->
<div class="detail-card" style="margin-bottom:1.25rem;" x-data="apiKeysCard()">
    <div class="section-title">API keys</div>
    <p style="font-size:.875rem;color:var(--text-3);margin-bottom:1rem;">
        Use an API key to authenticate the MCP endpoint. Send it as
        <code>Authorization: Bearer &lt;key&gt;</code>.
    </p>

    <div class="alert alert-error" x-show="error" x-text="error" style="display:none;"></div>

    <form @submit.prevent="create($event.target)"
          style="display:flex;gap:.5rem;align-items:flex-end;margin-bottom:1rem;">
        <div class="form-group" style="flex:1;margin-bottom:0;">
            <label class="form-label" for="key_name">New key name</label>
            <input class="form-input" id="key_name" name="name" type="text"
                   placeholder="e.g. laptop, ci" required>
        </div>
        <div class="form-actions" style="margin:0;">
            <button type="submit" class="btn btn-primary" :disabled="busy"
                    x-text="busy ? 'Creating…' : 'Create key'">Create key</button>
        </div>
    </form>

    {% for key in api_keys or [] %}
    <div style="display:flex;justify-content:space-between;align-items:center;
                padding:.625rem 0;border-top:1px solid var(--border);">
        <div>
            <div style="font-weight:500;">{{ key.name }}</div>
            <div style="font-size:.75rem;color:var(--text-3);">
                <code>{{ key.prefix }}…</code>
                · created {{ key.created_at.strftime('%Y-%m-%d') }}
                {% if key.last_used_at %}
                · last used {{ key.last_used_at.strftime('%Y-%m-%d') }}
                {% else %}
                · never used
                {% endif %}
            </div>
        </div>
        <button type="button" class="btn btn-ghost"
                onclick="fetch('/api/api-keys/{{ key.id }}', {method: 'DELETE'})
                         .then(function () { location.href = '/ui/account?key_deleted=1'; })">
            Delete
        </button>
    </div>
    {% else %}
    <p style="font-size:.875rem;color:var(--text-3);">No API keys yet.</p>
    {% endfor %}

    <!-- New key modal: filled client-side from the create response, shown once. -->
    <div x-show="showModal" x-cloak @keydown.escape.window="closeModal()" @click.self="closeModal()"
         style="display:flex;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;
                align-items:center;justify-content:center;padding:1rem;">
        <div style="background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;
                    max-width:480px;width:100%;box-shadow:var(--shadow-md);margin:auto;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
                <h2 style="font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;margin:0;">
                    API key created
                </h2>
                <button type="button" @click="closeModal()"
                        style="background:none;border:none;cursor:pointer;color:var(--text-4);
                               font-size:1.25rem;line-height:1;padding:.125rem .25rem;">&#x2715;</button>
            </div>
            <p style="font-size:.875rem;color:var(--text-3);margin-bottom:1rem;">
                Key <strong x-text="newKeyName"></strong> created. Copy it now —
                it won't be shown again.
            </p>
            <div style="position:relative;margin-bottom:1.25rem;">
                <pre x-text="newKey"
                     style="background:var(--nav-bg);color:#e2e8f0;border:1px solid var(--nav-border);
                            border-radius:var(--radius-sm);padding:.7rem 4.5rem .7rem .75rem;
                            font-family:'Menlo','Cascadia Code','Consolas','Monaco',monospace;font-size:.8125rem;
                            overflow-x:auto;white-space:pre;line-height:1.5;margin:0;"></pre>
                <button type="button" class="btn btn-sm" @click="copy()"
                        x-text="copied ? 'Copied!' : 'Copy'"
                        style="position:absolute;top:.45rem;right:.45rem;">Copy</button>
            </div>
            <div class="form-actions" style="margin:0;justify-content:flex-end;">
                <button type="button" class="btn btn-primary" @click="closeModal()">Done</button>
            </div>
        </div>
    </div>
</div>

<script>
function apiKeysCard() {
    return {
        error: "",
        busy: false,
        showModal: false,
        copied: false,
        newKey: "",
        newKeyName: "",

        async create(form) {
            if (this.busy) return;
            this.busy = true;
            this.error = "";
            // The name is read from the form — the server doesn't echo it back.
            const body = new FormData(form);
            const name = (body.get("name") || "").toString().trim();
            try {
                const r = await fetch("/api/api-keys", { method: "POST", body });
                if (r.ok) {
                    const data = await r.json();
                    this.newKey = data.raw;
                    this.newKeyName = name;
                    this.copied = false;
                    this.showModal = true;
                    form.reset();
                } else {
                    const data = await r.json().catch(() => ({}));
                    this.error = data.detail || "Failed to create key.";
                }
            } catch (e) {
                this.error = "Network error. Please try again.";
            } finally {
                this.busy = false;
            }
        },

        copy() {
            navigator.clipboard.writeText(this.newKey).then(() => {
                this.copied = true;
                setTimeout(() => { this.copied = false; }, 2000);
            });
        },

        closeModal() {
            // Reload so the new key shows in the list, with a clean /ui/account URL.
            window.location.href = "/ui/account";
        },
    };
}
</script>

<!-- Delete account -->
<div class="detail-card" style="border-color:var(--danger-border);">
    <div class="section-title" style="color:var(--danger-text);">Delete account</div>
    <p style="font-size:.875rem;color:var(--text-3);margin-bottom:1rem;">
        This will permanently delete your account, all your memories, and all workspaces you own.
        This action cannot be undone.
    </p>
    {% if delete_error %}
    <div class="alert alert-error">{{ delete_error }}</div>
    {% endif %}
    <form method="post" action="/ui/account/delete"
          x-data="{ open: false }" @submit.prevent="if(open) $el.submit(); else open=true">
        <div x-show="open" style="display:none">
            <div class="form-group">
                <label class="form-label" for="confirm_password">Enter your password to confirm</label>
                <input class="form-input" id="confirm_password" name="confirm_password"
                       type="password" autocomplete="current-password" :required="open">
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-danger">
                <span x-text="open ? 'Confirm deletion' : 'Delete my account'">Delete my account</span>
            </button>
            <button type="button" x-show="open" class="btn btn-ghost" @click="open=false">Cancel</button>
        </div>
    </form>
</div>

{% endblock %}