@php
    $contactGroups = [
        'phones' => [
            'relation' => 'phoneNumbers',
            'fields' => ['phone_number'],
            'title' => __('Phone numbers'),
            'placeholder' => __('Type a phone number and press Enter'),
        ],
        'emails' => [
            'relation' => 'emailAddresses',
            'fields' => ['email_address'],
            'title' => __('Email addresses'),
            'placeholder' => __('Type an email address and press Enter'),
        ],
        'addresses' => [
            'relation' => 'postalAddresses',
            'fields' => ['address_line_1', 'address_line_2', 'locality', 'administrative_area', 'postal_code', 'country_code'],
            'title' => __('Postal addresses'),
            'placeholder' => null,
        ],
    ];
    $homeCountry = \App\Models\CompanySetting::countryCode();
    $regionLists = \App\Support\AddressRegions::REGIONS;
    $countries = \App\Support\AddressRegions::COUNTRIES;
    $submittedContacts = old('contacts', []);
@endphp

<div class="form-grid contact-fields" data-contact-editor>
    @foreach($contactGroups as $type => $group)
        @php
            $submittedGroup = $submittedContacts[$type] ?? null;
            if (is_array($submittedGroup) && array_key_exists('items', $submittedGroup)) {
                $rows = $submittedGroup['items'];
            } elseif (isset($person) && $person->relationLoaded($group['relation'])) {
                $rows = $person->{$group['relation']}->map(fn ($contact) => $contact->toArray())->all();
            } else {
                $rows = [];
            }

            $items = [];
            $primarySourceIndex = $submittedGroup['primary'] ?? null;
            $primaryIndex = null;

            foreach ($rows as $sourceIndex => $row) {
                $fields = [];
                foreach ($group['fields'] as $field) {
                    $fields[$field] = trim((string) ($row[$field] ?? ''));
                }

                $value = $type === 'addresses'
                    ? \App\Models\PostalAddress::formatParts($fields)
                    : $fields[$group['fields'][0]];

                if ($value === '') {
                    continue;
                }

                $itemIndex = count($items);
                $items[$itemIndex] = [
                    'source_index' => $sourceIndex,
                    'id' => $row['id'] ?? null,
                    'fields' => $fields,
                    'value' => $value,
                    'is_primary' => ! empty($row['is_primary']),
                ];

                if ((string) $sourceIndex === (string) $primarySourceIndex || $items[$itemIndex]['is_primary']) {
                    $primarySourceIndex ??= $sourceIndex;
                    $primaryIndex = (string) $itemIndex;
                }
            }

            if ($items !== [] && ! isset($primaryIndex)) {
                $primaryIndex = '0';
            }
        @endphp

        <fieldset class="form-field contact-field" data-contact-group="{{ $type }}" data-contact-fields="{{ implode(',', $group['fields']) }}" data-next-index="{{ count($items) }}">
            <legend>{{ $group['title'] }}</legend>
            @if($type === 'addresses')
                <div class="contact-entry" data-address-opener>
                    <button class="action-button secondary" type="button" data-open-address>+ {{ __('Add address') }}</button>
                </div>
                <div class="address-panel" data-address-panel hidden>
                    <input type="text" data-address-part="address_line_1" maxlength="255" autocomplete="off" placeholder="{{ __('Street address') }}" aria-label="{{ __('Street address') }}">
                    <input type="text" data-address-part="address_line_2" maxlength="255" autocomplete="off" placeholder="{{ __('Apt, suite, unit (optional)') }}" aria-label="{{ __('Apt, suite, unit (optional)') }}">
                    <div class="address-panel-row">
                        <input type="text" data-address-part="locality" maxlength="120" autocomplete="off" placeholder="{{ __('City') }}" aria-label="{{ __('City') }}">
                        <input type="text" data-address-part="administrative_area" maxlength="120" autocomplete="off" placeholder="{{ __('State') }}" aria-label="{{ __('State') }}">
                        <input type="text" data-address-part="postal_code" maxlength="32" autocomplete="off" placeholder="{{ __('ZIP code') }}" aria-label="{{ __('ZIP code') }}">
                        <input type="text" data-address-part="country_code" maxlength="2" autocomplete="off" list="address-countries" value="{{ $homeCountry }}" data-default="{{ $homeCountry }}" placeholder="{{ __('Country') }}" aria-label="{{ __('Country') }}">
                    </div>
                    <span class="validation-error" data-address-error hidden></span>
                    <div class="address-panel-actions">
                        <button class="action-button secondary" type="button" data-save-address data-add-label="{{ __('Add') }}" data-update-label="{{ __('Update') }}">{{ __('Add') }}</button>
                        <button class="text-button" type="button" data-cancel-address>{{ __('Cancel') }}</button>
                    </div>
                    @foreach($regionLists as $regionCountry => $regions)
                        <datalist id="address-regions-{{ strtolower($regionCountry) }}">
                            @foreach($regions as $code => $name)
                                <option value="{{ $code }}">{{ $code !== $name ? $name : '' }}</option>
                            @endforeach
                        </datalist>
                    @endforeach
                    <datalist id="address-countries">
                        @foreach($countries as $code => $name)
                            <option value="{{ $code }}">{{ __($name) }}</option>
                        @endforeach
                    </datalist>
                </div>
            @else
                <div class="contact-entry">
                    <input type="text" data-contact-entry autocomplete="off" placeholder="{{ $group['placeholder'] }}" aria-label="{{ $group['title'] }}">
                    <button class="action-button secondary" type="button" data-add-contact>{{ __('Add') }}</button>
                </div>
            @endif
            <div class="contact-tokens" data-contact-items>
                @foreach($items as $index => $item)
                    <div class="contact-token" data-contact-item data-contact-index="{{ $index }}" data-contact-value="{{ $item['value'] }}">
                        <span data-contact-text>{{ $item['value'] }}</span>
                        <input type="hidden" name="contacts[{{ $type }}][items][{{ $index }}][id]" value="{{ $item['id'] ?? '' }}">
                        @foreach($item['fields'] as $field => $fieldValue)
                            <input type="hidden" name="contacts[{{ $type }}][items][{{ $index }}][{{ $field }}]" value="{{ $fieldValue }}" data-contact-part="{{ $field }}">
                        @endforeach
                        @if($type === 'addresses')
                            <button class="contact-token-edit" type="button" data-edit-contact aria-label="{{ __('Edit') }} {{ $item['value'] }}" title="{{ __('Edit') }}">✎</button>
                        @endif
                        <button class="contact-token-remove" type="button" data-remove-contact aria-label="{{ __('Remove') }} {{ $item['value'] }}">×</button>
                    </div>
                @endforeach
            </div>
            <input type="hidden" name="contacts[{{ $type }}][present]" value="1">
            <div class="contact-primary">
                <label for="contact-{{ $type }}-primary">{{ __('Primary') }}</label>
                <select id="contact-{{ $type }}-primary" name="contacts[{{ $type }}][primary]" data-contact-primary>
                    @foreach($items as $index => $item)
                        <option value="{{ $index }}" @selected((string) $index === (string) ($primaryIndex ?? ''))>{{ $item['value'] }}</option>
                    @endforeach
                </select>
            </div>
            @foreach($errors->getMessages() as $errorField => $messages)
                @if(str_starts_with($errorField, "contacts.{$type}."))
                    @foreach($messages as $message)
                        <span class="validation-error">{{ $message }}</span>
                    @endforeach
                @endif
            @endforeach
        </fieldset>
    @endforeach
</div>

<script>
    (() => {
        const labels = {
            remove: @json(__('Remove')),
            edit: @json(__('Edit')),
            streetRequired: @json(__('Enter the street address.')),
            countryInvalid: @json(__('Use a two-letter country code, e.g. US.')),
            region: { US: @json(__('State')), SV: @json(__('Department')), other: @json(__('State / province')) },
            postal: { US: @json(__('ZIP code')), other: @json(__('Postal code')) },
        };
        const homeCountry = @json($homeCountry);

        const fold = (text) => (text || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();

        const regionList = (country) => document.getElementById(`address-regions-${(country || '').toLowerCase()}`);

        const syncRegionField = (panel) => {
            const country = panel.querySelector('[data-address-part="country_code"]').value.trim().toUpperCase();
            const region = panel.querySelector('[data-address-part="administrative_area"]');
            const postal = panel.querySelector('[data-address-part="postal_code"]');
            const list = regionList(country);
            const regionLabel = labels.region[country] ?? labels.region.other;
            const postalLabel = labels.postal[country] ?? labels.postal.other;

            if (list) {
                region.setAttribute('list', list.id);
            } else {
                region.removeAttribute('list');
            }
            region.placeholder = regionLabel;
            region.setAttribute('aria-label', regionLabel);
            postal.placeholder = postalLabel;
            postal.setAttribute('aria-label', postalLabel);
        };

        const canonicalRegion = (country, value) => {
            const list = regionList(country);
            const folded = fold(value);
            const match = list ? Array.from(list.options).find((option) => fold(option.value) === folded || fold(option.textContent) === folded) : null;

            return match ? match.value : value;
        };

        const formatAddress = (parts) => {
            const country = (parts.country_code || '').toUpperCase();
            const region = [parts.administrative_area, parts.postal_code].filter(Boolean).join(' ');

            return [parts.address_line_1, parts.address_line_2, parts.locality, region, country !== homeCountry ? country : '']
                .filter(Boolean)
                .join(', ');
        };

        const makeButton = (className, dataKey, text, label) => {
            const button = document.createElement('button');
            button.className = className;
            button.type = 'button';
            button.dataset[dataKey] = '';
            button.setAttribute('aria-label', label);
            button.textContent = text;

            return button;
        };

        const addToken = (group, parts, value) => {
            const items = group.querySelector('[data-contact-items]');
            const primary = group.querySelector('[data-contact-primary]');
            const index = Number(group.dataset.nextIndex);
            const type = group.dataset.contactGroup;
            const token = document.createElement('div');
            token.className = 'contact-token';
            token.dataset.contactItem = '';
            token.dataset.contactIndex = String(index);
            token.dataset.contactValue = value;

            const text = document.createElement('span');
            text.dataset.contactText = '';
            text.textContent = value;

            const id = document.createElement('input');
            id.type = 'hidden';
            id.name = `contacts[${type}][items][${index}][id]`;
            id.value = '';

            token.append(text, id);

            Object.entries(parts).forEach(([field, fieldValue]) => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `contacts[${type}][items][${index}][${field}]`;
                input.value = fieldValue;
                input.dataset.contactPart = field;
                token.append(input);
            });

            if (type === 'addresses') {
                token.append(makeButton('contact-token-edit', 'editContact', '✎', `${labels.edit} ${value}`));
            }

            token.append(makeButton('contact-token-remove', 'removeContact', '×', `${labels.remove} ${value}`));
            items.append(token);

            const option = document.createElement('option');
            option.value = String(index);
            option.textContent = value;
            primary.append(option);

            if (primary.value === '') {
                primary.value = String(index);
            }
            window.jQuery?.(primary).trigger('change.select2');

            group.dataset.nextIndex = String(index + 1);
        };

        const isDuplicate = (group, value, exceptToken = null) => Array.from(group.querySelectorAll('[data-contact-item]'))
            .some((item) => item !== exceptToken && item.dataset.contactValue.toLowerCase() === value.toLowerCase());

        const openAddressPanel = (group, token = null) => {
            const panel = group.querySelector('[data-address-panel]');
            const save = panel.querySelector('[data-save-address]');

            panel.querySelectorAll('[data-address-part]').forEach((input) => {
                const stored = token?.querySelector(`[data-contact-part="${input.dataset.addressPart}"]`);
                input.value = token ? (stored?.value ?? '') : (input.dataset.default ?? '');
            });

            panel.dataset.editIndex = token?.dataset.contactIndex ?? '';
            save.textContent = token ? save.dataset.updateLabel : save.dataset.addLabel;
            syncRegionField(panel);
            panel.querySelector('[data-address-error]').hidden = true;
            panel.hidden = false;
            group.querySelector('[data-address-opener]').hidden = true;
            panel.querySelector('[data-address-part="address_line_1"]').focus();
        };

        const closeAddressPanel = (group) => {
            group.querySelector('[data-address-panel]').hidden = true;
            group.querySelector('[data-address-opener]').hidden = false;
        };

        const saveAddress = (group) => {
            const panel = group.querySelector('[data-address-panel]');
            const error = panel.querySelector('[data-address-error]');
            const parts = {};

            panel.querySelectorAll('[data-address-part]').forEach((input) => {
                parts[input.dataset.addressPart] = input.value.trim().replace(/\s+/g, ' ');
            });
            parts.country_code = parts.country_code.toUpperCase();
            parts.administrative_area = canonicalRegion(parts.country_code, parts.administrative_area);
            if (parts.country_code === 'US' && /^[a-z]{2}$/i.test(parts.administrative_area)) {
                parts.administrative_area = parts.administrative_area.toUpperCase();
            }

            const showError = (message, field) => {
                error.textContent = message;
                error.hidden = false;
                panel.querySelector(`[data-address-part="${field}"]`).focus();
            };

            if (parts.address_line_1 === '') {
                return showError(labels.streetRequired, 'address_line_1');
            }

            if (parts.country_code !== '' && ! /^[A-Z]{2}$/.test(parts.country_code)) {
                return showError(labels.countryInvalid, 'country_code');
            }

            const value = formatAddress(parts);
            const editIndex = panel.dataset.editIndex;
            const token = editIndex !== '' ? group.querySelector(`[data-contact-item][data-contact-index="${editIndex}"]`) : null;

            if (isDuplicate(group, value, token)) {
                closeAddressPanel(group);
                return;
            }

            if (token) {
                Object.entries(parts).forEach(([field, fieldValue]) => {
                    token.querySelector(`[data-contact-part="${field}"]`).value = fieldValue;
                });
                token.dataset.contactValue = value;
                token.querySelector('[data-contact-text]').textContent = value;
                token.querySelector('[data-edit-contact]').setAttribute('aria-label', `${labels.edit} ${value}`);
                token.querySelector('[data-remove-contact]').setAttribute('aria-label', `${labels.remove} ${value}`);
                const option = group.querySelector(`[data-contact-primary] option[value="${editIndex}"]`);
                if (option) {
                    option.textContent = value;
                    window.jQuery?.(option.parentElement).trigger('change.select2');
                }
            } else if (group.querySelectorAll('[data-contact-item]').length < 20) {
                addToken(group, parts, value);
            }

            closeAddressPanel(group);
        };

        document.querySelectorAll('[data-contact-editor]').forEach((editor) => {
            editor.closest('form')?.addEventListener('submit', () => {
                editor.querySelectorAll('[data-address-panel]:not([hidden])').forEach((panel) => {
                    if (panel.querySelector('[data-address-part="address_line_1"]').value.trim() !== '') {
                        saveAddress(panel.closest('[data-contact-group]'));
                    }
                });
            });

            editor.addEventListener('click', (event) => {
                const group = event.target.closest('[data-contact-group]');

                if (! group) {
                    return;
                }

                if (event.target.closest('[data-add-contact]')) {
                    const entry = group.querySelector('[data-contact-entry]');
                    const value = entry.value.trim();
                    const field = group.dataset.contactFields;

                    if (value === '' || group.querySelectorAll('[data-contact-item]').length >= 20) {
                        return;
                    }

                    if (! isDuplicate(group, value)) {
                        addToken(group, { [field]: value }, value);
                    }

                    entry.value = '';
                    entry.focus();
                }

                if (event.target.closest('[data-open-address]')) {
                    openAddressPanel(group);
                }

                if (event.target.closest('[data-edit-contact]')) {
                    openAddressPanel(group, event.target.closest('[data-contact-item]'));
                }

                if (event.target.closest('[data-save-address]')) {
                    saveAddress(group);
                }

                if (event.target.closest('[data-cancel-address]')) {
                    closeAddressPanel(group);
                }

                const removeButton = event.target.closest('[data-remove-contact]');

                if (removeButton) {
                    const token = removeButton.closest('[data-contact-item]');
                    const primary = group.querySelector('[data-contact-primary]');
                    const removedIndex = token.dataset.contactIndex;
                    const wasPrimary = primary.value === removedIndex;
                    const panel = group.querySelector('[data-address-panel]');

                    if (panel && panel.dataset.editIndex === removedIndex) {
                        closeAddressPanel(group);
                    }

                    token.remove();
                    primary.querySelector(`option[value="${removedIndex}"]`)?.remove();

                    if (wasPrimary) {
                        primary.value = primary.options[0]?.value ?? '';
                    }
                    window.jQuery?.(primary).trigger('change.select2');
                }
            });

            editor.addEventListener('input', (event) => {
                if (event.target.matches('[data-address-part="country_code"]')) {
                    syncRegionField(event.target.closest('[data-address-panel]'));
                }
            });

            editor.addEventListener('keydown', (event) => {
                if (event.target.matches('[data-contact-entry]') && (event.key === 'Enter' || event.key === ',')) {
                    event.preventDefault();
                    event.target.closest('[data-contact-group]').querySelector('[data-add-contact]').click();
                }

                if (event.target.matches('[data-address-part]')) {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        saveAddress(event.target.closest('[data-contact-group]'));
                    }

                    if (event.key === 'Escape') {
                        event.preventDefault();
                        closeAddressPanel(event.target.closest('[data-contact-group]'));
                    }
                }
            });
        });
    })();
</script>