<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import { KeyRound, Lock, Mail, User, UserPlus } from '@lucide/vue';
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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { login } from '@/routes';
import { store } from '@/routes/register';

defineProps<{
    passwordRules: string;
}>();

defineOptions({
    layout: {
        title: 'Buat akun baru',
        description: 'Daftar sebagai member untuk mulai beriklan',
    },
});
</script>

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

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

            <!-- Email -->
            <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"
                        required
                        :tabindex="2"
                        autocomplete="email"
                        name="email"
                        placeholder="nama@email.com"
                        class="h-11 pl-10"
                    />
                </div>
                <InputError :message="errors.email" />
            </div>

            <!-- Password -->
            <div class="grid gap-2">
                <Label for="password" class="text-sm font-medium">Password</Label>
                <div class="relative">
                    <Lock class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <PasswordInput
                        id="password"
                        required
                        :tabindex="3"
                        autocomplete="new-password"
                        name="password"
                        placeholder=""
                        class="h-11 pl-10"
                        :passwordrules="passwordRules"
                    />
                </div>
                <InputError :message="errors.password" />
            </div>

            <!-- Konfirmasi Password -->
            <div class="grid gap-2">
                <Label for="password_confirmation" class="text-sm font-medium">Konfirmasi Password</Label>
                <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_confirmation"
                        required
                        :tabindex="4"
                        autocomplete="new-password"
                        name="password_confirmation"
                        placeholder=""
                        class="h-11 pl-10"
                        :passwordrules="passwordRules"
                    />
                </div>
                <InputError :message="errors.password_confirmation" />
            </div>

            <Button
                type="submit"
                class="h-11 w-full text-white shadow-lg shadow-blue-500/20 transition hover:opacity-90"
                tabindex="5"
                :disabled="processing"
                data-test="register-user-button"
                style="background: #1877F2"
            >
                <Spinner v-if="processing" />
                <UserPlus v-else class="size-4" />
                Daftar
            </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 register -->
        <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>
            Daftar dengan Google
        </a>

        <div class="text-center text-sm text-muted-foreground">
            Sudah punya akun?
            <TextLink
                :href="login()"
                class="font-medium hover:underline no-underline! decoration-transparent"
                :tabindex="6"
                >Masuk</TextLink
            >
        </div>
    </Form>
</template>
