<template>
    <v-container fluid class="fill-height pa-0">

        <v-row no-gutters class="fill-height">

            <!-- LEFT SIDE -->
            <v-col md="6" class="d-none d-md-flex align-center justify-center left-panel">
                <div class="text-center px-10">

                    <!-- BRAND -->
                    <div class="brand mb-4">
                        <span
                            v-for="(char, i) in brandText"
                            :key="i"
                            class="brand-letter"
                            :style="{ animationDelay: `${i * 0.04}s` }"
                        >
                            {{ char }}
                        </span>
                    </div>

                    <h1 class="text-h4 font-weight-bold mb-4">
                        RegcureFlow Tracker
                    </h1>

                    <p class="subtitle mb-8">
                        Track work, monitor productivity, and manage team time effortlessly
                    </p>

                    <!-- TIME ANIMATION -->
                    <div class="timeline-animation">
                        <div class="bar" v-for="i in 5" :key="i"></div>
                    </div>

                </div>
            </v-col>

            <!-- RIGHT SIDE -->
            <v-col cols="12" md="6" class="d-flex align-center justify-center pr-10">

                <v-card elevation="10" rounded="xl" class="pa-8 login-card" width="420">

                    <v-card-title class="text-h5 text-center mb-2">
                        Sign in to your workspace
                    </v-card-title>

                    <div class="text-center text-medium-emphasis mb-4">
                        Use your organization credentials to continue
                    </div>

                    <v-alert v-if="errorMessage" type="error" variant="tonal" class="mb-4">
                        {{ errorMessage }}
                    </v-alert>

                    <v-form @submit.prevent="submitLogin">

                        <v-text-field
                            v-model="form.email"
                            label="Email address"
                            type="email"
                            prepend-inner-icon="mdi-email-outline"
                            variant="outlined"
                            density="comfortable"
                            class="mb-3"
                        />

                        <v-text-field
                            v-model="form.password"
                            label="Password"
                            :type="showPassword ? 'text' : 'password'"
                            prepend-inner-icon="mdi-lock-outline"
                            :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                            variant="outlined"
                            density="comfortable"
                            @click:append-inner="showPassword = !showPassword"
                        />

                        <v-btn
                            type="submit"
                            color="primary"
                            size="large"
                            block
                            class="mt-4"
                            :loading="isSubmitting"
                        >
                            Sign In
                        </v-btn>

                    </v-form>

                </v-card>

            </v-col>

        </v-row>

    </v-container>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { login } from "../auth"

const router = useRouter()
const route = useRoute()

const form = reactive({ email: "", password: "" })
const showPassword = ref(false)
const isSubmitting = ref(false)
const errorMessage = ref("")

const brandText = "RegcureFlow".split("")

async function submitLogin() {
    errorMessage.value = ""
    isSubmitting.value = true

    try {
        await login(form.email, form.password)
        const redirectTarget = typeof route.query.redirect === "string" ? route.query.redirect : "/app/"
        await router.push(redirectTarget)
    } catch {
        errorMessage.value = "Invalid email or password. Please try again."
    } finally {
        isSubmitting.value = false
    }
}
</script>

<style scoped>

.left-panel {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
}

/* Card animation */
.login-card {
    animation: fadeSlide 0.5s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BRAND */
.brand {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #38bdf8;
}

.brand-letter {
    display: inline-block;
    animation: flipIn 0.5s ease forwards;
    opacity: 0;
}

@keyframes flipIn {
    0% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

/* TIMELINE ANIMATION */
.timeline-animation {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.bar {
    width: 6px;
    height: 40px;
    background: #38bdf8;
    animation: bounce 1.2s infinite ease-in-out;
}

.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }
.bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
    50% { transform: scaleY(1.2); opacity: 1; }
}
.subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
}
.left-panel h1 {
    color: #f8fafc;
}
</style>
