{{--
    郵便番号入力・住所検索コンポーネント(Livewire版)
    @props postalName 郵便番号のname属性
    @props postalValue 郵便番号の値
    @props regionName 都道府県のname属性
    @props localityName 住所1のname属性
    @props adrId 住所のID属性
    @props showReverseSearch 住所→郵便番号検索ボタンの表示 (default: true)
--}}
@props(['showReverseSearch' => true])
{{--
    初期値は x-data の引数で渡す（関数本体には焼き込まない）。
    postalCodeSearch() はグローバル関数宣言のため、1画面に複数描画すると
    後に定義された方が前を上書きする。本体を静的に保つことで後勝ちを無害化する。
    @see docs/customer-postal-code-overwrite/01-調査結果.md
--}}
<div x-data="postalCodeSearch('{{ $adrId }}', '{{ $postalValue }}')" class="flex items-center gap-2">
    {{-- value属性はAlpineの初期化に失敗しても値を失わないための多重防御 --}}
    <input
        type="text"
        class="input-text max-w-24 w-full p-postal-code"
        name="{{ $postalName }}"
        x-model="postalCode"
        value="{{ $postalValue }}"
        placeholder="9999999"
        size="7" />
    <x-button.postal-code class="address-search" @click="$event.preventDefault(); return false;" />
    @if($showReverseSearch)
        <x-button.postal-reverse class="postal-reverse-search" @click="searchByAddress()" />
    @endif
</div>

<script>
function postalCodeSearch(adrId, postalValue) {
    return {
        postalCode: postalValue ?? '',
        adrId: adrId,

        init() {
            // Livewireイベントリスナー
            Livewire.on('set-postal-code', (event) => {
                console.log('set-postal-code received:', {
                    eventAdrId: event.adrId,
                    thisAdrId: this.adrId,
                    match: event.adrId === this.adrId
                });

                // adrIdが一致する場合のみ値をセット
                if (event.adrId === this.adrId) {
                    console.log('Setting postal code for:', this.adrId);
                    this.postalCode = event.postalCode;

                    // 郵便番号から住所を検索
                    const postalInput = document.querySelector('#' + this.adrId + ' .p-postal-code');
                    if (postalInput) {
                        // postToAdr関数が存在する場合は実行
                        if (typeof postToAdr === 'function') {
                            postToAdr(this.adrId);
                        }
                    }
                }
            });

            // 住所データセットイベントリスナー
            Livewire.on('set-address-data', (event) => {
                console.log('set-address-data received:', {
                    eventAdrId: event.adrId,
                    thisAdrId: this.adrId,
                    match: event.adrId === this.adrId,
                    event
                });

                // adrIdが一致する場合のみ値をセット
                if (event.adrId === this.adrId) {
                    console.log('Setting address for:', this.adrId);
                    this.setAddressFields(event.prefecture, event.citytown);
                }
            });
        },

        /**
         * 住所フィールドに値をセット
         */
        setAddressFields(prefecture, address) {
            const container = document.querySelector('#' + this.adrId);
            if (!container) {
                console.error('Address container not found: ' + this.adrId);
                return;
            }

            // 都道府県フィールドを検索
            const regionField = container.querySelector('.p-region');
            if (regionField) {
                if (regionField.tagName === 'SELECT') {
                    // selectタグの場合、optionから一致するものを探す
                    const options = regionField.options;
                    for (let i = 0; i < options.length; i++) {
                        if (options[i].text === prefecture || options[i].value === prefecture) {
                            regionField.selectedIndex = i;
                            break;
                        }
                    }
                } else {
                    // inputタグの場合
                    regionField.value = prefecture;
                }
            }

            // 住所1フィールドを検索
            const localityField = container.querySelector('.p-locality');
            if (localityField) {
                localityField.value = address;
            }
        },

        async searchByAddress() {
            console.log('searchByAddress called for adrId:', this.adrId);
            const container = document.querySelector('#' + this.adrId);
            if (!container) {
                console.error('Address container not found: ' + this.adrId);
                return;
            }

            const regionField = container.querySelector('.p-region');
            const localityField = container.querySelector('.p-locality');

            if (!regionField || !localityField) {
                console.error('Required fields not found for postal search in ' + this.adrId);
                toast('error', '必要な入力フィールドが見つかりません');
                return;
            }

            // selectタグとinputタグの両方に対応
            const region = (regionField.tagName === 'SELECT' ?
                regionField.options[regionField.selectedIndex]?.value :
                regionField.value)?.trim() || '';
            const locality = (localityField.tagName === 'SELECT' ?
                localityField.options[localityField.selectedIndex]?.value :
                localityField.value)?.trim() || '';

            console.log('Search params:', { adrId: this.adrId, region, locality });

            if (!region || !locality) {
                //toast('error', '都道府県と住所を入力してください');
                return;
            }

            try {
                // Livewireメソッドを呼び出す
                console.log('Calling searchPostalCode on component:', this.adrId);
                this.$wire.searchPostalCode(region, locality);
            } catch (error) {
                console.error('Error searching postal code:', error);
                toast('error', '郵便番号の検索に失敗しました');
            }
        }
    }
}
</script>