<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Check, Eye, EyeOff, X, AtSign, Lock } from 'lucide-vue-next';
import { reactive, ref, watch } from 'vue';
import InputError from '@/components/InputError.vue';
import Spinner from '@/components/ui/spinner.vue';

const props = defineProps<{
    status?: string;
    onSuccess?: () => void;
}>();

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

const showPassword = ref(false);

const validation = reactive({
    login:    { valid: false, error: '' },
    password: { valid: false, error: '' },
});

const validateField = (field: string, value: any) => {
    if (field === 'login') {
        validation.login = value.length >= 3
            ? { valid: true, error: '' }
            : { valid: false, error: 'Too short' };
    }
    if (field === 'password') {
        validation.password = value
            ? { valid: true, error: '' }
            : { valid: false, error: 'Required' };
    }
};

watch(() => form.login,    (v) => validateField('login', v));
watch(() => form.password, (v) => validateField('password', v));

const submit = () => {
    form.transform((data) => ({ ...data, email: data.login })).post('/login', {
        onSuccess: () => { if (props.onSuccess) props.onSuccess(); },
        onFinish:  () => form.reset('password'),
    });
};
</script>

<template>
    <div class="login-form-content">
        <!-- Status message -->
        <div v-if="status" class="lf-status">{{ status }}</div>

        <form @submit.prevent="submit" class="lf-form">
            <!-- Login -->
            <div class="lf-field" :class="{ valid: validation.login.valid, invalid: validation.login.error || form.errors.login }">
                <label class="lf-label" for="login">Email oder Benutzername</label>
                <div class="lf-input-wrap">
                    <span class="lf-icon-left"><AtSign :size="15" /></span>
                    <input
                        id="login"
                        class="lf-input"
                        type="text"
                        v-model="form.login"
                        required
                        autofocus
                        autocomplete="username"
                        placeholder="CryptoKing oder email@example.com"
                    />
                    <span class="lf-status-icon">
                        <Check v-if="validation.login.valid" :size="14" class="icon-valid" />
                        <X     v-if="validation.login.error || form.errors.login" :size="14" class="icon-invalid" />
                    </span>
                </div>
                <InputError :message="form.errors.login" />
            </div>

            <!-- Password -->
            <div class="lf-field" :class="{ valid: validation.password.valid, invalid: validation.password.error || form.errors.password }">
                <label class="lf-label" for="password">Passwort</label>
                <div class="lf-input-wrap">
                    <span class="lf-icon-left"><Lock :size="15" /></span>
                    <input
                        id="password"
                        class="lf-input lf-input-pw"
                        :type="showPassword ? 'text' : 'password'"
                        v-model="form.password"
                        required
                        autocomplete="current-password"
                        placeholder="••••••••"
                    />
                    <button type="button" class="lf-eye-btn" @click="showPassword = !showPassword" :title="showPassword ? 'Verbergen' : 'Anzeigen'">
                        <EyeOff v-if="showPassword" :size="15" />
                        <Eye    v-else              :size="15" />
                    </button>
                </div>
                <InputError :message="form.errors.password" />
            </div>

            <!-- Remember + Forgot -->
            <div class="lf-row-between">
                <label class="lf-remember">
                    <input type="checkbox" name="remember" v-model="form.remember" class="sr-only peer" />
                    <span class="lf-check-box">
                        <Check :size="11" class="lf-tick" stroke-width="3.5" />
                    </span>
                    <span class="lf-remember-text">Angemeldet bleiben</span>
                </label>

                <slot name="forgot-password"></slot>
            </div>

            <!-- Submit -->
            <button
                type="submit"
                class="lf-submit"
                :disabled="form.processing"
            >
                <span class="lf-submit-shine"></span>
                <Spinner v-if="form.processing" class="lf-spinner" />
                <span :class="{ 'opacity-0': form.processing }">Einloggen</span>
            </button>
        </form>
    </div>
</template>

<style scoped>
.login-form-content { width: 100%; }

/* Status */
.lf-status {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .8rem;
    color: #4ade80;
    background: rgba(74,222,128,.08);
    border: 1px solid rgba(74,222,128,.2);
    text-align: center;
}

/* Form */
.lf-form { display: flex; flex-direction: column; gap: 18px; }

/* Field */
.lf-field { display: flex; flex-direction: column; gap: 7px; }
.lf-label { font-size: .75rem; font-weight: 700; color: #666; letter-spacing: .8px; text-transform: uppercase; }

/* Input wrapper */
.lf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lf-icon-left {
    position: absolute; left: 13px;
    color: #444; pointer-events: none;
    display: flex; align-items: center;
    transition: color .2s;
}

.lf-input {
    width: 100%;
    height: 46px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: #fff;
    font-size: .9rem;
    padding: 0 40px 0 38px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.lf-input::placeholder { color: #333; }
.lf-input:focus {
    border-color: rgba(223,0,106,.4);
    background: rgba(223,0,106,.03);
    box-shadow: 0 0 0 3px rgba(223,0,106,.08);
}
.lf-input:focus ~ .lf-icon-left,
.lf-input-wrap:focus-within .lf-icon-left { color: var(--primary, #df006a); }

/* Extra padding for password (eye button on right) */
.lf-input-pw { padding-right: 46px; }

/* Status icon (check / X) */
.lf-status-icon {
    position: absolute; right: 12px;
    pointer-events: none; display: flex; align-items: center;
}
.icon-valid  { color: #4ade80; }
.icon-invalid{ color: #f87171; }

/* Password eye button */
.lf-eye-btn {
    position: absolute; right: 12px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: #444; border-radius: 8px; transition: .2s;
}
.lf-eye-btn:hover { color: #aaa; background: rgba(255,255,255,.05); }

/* Valid / Invalid field states */
.valid   .lf-input { border-color: rgba(74,222,128,.3); }
.invalid .lf-input { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.025); animation: shake .35s ease; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-5px); }
    75%     { transform: translateX(5px); }
}

/* Remember row */
.lf-row-between {
    display: flex; align-items: center; justify-content: space-between;
}
.lf-remember {
    display: flex; align-items: center; gap: 9px;
    cursor: pointer; user-select: none;
}
.lf-check-box {
    width: 18px; height: 18px;
    background: rgba(0,0,0,.4);
    border: 1.5px solid #2a2a2a;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: .2s;
    flex-shrink: 0;
}
.sr-only:checked ~ .lf-check-box {
    background: var(--primary, #df006a);
    border-color: var(--primary, #df006a);
    box-shadow: 0 0 10px rgba(223,0,106,.35);
}
.lf-tick {
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: .15s cubic-bezier(.175,.885,.32,1.275);
}
.sr-only:checked ~ .lf-check-box .lf-tick { opacity: 1; transform: scale(1); }
/* Tailwind peer trick doesn't work in scoped — use sibling selector */
input[type="checkbox"]:checked + .lf-check-box { background: var(--primary, #df006a); border-color: var(--primary, #df006a); box-shadow: 0 0 10px rgba(223,0,106,.3); }
input[type="checkbox"]:checked + .lf-check-box .lf-tick { opacity: 1; transform: scale(1); }
.lf-remember-text { font-size: .78rem; color: #555; transition: .2s; }
.lf-remember:hover .lf-remember-text { color: #aaa; }

/* Submit button */
.lf-submit {
    position: relative; overflow: hidden;
    width: 100%; height: 48px;
    background: linear-gradient(90deg, var(--primary, #df006a), color-mix(in srgb, var(--primary, #df006a) 65%, #7c3aed));
    border: none; border-radius: 14px;
    color: #fff; font-size: .9rem; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: .25s;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(223,0,106,.3);
    margin-top: 4px;
}
.lf-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(223,0,106,.45);
    filter: brightness(1.08);
}
.lf-submit:active:not(:disabled) { transform: translateY(0); }
.lf-submit:disabled { opacity: .55; cursor: not-allowed; }

.lf-submit-shine {
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: skewX(-15deg);
    animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
    0%   { left: -100%; }
    40%  { left: 150%; }
    100% { left: 150%; }
}

.lf-spinner { width: 18px; height: 18px; position: absolute; }

/* sr-only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
</style>
