{% extends 'layout.html' %}

{% block content %}
<v-container fluid class="pa-4">
    <v-card max-width="800" class="mx-auto">
        <v-card-title class="text-headline-small">
            <i class="ti ti-robot mr-2"></i>
            Agent Tokens
        </v-card-title>
        <v-card-subtitle>
            Let an AI agent call this app's tools as you, over MCP
        </v-card-subtitle>

        <v-card-text>
            <v-alert variant="tonal" class="mb-4">
                <div class="text-body-medium">MCP endpoint</div>
                <code>${page.url}</code>
                <div class="text-body-small text-medium-emphasis mt-1">
                    Send the token as <code>Authorization: Bearer &lt;token&gt;</code>.
                    A token can use only the roles you pick, and only while you still hold them.
                    Every call is logged.
                </div>
            </v-alert>

            <v-data-table :headers="headers" :items="tokens" no-data-text="No tokens yet" hide-default-footer :items-per-page="-1">
                <template v-slot:item.scopes="{ item }">
                    <v-chip v-for="scope in item.scopes" :key="scope" size="small" class="mr-1">${scope}</v-chip>
                    <span v-if="!item.scopes.length" class="text-medium-emphasis">none</span>
                </template>
                <template v-slot:item.last_used_at="{ item }">
                    ${item.last_used_at ? item.last_used_at.slice(0, 16).replace('T', ' ') : 'never'}
                </template>
                <template v-slot:item.expires_at="{ item }">
                    ${item.expires_at.slice(0, 10)}
                </template>
                <template v-slot:item.actions="{ item }">
                    <v-btn size="small" variant="text" color="error" @click="revoke(item)">Revoke</v-btn>
                </template>
            </v-data-table>
        </v-card-text>

        <v-card-actions class="pa-4">
            <v-spacer></v-spacer>
            <v-btn color="primary" variant="elevated" @click="dialog = true">
                <i class="ti ti-plus mr-1"></i>
                New Token
            </v-btn>
        </v-card-actions>
    </v-card>

    <v-dialog v-model="dialog" width="520">
        <v-card class="pa-4">
            <v-card-title>New Token</v-card-title>
            <v-card-text>
                <v-text-field label="Name" v-model="item.name" placeholder="Claude Code on my laptop" maxlength="80"></v-text-field>
                <v-select label="Scopes" v-model="item.scopes" :items="page.roles" multiple chips
                          hint="Roles this token may use; tools without a role need none" persistent-hint></v-select>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn variant="text" @click="dialog = false">Cancel</v-btn>
                <v-btn color="primary" variant="elevated" :disabled="!item.name" @click="create">Create</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <v-dialog v-model="secretDialog" width="620" persistent>
        <v-card class="pa-4">
            <v-card-title>Copy your token now</v-card-title>
            <v-card-text>
                <v-alert type="warning" variant="tonal" class="mb-4">
                    It is shown only once. Store it like a password.
                </v-alert>
                <v-text-field :model-value="secret" readonly variant="outlined" class="font-weight-mono"></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-btn variant="text" @click="copy">
                    <i class="ti ti-copy mr-1"></i>
                    Copy
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="elevated" @click="done">Done</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <v-snackbar v-model="snackBar" rounded="pill">${snackMessage}</v-snackbar>
</v-container>
{% endblock %}

{% block js %}
<script type="application/json" id="page-data">{{ page|tojson|safe }}</script>
<script>
    const { createApp } = Vue;
    const { createVuetify } = Vuetify;
    const vuetify = createVuetify(config.vuetifyConfig);
    const page = JSON.parse(document.getElementById('page-data').textContent);

    const app = createApp({
        mixins: [layoutMixin],
        data() {
            return {
                page,
                tokens: page.tokens,
                headers: [
                    {title: 'Name', value: 'name'},
                    {title: 'Scopes', value: 'scopes', sortable: false},
                    {title: 'Last used', value: 'last_used_at'},
                    {title: 'Expires', value: 'expires_at'},
                    {title: '', value: 'actions', sortable: false, align: 'end'},
                ],
                dialog: false,
                item: { name: '', scopes: [] },
                secretDialog: false,
                secret: '',
                snackBar: false,
                snackMessage: '',
            };
        },
        methods: {
            showSnack(message) {
                this.snackMessage = message;
                this.snackBar = true;
            },
            create() {
                axios.post('/api/token/', { item: this.item })
                    .then(res => {
                        this.tokens.unshift(res.data.item);
                        this.secret = res.data.token;
                        this.dialog = false;
                        this.secretDialog = true;
                        this.item = { name: '', scopes: [] };
                    })
                    .catch(err => {
                        this.showSnack(err.response?.status === 401
                            ? 'Sign in again to create a token'
                            : err.response?.data?.message || 'Could not create the token');
                    });
            },
            copy() {
                navigator.clipboard.writeText(this.secret);
                this.showSnack('Copied');
            },
            done() {
                this.secret = '';
                this.secretDialog = false;
            },
            revoke(token) {
                if (!confirm(`Revoke ${token.name}? Agents using it stop working.`)) return;
                axios.delete(`/api/token/${token.id}`)
                    .then(res => {
                        this.tokens = this.tokens.filter(t => t.id !== token.id);
                        this.showSnack(res.data.message);
                    })
                    .catch(err => this.showSnack(err.response?.data?.message || 'Could not revoke the token'));
            },
        },
        delimiters: config.delimiters,
    });

    registerStkComponents(app);
    app.use(vuetify).mount('#app');
</script>
{% endblock %}