<template>
    <div class="container-fluid p-5 bg-gradient-secondary" style="height: 100vh;">
            <div class="text-center">
                <h4 class="text-dark mb-4 ">Welcome To Pavti-Pustak Back!</h4>
            </div>
            <div class="bg-dark bg-gradient-dark p-5 rounded rounded-4 user col-md-3 col-sm-10 mx-auto shadow">
                <div class="mb-3">
                    <input class="form-control form-control-user" type="text" placeholder="User ID" name="username" v-model="user" :disabled="isLoading"/>
                </div>
                <div class="mb-3">
                    <input class="form-control form-control-user" type="password" placeholder="Password" name="password" v-model="password" :disabled="isLoading" @keyup.enter="login()"/>
                </div>
                <div v-if="loginError" class="alert alert-danger py-2" role="alert">
                    {{ loginError }}
                </div>
                <div class="mb-1">                        
                    <button class="btn btn-primary d-block btn-user w-100" :disabled="isLoading" @click.prevent="login()">
                        <span v-if="isLoading" class="spinner-border spinner-border-sm me-1"></span>
                        Login
                    </button>
                </div>
                
            </div>
            
            <!-- <div class="text-center"><a class="small" href="forgot-password.html">Forgot Password?</a></div>
            <div class="text-center"><a class="small" href="register.html">Create an Account!</a></div> -->
    </div>
</template>

<script>
export default {
    data(){
        return {
            user: '',
            password: '',
            loginError: '',
            isLoading: false
        }
    },
    methods:{
        async login(){
            this.loginError = '';

            if (!String(this.user || '').trim() || !String(this.password || '').trim()) {
                this.loginError = 'Username and password are required.';
                this.$store.commit('addAlert', {
                    title: 'Login Error',
                    message: this.loginError,
                    type: 'danger'
                });
                return;
            }

            this.isLoading = true;
            /* this.$store.dispatch('login', {
                email: this.email,
                password: this.password
            }) */
            try {
                const response = await this.axios.post('/authentication/login', {
                    username: this.user,
                    password: this.password
                });

                this.$store.commit('setAxiosInstance', this.axios);     
                this.$store.commit('setUser', response.data.userData);
                this.$store.commit('setIsLoggedIn', response.data.isLoggedIn);           
                this.$store.commit('addAlert', {
                    title: response.data.title,
                    message: response.data.msg,
                    type: response.data.isLoggedIn ? 'success' : 'danger'
                });
                if (!response.data.isLoggedIn) {
                    this.loginError = response.data.msg || 'Login failed. Please try again.';
                }
            } catch (err) {
                const serverMessage = err?.response?.data?.msg;
                if (serverMessage) {
                    this.loginError = serverMessage;
                } else {
                    this.loginError = 'Network error. Please check your connection and try again.';
                }
                this.$store.commit('addAlert', {
                    title: 'Login Error',
                    message: this.loginError,
                    type: 'danger'
                });
            } finally {
                this.isLoading = false;
            }
           
        }
    }
}
</script>