{{-- 変更履歴インラインモーダルコンポーネント
    使用方法:
        <x-audit-history.modal />
    イベントの発火:
        $dispatch('open-audit-history', { auditableType: '...', auditableId: 123, relatedModels: [] })
--}}
<div
    x-data="{
        showModal: false,
        loading: false,
        records: [],
        pagination: null,
        auditableType: '',
        auditableId: null,
        relatedModels: [],
        currentPage: 1,
        expandedRows: {},

        async openModal(detail) {
            this.auditableType = detail.auditableType ?? '';
            this.auditableId = detail.auditableId ?? null;
            this.relatedModels = detail.relatedModels ?? [];
            this.currentPage = 1;
            this.records = [];
            this.pagination = null;
            this.expandedRows = {};
            this.showModal = true;
            document.body.classList.add('overflow-hidden');
            await this.fetchHistory(1);
        },

        async fetchHistory(page) {
            this.loading = true;
            this.currentPage = page;
            try {
                let url = `/audit-history/record/${this.auditableType}/${this.auditableId}?page=${page}`;
                if (this.relatedModels && this.relatedModels.length > 0) {
                    url += `&related_models=${encodeURIComponent(JSON.stringify(this.relatedModels))}`;
                }
                const response = await fetch(url, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const json = await response.json();
                const result = json.data ?? json;
                this.records = result.data ?? [];
                this.pagination = result.pagination ?? null;
            } catch (e) {
                this.records = [];
                this.pagination = null;
            } finally {
                this.loading = false;
            }
        },

        closeModal() {
            this.showModal = false;
            this.loading = false;
            this.records = [];
            this.pagination = null;
            this.auditableType = '';
            this.auditableId = null;
            this.relatedModels = [];
            this.currentPage = 1;
            this.expandedRows = {};
            document.body.classList.remove('overflow-hidden');
        },

        toggleRow(index) {
            this.expandedRows[index] = !this.expandedRows[index];
        },

        getEventBadgeClass(event) {
            if (event === 'created') return 'bg-green-100 text-green-800';
            if (event === 'updated') return 'bg-blue-100 text-blue-800';
            if (event === 'deleted') return 'bg-red-100 text-red-800';
            return 'bg-gray-100 text-gray-800';
        },

        getEventLabel(event) {
            if (event === 'created') return '新規作成';
            if (event === 'updated') return '更新';
            if (event === 'deleted') return '削除';
            return event;
        },

        totalPages() {
            if (!this.pagination) return 1;
            return this.pagination.last_page ?? Math.ceil((this.pagination.total ?? 0) / (this.pagination.per_page ?? 15));
        }
    }"
    x-on:open-audit-history.window="openModal($event.detail)"
    @keydown.escape.window="if (showModal) closeModal()"
>
    {{-- モーダルオーバーレイ --}}
    <div
        x-show="showModal"
        x-cloak
        class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
        @click.self="closeModal()"
    >
        {{-- モーダルパネル --}}
        <div class="relative top-16 mx-auto p-0 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white mb-16">

            {{-- ヘッダー --}}
            <div class="flex items-center justify-between px-5 py-4 border-b">
                <h3 class="text-lg font-medium text-gray-900">変更履歴</h3>
                <button
                    @click="closeModal()"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5"
                    type="button"
                    aria-label="閉じる"
                >
                    <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="px-5 py-4 min-h-48">

                {{-- ローディング --}}
                <div x-show="loading" class="flex flex-col items-center justify-center py-12 space-y-3">
                    <svg class="animate-spin h-8 w-8 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="text-sm text-gray-600">読み込み中...</span>
                </div>

                {{-- 空状態 --}}
                <div x-show="!loading && records.length === 0" class="flex items-center justify-center py-12">
                    <span class="text-sm text-gray-500">変更履歴はありません</span>
                </div>

                {{-- 履歴リスト --}}
                <div x-show="!loading && records.length > 0" class="space-y-3">
                    <template x-for="(record, index) in records" :key="index">
                        <div class="border border-gray-200 rounded-md overflow-hidden">

                            {{-- レコードヘッダー行（クリックで展開） --}}
                            <div
                                class="flex items-center gap-4 px-4 py-3 bg-gray-50 hover:bg-gray-100 cursor-pointer select-none"
                                @click="toggleRow(index)"
                            >
                                {{-- 日時 --}}
                                <span class="text-sm text-gray-700 w-40 shrink-0" x-text="record.created_at"></span>

                                {{-- ユーザー名 --}}
                                <span class="text-sm text-gray-700 w-28 shrink-0 truncate" :title="record.user_name" x-text="record.user_name || 'システム'"></span>

                                {{-- イベントバッジ --}}
                                <span
                                    :class="getEventBadgeClass(record.event)"
                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium w-20 justify-center shrink-0"
                                    x-text="getEventLabel(record.event)"
                                ></span>

                                {{-- 対象テーブル表示名 --}}
                                <span class="text-sm text-gray-600 flex-1 truncate" :title="record.auditable_display_name" x-text="record.auditable_display_name || record.auditable_type || ''"></span>

                                {{-- 展開アイコン --}}
                                <span class="text-gray-400 shrink-0">
                                    <svg
                                        class="w-4 h-4 transition-transform duration-150"
                                        :class="expandedRows[index] ? 'rotate-180' : ''"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </span>
                            </div>

                            {{-- 変更詳細（展開時） --}}
                            <div x-show="expandedRows[index]" x-cloak>
                                <template x-if="record.changes && record.changes.length > 0">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-white">
                                                <tr>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/3">項目名</th>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/3">変更前</th>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/3">変更後</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-100">
                                                <template x-for="(change, ci) in record.changes" :key="ci">
                                                    <tr class="hover:bg-gray-50">
                                                        <td class="px-4 py-2 text-sm font-medium text-gray-900" x-text="change.field_name"></td>
                                                        <td class="px-4 py-2 text-sm text-gray-500 max-w-xs">
                                                            <span class="block truncate" :title="change.old_value ?? ''" x-text="change.old_value ?? '-'"></span>
                                                        </td>
                                                        <td class="px-4 py-2 text-sm text-gray-900 max-w-xs">
                                                            <span class="block truncate" :title="change.new_value ?? ''" x-text="change.new_value ?? '-'"></span>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>
                                    </div>
                                </template>
                                <template x-if="!record.changes || record.changes.length === 0">
                                    <div class="px-4 py-3 text-sm text-gray-500">変更内容の詳細はありません</div>
                                </template>
                            </div>

                        </div>
                    </template>
                </div>

            </div>

            {{-- フッター --}}
            <div class="px-5 py-4 border-t flex items-center justify-between">

                {{-- ページネーション --}}
                <div class="flex items-center gap-3" x-show="pagination && totalPages() > 1">
                    <button
                        @click="fetchHistory(currentPage - 1)"
                        :disabled="currentPage <= 1 || loading"
                        class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
                        type="button"
                    >
                        &laquo; 前へ
                    </button>
                    <span class="text-sm text-gray-600">
                        <span x-text="currentPage"></span> / <span x-text="totalPages()"></span> ページ
                    </span>
                    <button
                        @click="fetchHistory(currentPage + 1)"
                        :disabled="currentPage >= totalPages() || loading"
                        class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
                        type="button"
                    >
                        次へ &raquo;
                    </button>
                </div>
                <div x-show="!pagination || totalPages() <= 1"></div>

                {{-- 閉じるボタン --}}
                <button
                    @click="closeModal()"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm font-medium"
                    type="button"
                >
                    閉じる
                </button>

            </div>

        </div>
    </div>
</div>