<script lang="ts">
    import { submit } from '$lib/api';

    let activeTab = $state<'login' | 'register'>('login');
    let username = $state('');
    let password = $state('');
    let error = $state('');

    async function handleSubmit() {
        try {
            await submit(activeTab, username, password);
            window.location.href = '/';
        } catch {
            error = 'Invalid credentials';
        }
    }
</script>

<div class="-mt-16 flex flex-1 items-center justify-center">
    <div class="w-full max-w-xs">
        <h1 class="mb-8 text-4xl text-white" style="font-family: 'Caveat', cursive;">loft</h1>

        <div class="mb-6 flex border-b border-sky-200/20">
            <button
                data-testid="auth-tab-login"
                onclick={() => (activeTab = 'login')}
                class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab === 'login'
                    ? '-mb-px border-b border-white text-white'
                    : 'text-white/40 hover:text-white/60'}"
            >
                Login
            </button>
            <button
                data-testid="auth-tab-register"
                onclick={() => (activeTab = 'register')}
                class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab === 'register'
                    ? '-mb-px border-b border-white text-white'
                    : 'text-white/40 hover:text-white/60'}"
            >
                Register
            </button>
        </div>

        <div class="flex flex-col gap-3">
            <div class="flex flex-col gap-1">
                <label for="username" class="text-xs text-white/30">Username</label>
                <input
                    id="username"
                    bind:value={username}
                    type="text"
                    autocomplete="username"
                    class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
                />
            </div>
            <div class="flex flex-col gap-1">
                <label for="password" class="text-xs text-white/30">Password</label>
                <input
                    id="password"
                    bind:value={password}
                    type="password"
                    autocomplete="current-password"
                    class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
                />
            </div>
            {#if error}<p class="text-xs text-red-400/60">{error}</p>{/if}
            <button
                data-testid="auth-submit"
                onclick={handleSubmit}
                class="mt-1 cursor-pointer rounded-sm border border-sky-200/15 px-4 py-2 text-sm text-white/40 transition-colors hover:border-sky-200/30 hover:text-white/60"
            >
                {activeTab === 'login' ? 'Login' : 'Register'}
            </button>
        </div>
    </div>
</div>
