<script setup lang="ts">
import { useForm, usePage } from '@inertiajs/vue3';
import { Eye, EyeOff } from '@lucide/vue';
import { ref  } from 'vue';
import type {HTMLAttributes} from 'vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group';
import { formErrors } from '@/lib/form';
import { cn } from '@/lib/utils';
import FieldSeparator from './ui/field/FieldSeparator.vue';

const props = defineProps<{
    class?: HTMLAttributes['class'];
}>();

const page = usePage();

const showPassword = ref(false);

const form = useForm({
    login: '',
    password: '',
});

function submit() {
    form.post('/auth/login', {
        onError: (errors) => {
            const message =
                errors.login ??
                errors.password ??
                'Gagal masuk. Periksa kembali data Anda.';

            toast.error(message);
        },
    });
}
</script>

<template>
    <div :class="cn('flex flex-col gap-6', props.class)">
        <Card class="overflow-hidden p-0">
            <CardContent class="grid p-0 md:grid-cols-2">
                <form class="p-6 md:p-8" @submit.prevent="submit">
                    <FieldGroup>
                        <div
                            class="flex flex-col items-center gap-2 text-center"
                        >
                            <h1 class="text-2xl font-bold">Selamat Datang</h1>
                            <p class="text-balance text-muted-foreground">
                                Silakan masukkan email dan username untuk akses
                                dasbor.
                            </p>
                        </div>
                        <Field>
                            <FieldLabel for="login" required>
                                Email/Username
                            </FieldLabel>
                            <Input
                                id="login"
                                v-model="form.login"
                                type="text"
                                placeholder="Contoh: nama@perusahaan.com atau username"
                                required
                            />
                            <FieldError :errors="formErrors(form, 'login')" />
                        </Field>
                        <Field>
                            <FieldLabel for="password" required>
                                Kata Sandi
                            </FieldLabel>

                            <InputGroup>
                                <InputGroupInput
                                    id="password"
                                    v-model="form.password"
                                    :type="showPassword ? 'text' : 'password'"
                                    placeholder="********"
                                    required
                                />
                                <InputGroupAddon align="inline-end">
                                    <InputGroupButton
                                        type="button"
                                        size="icon-xs"
                                        @click="showPassword = !showPassword"
                                    >
                                        <Eye v-if="!showPassword" class="h-4 w-4" />
                                        <EyeOff v-else class="h-4 w-4" />
                                    </InputGroupButton>
                                </InputGroupAddon>
                            </InputGroup>

                            <FieldError
                                :errors="formErrors(form, 'password')"
                            />
                        </Field>
                        <Field>
                            <Button type="submit" :disabled="form.processing">
                                {{ form.processing ? 'Memuat...' : 'Masuk' }}
                            </Button>
                        </Field>

                        <FieldSeparator
                            class="*:data-[slot=field-separator-content]:bg-card"
                        >
                            Atau lanjutkan dengan
                        </FieldSeparator>
                        <Field class="grid gap-4">
                            <Button variant="outline" type="button">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
                                        fill="currentColor"
                                    />
                                </svg>
                                <span>Google</span>
                            </Button>
                        </Field>
                    </FieldGroup>
                </form>
                <div class="relative hidden bg-muted md:block">
                    <img
                        :src="page.props.login_cover_url || 'https://images.pexels.com/photos/37080685/pexels-photo-37080685.jpeg'"
                        alt="Image"
                        class="absolute inset-0 h-full w-full object-cover"
                    />
                </div>
            </CardContent>
        </Card>
    </div>
</template>
