<template>
    <Head title="Reset Password" />

    <div class="auth-page">
        <div class="auth-card">
            <div class="auth-logo">
                <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="13" height="13" rx="3" fill="#EA4335"/>
                    <rect x="17" y="2" width="13" height="13" rx="3" fill="#4285F4"/>
                    <rect x="2" y="17" width="13" height="13" rx="3" fill="#FBBC05"/>
                    <rect x="17" y="17" width="13" height="13" rx="3" fill="#34A853"/>
                </svg>
                <span class="auth-logo-name">CRMfic</span>
            </div>

            <h1 class="auth-title">Reset your password</h1>
            <p class="auth-sub">Choose a new password for your account.</p>

            <div v-if="form.errors.email" class="auth-error">{{ form.errors.email }}</div>

            <form @submit.prevent="submit" class="auth-form">
                <div class="form-group">
                    <label for="email" class="form-label">Email address</label>
                    <input
                        id="email"
                        v-model="form.email"
                        type="email"
                        class="form-input"
                        :class="{ 'is-error': form.errors.email }"
                        autocomplete="username"
                        required
                    />
                </div>

                <div class="form-group">
                    <label for="password" class="form-label">New password</label>
                    <input
                        id="password"
                        v-model="form.password"
                        type="password"
                        class="form-input"
                        :class="{ 'is-error': form.errors.password }"
                        placeholder="••••••••"
                        autocomplete="new-password"
                        required
                        autofocus
                    />
                    <p v-if="form.errors.password" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.password }}</p>
                </div>

                <div class="form-group">
                    <label for="password_confirmation" class="form-label">Confirm new password</label>
                    <input
                        id="password_confirmation"
                        v-model="form.password_confirmation"
                        type="password"
                        class="form-input"
                        placeholder="••••••••"
                        autocomplete="new-password"
                        required
                    />
                </div>

                <button type="submit" class="auth-btn" :disabled="form.processing">
                    <span v-if="form.processing" class="auth-btn-spinner"></span>
                    {{ form.processing ? 'Resetting…' : 'Reset password' }}
                </button>
            </form>
        </div>

        <p class="auth-footer">
            &copy; {{ new Date().getFullYear() }} CRMfic. All rights reserved.
        </p>
    </div>
</template>

<script setup>
import { Head, useForm } from '@inertiajs/vue3';

const props = defineProps({
    email: String,
    token: String,
});

const form = useForm({
    token: props.token,
    email: props.email,
    password: '',
    password_confirmation: '',
});

const submit = () => {
    form.post(route('password.update'), {
        onFinish: () => form.reset('password', 'password_confirmation'),
    });
};
</script>
