{{-- ショートカットリアルタイム同期 --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ブラウザタブ間通信用のBroadcast Channel
    const shortcutChannel = new BroadcastChannel('shortcuts-sync');

    // Livewireイベントリスナー
    window.addEventListener('shortcut-updated', () => {
        // 他のタブに変更を通知
        shortcutChannel.postMessage({
            type: 'shortcut-updated',
            timestamp: new Date().toISOString(),
            user_id: @auth {{ auth()->id() }} @else null @endauth
        });
    });

    window.addEventListener('shortcuts-loaded', (event) => {
        // パフォーマンス情報をコンソールに出力（開発時のみ）
        if (window.APP_DEBUG) {
            console.log('Shortcuts loaded:', event.detail);
        }
    });

    // 他のタブからの変更通知を受信
    shortcutChannel.addEventListener('message', (event) => {
        const data = event.data;

        // 同じユーザーの変更のみ処理
        @auth
        if (data.user_id === {{ auth()->id() }}) {
            switch (data.type) {
                case 'shortcut-updated':
                    // 全てのショートカット表示コンポーネントを更新
                    Livewire.emit('shortcut-added');
                    Livewire.emit('shortcut-updated');
                    Livewire.emit('shortcut-deleted');
                    Livewire.emit('shortcut-reordered');
                    break;
            }
        }
        @endauth
    });

    // ページの可視性変更時の処理
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            // ページがアクティブになった時、ショートカットを再読み込み
            setTimeout(() => {
                @auth
                Livewire.emit('shortcut-updated');
                @endauth
            }, 100);
        }
    });

    // Webフォーカス時の処理（ページ間移動時）
    window.addEventListener('focus', () => {
        // ウィンドウにフォーカスが戻った時、ショートカットを再読み込み
        setTimeout(() => {
            @auth
            Livewire.emit('shortcut-updated');
            @endauth
        }, 100);
    });

    // Performance Observer for monitoring (開発環境のみ)
    @if(config('app.debug'))
    if ('PerformanceObserver' in window) {
        const observer = new PerformanceObserver((list) => {
            const entries = list.getEntries();
            entries.forEach((entry) => {
                if (entry.name.includes('livewire') && entry.duration > 200) {
                    console.warn('Slow Livewire request:', {
                        name: entry.name,
                        duration: entry.duration,
                        timestamp: entry.startTime
                    });
                }
            });
        });

        observer.observe({entryTypes: ['navigation', 'resource']});
    }
    @endif

    // エラーハンドリング
    window.addEventListener('error', (event) => {
        if (event.error && event.error.message.includes('shortcut')) {
            console.error('Shortcut related error:', event.error);

            // 必要に応じてエラー報告
            @if(config('app.debug'))
            console.log('Error details:', {
                message: event.error.message,
                stack: event.error.stack,
                timestamp: new Date().toISOString()
            });
            @endif
        }
    });

    // 接続状態の監視
    window.addEventListener('online', () => {
        // オンラインに復帰したときショートカットを再読み込み
        @auth
        Livewire.emit('shortcut-updated');
        @endauth
    });

    // Livewire接続エラー時の再試行
    document.addEventListener('livewire:error', (event) => {
        if (event.detail.status === 500 || event.detail.status === 503) {
            console.warn('Livewire connection error, retrying...');

            // 3秒後に再試行
            setTimeout(() => {
                @auth
                Livewire.emit('shortcut-updated');
                @endauth
            }, 3000);
        }
    });
});

// スケルトンローダーのタイムアウト制御
document.addEventListener('livewire:loading', () => {
    const skeletonThreshold = {{ config('shortcuts.performance.skeleton_threshold_ms', 500) }};

    setTimeout(() => {
        // スケルトンローダーが長時間表示されている場合の処理
        const loadingElements = document.querySelectorAll('[wire\\:loading]');
        loadingElements.forEach(element => {
            if (element.style.display !== 'none') {
                console.warn('Long loading detected for shortcut component');
            }
        });
    }, skeletonThreshold);
});

// ページアンロード時のクリーンアップ
window.addEventListener('beforeunload', () => {
    try {
        if (shortcutChannel) {
            shortcutChannel.close();
        }
    } catch (e) {
        console.warn('Error closing shortcut channel:', e);
    }
});
</script>