<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import InputError from '@/components/InputError.vue';
import PasswordInput from '@/components/PasswordInput.vue';
import TextLink from '@/components/TextLink.vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { store } from '@/routes/login';
import { request } from '@/routes/password';
// Hintergrund-Komponente importieren
import BackgroundStars from '@/components/Welcome/BackgroundStars.vue';

defineOptions({
    layout: {
        title: 'Bratanbonus.net Admin',
        description: 'Bitte logge dich ein, um fortzufahren.',
    },
});

defineProps<{
    status?: string;
    canResetPassword: boolean;
}>();
</script>

<template>
    <Head title="Log in" />

    <div
        class="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-gray-950 p-4"
    >
        <div class="absolute inset-0 z-0">
            <BackgroundStars />
        </div>

        <div class="relative z-10 mx-auto w-full max-w-[440px]">
            <div
                v-if="status"
                class="mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-center text-sm font-medium text-green-400 backdrop-blur-md"
            >
                {{ status }}
            </div>

            <div class="group relative">
                <div
                    class="absolute -inset-1 rounded-[2rem] bg-gradient-to-r from-purple-600 via-blue-600 to-cyan-500 opacity-20 blur transition duration-1000 group-hover:opacity-30"
                ></div>

                <div
                    class="relative overflow-hidden rounded-[1.75rem] border border-white/10 bg-gray-950/80 p-8 shadow-2xl backdrop-blur-2xl sm:p-10"
                >
                    <div
                        class="pointer-events-none absolute top-0 right-0 -mt-12 -mr-12 h-24 w-24 rounded-full bg-purple-500/10 blur-[50px]"
                    ></div>
                    <div
                        class="pointer-events-none absolute bottom-0 left-0 -mb-12 -ml-12 h-24 w-24 rounded-full bg-blue-500/10 blur-[50px]"
                    ></div>

                    <div class="relative z-10">
                        <div class="mb-10 text-center">
                            <h1
                                class="text-2xl font-bold tracking-tight text-white"
                            >
                                Admin Login
                            </h1>
                            <p class="mt-2 text-sm text-gray-400">
                                Bratanbonus.net Control Panel
                            </p>
                        </div>

                        <Form
                            v-bind="store.form()"
                            :reset-on-success="['password']"
                            v-slot="{ errors, processing }"
                            class="flex flex-col gap-5"
                        >
                            <div class="space-y-5">
                                <div class="space-y-2">
                                    <Label
                                        for="email"
                                        class="ml-1 text-[11px] font-bold tracking-[0.15em] text-gray-500 uppercase"
                                    >
                                        Email Adresse
                                    </Label>
                                    <Input
                                        id="email"
                                        type="email"
                                        name="email"
                                        required
                                        autofocus
                                        :tabindex="1"
                                        autocomplete="email"
                                        placeholder="admin@bratanbonus.net"
                                        class="h-11 rounded-xl border-white/10 bg-white/[0.03] text-white transition-all duration-300 placeholder:text-gray-600 hover:bg-white/[0.06] focus:border-purple-500/40 focus:ring-2 focus:ring-purple-500/40"
                                    />
                                    <InputError :message="errors.email" />
                                </div>

                                <div class="space-y-2">
                                    <div
                                        class="flex items-center justify-between px-1"
                                    >
                                        <Label
                                            for="password"
                                            class="text-[11px] font-bold tracking-[0.15em] text-gray-500 uppercase"
                                        >
                                            Passwort
                                        </Label>
                                        <TextLink
                                            v-if="canResetPassword"
                                            :href="request()"
                                            class="text-[10px] font-bold tracking-wider text-purple-400 uppercase transition-colors hover:text-purple-300"
                                            :tabindex="5"
                                        >
                                            Vergessen?
                                        </TextLink>
                                    </div>
                                    <PasswordInput
                                        id="password"
                                        name="password"
                                        required
                                        :tabindex="2"
                                        autocomplete="current-password"
                                        placeholder="••••••••"
                                        class="h-11 rounded-xl border-white/10 bg-white/[0.03] text-white transition-all duration-300 placeholder:text-gray-600 hover:bg-white/[0.06] focus:border-purple-500/40 focus:ring-2 focus:ring-purple-500/40"
                                    />
                                    <InputError :message="errors.password" />
                                </div>

                                <div class="flex items-center px-1 pt-1">
                                    <Label
                                        for="remember"
                                        class="group/check flex cursor-pointer items-center"
                                    >
                                        <Checkbox
                                            id="remember"
                                            name="remember"
                                            :tabindex="3"
                                            class="rounded-md border-white/20 bg-white/5 transition-transform active:scale-90 data-[state=checked]:border-purple-600 data-[state=checked]:bg-purple-600"
                                        />
                                        <span
                                            class="ml-3 text-xs font-semibold tracking-wide text-gray-400 uppercase transition-colors group-hover/check:text-gray-200"
                                        >
                                            Stay logged in
                                        </span>
                                    </Label>
                                </div>

                                <Button
                                    type="submit"
                                    class="group/btn relative mt-6 h-11 w-full overflow-hidden rounded-xl bg-white text-[11px] font-bold tracking-[0.2em] text-black uppercase transition-all duration-300 hover:shadow-[0_0_25px_rgba(168,85,247,0.4)] active:scale-[0.97]"
                                    :tabindex="4"
                                    :disabled="processing"
                                    data-test="login-button"
                                >
                                    <div
                                        class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100"
                                    ></div>

                                    <div
                                        class="relative z-10 flex items-center justify-center gap-2 transition-colors duration-300 group-hover/btn:text-white"
                                    >
                                        <Spinner
                                            v-if="processing"
                                            class="h-4 w-4"
                                        />
                                        <span v-else>Authorize</span>
                                    </div>
                                </Button>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* Die Animation gilt nur für die Login-Karte */
.mx-auto {
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
