<template>
    <div class="login-view">
        <WebGLBackground />
        <div class="login-card">
            <!-- Already logged in -->
            <template v-if="isLoggedIn">
                <h2>✅ Already signed in</h2>
                <p class="login-info">You're connected. Head back to chat or sign out below.</p>
                <button @click="router.push('/agents')">Go to Chat</button>
                <button class="logout-btn" @click="doLogout(ws.disconnect)">Sign out</button>
            </template>

            <!-- Login form -->
            <template v-else>
                <h2>🔐 Sign in</h2>
                <label class="login-label">Enter your Login Token</label>
                <input
                    v-model="loginToken"
                    type="password"
                    placeholder="Login Token"
                    @keyup.enter="doLogin"
                    :disabled="loggingIn"
                    autofocus
                />
                <button @click="doLogin" :disabled="loggingIn">
                    {{ loggingIn ? 'Connecting...' : 'Connect' }}
                </button>
                <div v-if="loginError" class="login-error">{{ loginError }}</div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';
import { auth, ws } from '../store';
import WebGLBackground from '../components/WebGLBackground.vue';
const { isLoggedIn, loginToken, loginError, loggingIn, doLogin, doLogout } = auth;
</script>
