<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import { tokens, FONT } from '@/Components/Diabetix/palette.js';

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

const tok = tokens('mint');
const font = FONT;

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

function submit() {
    form.post(route('login'), {
        onFinish: () => form.reset('password'),
    });
}

function inputStyle() {
    return {
        width: '100%', padding: '12px 14px', borderRadius: '14px',
        border: '1.5px solid ' + tok.border, background: tok.bg,
        fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box',
    };
}
</script>

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

    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
        <div :style="{ width: '100%', maxWidth: '400px' }">

            <!-- Logo / titre -->
            <div style="text-align:center;margin-bottom:32px;">
                <div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🩺</div>
                <div :style="{ fontFamily: font.title, fontSize: '26px', fontWeight: 700, color: tok.text }">Diabetix</div>
                <div :style="{ fontSize: '13px', color: tok.muted, marginTop: '4px' }">Votre coach glycémique personnel</div>
            </div>

            <!-- Carte -->
            <div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">

                <div v-if="status" :style="{ background: tok.light, borderRadius: '12px', padding: '10px 14px', fontSize: '13px', color: tok.dark, marginBottom: '20px' }">
                    {{ status }}
                </div>

                <form @submit.prevent="submit">
                    <div style="margin-bottom:16px;">
                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
                        <input v-model="form.email" type="email" required autofocus autocomplete="username"
                            :style="inputStyle()"
                            :class="form.errors.email ? 'border-red-400' : ''" />
                        <span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
                    </div>

                    <div style="margin-bottom:20px;">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                            <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.7px' }">Mot de passe</label>
                            <Link v-if="canResetPassword" :href="route('password.request')"
                                :style="{ fontSize: '11px', color: tok.primary, textDecoration: 'none' }">
                                Mot de passe oublié ?
                            </Link>
                        </div>
                        <input v-model="form.password" type="password" required autocomplete="current-password"
                            :style="inputStyle()" />
                        <span v-if="form.errors.password" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password }}</span>
                    </div>

                    <!-- Se souvenir -->
                    <label style="display:flex;align-items:center;gap:10px;margin-bottom:24px;cursor:pointer;">
                        <span :style="{
                            width: '20px', height: '20px', borderRadius: '6px', flexShrink: 0,
                            border: '1.5px solid ' + (form.remember ? tok.primary : tok.border),
                            background: form.remember ? tok.primary : tok.white,
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                        }" @click="form.remember = !form.remember">
                            <span v-if="form.remember" style="color:#fff;font-size:12px;font-weight:700;">✓</span>
                        </span>
                        <span :style="{ fontSize: '13px', color: tok.muted }">Se souvenir de moi</span>
                    </label>

                    <button type="submit" :disabled="form.processing"
                        :style="{
                            width: '100%', padding: '15px', background: tok.primary, color: '#fff',
                            borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
                            cursor: form.processing ? 'not-allowed' : 'pointer',
                            opacity: form.processing ? 0.6 : 1,
                            boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
                        }">
                        {{ form.processing ? 'Connexion…' : 'Se connecter' }}
                    </button>
                </form>
            </div>

            <!-- Lien inscription -->
            <div style="text-align:center;margin-top:20px;">
                <span :style="{ fontSize: '13px', color: tok.muted }">Pas encore de compte ? </span>
                <Link :href="route('register')" :style="{ fontSize: '13px', color: tok.primary, fontWeight: 600, textDecoration: 'none' }">Créer un compte</Link>
            </div>

        </div>
    </div>
</template>
