@php
    $contactGroups = [
        'phones' => [
            'relation' => 'phoneNumbers',
            'field' => 'phone_number',
            'title' => __('Phone numbers'),
            'placeholder' => __('Type a phone number and press Enter'),
        ],
        'emails' => [
            'relation' => 'emailAddresses',
            'field' => 'email_address',
            'title' => __('Email addresses'),
            'placeholder' => __('Type an email address and press Enter'),
        ],
        'addresses' => [
            'relation' => 'postalAddresses',
            'field' => 'address_line_1',
            'title' => __('Postal addresses'),
            'placeholder' => __('Type a complete address and press Enter'),
        ],
    ];
    $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) {
                if ($type === 'addresses') {
                    $value = implode(', ', array_filter([
                        $row['address_line_1'] ?? null,
                        $row['address_line_2'] ?? null,
                        $row['locality'] ?? null,
                        $row['administrative_area'] ?? null,
                        $row['postal_code'] ?? null,
                        $row['country_code'] ?? null,
                    ], fn ($part) => filled($part)));
                } else {
                    $value = trim((string) ($row[$group['field']] ?? ''));
                }

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

                $itemIndex = count($items);
                $items[$itemIndex] = [
                    'source_index' => $sourceIndex,
                    'id' => $row['id'] ?? null,
                    '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-next-index="{{ count($items) }}">
            <legend>{{ $group['title'] }}</legend>
            <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>
            <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>{{ $item['value'] }}</span>
                        <input type="hidden" name="contacts[{{ $type }}][items][{{ $index }}][id]" value="{{ $item['id'] ?? '' }}">
                        <input type="hidden" name="contacts[{{ $type }}][items][{{ $index }}][{{ $group['field'] }}]" value="{{ $item['value'] }}">
                        <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>
    (() => {
        document.querySelectorAll('[data-contact-editor]').forEach((editor) => {
            editor.addEventListener('click', (event) => {
                const addButton = event.target.closest('[data-add-contact]');
                const removeButton = event.target.closest('[data-remove-contact]');

                if (addButton) {
                    const group = addButton.closest('[data-contact-group]');
                    const entry = group.querySelector('[data-contact-entry]');
                    const value = entry.value.trim();
                    const items = group.querySelector('[data-contact-items]');
                    const primary = group.querySelector('[data-contact-primary]');

                    if (value === '' || items.children.length >= 20) {
                        return;
                    }

                    if (Array.from(items.children).some((item) => item.dataset.contactValue === value)) {
                        entry.value = '';
                        return;
                    }

                    const index = Number(group.dataset.nextIndex);
                    const type = group.dataset.contactGroup;
                    const field = type === 'phones' ? 'phone_number' : type === 'emails' ? 'email_address' : 'address_line_1';
                    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.textContent = value;

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

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

                    const remove = document.createElement('button');
                    remove.className = 'contact-token-remove';
                    remove.type = 'button';
                    remove.dataset.removeContact = '';
                    remove.setAttribute('aria-label', `{{ __('Remove') }} ${value}`);
                    remove.textContent = '×';

                    token.append(text, id, contactValue, remove);
                    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);
                    }

                    group.dataset.nextIndex = String(index + 1);
                    entry.value = '';
                    entry.focus();
                }

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

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

                    if (wasPrimary) {
                        primary.value = primary.options[0]?.value ?? '';
                    }
                }
            });

            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();
                }
            });
        });
    })();
</script>