<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { ChevronRight, ChevronLeft, Check, X } from 'lucide-vue-next';
import { ref, computed, watch, reactive } from 'vue';
import InputError from '@/components/InputError.vue';
import Button from '@/components/ui/button.vue';
import CountrySelect from '@/components/ui/CountrySelect.vue';
import DatePicker from '@/components/ui/DatePicker.vue';
import Input from '@/components/ui/input.vue';
import Label from '@/components/ui/label.vue';
import Select from '@/components/ui/Select.vue';
import Spinner from '@/components/ui/spinner.vue';
import { csrfFetch } from '@/utils/csrfFetch';

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

const form = useForm({
    username: '',
    first_name: '',
    last_name: '',
    full_name: '',
    email: '',
    birthdate: '',
    gender: '',
    phone: '',
    country: '',
    address_line1: '',
    address_line2: '',
    city: '',
    postal_code: '',
    currency: 'EUR',
    password: '',
    password_confirmation: '',
    is_adult: false,
    terms_accepted: false,
});

const currentStep = ref(1);
const totalSteps = 4;
const showPassword = ref(false);
const showConfirmPassword = ref(false);

const validation = reactive({
    username: { valid: false, error: '' },
    first_name: { valid: false, error: '' },
    last_name: { valid: false, error: '' },
    email: { valid: false, error: '' },
    phone: { valid: false, error: '' },
    birthdate: { valid: false, error: '' },
    gender: { valid: false, error: '' },
    address_line1: { valid: false, error: '' },
    city: { valid: false, error: '' },
    postal_code: { valid: false, error: '' },
    password: { valid: false, error: '' },
    password_confirmation: { valid: false, error: '' },
});

const availability = reactive({
    username: { checked: false, checking: false, available: false, error: '' },
    email: { checked: false, checking: false, available: false, error: '' },
});

const debounceTimers: Record<string, any> = { username: null, email: null };

const checkAvailability = (field: 'username' | 'email', value: string) => {
    if (debounceTimers[field]) clearTimeout(debounceTimers[field]);

    if (!value || (field === 'username' && validation.username.error) || (field === 'email' && validation.email.error)) {
        availability[field].checked = false;
        availability[field].available = false;
        availability[field].error = '';
        return;
    }

    debounceTimers[field] = setTimeout(async () => {
        availability[field].checking = true;
        availability[field].error = '';
        const currentValue = value;

        try {
            const url = `/api/auth/availability?field=${field}&value=${encodeURIComponent(currentValue)}`;
            const res = await csrfFetch(url, {
                method: 'GET',
                headers: { 'Accept': 'application/json' }
            });

            if (form[field] !== currentValue) return;

            const data = await res.json();
            if (res.ok && data.available) {
                availability[field].available = true;
            } else {
                availability[field].available = false;
                availability[field].error = data.message || (field === 'username' ? 'Username taken' : 'Email in use');
            }
        } catch (error) {
            console.error('Availability check failed:', error);
            availability[field].available = false;
            availability[field].error = 'Error checking availability. Please try again.';
        } finally {
            availability[field].checking = false;
            availability[field].checked = true;
        }
    }, 350);
};

const validateField = (field: string, value: any) => {
    switch (field) {
        case 'username':
            if ((value || '').length < 3) {
                validation.username = { valid: false, error: 'Min. 3 characters' };
            } else {
                validation.username = { valid: true, error: '' };
                checkAvailability('username', value);
            }
            break;
        case 'email':
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value || '')) {
                validation.email = { valid: false, error: 'Invalid email' };
            } else {
                validation.email = { valid: true, error: '' };
                checkAvailability('email', value);
            }
            break;
        case 'password':
            if ((value || '').length < 8) {
                validation.password = { valid: false, error: 'Min. 8 characters' };
            } else {
                validation.password = { valid: true, error: '' };
            }
            break;
        case 'password_confirmation':
            if (value !== form.password) {
                validation.password_confirmation = { valid: false, error: 'Passwords mismatch' };
            } else {
                validation.password_confirmation = { valid: true, error: '' };
            }
            break;
        case 'first_name':
        case 'last_name':
        case 'city':
        case 'address_line1':
        case 'postal_code':
            validation[field] = (value || '').length > 0
                ? { valid: true, error: '' }
                : { valid: false, error: 'Required' };
            break;
        case 'phone':
            validation.phone = (value || '').length > 5
                ? { valid: true, error: '' }
                : { valid: false, error: 'Required' };
            break;
        case 'birthdate':
            validation.birthdate = value ? { valid: true, error: '' } : { valid: false, error: 'Required' };
            break;
        case 'gender':
            validation.gender = value ? { valid: true, error: '' } : { valid: false, error: 'Required' };
            break;
    }
};

watch(() => form.username, (v) => validateField('username', v));
watch(() => form.email, (v) => validateField('email', v));
watch(() => form.password, (v) => {
    validateField('password', v);
    validateField('password_confirmation', form.password_confirmation);
});
watch(() => form.password_confirmation, (v) => validateField('password_confirmation', v));
watch(() => form.first_name, (v) => validateField('first_name', v));
watch(() => form.last_name, (v) => validateField('last_name', v));
watch(() => form.city, (v) => validateField('city', v));
watch(() => form.address_line1, (v) => validateField('address_line1', v));
watch(() => form.postal_code, (v) => validateField('postal_code', v));
watch(() => form.phone, (v) => validateField('phone', v));
watch(() => form.birthdate, (v) => validateField('birthdate', v));
watch(() => form.gender, (v) => validateField('gender', v));

const step1Valid = computed(() =>
    validation.username.valid && availability.username.available &&
    validation.first_name.valid && validation.last_name.valid
);

const step2Valid = computed(() =>
    validation.email.valid && availability.email.available &&
    validation.phone.valid && validation.birthdate.valid && validation.gender.valid
);

const step3Valid = computed(() =>
    validation.address_line1.valid && validation.city.valid &&
    validation.postal_code.valid && form.country && form.currency
);

const step4Valid = computed(() =>
    validation.password.valid && validation.password_confirmation.valid &&
    form.is_adult && form.terms_accepted
);

const nextStep = () => { if (currentStep.value < totalSteps) currentStep.value++; };
const prevStep = () => { if (currentStep.value > 1) currentStep.value--; };

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

<template>
    <div class="register-form-content">
        <!-- Progress Bar -->
        <div class="progress-container mb-8">
            <div class="flex justify-between mb-2">
                <span class="text-xs font-bold text-[var(--primary, #df006a)] uppercase tracking-wider">Step {{ currentStep }} of {{ totalSteps }}</span>
                <span class="text-xs font-bold text-[#888] uppercase tracking-wider">{{ Math.round((currentStep / totalSteps) * 100) }}% Complete</span>
            </div>
            <div class="progress-track">
                <div class="progress-fill" :style="{ width: `${(currentStep / totalSteps) * 100}%` }"></div>
            </div>
        </div>

        <form @submit.prevent="submit" class="form-content">
            <!-- Step 1: Basic Info -->
            <div v-if="currentStep === 1" class="step-container space-y-4">
                <div class="input-group" :class="{ 'valid': validation.username.valid && availability.username.available, 'invalid': validation.username.error || availability.username.error }">
                    <Label for="username">Username</Label>
                    <div class="input-wrapper">
                        <Input id="username" v-model="form.username" placeholder="CryptoKing" />
                        <div class="status-icon">
                            <Spinner v-if="availability.username.checking" class="w-4 h-4" />
                            <Check v-else-if="availability.username.available && validation.username.valid" class="text-green-500 w-4 h-4" />
                            <X v-else-if="availability.username.error || validation.username.error" class="text-red-500 w-4 h-4" />
                        </div>
                    </div>
                    <span v-if="availability.username.error" class="text-[10px] text-red-500 mt-1 uppercase font-bold">{{ availability.username.error }}</span>
                    <InputError :message="form.errors.username" />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="input-group" :class="{ 'valid': validation.first_name.valid, 'invalid': validation.first_name.error }">
                        <Label for="first_name">First Name</Label>
                        <Input id="first_name" v-model="form.first_name" placeholder="John" />
                        <InputError :message="form.errors.first_name" />
                    </div>
                    <div class="input-group" :class="{ 'valid': validation.last_name.valid, 'invalid': validation.last_name.error }">
                        <Label for="last_name">Last Name</Label>
                        <Input id="last_name" v-model="form.last_name" placeholder="Doe" />
                        <InputError :message="form.errors.last_name" />
                    </div>
                </div>

                <Button type="button" @click="nextStep" class="w-full mt-4" :disabled="!step1Valid">
                    NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
                </Button>
            </div>

            <!-- Step 2: Contact & Identity -->
            <div v-if="currentStep === 2" class="step-container space-y-4">
                <div class="input-group" :class="{ 'valid': validation.email.valid && availability.email.available, 'invalid': validation.email.error || availability.email.error }">
                    <Label for="email">Email Address</Label>
                    <div class="input-wrapper">
                        <Input id="email" type="email" v-model="form.email" placeholder="john@example.com" />
                        <div class="status-icon">
                            <Spinner v-if="availability.email.checking" class="w-4 h-4" />
                            <Check v-else-if="availability.email.available && validation.email.valid" class="text-green-500 w-4 h-4" />
                            <X v-else-if="availability.email.error || validation.email.error" class="text-red-500 w-4 h-4" />
                        </div>
                    </div>
                    <span v-if="availability.email.error" class="text-[10px] text-red-500 mt-1 uppercase font-bold">{{ availability.email.error }}</span>
                    <InputError :message="form.errors.email" />
                </div>

                <div class="input-group" :class="{ 'valid': validation.phone.valid, 'invalid': validation.phone.error }">
                    <Label for="phone">Phone Number</Label>
                    <Input id="phone" v-model="form.phone" placeholder="+49 123 456789" />
                    <InputError :message="form.errors.phone" />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="input-group">
                        <Label>Birthdate</Label>
                        <DatePicker v-model="form.birthdate" />
                        <InputError :message="form.errors.birthdate" />
                    </div>
                    <div class="input-group">
                        <Label>Gender</Label>
                        <Select
                            v-model="form.gender"
                            :options="[
                                { label: 'Male', value: 'male', icon: 'user' },
                                { label: 'Female', value: 'female', icon: 'user' },
                                { label: 'Other', value: 'other', icon: 'user' }
                            ]"
                            placeholder="Select Gender"
                        />
                        <InputError :message="form.errors.gender" />
                    </div>
                </div>

                <div class="flex gap-4 mt-4">
                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
                    </Button>
                    <Button type="button" @click="nextStep" class="flex-[2]" :disabled="!step2Valid">
                        NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
                    </Button>
                </div>
            </div>

            <!-- Step 3: Address -->
            <div v-if="currentStep === 3" class="step-container space-y-4">
                <div class="input-group">
                    <Label>Country</Label>
                    <CountrySelect v-model="form.country" />
                    <InputError :message="form.errors.country" />
                </div>

                <div class="input-group">
                    <Label for="address">Address</Label>
                    <Input id="address" v-model="form.address_line1" placeholder="Main Street 123" />
                    <InputError :message="form.errors.address_line1" />
                </div>

                <div class="input-group">
                    <Label for="address_line2">Address Line 2 (Optional)</Label>
                    <Input id="address_line2" v-model="form.address_line2" placeholder="Apartment, suite, etc." />
                    <InputError :message="form.errors.address_line2" />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="input-group">
                        <Label for="city">City</Label>
                        <Input id="city" v-model="form.city" placeholder="Berlin" />
                        <InputError :message="form.errors.city" />
                    </div>
                    <div class="input-group">
                        <Label for="postal">Postal Code</Label>
                        <Input id="postal" v-model="form.postal_code" placeholder="10115" />
                        <InputError :message="form.errors.postal_code" />
                    </div>
                </div>

                <div class="input-group">
                    <Label>Preferred Currency</Label>
                    <Select
                        v-model="form.currency"
                        :options="[
                            { label: 'EUR - Euro', value: 'EUR', icon: 'euro' },
                            { label: 'USD - US Dollar', value: 'USD', icon: 'dollar-sign' },
                            { label: 'BTC - Bitcoin', value: 'BTC', icon: 'bitcoin' }
                        ]"
                    />
                </div>

                <div class="flex gap-4 mt-4">
                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
                    </Button>
                    <Button type="button" @click="nextStep" class="flex-[2]" :disabled="!step3Valid">
                        NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
                    </Button>
                </div>
            </div>

            <!-- Step 4: Security -->
            <div v-if="currentStep === 4" class="step-container space-y-4">
                <div class="input-group">
                    <div class="flex justify-between">
                        <Label for="password">Password</Label>
                        <button type="button" @click="showPassword = !showPassword" class="text-xs text-[#888]">{{ showPassword ? 'Hide' : 'Show' }}</button>
                    </div>
                    <Input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="Min. 8 characters" />
                    <InputError :message="form.errors.password" />
                </div>

                <div class="input-group">
                    <div class="flex justify-between">
                        <Label for="password_confirmation">Confirm Password</Label>
                        <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="text-xs text-[#888]">{{ showConfirmPassword ? 'Hide' : 'Show' }}</button>
                    </div>
                    <Input :type="showConfirmPassword ? 'text' : 'password'" v-model="form.password_confirmation" placeholder="Repeat password" />
                    <InputError :message="form.errors.password_confirmation" />
                </div>

                <div class="reg-checks">
                    <InputError :message="form.errors.is_adult" />
                    <InputError :message="form.errors.terms_accepted" />

                    <label class="reg-check-label" :class="{ 'reg-check-active': form.is_adult }">
                        <input type="checkbox" v-model="form.is_adult" class="reg-sr-only" />
                        <span class="reg-box">
                            <Check :size="11" class="reg-tick" stroke-width="3.5" />
                        </span>
                        <span class="reg-check-text">
                            Ich bestätige, dass ich <strong>18 Jahre oder älter</strong> bin und berechtigt bin, an Online-Spielen teilzunehmen.
                        </span>
                    </label>

                    <label class="reg-check-label" :class="{ 'reg-check-active': form.terms_accepted }">
                        <input type="checkbox" v-model="form.terms_accepted" class="reg-sr-only" />
                        <span class="reg-box">
                            <Check :size="11" class="reg-tick" stroke-width="3.5" />
                        </span>
                        <span class="reg-check-text">
                            Ich habe die <a href="/terms" target="_blank" class="reg-link">Nutzungsbedingungen</a> und <a href="/privacy" target="_blank" class="reg-link">Datenschutzerklärung</a> gelesen und akzeptiert.
                        </span>
                    </label>
                </div>

                <div class="flex gap-4 mt-4">
                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
                    </Button>
                    <Button type="submit" class="flex-[2] neon-button" :disabled="form.processing || !step4Valid">
                        <Spinner v-if="form.processing" class="mr-2 w-4 h-4" />
                        FINISH REGISTRATION
                    </Button>
                </div>
            </div>
        </form>
    </div>
</template>

<style scoped>
.progress-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #df006a), #00f2ff);
    box-shadow: 0 0 10px rgba(223, 0, 106, 0.5);
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-wrapper {
    position: relative;
}

.status-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.neon-button {
    background: linear-gradient(90deg, var(--primary, #df006a), color-mix(in srgb, var(--primary, #df006a) 70%, #000));
    color: #fff;
    border: none;
    box-shadow: 0 0 20px rgba(223, 0, 106, 0.4);
    transition: all 0.3s ease;
}

.neon-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(223, 0, 106, 0.7);
}

.valid :deep(input) {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.invalid :deep(input) {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ── Custom Checkboxes (Step 4) ─────────────────────────── */
.reg-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.reg-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;
}

.reg-check-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.reg-check-label:hover {
    border-color: rgba(223,0,106,.2);
    background: rgba(223,0,106,.03);
}
.reg-check-active {
    border-color: rgba(223,0,106,.3) !important;
    background: rgba(223,0,106,.05) !important;
    box-shadow: 0 0 0 1px rgba(223,0,106,.1);
}

.reg-box {
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 1px;
    background: rgba(0,0,0,.4);
    border: 1.5px solid #2a2a2a;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: .2s;
}
.reg-check-active .reg-box {
    background: var(--primary, #df006a);
    border-color: var(--primary, #df006a);
    box-shadow: 0 0 12px rgba(223,0,106,.4);
}

.reg-tick {
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: .15s cubic-bezier(.175,.885,.32,1.275);
}
.reg-check-active .reg-tick {
    opacity: 1;
    transform: scale(1);
}

.reg-check-text {
    font-size: 11px;
    color: #666;
    line-height: 1.55;
    transition: color .2s;
}
.reg-check-label:hover .reg-check-text,
.reg-check-active .reg-check-text { color: #aaa; }

.reg-check-text strong { color: #bbb; font-weight: 700; }

.reg-link {
    color: var(--primary, #df006a);
    text-decoration: none;
    font-weight: 600;
    transition: .15s;
}
.reg-link:hover { text-decoration: underline; filter: brightness(1.2); }
</style>
