@php
    $audience = $audience ?? 'investor';
    $isInvestor = $audience === 'investor';
@endphp

<div
    class="account-detection"
    data-signup-account-detection
    data-audience="{{ $audience }}"
    data-lookup-url="{{ route('signup-account-lookup') }}"
    data-signin-url="{{ route('signup-account-access.start') }}"
    data-match-heading="{{ __('web.signup.account_access.match_heading') }}"
    data-match-description="{{ __('web.signup.account_access.match_description') }}"
    data-match-label="{{ __($isInvestor ? 'web.signup.account_access.match_investor' : 'web.signup.account_access.match_startup') }}"
    data-conflict-heading="{{ __('web.signup.account_access.conflict_heading') }}"
    data-conflict-description="{{ __('web.signup.account_access.conflict_description') }}"
    data-loading="{{ __('web.signup.account_access.loading') }}"
    data-send-failed="{{ __('web.signup.account_access.errors.send_failed') }}"
    hidden
>
    <div class="account-detection__backdrop" data-account-modal-backdrop></div>
    <section class="account-detection__dialog" role="dialog" aria-modal="true" aria-labelledby="account-detection-title" aria-describedby="account-detection-description" tabindex="-1" data-account-modal-dialog>
        <div class="account-detection__topline">
        <div class="account-detection__icon" aria-hidden="true">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
            <span class="account-detection__eyebrow">{{ __('web.signup.account_access.access_badge') }}</span>
        </div>
        <h2 id="account-detection-title" class="account-detection__title" data-account-modal-title></h2>
        <p id="account-detection-description" class="account-detection__description" data-account-modal-description></p>
        <div class="account-detection__identity" data-account-modal-identity>
            <span class="account-detection__identity-label" data-account-modal-label></span>
            <strong data-account-modal-name></strong>
            <dl class="account-detection__contacts">
                <div data-account-modal-phone-row hidden><dt>{{ __('web.signup.account_access.phone') }}</dt><dd data-account-modal-phone></dd></div>
                <div data-account-modal-email-row hidden><dt>{{ __('web.signup.account_access.email') }}</dt><dd data-account-modal-email></dd></div>
            </dl>
        </div>
        <p class="account-detection__error" role="alert" data-account-modal-error hidden></p>
        <div class="account-detection__actions">
            <button type="button" class="btn btn--primary account-detection__signin" data-account-signin>{{ __('web.signup.account_access.sign_in') }}</button>
            <button type="button" class="btn btn--ghost account-detection__continue" data-account-continue>{{ __('web.signup.account_access.continue') }}</button>
        </div>
    </section>
</div>

@once
@push('styles')
<style>
    .account-detection[hidden] { display: none !important; }
    .account-detection { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
    .account-detection__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.64); backdrop-filter: blur(5px); }
    .account-detection__dialog { position: relative; width: min(100%, 500px); border: 1px solid var(--primary-100); border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-xl); padding: 32px; text-align: start; }
    .account-detection__topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
    .account-detection__icon { width:52px; height:52px; display:grid; place-items:center; color:var(--primary-600); background:linear-gradient(135deg,var(--primary-50),#faf5ff); border:1px solid var(--primary-100); border-radius:16px; }
    .account-detection__eyebrow { color:var(--primary-700); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    .account-detection__title { margin: 0; color: var(--slate-900); font-size: clamp(21px,3vw,25px); line-height: 1.25; letter-spacing:-.02em; }
    .account-detection__description { margin: 11px 0 0; color: var(--slate-600); font-size: 14px; line-height:1.7; }
    .account-detection__identity { margin:22px 0 24px; padding:15px 16px; border:1px solid var(--primary-100); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--primary-50),#fff); display:grid; gap:4px; }
    .account-detection__identity-label { color: var(--slate-500); font-size: 12px; font-weight: 700; }
    .account-detection__identity strong { color: var(--primary-900); font-size: 15px; overflow-wrap: anywhere; }
    .account-detection__contacts { display:grid; gap:9px; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--primary-100); }
    .account-detection__contacts div { display:grid; grid-template-columns:minmax(112px,auto) minmax(0,1fr); gap:10px; align-items:baseline; }
    .account-detection__contacts dt { color:var(--slate-500); font-size:12px; font-weight:700; }
    .account-detection__contacts dd { min-width:0; margin:0; color:var(--slate-800); direction:ltr; text-align:start; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
    .account-detection__error { margin: -10px 0 18px; padding:10px 12px; color:var(--error-700); background:var(--error-50); border:1px solid var(--error-300); border-radius:var(--radius-md); font-size:13px; font-weight:600; }
    .account-detection__actions { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 12px; }
    .account-detection__actions .btn { justify-content: center; min-height: 48px; font-size:14px; }
    .account-detection__signin { box-shadow: 0 10px 22px rgba(79,70,229,.25); }
    .account-detection__continue { color:var(--slate-600); border-color:var(--slate-300); background:#fff; }
    .account-detection__continue { white-space:nowrap; padding-inline:16px; }
    .account-detection__lookup-status { display: block; margin-top: 6px; color: var(--slate-500); font-size: 12px; }
    @media (max-width: 520px) { .account-detection { padding: 14px; align-items: end; } .account-detection__dialog { padding: 24px 20px; } .account-detection__actions { grid-template-columns: 1fr; } }
</style>
@endpush
@push('scripts')
<script>
(() => {
    'use strict';
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
    const toDraft = (form) => {
        const draft = {};
        const assign = (target, path, value) => {
            const key = path.shift();
            if (key === undefined) return;
            if (path.length === 0) {
                if (key === '') { target.push(value); return; }
                target[key] = Object.prototype.hasOwnProperty.call(target, key)
                    ? (Array.isArray(target[key]) ? [...target[key], value] : [target[key], value])
                    : value;
                return;
            }
            const asArray = path[0] === '' || /^\d+$/.test(path[0]);
            if (key === '') {
                const child = asArray ? [] : {};
                target.push(child);
                assign(child, path, value);
                return;
            }
            if (!target[key] || typeof target[key] !== 'object') target[key] = asArray ? [] : {};
            assign(target[key], path, value);
        };
        new FormData(form).forEach((value, key) => {
            if (key === '_token' || value instanceof File) return;
            const path = key.replace(/\]/g, '').split('[').filter((part, index) => part !== '' || index > 0);
            if (path.length) assign(draft, path, value);
        });
        return draft;
    };
    document.querySelectorAll('[data-signup-account-detection]').forEach((modal) => {
        const form = document.querySelector('[data-signup-account-form]');
        if (!form) return;
        const email = form.querySelector('[name="email"]');
        const phone = form.querySelector('[name="phone_number"]');
        const countryCode = form.querySelector('[name="country_code"]');
        const title = modal.querySelector('[data-account-modal-title]');
        const description = modal.querySelector('[data-account-modal-description]');
        const label = modal.querySelector('[data-account-modal-label]');
        const name = modal.querySelector('[data-account-modal-name]');
        const identity = modal.querySelector('[data-account-modal-identity]');
        const signIn = modal.querySelector('[data-account-signin]');
        const continueButton = modal.querySelector('[data-account-continue]');
        const dialog = modal.querySelector('[data-account-modal-dialog]');
        const contactPhone = modal.querySelector('[data-account-modal-phone]');
        const contactEmail = modal.querySelector('[data-account-modal-email]');
        const contactPhoneRow = modal.querySelector('[data-account-modal-phone-row]');
        const contactEmailRow = modal.querySelector('[data-account-modal-email-row]');
        const modalError = modal.querySelector('[data-account-modal-error]');
        const lookupStatus = document.createElement('span');
        lookupStatus.className = 'account-detection__lookup-status';
        lookupStatus.setAttribute('aria-live', 'polite');
        lookupStatus.hidden = true;
        (email || phone)?.parentElement?.appendChild(lookupStatus);
        let lastFingerprint = '';
        let previousFocus = null;
        let busy = false;

        const close = () => {
            modal.hidden = true;
            document.body.style.overflow = '';
            previousFocus?.focus?.();
        };
        const clearError = () => { modalError.hidden = true; modalError.textContent = ''; };
        const open = (state, displayName = '', contacts = {}) => {
            previousFocus = document.activeElement;
            const matched = state === 'matched';
            title.textContent = matched ? modal.dataset.matchHeading : modal.dataset.conflictHeading;
            description.textContent = matched ? modal.dataset.matchDescription : modal.dataset.conflictDescription;
            identity.hidden = !matched;
            signIn.hidden = !matched;
            if (matched) {
                label.textContent = modal.dataset.matchLabel;
                name.textContent = displayName;
                contactPhone.textContent = contacts.phone || '';
                contactEmail.textContent = contacts.email || '';
                contactPhoneRow.hidden = !contacts.phone;
                contactEmailRow.hidden = !contacts.email;
            }
            clearError();
            modal.hidden = false;
            document.body.style.overflow = 'hidden';
            window.setTimeout(() => (matched ? signIn : dialog).focus(), 0);
        };
        signIn.addEventListener('click', async () => {
            signIn.disabled = true;
            signIn.setAttribute('aria-busy', 'true');
            clearError();
            try {
                const response = await fetch(modal.dataset.signinUrl, {
                    method: 'POST',
                    headers: {'Accept':'application/json', 'Content-Type':'application/json', 'X-CSRF-TOKEN':csrf},
                    body: JSON.stringify({audience: modal.dataset.audience, draft: JSON.stringify(toDraft(form))}),
                });
                const payload = await response.json().catch(() => ({}));
                if (!response.ok || !payload.redirect) throw new Error('send_failed');
                window.location.assign(payload.redirect);
            } catch (_) {
                modalError.textContent = modal.dataset.sendFailed || '';
                modalError.hidden = false;
            } finally {
                signIn.disabled = false;
                signIn.setAttribute('aria-busy', 'false');
            }
        });
        continueButton.addEventListener('click', close);
        modal.querySelector('[data-account-modal-backdrop]').addEventListener('click', close);
        document.addEventListener('keydown', (event) => { if (!modal.hidden && event.key === 'Escape') close(); });

        const check = async () => {
            const emailValue = (email?.value || '').trim();
            const phoneValue = `${countryCode?.value || ''}${phone?.value || ''}`.replace(/\s+/g, '');
            const emailValid = emailValue !== '' && email?.checkValidity();
            const phoneValid = phoneValue.replace(/\D/g, '').length >= 8;
            if (!emailValid && !phoneValid) return;
            const fingerprint = `${emailValue.toLowerCase()}|${phoneValue}`;
            if (busy || fingerprint === lastFingerprint) return;
            busy = true;
            lookupStatus.textContent = modal.dataset.loading || '';
            lookupStatus.hidden = false;
            try {
                const response = await fetch(modal.dataset.lookupUrl, {
                    method: 'POST',
                    headers: {'Accept':'application/json','Content-Type':'application/json','X-CSRF-TOKEN':csrf},
                    body: JSON.stringify({audience: modal.dataset.audience, email: emailValid ? emailValue : '', phone: phoneValid ? phoneValue : ''}),
                });
                if (!response.ok) return;
                const payload = await response.json();
                lastFingerprint = fingerprint;
                if (payload.state === 'matched') open('matched', payload.display_name || '', {phone: payload.phone || '', email: payload.email || ''});
                if (payload.state === 'conflict') open('conflict');
            } finally {
                busy = false;
                lookupStatus.hidden = true;
                lookupStatus.textContent = '';
            }
        };
        [email, phone, countryCode].filter(Boolean).forEach((field) => field.addEventListener('change', check));
        [email, phone].filter(Boolean).forEach((field) => field.addEventListener('blur', check));
    });
})();
</script>
@endpush
@endonce