{{-- セッション関連履歴モーダル --}}
<div x-show="showSessionModal" 
     x-cloak 
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-60"
     @click.self="closeSessionModal()">
    <div class="relative top-10 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white">
        
        {{-- ヘッダー --}}
        <div class="flex items-center justify-between pb-3 border-b">
            <h3 class="text-lg font-medium text-gray-900">
                セッション関連履歴 
                <span class="text-sm text-gray-600" x-text="'(セッションID: ' + currentSessionId + ')'"></span>
            </h3>
            <button @click="closeSessionModal()" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>

        {{-- セッション概要 --}}
        <div class="mt-4 bg-gray-50 p-4 rounded-lg">
            <div class="grid grid-cols-4 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-600">総履歴数:</span>
                    <span x-text="sessionHistory.length"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600">監査記録:</span>
                    <span x-text="sessionHistory.filter(h => h.history_type === 'audit').length"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600">操作記録:</span>
                    <span x-text="sessionHistory.filter(h => h.history_type === 'activity').length"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600">期間:</span>
                    <span x-text="getSessionTimeRange()"></span>
                </div>
            </div>
        </div>

        {{-- ローディング --}}
        <div x-show="loadingSessionHistory" class="flex justify-center items-center py-8">
            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
            <span class="ml-2 text-gray-600">関連履歴を読み込み中...</span>
        </div>

        {{-- セッション履歴リスト --}}
        <div x-show="!loadingSessionHistory && sessionHistory.length > 0" class="mt-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">種別</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">日時</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">操作/イベント</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">対象</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">リクエストID</th>
                            <th class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase">詳細</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="history in sessionHistory" :key="history.id + '-' + history.history_type">
                            <tr>
                                <td class="px-3 py-2">
                                    <span 
                                        :class="history.history_type === 'audit' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'"
                                        class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                                        x-text="history.history_type === 'audit' ? '監査' : '操作'">
                                    </span>
                                </td>
                                <td class="px-3 py-2 text-sm text-gray-900" x-text="formatDateTime(history.created_at)"></td>
                                <td class="px-3 py-2 text-sm text-gray-900" x-text="getEventAction(history)"></td>
                                <td class="px-3 py-2 text-sm text-gray-900" x-text="getTarget(history)"></td>
                                <td class="px-3 py-2 text-sm text-gray-500">
                                    <span class="font-mono text-xs" x-text="history.request_id ? history.request_id.substring(0, 12) + '...' : '-'"></span>
                                </td>
                                <td class="px-3 py-2 text-center">
                                    <button 
                                        @click="showDetailFromSession(history)"
                                        class="text-primary-600 hover:text-primary-800 underline text-xs">
                                        詳細
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- データなし --}}
        <div x-show="!loadingSessionHistory && sessionHistory.length === 0" class="text-center py-8 text-gray-500">
            関連する履歴が見つかりませんでした。
        </div>

        {{-- タイムライン表示 --}}
        <div x-show="!loadingSessionHistory && sessionHistory.length > 0" class="mt-6">
            <h4 class="text-md font-medium text-gray-900 mb-3">タイムライン</h4>
            <div class="relative">
                <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                <template x-for="(history, index) in sessionHistory" :key="'timeline-' + history.id + '-' + history.history_type">
                    <div class="relative flex items-start mb-4">
                        <div 
                            :class="history.history_type === 'audit' ? 'bg-blue-500' : 'bg-green-500'"
                            class="absolute left-3 w-2 h-2 rounded-full">
                        </div>
                        <div class="ml-8">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-900 font-medium" x-text="formatDateTime(history.created_at)"></span>
                                <span 
                                    :class="history.history_type === 'audit' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'"
                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                                    x-text="history.history_type === 'audit' ? '監査' : '操作'">
                                </span>
                            </div>
                            <p class="text-sm text-gray-600 mt-1" x-text="getTimelineDescription(history)"></p>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- フッター --}}
        <div class="mt-6 pt-4 border-t flex justify-end space-x-3">
            <button 
                @click="exportSessionHistory()"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm">
                このセッションをエクスポート
            </button>
            <button 
                @click="closeSessionModal()"
                class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 text-sm">
                閉じる
            </button>
        </div>
    </div>
</div>