{{-- 履歴詳細モーダル --}}
<div x-show="showDetailModal" 
     x-cloak 
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
     @click.self="closeDetailModal()">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl 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" x-text="getModalTitle()"></h3>
            <button @click="closeDetailModal()" 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">
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <h4 class="text-md font-medium text-gray-900 mb-3">基本情報</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex">
                            <span class="w-20 text-gray-600">種別:</span>
                            <span x-text="selectedRecord?.type === 'audit' ? '監査履歴' : '操作履歴'"></span>
                        </div>
                        <div class="flex">
                            <span class="w-20 text-gray-600">日時:</span>
                            <span x-text="formatDateTime(selectedRecord?.created_at)"></span>
                        </div>
                        <div class="flex">
                            <span class="w-20 text-gray-600">ユーザー:</span>
                            <span x-text="selectedRecord?.user_name || 'システム'"></span>
                        </div>
                        <div class="flex">
                            <span class="w-20 text-gray-600">IP:</span>
                            <span x-text="selectedRecord?.ip_address || '-'"></span>
                        </div>
                        <div class="flex">
                            <span class="w-20 text-gray-600">URL:</span>
                            <span class="text-xs text-blue-600 truncate max-w-xs" :title="selectedRecord?.url" x-text="selectedRecord?.url || '-'"></span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="text-md font-medium text-gray-900 mb-3">関連情報</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex">
                            <span class="w-24 text-gray-600">セッションID:</span>
                            <template x-if="selectedRecord?.session_id">
                                <button 
                                    @click="showSessionHistory(selectedRecord.session_id)"
                                    class="text-primary-600 hover:text-primary-800 underline text-xs"
                                    x-text="selectedRecord.session_id">
                                </button>
                            </template>
                            <template x-if="!selectedRecord?.session_id">
                                <span>-</span>
                            </template>
                        </div>
                        <div class="flex">
                            <span class="w-24 text-gray-600">リクエストID:</span>
                            <span class="text-xs" x-text="selectedRecord?.request_id || '-'"></span>
                        </div>
                        <template x-if="selectedRecord?.processing_time">
                            <div class="flex">
                                <span class="w-24 text-gray-600">処理時間:</span>
                                <span x-text="selectedRecord.processing_time + 'ms'"></span>
                            </div>
                        </template>
                        <template x-if="selectedRecord?.status_code">
                            <div class="flex">
                                <span class="w-24 text-gray-600">ステータス:</span>
                                <span x-text="selectedRecord.status_code"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- 監査履歴の詳細 --}}
        <template x-if="selectedRecord?.type === 'audit'">
            <div class="mt-6">
                <h4 class="text-md font-medium text-gray-900 mb-3">監査詳細</h4>
                <div class="space-y-3 text-sm">
                    <div class="flex">
                        <span class="w-20 text-gray-600">イベント:</span>
                        <span x-text="getEventName(selectedRecord?.event)"></span>
                    </div>
                    <div class="flex">
                        <span class="w-20 text-gray-600">テーブル:</span>
                        <span x-text="selectedRecord?.table_name || '-'"></span>
                    </div>
                    <div class="flex">
                        <span class="w-20 text-gray-600">レコードID:</span>
                        <span x-text="selectedRecord?.record_id || '-'"></span>
                    </div>
                </div>

                {{-- 変更内容 --}}
                <template x-if="selectedRecord?.changes && selectedRecord.changes.length > 0">
                    <div class="mt-4">
                        <h5 class="text-sm font-medium text-gray-900 mb-2">変更内容</h5>
                        <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>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <template x-for="change in selectedRecord.changes">
                                        <tr>
                                            <td class="px-3 py-2 text-sm font-medium text-gray-900" x-text="change.field_name"></td>
                                            <td class="px-3 py-2 text-sm text-gray-500 max-w-xs truncate" :title="change.old_value" x-text="change.old_value"></td>
                                            <td class="px-3 py-2 text-sm text-gray-500 max-w-xs truncate" :title="change.new_value" x-text="change.new_value"></td>
                                            <td class="px-3 py-2">
                                                <span 
                                                    :class="getChangeTypeClass(change.change_type)"
                                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                                                    x-text="getChangeTypeName(change.change_type)">
                                                </span>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </template>
            </div>
        </template>

        {{-- 操作履歴の詳細 --}}
        <template x-if="selectedRecord?.type === 'activity'">
            <div class="mt-6">
                <h4 class="text-md font-medium text-gray-900 mb-3">操作詳細</h4>
                <div class="space-y-3 text-sm">
                    <div class="flex">
                        <span class="w-24 text-gray-600">説明:</span>
                        <span x-text="selectedRecord?.description || '-'"></span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-gray-600">メニュー名:</span>
                        <span x-text="selectedRecord?.menu_name || '-'"></span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-gray-600">アクション:</span>
                        <span x-text="selectedRecord?.action_type || '-'"></span>
                    </div>
                </div>

                {{-- 入力データ --}}
                <template x-if="selectedRecord?.input_data">
                    <div class="mt-4">
                        <h5 class="text-sm font-medium text-gray-900 mb-2">入力データ</h5>
                        <pre class="bg-gray-50 p-3 rounded-md text-xs text-gray-700 overflow-x-auto" x-text="JSON.stringify(selectedRecord.input_data, null, 2)"></pre>
                    </div>
                </template>

                {{-- エラー情報 --}}
                <template x-if="selectedRecord?.error_details && (selectedRecord.error_details.error_message || selectedRecord.error_details.error_file)">
                    <div class="mt-4">
                        <h5 class="text-sm font-medium text-red-600 mb-2">エラー情報</h5>
                        <div class="bg-red-50 border border-red-200 rounded-md p-3 space-y-2 text-sm">
                            <template x-if="selectedRecord.error_details.error_message">
                                <div>
                                    <span class="font-medium text-red-800">メッセージ:</span>
                                    <span class="text-red-700" x-text="selectedRecord.error_details.error_message"></span>
                                </div>
                            </template>
                            <template x-if="selectedRecord.error_details.error_file">
                                <div>
                                    <span class="font-medium text-red-800">ファイル:</span>
                                    <span class="text-red-700" x-text="selectedRecord.error_details.error_file + ':' + selectedRecord.error_details.error_line"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </template>

        {{-- その他のプロパティ --}}
        <template x-if="selectedRecord?.properties && Object.keys(selectedRecord.properties).length > 0">
            <div class="mt-6">
                <h4 class="text-md font-medium text-gray-900 mb-3">追加情報</h4>
                <pre class="bg-gray-50 p-3 rounded-md text-xs text-gray-700 overflow-x-auto max-h-40" x-text="JSON.stringify(selectedRecord.properties, null, 2)"></pre>
            </div>
        </template>

        {{-- フッター --}}
        <div class="mt-6 pt-4 border-t flex justify-end space-x-3">
            <template x-if="selectedRecord?.session_id">
                <button 
                    @click="showSessionHistory(selectedRecord.session_id)"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm">
                    関連履歴を表示
                </button>
            </template>
            <button 
                @click="closeDetailModal()"
                class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 text-sm">
                閉じる
            </button>
        </div>
    </div>
</div>