<template>
    <Head title="Create Account" />

    <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">Create your account</h1>
            <p class="auth-sub">Start managing your campaigns in minutes.</p>

            <form @submit.prevent="submit" class="auth-form">
                <!-- Username -->
                <div class="form-group">
                    <label for="username" class="form-label">Username</label>
                    <div class="input-with-icon">
                        <span class="input-icon input-icon--left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </span>
                        <input
                            id="username"
                            v-model="form.username"
                            type="text"
                            class="form-input"
                            :class="{ 'is-error': form.errors.username }"
                            placeholder="janedoe"
                            autocomplete="username"
                            required
                            autofocus
                        />
                    </div>
                    <p v-if="form.errors.username" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.username }}</p>
                </div>

                <!-- First name and Last name side-by-side -->
                <div class="form-row">
                    <div class="form-group">
                        <label for="first_name" class="form-label">First name</label>
                        <div class="input-with-icon">
                            <span class="input-icon input-icon--left">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                            </span>
                            <input
                                id="first_name"
                                v-model="form.first_name"
                                type="text"
                                class="form-input"
                                :class="{ 'is-error': form.errors.first_name }"
                                placeholder="Jane"
                                autocomplete="given-name"
                                required
                            />
                        </div>
                        <p v-if="form.errors.first_name" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.first_name }}</p>
                    </div>

                    <div class="form-group">
                        <label for="last_name" class="form-label">Last name</label>
                        <div class="input-with-icon">
                            <span class="input-icon input-icon--left">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                            </span>
                            <input
                                id="last_name"
                                v-model="form.last_name"
                                type="text"
                                class="form-input"
                                :class="{ 'is-error': form.errors.last_name }"
                                placeholder="Doe"
                                autocomplete="family-name"
                                required
                            />
                        </div>
                        <p v-if="form.errors.last_name" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.last_name }}</p>
                    </div>
                </div>

                <!-- Email -->
                <div class="form-group">
                    <label for="email" class="form-label">Email address</label>
                    <div class="input-with-icon">
                        <span class="input-icon input-icon--left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        </span>
                        <input
                            id="email"
                            v-model="form.email"
                            type="email"
                            class="form-input"
                            :class="{ 'is-error': form.errors.email }"
                            placeholder="you@example.com"
                            autocomplete="email"
                            required
                        />
                    </div>
                    <p v-if="form.errors.email" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.email }}</p>
                </div>

                <!-- Password -->
                <div class="form-group">
                    <label for="password" class="form-label">Password</label>
                    <div class="form-input-wrap input-with-icon">
                        <span class="input-icon input-icon--left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        </span>
                        <input
                            id="password"
                            v-model="form.password"
                            :type="showPassword ? 'text' : 'password'"
                            class="form-input"
                            :class="{ 'is-error': form.errors.password }"
                            placeholder="••••••••"
                            autocomplete="new-password"
                            required
                        />
                        <button
                            type="button"
                            class="form-eye-btn"
                            @click="showPassword = !showPassword"
                            :title="showPassword ? 'Hide password' : 'Show password'"
                            tabindex="-1"
                        >
                            <!-- Eye open -->
                            <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="16" height="16">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <!-- Eye slash -->
                            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="16" height="16">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                            </svg>
                        </button>
                    </div>
                    <p v-if="form.errors.password" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ form.errors.password }}</p>

                    <div class="auth-checklist">
                        <div class="auth-check" :class="{ 'is-met': checks.length }"><span class="auth-check-dot"></span>8 characters minimum</div>
                        <div class="auth-check" :class="{ 'is-met': checks.lower }"><span class="auth-check-dot"></span>One lowercase character</div>
                        <div class="auth-check" :class="{ 'is-met': checks.upper }"><span class="auth-check-dot"></span>One uppercase character</div>
                        <div class="auth-check" :class="{ 'is-met': checks.number }"><span class="auth-check-dot"></span>One number</div>
                        <div class="auth-check" :class="{ 'is-met': checks.symbol }"><span class="auth-check-dot"></span>One special character</div>
                        <div class="auth-check" :class="{ 'is-met': checks.noUsername }"><span class="auth-check-dot"></span>Must not contain username</div>
                    </div>
                </div>

                <!-- Confirm Password -->
                <div class="form-group">
                    <label for="password_confirmation" class="form-label">Confirm password</label>
                    <div class="form-input-wrap input-with-icon">
                        <span class="input-icon input-icon--left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        </span>
                        <input
                            id="password_confirmation"
                            v-model="form.password_confirmation"
                            :type="showConfirm ? 'text' : 'password'"
                            class="form-input"
                            :class="{ 'is-error': form.password_confirmation && form.password && form.password_confirmation !== form.password }"
                            placeholder="••••••••"
                            autocomplete="new-password"
                            required
                        />
                        <button
                            type="button"
                            class="form-eye-btn"
                            @click="showConfirm = !showConfirm"
                            :title="showConfirm ? 'Hide password' : 'Show password'"
                            tabindex="-1"
                        >
                            <!-- Eye open -->
                            <svg v-if="!showConfirm" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="16" height="16">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <!-- Eye slash -->
                            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="16" height="16">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                            </svg>
                        </button>
                    </div>
                    <p v-if="form.password_confirmation && form.password && form.password_confirmation !== form.password" class="auth-error" style="margin-top:8px;margin-bottom:0">Passwords do not match.</p>
                </div>

                <button type="submit" class="auth-btn" :disabled="form.processing">
                    <span v-if="form.processing" class="auth-btn-spinner"></span>
                    {{ form.processing ? 'Creating account…' : 'Create account' }}
                </button>
            </form>

            <a href="/login" class="form-forgot" style="display:block;text-align:center;margin-top:16px">Already have an account? Sign in</a>
        </div>

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

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

const form = useForm({
    username: '',
    first_name: '',
    last_name: '',
    email: '',
    password: '',
    password_confirmation: '',
});

const showPassword = ref(false);
const showConfirm = ref(false);

const checks = computed(() => {
    const pw = form.password || '';
    const username = (form.username || '').toLowerCase();
    return {
        length:     pw.length >= 8,
        lower:      /[a-z]/.test(pw),
        upper:      /[A-Z]/.test(pw),
        number:     /[0-9]/.test(pw),
        symbol:     /[^A-Za-z0-9]/.test(pw),
        noUsername: username === '' || !pw.toLowerCase().includes(username),
    };
});

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