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

    async function handleSubmit() {
        const endpoint = activeTab === 'login' ? '/api/auth/login' : '/api/auth/register';
        const res = await fetch(`http://localhost:3000${endpoint}`, {
            method: 'POST',
            credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username, password })
        });

        if (res.ok) {
            window.location.href = '/';
        } else {
            error = 'Invalid credentials';
        }
    }


</script>

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

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