<script setup>
import { usePageTitle } from '../../composables/Core/usePageTitle';
usePageTitle('Login');

import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useNavigate } from '../../composables/Core/useNavigate.js';
import { resetRole } from '../../composables/Core/useAuth.js';
import { useUserStore } from '../../stores/user.js';

const { navigate } = useNavigate();
import { useUIStore } from '../../stores/ui';
const uiStore = useUIStore();

onMounted(() => {
    // Clear any stale session artifacts on login landing
    sessionStorage.clear();
    localStorage.clear();
    resetRole();
    useUserStore().resetCurrentUser();

    // Unregister service workers as per the legacy login.blade.php
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
            for (let registration of registrations) {
                registration.unregister();
            }
        }).catch(function (error) {
            console.error('Error while unregistering service workers:', error);
        });
    }

    // Clear all Cache Storage to prevent stale service worker pages (stuck homepage issue)
    if (window.caches) {
        caches.keys().then(function(names) {
            for (let name of names) {
                caches.delete(name);
            }
        }).catch(function(error) {
            console.error('Error while clearing caches:', error);
        });
    }
});

const usernumber = ref('');
const userpassword = ref('');
const keepAlive = ref(false);
const loading = ref(false);
const errorMessage = ref('');

const handleLogin = async () => {
    if (!usernumber.value || !userpassword.value) {
        errorMessage.value = 'Please fill in all fields.';
        return;
    }

    loading.value = true;
    errorMessage.value = '';

    try {
        const response = await axios.post('/post/loginnow', {
            mobile_number: usernumber.value,
            password: userpassword.value,
            keepalive: keepAlive.value
        }, {
            withCredentials: true
        });

        if (response.data.success) {
            // Redirect to home or reload to refresh auth state
            window.location.href = '/';
        } else {
            errorMessage.value = response.data.message || 'Invalid credentials.';
            if (window.toastr) window.toastr.error(errorMessage.value);
            userpassword.value = ''; // Clear password on failure
        }
    } catch (error) {
        errorMessage.value = error.response?.data?.message || 'An error occurred during login.';
        if (window.toastr) window.toastr.error(errorMessage.value);
        userpassword.value = '';
    } finally {
        loading.value = false;
    }
};

const handleKeypress = (event) => {
    if (event.key === 'Enter') {
        handleLogin();
    }
};
</script>

<template>
    <div class="login-page-container">
        <div class="login-card shadow-lg p-4">
            <div class="login-logo text-center mb-4">
                <img :src="uiStore.appLogo" :alt="uiStore.appName" class="login-logo-img mb-2">
                <h2 class="fw_7">{{ uiStore.appName }}</h2>
            </div>

            <div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
                {{ errorMessage }}
            </div>

            <div class="form-group mb-3">
                <label for="usernumber" class="form-label fw_6">Mobile Number</label>
                <div class="input-group custom-input-group">
                    <span class="input-group-text custom-input-addon">
                        <i class="fas fa-phone text-muted"></i>
                    </span>
                    <input type="text" id="usernumber" v-model="usernumber" class="form-control custom-input-field"
                        placeholder="e.g. 09123456789" @keypress="handleKeypress">
                </div>
            </div>

            <div class="form-group mb-4">
                <label for="userpassword" class="form-label fw_6">Password</label>
                <div class="input-group custom-input-group">
                    <span class="input-group-text custom-input-addon">
                        <i class="fas fa-lock text-muted"></i>
                    </span>
                    <input type="password" id="userpassword" v-model="userpassword"
                        class="form-control custom-input-field" placeholder="Your password" @keypress="handleKeypress">
                </div>
            </div>


            <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" v-model="keepAlive" id="keepAlive">
                <label class="form-check-label text-muted" for="keepAlive">
                    Keep me signed in
                </label>
            </div>

            <button @click="handleLogin" class="btn btn-primary w-100 py-3 rounded-pill fw_7 mb-3" :disabled="loading">
                <template v-if="loading">
                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                    Signing in...
                </template>
                <template v-else>
                    Sign In
                </template>
            </button>

            <div class="text-center">
                <p class="text-muted small mb-0">Don't have an account?</p>
                <a href="#" class="text-primary fw_6 undecorated">Contact your administrator</a>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 20px;
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.login-card {
    max-width: 400px;
    width: 100%;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease;
}

.login-logo h2 {
    margin-bottom: 0;
    color: var(--text-primary);
}

.login-logo-img {
    max-width: 96px;
    height: auto;
    object-fit: contain;
}

.form-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 5px;
}

.custom-input-group {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.custom-input-addon {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    color: var(--text-muted);
}

.custom-input-field {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 12px;
    font-size: 1rem;
    color: var(--text-primary) !important;
}

.custom-input-field:focus {
    box-shadow: none;
    border-color: var(--accent-color) !important;
}

.btn-primary {
    background: #42b983;
    border: none;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(66, 185, 131, 0.3);
    transition: all 0.2s ease;
    color: white !important;
}

.btn-primary:hover {
    background: #38a171;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(66, 185, 131, 0.4);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    background: #a8dcc3;
    opacity: 0.7;
}

.text-primary {
    color: #42b983 !important;
}

.undecorated {
    text-decoration: none;
}

.undecorated:hover {
    text-decoration: underline;
}

/* Dark mode specific enhancements */
:global(.dark-mode) .login-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.05);
}

:global(.dark-mode) .custom-input-addon,
:global(.dark-mode) .custom-input-field {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

:global(.dark-mode) .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

:global(.dark-mode) .form-check-input:checked {
    background-color: #42b983;
    border-color: #42b983;
}
</style>
