@extends('layouts.customer')

@section('title', __('Cadastro — Cliente — Lined'))

@section('content')

    <section class="min-h-screen flex items-center justify-center px-6 py-20">

        <div class="w-full max-w-md">

            <div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8">

                {{-- Header --}}
                <div class="text-center mb-8">
                    <div class="w-12 h-12 rounded-xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mx-auto mb-4">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                    </div>
                    <h1 class="font-heading font-bold text-white text-2xl mb-1">{{ __('Cliente') }}</h1>
                    <p class="text-gray-400 text-sm">{{ __('Crie sua conta e encontre os melhores profissionais') }}</p>
                </div>

                {{-- Form --}}
                <form method="POST" action="{{ route('register.customer.submit') }}" class="flex flex-col gap-4" onsubmit="handleSubmit(this)">
                    @csrf

                    {{-- Email busca (antes de verificar) --}}
                    <div id="email-search-section" class="flex flex-col gap-1.5">
                        <label for="email" class="text-sm font-medium text-gray-300">{{ __('E-mail') }}</label>
                        <div class="relative">
                            <input id="email" type="email" name="email" value="{{ old('email') }}"
                                placeholder="you@example.com" required autocomplete="email"
                                class="w-full px-4 py-3 pr-12 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                       @error('email') border-red-500/60 @enderror">
                            <button type="button" id="search-btn" onclick="checkEmail()"
                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-brand-green transition-colors bg-transparent border-0 cursor-pointer">
                                <svg id="search-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                                </svg>
                                <svg id="search-spinner" class="hidden animate-spin" width="17" height="17" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                </svg>
                            </button>
                        </div>
                        <span id="email-feedback" class="text-xs hidden"></span>
                        @error('email')
                            <span class="text-red-400 text-xs">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Email display (depois de verificar) --}}
                    <div id="email-display-section" class="hidden flex flex-col items-center gap-1 text-center">
                        <p id="email-display-text" class="text-white font-semibold text-lg tracking-wide"></p>
                        <span id="email-display-feedback" class="text-xs hidden"></span>
                    </div>

                    {{-- Campos ocultos hasta buscar --}}
                    <div id="form-fields" class="hidden flex flex-col gap-4">

                        {{-- Name --}}
                        <div class="flex flex-col gap-1.5">
                            <label for="name" class="text-sm font-medium text-gray-300">{{ __('Nome completo') }}</label>
                            <input id="name" type="text" name="name" value="{{ old('name') }}"
                                placeholder="{{ __('Seu nome') }}" required autocomplete="name"
                                class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                       @error('name') border-red-500/60 @enderror">
                            @error('name')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Phone --}}
                        <div class="flex flex-col gap-1.5">
                            <label for="phone" class="text-sm font-medium text-gray-300">
                                {{ __('Telefone') }}
                                <span class="text-gray-600 font-normal text-xs ml-1">{{ __('(opcional)') }}</span>
                            </label>
                            <x-phone-input id="phone" name="phone" :required="false"
                                :value="old('phone')" placeholder="(11) 99999-9999"
                                input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                            @error('phone')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Password --}}
                        <div id="password-section" class="flex flex-col gap-1.5">
                            <label for="password" class="text-sm font-medium text-gray-300">
                                {{ __('Senha') }} <span class="text-red-400 ml-0.5">*</span>
                            </label>
                            <div class="relative">
                                <input id="password" type="password" name="password"
                                    placeholder="••••••••" required autocomplete="new-password"
                                    oninput="sanitizePassword(this); checkPasswordRules(this.value)"
                                    class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                           @error('password') border-red-500/60 @enderror">
                                <button type="button" onclick="togglePassword()"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                    <svg id="eye-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                    </svg>
                                </button>
                            </div>
                            <div id="password-rules" class="hidden grid grid-cols-2 gap-x-4 gap-y-1 mt-1">
                                <span id="rule-min"     class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> Mín. 6 caracteres</span>
                                <span id="rule-upper"   class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 letra maiúscula</span>
                                <span id="rule-number"  class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 número</span>
                                <span id="rule-special" class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 caractere especial</span>
                            </div>
                            @error('password') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                        </div>

                        {{-- Confirmar senha --}}
                        <div id="confirm-section" class="flex flex-col gap-1.5">
                            <label for="password_confirmation" class="text-sm font-medium text-gray-300">
                                {{ __('Confirmar senha') }} <span class="text-red-400 ml-0.5">*</span>
                            </label>
                            <div class="relative">
                                <input id="password_confirmation" type="password" name="password_confirmation"
                                    placeholder="••••••••" required autocomplete="new-password"
                                    oninput="sanitizePassword(this); checkConfirm()"
                                    class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none">
                                <button type="button" onclick="toggleConfirm()"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                    <svg id="eye-confirm" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                    </svg>
                                </button>
                            </div>
                            <span id="confirm-feedback" class="text-xs hidden"></span>
                        </div>

                        {{-- Aviso de verificação por e-mail --}}
                        <div id="verify-notice" class="flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                            <svg class="shrink-0 mt-0.5" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                            </svg>
                            <p class="text-xs text-gray-400 leading-relaxed">
                                Após criar sua conta, você receberá um <span class="text-brand-green font-medium">e-mail de verificação</span>. Verifique sua caixa de entrada para ativar o acesso.
                            </p>
                        </div>

                        <input type="hidden" id="has-existing-account" name="has_existing_account" value="0">
                        {{-- Conta existente sem senha (criada pelo Google) ainda precisa definir uma --}}
                        <input type="hidden" id="needs-password" name="needs_password" value="1">

                        {{-- Submit --}}
                        <button id="submit-btn" type="submit"
                            class="w-full py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 mt-1 flex items-center justify-center gap-2">
                            <span id="submit-text">{{ __('Criar conta') }}</span>
                            <svg id="submit-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                            </svg>
                        </button>

                    </div>

                </form>

                <p class="text-center text-gray-500 text-sm mt-6">
                    <a href="{{ route('register') }}" class="text-gray-400 hover:text-white no-underline transition-colors">
                        ← {{ __('Voltar') }}
                    </a>
                </p>

            </div>

        </div>

    </section>

@endsection

@push('scripts')
<script>
    const emailInput    = document.getElementById('email');
    const emailFeedback = document.getElementById('email-feedback');
    const formFields    = document.getElementById('form-fields');
    const searchIcon    = document.getElementById('search-icon');
    const searchSpinner = document.getElementById('search-spinner');
    let emailVerified   = false;

    emailInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); checkEmail(); }
    });

    async function checkEmail() {
        const val = emailInput.value.trim();
        if (!val || !val.includes('@')) {
            emailFeedback.textContent = '{{ __('Informe um e-mail válido.') }}';
            emailFeedback.className   = 'text-xs text-red-400';
            return;
        }

        searchIcon.classList.add('hidden');
        searchSpinner.classList.remove('hidden');
        emailFeedback.className = 'text-xs hidden';

        try {
            const res  = await fetch('{{ route('check-email') }}', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body:    JSON.stringify({ email: val, idrole: 3 }),
            });
            const data = await res.json();

            if (data.status === 'already_registered') {
                emailFeedback.textContent = '{{ __('Este e-mail já está cadastrado como cliente. Faça login para continuar.') }}';
                emailFeedback.className   = 'text-xs text-red-400';
                emailVerified = false;
                formFields.classList.add('hidden');
                return;
            }

            if (data.status === 'user_exists' && data.user) {
                document.getElementById('name').value  = data.user.name  ?? '';
                if (data.user.phone) window.PhoneInput.setNumber('phone', data.user.phone);

                // Conta criada pelo Google não tem senha: aqui ela escolhe uma.
                const hasPassword = data.has_password !== false;

                showFormFields(
                    hasPassword
                        ? '{{ __('Conta encontrada. Confirme os dados e clique em criar.') }}'
                        : '{{ __('Conta encontrada, mas ainda sem senha. Defina uma senha para acessar sua conta.') }}',
                    'text-yellow-400',
                    true,
                    hasPassword
                );
            } else {
                showFormFields('{{ __('E-mail disponível. Preencha os dados para criar sua conta.') }}', 'text-brand-green', false, false);
            }
        } catch (_) {
            emailFeedback.textContent = '{{ __('Erro ao verificar e-mail. Tente novamente.') }}';
            emailFeedback.className   = 'text-xs text-red-400';
        } finally {
            searchIcon.classList.remove('hidden');
            searchSpinner.classList.add('hidden');
        }
    }

    function showFormFields(msg, msgClass, isExisting = false, hasPassword = false) {
        document.getElementById('email-search-section').classList.add('hidden');
        document.getElementById('email-display-section').classList.remove('hidden');
        document.getElementById('email-display-text').textContent = emailInput.value.trim();
        if (msg) {
            const fb = document.getElementById('email-display-feedback');
            fb.textContent = msg;
            fb.className   = 'text-xs ' + (msgClass ?? 'text-brand-green');
            fb.classList.remove('hidden');
        }

        const passwordSection = document.getElementById('password-section');
        const confirmSection  = document.getElementById('confirm-section');
        const verifyNotice    = document.getElementById('verify-notice');
        const passwordInput   = document.getElementById('password');
        const confirmInput    = document.getElementById('password_confirmation');

        // Só some com os campos de senha quando a conta já tem uma.
        const needsPassword = !isExisting || !hasPassword;

        if (needsPassword) {
            passwordSection?.classList.remove('hidden');
            confirmSection?.classList.remove('hidden');
            verifyNotice?.classList.remove('hidden');
            passwordInput?.setAttribute('required', '');
            confirmInput?.setAttribute('required', '');
        } else {
            passwordSection?.classList.add('hidden');
            confirmSection?.classList.add('hidden');
            verifyNotice?.classList.add('hidden');
            passwordInput?.removeAttribute('required');
            confirmInput?.removeAttribute('required');
        }

        document.getElementById('has-existing-account').value = isExisting ? '1' : '0';
        document.getElementById('needs-password').value       = needsPassword ? '1' : '0';
        formFields.classList.remove('hidden');
        emailVerified = true;
    }

    function sanitizePassword(input) {
        input.value = input.value.replace(/['"<>]/g, '');
    }

    function checkConfirm() {
        const pw   = document.getElementById('password')?.value ?? '';
        const conf = document.getElementById('password_confirmation')?.value ?? '';
        const fb   = document.getElementById('confirm-feedback');
        if (!fb || !conf) return;
        if (pw === conf) {
            fb.textContent = '✓ Senhas coincidem';
            fb.className   = 'text-xs text-brand-green';
        } else {
            fb.textContent = 'As senhas não coincidem';
            fb.className   = 'text-xs text-red-400';
        }
    }

    function toggleConfirm() {
        const input = document.getElementById('password_confirmation');
        const eye   = document.getElementById('eye-confirm');
        if (input.type === 'password') {
            input.type = 'text';
            eye.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
        } else {
            input.type = 'password';
            eye.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        }
    }

    function togglePassword() {
        const input = document.getElementById('password');
        const eye   = document.getElementById('eye-icon');
        if (input.type === 'password') {
            input.type = 'text';
            eye.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
        } else {
            input.type = 'password';
            eye.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        }
    }

    function checkPasswordRules(val) {
        const rules = document.getElementById('password-rules');
        if (rules) rules.classList.remove('hidden');
        setRule('rule-min',     val.length >= 6);
        setRule('rule-upper',   /[A-Z]/.test(val));
        setRule('rule-number',  /[0-9]/.test(val));
        setRule('rule-special', /[^a-zA-Z0-9]/.test(val));
    }

    function setRule(id, ok) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'text-xs flex items-center gap-1 ' + (ok ? 'text-brand-green' : 'text-gray-600');
        el.querySelector('.rule-dot').textContent = ok ? '✓' : '·';
    }

    function formatCPF(input) {
        let v = input.value.replace(/\D/g, '').slice(0, 11);
        if (v.length > 9)      v = v.replace(/^(\d{3})(\d{3})(\d{3})(\d{1,2})$/, '$1.$2.$3-$4');
        else if (v.length > 6) v = v.replace(/^(\d{3})(\d{3})(\d+)$/, '$1.$2.$3');
        else if (v.length > 3) v = v.replace(/^(\d{3})(\d+)$/, '$1.$2');
        input.value = v;
    }

    function handleSubmit(form) {
        if (!emailVerified) {
            emailFeedback.textContent = '{{ __('Verifique seu e-mail antes de continuar.') }}';
            emailFeedback.className   = 'text-xs text-red-400';
            document.getElementById('email-search-section').classList.remove('hidden');
            document.getElementById('email-display-section').classList.add('hidden');
            emailInput.focus();
            return false;
        }

        const pw   = document.getElementById('password')?.value ?? '';
        const conf = document.getElementById('password_confirmation')?.value ?? '';
        if (pw !== conf) {
            const fb = document.getElementById('confirm-feedback');
            if (fb) { fb.textContent = 'As senhas não coincidem'; fb.className = 'text-xs text-red-400'; }
            document.getElementById('password_confirmation')?.focus();
            return false;
        }

        const phone      = document.getElementById('phone');
        const identifier = document.getElementById('identifier');
        if (phone)      phone.value      = window.PhoneInput.digits('phone');
        if (identifier) identifier.value = identifier.value.replace(/\D/g, '');

        const btn     = document.getElementById('submit-btn');
        const text    = document.getElementById('submit-text');
        const spinner = document.getElementById('submit-spinner');
        btn.disabled = true;
        btn.classList.add('opacity-75', 'cursor-not-allowed');
        text.textContent = "{{ __('Criando conta...') }}";
        spinner.classList.remove('hidden');
    }

    @if($errors->any() || old('name'))
        formFields.classList.remove('hidden');
    @endif
</script>
@endpush