<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Checkbox } from '@/Components/ui/checkbox';
import { Button } from '@/Components/ui/button';

defineProps({
    canResetPassword: Boolean,
    status: String,
});

const form = useForm({
    email: '',
    password: '',
    remember: false,
});

const submit = () => {
    form.transform(data => ({
        ...data,
        remember: form.remember ? 'on' : '',
    })).post(route('login'), {
        onFinish: () => form.reset('password'),
    });
};
</script>

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

    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gradient-to-br from-neutral-50 via-white to-primary-50/30">
        <div class="w-full sm:max-w-md">
            <div class="mb-8 flex justify-center">
                <AuthenticationCardLogo />
            </div>

            <div class="w-full sm:max-w-md px-8 py-10 bg-white/80 backdrop-blur-sm shadow-xl border border-neutral-200/50 rounded-2xl overflow-hidden">
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-neutral-900 mb-2">Dobrodošli nazaj</h1>
                    <p class="text-sm text-neutral-600">Prijavite se v svoj račun za nadaljevanje</p>
                </div>

                <div v-if="status" class="mb-6 p-4 rounded-lg bg-success-50 border border-success-200">
                    <p class="text-sm font-medium text-success-700">
                        {{ status }}
                    </p>
                </div>

                <form @submit.prevent="submit" class="space-y-5">
                    <div class="space-y-2">
                        <Label for="email" class="text-sm font-medium text-neutral-700">E-poštni naslov</Label>
                        <Input
                            id="email"
                            v-model="form.email"
                            type="email"
                            required
                            autofocus
                            autocomplete="username"
                            placeholder="vas@example.com"
                            class="h-11 transition-all"
                            :class="form.errors.email ? 'border-error-500 focus:border-error-500 focus:ring-error-500/20' : 'focus:border-primary-500 focus:ring-primary-500/20'"
                        />
                        <p v-if="form.errors.email" class="text-sm text-error-600 mt-1.5 flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                            {{ form.errors.email }}
                        </p>
                    </div>

                    <div class="space-y-2">
                        <Label for="password" class="text-sm font-medium text-neutral-700">Geslo</Label>
                        <Input
                            id="password"
                            v-model="form.password"
                            type="password"
                            required
                            autocomplete="current-password"
                            placeholder="••••••••"
                            class="h-11 transition-all"
                            :class="form.errors.password ? 'border-error-500 focus:border-error-500 focus:ring-error-500/20' : 'focus:border-primary-500 focus:ring-primary-500/20'"
                        />
                        <p v-if="form.errors.password" class="text-sm text-error-600 mt-1.5 flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                            {{ form.errors.password }}
                        </p>
                    </div>

                    <div class="flex items-center justify-between pt-1">
                        <div class="flex items-center space-x-2.5">
                            <Checkbox
                                id="remember"
                                v-model="form.remember"
                                name="remember"
                                class="data-[state=checked]:bg-primary-600"
                            />
                            <Label for="remember" class="text-sm font-normal text-neutral-600 cursor-pointer select-none">
                                Zapomni si me
                            </Label>
                        </div>

                        <Link
                            v-if="canResetPassword"
                            :href="route('password.request')"
                            class="text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2 rounded-md px-2 py-1"
                        >
                            Ste pozabili geslo?
                        </Link>
                    </div>

                    <div class="pt-2">
                        <Button
                            type="submit"
                            class="w-full h-11 text-base font-semibold shadow-md hover:shadow-lg transition-all duration-200"
                            :disabled="form.processing"
                        >
                            <span v-if="!form.processing">Prijavi se</span>
                            <span v-else class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                Prijavljanje...
                            </span>
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
