<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import { KeyRound, LogIn, Mail } from '@lucide/vue';
import InputError from '@/components/InputError.vue';
import PasskeyVerify from '@/components/PasskeyVerify.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 { register } from '@/routes';
import { store } from '@/routes/login';
import { request } from '@/routes/password';

defineOptions({
    layout: {
        title: 'Masuk ke akun Anda',
        description: 'Masukkan email dan password untuk melanjutkan',
    },
});

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

<template>
    <Head title="Masuk" />

    <div
        v-if="status"
        class="mb-5 flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm font-medium text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-400"
    >
        {{ status }}
    </div>

    <Form
        v-bind="store.form()"
        :reset-on-success="['password']"
        v-slot="{ errors, processing }"
        class="flex flex-col gap-5"
    >
        <div class="grid gap-4">
            <!-- Email dengan icon prefix -->
            <div class="grid gap-2">
                <Label for="email" class="text-sm font-medium">Email</Label>
                <div class="relative">
                    <Mail class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <Input
                        id="email"
                        type="email"
                        name="email"
                        required
                        autofocus
                        :tabindex="1"
                        autocomplete="email"
                        placeholder=""
                        class="h-11 pl-10"
                    />
                </div>
                <InputError :message="errors.email" />
            </div>

            <!-- Password -->
            <div class="grid gap-2">
                <div class="flex items-center justify-between">
                    <Label for="password" class="text-sm font-medium">Password</Label>
                    <TextLink
                        v-if="canResetPassword"
                        :href="request()"
                        class="text-xs font-medium hover:underline no-underline! decoration-transparent"
                        :tabindex="5"
                    >
                        Lupa password?
                    </TextLink>
                </div>
                <div class="relative">
                    <KeyRound class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <PasswordInput
                        id="password"
                        name="password"
                        required
                        :tabindex="2"
                        autocomplete="current-password"
                        placeholder=""
                        class="h-11 pl-10"
                    />
                </div>
                <InputError :message="errors.password" />
            </div>

            <!-- Remember -->
            <div class="flex items-center justify-between">
                <Label for="remember" class="flex items-center space-x-2.5">
                    <Checkbox id="remember" name="remember" :tabindex="3" />
                    <span class="text-sm">Ingat saya</span>
                </Label>
            </div>

            <!-- Tombol Masuk -->
            <Button
                type="submit"
                class="h-11 w-full text-white shadow-lg shadow-blue-500/20 transition hover:opacity-90"
                :tabindex="4"
                :disabled="processing"
                data-test="login-button"
                style="background: #1877F2"
            >
                <Spinner v-if="processing" />
                <LogIn v-else class="size-4" />
                Masuk
            </Button>
        </div>

        <!-- Divider -->
        <div class="relative py-1">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-border"></div>
            </div>
            <div class="relative flex justify-center">
                <span class="bg-background px-3 text-xs uppercase tracking-wide text-muted-foreground">atau</span>
            </div>
        </div>

        <!-- Google login -->
        <a
            href="/auth/google/redirect"
            class="flex h-11 w-full items-center justify-center gap-3 rounded-md border border-input bg-background text-sm font-medium text-foreground transition hover:bg-accent hover:text-accent-foreground"
        >
            <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z" />
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
                <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z" />
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38Z" />
            </svg>
            Masuk dengan Google
        </a>

        <!-- Passkey -->
        <PasskeyVerify />

        <div class="text-center text-sm text-muted-foreground">
            Belum punya akun?
            <TextLink :href="register()" :tabindex="5" class="font-medium hover:underline no-underline! decoration-transparent">Daftar sekarang</TextLink>
        </div>
    </Form>
</template>
