<template>
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="card w-full max-w-md bg-base-100 shadow-xl">
            <div class="card-body p-4 sm:p-6">
                <img src="../assets/openteam.webp" alt="Logo" class="h-32 w-auto mx-auto mb-0 pb-0 select-none hover:cursor-pointer" @click="$router.push('/')"/>

                <h2 class="card-title text-md sm:text-xl  mb-2 justify-center flex">
                    Create Your Account
                </h2>

                <form @submit.prevent="handleRegister">
                    <div class="form-control mb-4">
                        <label class="label" for="account">
                            <span class="label-text">Account</span>
                        </label>
                        <input type="text" id="account" placeholder="username"
                            class="input input-bordered w-full input-sm" v-model="username" required />
                    </div>

                    <div class="form-control mb-4">
                        <label class="label" for="password">
                            <span class="label-text">Password</span>
                        </label>
                        <input id="password" type="password" placeholder="password"
                            class="input input-bordered w-full input-sm" v-model="password" required minlength="4" />
                    </div>

                    <div class="form-control mb-6">
                        <label class="label" for="confirm-password">
                            <span class="label-text">Confirm Password</span>
                        </label>
                        <input type="password" id="confirm-password" placeholder="Retype your password"
                            class="input input-bordered w-full input-sm" v-model="confirmPassword" required />
                    </div>

                    <div class="form-control mb-4">
                        <button type="submit" class="btn btn-outline w-full btn-sm">
                            Sign Up
                        </button>
                    </div>
                    <div v-if="error" class="text-error text-sm mt-2 text-center">{{ error }}</div>
                </form>


                <div class="text-center mt-4 text-sm">
                    Already have an account?
                    <router-link to="/login" class="link link-primary link-hover">
                        Login
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const router = useRouter()
const authStore = useAuthStore()
const { setToast } = inject('toast');

const error = ref('');

const username = ref('');
const password = ref('');
const confirmPassword = ref('');

const handleRegister = async () => {
    if (password.value !== confirmPassword.value) {
        alert("密码不一致");
        return
    } 
    try {
        let res = await authStore.register({
            username: username.value,
            password: password.value
        })
        if (res.status === 200) {
            setToast(res.data?.msg || '已注册', 'success');
            setTimeout(() => {
                router.push('/login');
            }, 100);
            error.value = ''
        }
    } catch (e) {
        error.value = 'Registration failed. Please try again.'
    }
}

</script>