{{-- リマインド配信情報 --}}
<div class="fd-card" v-if="selectedOption.value === 'remind'" style="padding: 24px 24px 0;">
    <h2 class="fd-card-title" style="font-weight: 500;">リマインド配信情報</h2>

    <div class="fd-history-list">
        <template v-for="item in remindHistoryItems">
            {{-- Row header --}}
            <div
                class="fd-history-item fd-remind-item"
                :key="'remind-row-' + item.id"
                @click="onRemindHistoryToggle(item)"
                style="flex-direction: column; align-items: stretch; gap: 16px;"
            >
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
                    <span class="fd-history-name">@{{ item.name }}</span>
                    <div class="fd-history-tags" style="gap: 8px;">
                        <lme-tag :text="'リマインド開始　' + item.start_date" type="default" size="md"></lme-tag>
                        <lme-tag :text="'リマインド終了　' + item.end_date" type="default" size="md"></lme-tag>
                        {{-- Reminds còn trong list luôn còn step 配信予定 → luôn ở trạng thái 配信中 --}}
                        <lme-tag text="配信中" type="primary" size="md" style="justify-content: center;"></lme-tag>
                        <span class="fd-history-caret" :class="{ 'is-expanded': expandedRemindId === item.id }">
                            <lme-icon size="16" file_name="caret-down-filled" color="#878A92"></lme-icon>
                        </span>
                    </div>
                </div>
                {{-- Mọi remind trong list đều còn step 配信予定 (remind chạy xong bị ẩn khỏi list), nên luôn dừng được --}}
                <div style="display: flex; justify-content: flex-end;">
                    <lme-button-risk
                        type="secondary"
                        size="md"
                        style="margin-right: 24px;"
                        @click.native.stop="openRemindStopModal(item)"
                    >強制停止</lme-button-risk>
                </div>
            </div>

            {{-- Expanded detail --}}
            <div
                v-if="expandedRemindId === item.id"
                class="fd-history-detail"
                :key="'remind-detail-' + item.id"
            >
                <div class="fd-history-table">
                    {{-- Header row --}}
                    <div class="fd-history-row fd-history-row--head">
                        <div class="fd-history-col fd-history-col--date">
                            <div>日時</div>
                        </div>
                        <div class="fd-history-col fd-history-col--count">
                            <div style="width: 100%; border-left: 1px solid #E7E7E7; padding-left: 8px">通数</div>
                        </div>
                        <div class="fd-history-col fd-history-col--message">
                            <div style="width: 100%; border-left: 1px solid #E7E7E7; padding-left: 8px">メッセージ</div>
                        </div>
                        <div class="fd-history-col fd-history-col--action">
                            <div style="width: 100%; border-left: 1px solid #E7E7E7; padding-left: 8px">ステータス</div>
                        </div>
                    </div>

                    {{-- Data rows --}}
                    <div
                        v-for="(row, idx) in (remindHistoryDetails[item.id] || [])"
                        :key="idx"
                        class="fd-history-row"
                        :class="{ 'is-highlighted': row.highlighted }"
                    >
                        <div class="fd-history-col fd-history-col--date">
                            <span>@{{ row.date }}</span>
                            <span>(@{{ row.day }})</span>
                            <span>@{{ row.time }}</span>
                        </div>
                        <div style="padding-left: 24px" class="fd-history-col fd-history-col--count">@{{ row.count }}</div>
                        <div style="padding-left: 24px" class="fd-history-col fd-history-col--message">
                            <span v-if="row.is_action_preview" style="color: #878A92; font-size: 12px;">アクションプレビュー</span>
                            <span v-else style="display: block; line-height: 16px; max-height: 32px; overflow: hidden; text-overflow: ellipsis;">@{{ row.message }}</span>
                        </div>
                        <div style="padding-left: 24px" class="fd-history-col fd-history-col--action">
                            <span class="fd-action-label" :class="{ 'is-primary': row.action_status === 'scheduled' }">
                                @{{ row.status_label }}
                            </span>
                        </div>
                    </div>

                    <div
                        v-if="!remindDetailLoading[item.id] && (remindHistoryDetails[item.id] || []).length === 0"
                        class="fd-event-history-empty"
                    >まだデータがありません</div>

                    <div v-if="remindDetailLoading[item.id]" class="fd-event-history-empty">読み込み中…</div>
                </div>

                <div class="fd-history-more" v-if="remindHistoryMeta[item.id] && remindHistoryMeta[item.id].has_more">
                    <lme-button-ghost size="sm" @click="onRemindHistoryLoadMore(item)">もっと見る</lme-button-ghost>
                </div>
            </div>
        </template>

        <div v-if="!remindHistoryItems.length" class="fd-event-history-empty">まだデータがありません</div>
    </div>

    <div class="fd-card-pagination" style="margin: 0 -24px;">
        <pagination
            :pagination="remindHistoryPagination"
            :is_limit="true"
            :arr_limit="[10, 50, 100]"
            end_text_limit="件表示"
            @change_page="onRemindHistoryPageChange"
            @change_limit="onRemindHistoryLimitChange"
        ></pagination>
    </div>
</div>

{{-- 強制停止 confirmation modal --}}
<lme-modal
    v-if="selectedOption.value === 'remind'"
    v-model="showRemindStopModal"
    :header="false"
    :width="480"
    :mask-closable="true"
>
    <div class="fd-force-stop-modal">
        <div class="fd-force-stop-header">
            <div class="fd-force-stop-title-wrap">
                <lme-icon size="24">
                    <svg preserveAspectRatio="none" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="Icon/Warning">
                            <rect opacity="0" width="24" height="24" fill="var(--fill-0, black)"/>
                            <path d="M12.0003 22.4997C6.21041 22.4997 1.5 17.7897 1.5 12.0003C1.5 6.21041 6.21041 1.5 12.0003 1.5C17.7897 1.5 22.4997 6.21041 22.4997 12.0003C22.4997 17.7897 17.7897 22.4997 12.0003 22.4997ZM12.0003 15C11.38 15 10.8753 15.5047 10.8753 16.125C10.8753 16.7453 11.38 17.25 12.0003 17.25C12.6206 17.25 13.1253 16.7453 13.1253 16.125C13.1253 15.5047 12.6206 15 12.0003 15ZM11.4378 6.7497C11.3341 6.7497 11.2497 6.83408 11.2497 6.9378V13.3125C11.2497 13.4157 11.3341 13.4997 11.4378 13.4997H12.5628C12.666 13.4997 12.75 13.4157 12.75 13.3125V6.9378C12.75 6.83408 12.666 6.7497 12.5628 6.7497H11.4378Z" fill="var(--fill-0, black)"/>
                        </g>
                    </svg>
                </lme-icon>
                <span class="fd-force-stop-title">リマインドを停止しますか？</span>
            </div>
            <lme-button-ghost type="secondary" size="sm" icon @click="showRemindStopModal = false">
                <lme-icon>
                    <svg preserveAspectRatio="none" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="close-outlined">
                            <rect opacity="0" width="16" height="16" fill="var(--fill-0, #1F1F1F)"/>
                            <path d="M12.4978 2.59872C12.4982 2.59883 12.4985 2.599 12.4991 2.59964L13.4005 3.50104C13.4012 3.50168 13.4014 3.50198 13.4015 3.50236C13.4016 3.50271 13.4016 3.50308 13.4015 3.50343C13.4014 3.50379 13.4012 3.50409 13.4005 3.50473L8.90518 8.00009L13.4005 12.4955C13.4012 12.4961 13.4014 12.4964 13.4015 12.4967C13.4016 12.4971 13.4016 12.4975 13.4015 12.4978C13.4014 12.4982 13.4012 12.4985 13.4005 12.4991L12.4991 13.4005C12.4985 13.4012 12.4982 13.4014 12.4978 13.4015C12.4975 13.4016 12.4971 13.4016 12.4967 13.4015C12.4964 13.4014 12.4961 13.4012 12.4955 13.4005L8.00009 8.90518L3.50473 13.4005C3.50411 13.4012 3.50379 13.4014 3.50343 13.4015C3.50308 13.4016 3.5027 13.4016 3.50234 13.4015C3.502 13.4014 3.50168 13.4012 3.50104 13.4005L2.59964 12.4991C2.599 12.4985 2.59883 12.4982 2.59872 12.4978C2.59861 12.4975 2.59861 12.4971 2.59872 12.4967C2.59883 12.4964 2.599 12.4961 2.59964 12.4955L7.09498 8.00009L2.59964 3.50473C2.599 3.50411 2.59883 3.50379 2.59872 3.50343C2.59861 3.50308 2.59861 3.5027 2.59872 3.50234C2.59883 3.502 2.599 3.50168 2.59964 3.50104L3.50104 2.59964C3.50168 2.599 3.50198 2.59883 3.50236 2.59872C3.50271 2.59861 3.50308 2.59861 3.50343 2.59872C3.50379 2.59883 3.50409 2.599 3.50473 2.59964L8.00009 7.09498L12.4955 2.59964C12.4961 2.599 12.4964 2.59883 12.4967 2.59872C12.4971 2.59861 12.4975 2.59861 12.4978 2.59872Z" fill="var(--fill-0, #1F1F1F)"/>
                        </g>
                    </svg>
                </lme-icon>
            </lme-button-ghost>
        </div>

        <p class="fd-force-stop-message">配信中のリマインドが停止されますがよろしいですか？</p>

        <div class="fd-force-stop-footer">
            <lme-button-flat size="md" @click="showRemindStopModal = false">キャンセル</lme-button-flat>
            <lme-button-risk type="primary" size="md" :disabled="remindStopLoading" @click="onRemindStopConfirm">停止する</lme-button-risk>
        </div>
    </div>
</lme-modal>