{{--
    Per-step message + action preview, mirrors action-capture-preview-drawer.blade.php.
    Both messages and actions are per-step (loaded via /step-preview API).
    Actions come from event_step.action_id.

    Usage:
        @include('basic.friend_detail.partials.broadcast-step-preview', ['stepVar' => 'step'])

    Step object must expose: preview_tab_id, preview_loading, preview.messages, preview.actions.
--}}
@php($s = $stepVar)

<lme-tab-horizontal
    v-model="{{ $s }}.preview_tab_id"
    :tabs="[{ id: 'message', label: 'メッセージ' }, { id: 'action', label: 'アクション' }]"
    size="md">
</lme-tab-horizontal>

<div class="fd-salon-step-preview">
    <div v-if="{{ $s }}.preview_loading" class="fd-acp-empty">読み込み中…</div>

    {{-- メッセージ tab --}}
    <div v-else-if="{{ $s }}.preview_tab_id === 'message'" class="fd-action-capture-preview-pane fd-acp-messages">
        <template v-if="{{ $s }}.preview.messages.length">
            <template v-for="(msg, mIdx) in {{ $s }}.preview.messages">
                <div v-if="msg.type == 1" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-bubble">
                    <span style="white-space: pre-wrap; word-break: break-word;">@{{ msg.content }}</span>
                </div>
                <div v-else-if="msg.type == 3 || msg.type == 7" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-image">
                    <img :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ('{{ env('URL_SERVER_MEDIA') }}' + msg.content)" alt=""/>
                </div>
                <div v-else-if="msg.type == 4" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-video">
                    <video controls preload="metadata">
                        <source :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ('{{ env('URL_SERVER_MEDIA_B2', env('URL_SERVER_MEDIA')) }}' + msg.content)">
                    </video>
                </div>
                <div v-else-if="msg.type == 5" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-audio">
                    <audio controls preload="metadata" v-if="msg.content && msg.content.filePath">
                        <source :src="msg.content.filePath.startsWith('http') ? msg.content.filePath : ('{{ env('URL_SERVER_MEDIA') }}' + msg.content.filePath)">
                    </audio>
                </div>
                {{-- buttons (carousel) --}}
                <div v-else-if="msg.type == 2"
                     :key="'tm-' + {{ $s }}.id + '-' + mIdx"
                     class="fd-acp-buttons mess-button">
                    <div class="box-scl-button">
                        {{-- type 1 --}}
                        <div v-if="msg.content && msg.content.type_button == 1"
                             v-for="(carousel, k) in msg.content.data"
                             :key="'b1-' + {{ $s }}.id + '-' + mIdx + '-' + k"
                             class="carousel">
                            <div class="question_wap">
                                <div class="head_buttons">
                                    <p v-if="carousel.thumbnail_path">
                                        <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt=""/>
                                    </p>
                                    <p class="buttons_title text-left" style="white-space: pre-wrap; font-weight: 300;">@{{ carousel.title }}</p>
                                    <p class="buttons_content text-left" style="white-space: pre-wrap; font-weight: bold;">@{{ carousel.text }}</p>
                                </div>
                                <div class="answer_button">
                                    <p v-for="(btn, bi) in carousel.buttons" :key="'b1b-' + {{ $s }}.id + '-' + mIdx + '-' + bi"
                                       class="btn_modal_preview">@{{ btn.label }}</p>
                                </div>
                            </div>
                        </div>
                        {{-- type 2 --}}
                        <div v-if="msg.content && msg.content.type_button == 2"
                             v-for="(carousel, k) in msg.content.data"
                             :key="'b2-' + {{ $s }}.id + '-' + mIdx + '-' + k"
                             class="carousel">
                            <div class="question_wap btn-type2-preview">
                                <div class="head_buttons" style="padding: 10px 10px 0 10px; border: 0;">
                                    <p v-if="carousel.thumbnail_path"
                                       style="width: 100%; margin-bottom: 10px; overflow: hidden; border: 1px solid #dddddd; border-radius: 5px;">
                                        <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                    </p>
                                    <div v-if="carousel.title || carousel.text"
                                         style="border: 1px solid #E0E0E0; border-radius: 5px; padding: 10px; text-align: center;">
                                        <p v-if="carousel.title" style="white-space: pre-wrap;"
                                           :style="[{ color: carousel.title_color }, carousel.is_title_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.title }}</p>
                                        <div v-if="carousel.title && carousel.text" style="border-bottom: 1px solid #707070; margin: 8px 0; height: 1px;"></div>
                                        <p v-if="carousel.text" style="white-space: pre-wrap;"
                                           :style="[{ color: carousel.text_color }, carousel.is_text_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.text }}</p>
                                    </div>
                                </div>
                                <div class="answer_button" style="padding: 0 10px 10px 10px; text-align: center;">
                                    <p v-for="(btn, bi) in carousel.buttons" :key="'b2b-' + {{ $s }}.id + '-' + mIdx + '-' + bi"
                                       class="btn_modal_preview"
                                       style="border-radius: 3px; font-weight: bold; margin-top: 10px;"
                                       :style="{ color: btn.label_color, backgroundColor: btn.label_bg }">@{{ btn.label }}</p>
                                </div>
                            </div>
                        </div>
                        {{-- type 3 (image-only buttons) --}}
                        <div v-if="msg.content && msg.content.type_button == 3"
                             v-for="(carousel, k) in msg.content.data"
                             :key="'b3-' + {{ $s }}.id + '-' + mIdx + '-' + k"
                             class="carousel">
                            <div class="question_wap" style="width: 100%; background: #FFFFFF; box-shadow: 0 0 5px #0000001A; border-radius: 10px;">
                                <div v-if="carousel.thumbnail_path"
                                     style="margin: auto; width: 100%; overflow: hidden; position: relative;">
                                    <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                </div>
                            </div>
                        </div>
                        {{-- type 4 (quick reply) --}}
                        <div v-if="msg.content && msg.content.type_button == 4"
                             :key="'b4-' + {{ $s }}.id + '-' + mIdx"
                             class="carousel">
                            <div class="question_wap" style="width: 100%; box-shadow: 0 0 5px #0000001A; border-radius: 10px; background: #D9DBE7; padding: 3px;">
                                <div style="background: #FFFFFF; border-radius: 5px; margin: 7px;">
                                    <div v-if="msg.content.flag_type_content_quick_reply == 1"
                                         style="margin: 0 auto; overflow: auto; border-radius: 5px;">
                                        <div class="text-left" style="white-space: pre-line; word-wrap: break-word;">@{{ msg.content.text }}</div>
                                    </div>
                                    <div v-if="msg.content.flag_type_content_quick_reply == 2">
                                        <img class="w-full"
                                             :src="(msg.content.content && msg.content.content.startsWith('http')) ? msg.content.content : ((msg.content.image_server || '{{ env('URL_SERVER_MEDIA') }}') + msg.content.content)" alt=""/>
                                    </div>
                                </div>
                                <div class="container-btn-quick-reply">
                                    <div v-for="(btn, bi) in msg.content.buttons" :key="'b4b-' + {{ $s }}.id + '-' + mIdx + '-' + bi">@{{ btn.label.length > 8 ? btn.label.substring(0, 5) + '...' : btn.label }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- sticker --}}
                <div v-else-if="msg.type == 6"
                     :key="'tm-' + {{ $s }}.id + '-' + mIdx"
                     class="fd-acp-sticker">
                    <img v-if="msg.content && msg.content.stickerId"
                         :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/' + msg.content.stickerId + '/ANDROID/sticker.png'"
                         alt=""/>
                </div>
                <div v-else-if="msg.type == 8" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-bubble fd-acp-location">
                    <p class="temp_name"><i class="fas fa-flag"></i> @{{ msg.content.title }}</p>
                    <p class="location_address">@{{ msg.content.address }}</p>
                </div>
                <div v-else-if="msg.type == 9" :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-introduction">
                    <div class="message-intro">
                        <div class="content-btn font-semibold">@{{ msg.content && msg.content.content }}</div>
                        <div class="text-center p-3" style="background: #F8F8F8;">
                            <a class="text-[14px] text-[#5799DB] font-light" :href="msg.content && msg.content.url_addfriend" target="_blank">友だちに追加する</a>
                        </div>
                    </div>
                </div>
                <div v-else :key="'tm-' + {{ $s }}.id + '-' + mIdx" class="fd-acp-bubble fd-acp-bubble-other">
                    <span>[その他のメッセージ]</span>
                </div>
            </template>
        </template>
        <div v-else class="fd-acp-empty">メッセージなし</div>
    </div>

    {{-- アクション tab --}}
    <div v-else-if="{{ $s }}.preview_tab_id === 'action'" class="fd-action-capture-preview-pane fd-acp-actions">
        <template v-if="{{ $s }}.preview.actions.length">
            <template v-for="(item, aIdx) in {{ $s }}.preview.actions">
                <div :key="'ta-' + {{ $s }}.id + '-' + aIdx" class="wrap-item-action-herme">
                    <template v-if="item.type === 'template'">
                        <div class="type"><div>テンプレート</div></div>
                        <div class="content-preview-action">
                            <div>@{{ item.display_name }}</div>
                            <div>を送信</div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'richmenu'">
                        <div class="type"><div>リッチメニュー</div></div>
                        <div class="content-preview-action">
                            <div>
                                <span v-if="item.data.action != 1">@{{ item.display_name }}</span>
                                <span v-else>表示を停止</span>
                            </div>
                            <div><span v-if="item.data.action != 1">を表示</span></div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'scenario'">
                        <div class="type"><div>ステップ</div></div>
                        <div class="content-preview-action">
                            <div>
                                <span v-if="item.data.action == 1">停止</span>
                                <span v-else>@{{ item.display_name }}</span>
                            </div>
                            <div>
                                <span v-if="item.data.action == 2">を開始</span>
                                <span v-else-if="item.data.action == 3">を@{{ item.data.start_day }}日目から再開</span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'text'">
                        <div class="type"><div>テキスト</div></div>
                        <div class="content-preview-action">
                            <div>@{{ item.data.content }}</div>
                            <div>を送信</div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'remind'">
                        <div class="type"><div>リマインド</div></div>
                        <div class="content-preview-action">
                            <div>@{{ item.display_name }}</div>
                            <div>
                                <span v-if="item.data.type == 1">を開始</span>
                                <span v-else>を停止</span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'tag'">
                        <div class="type"><div>タグ</div></div>
                        <div class="content-preview-action">
                            <div>
                                <span v-for="(t, tIdx) in item.name_list" :key="'tt-' + {{ $s }}.id + '-' + aIdx + '-' + tIdx">
                                    @{{ tIdx == 0 ? '' : '・' }}@{{ t.name }}
                                </span>
                            </div>
                            <div>
                                <span v-if="item.data.action == 1">をつける</span>
                                <span v-else>をはずす</span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'bookmark'">
                        <div class="type"><div>ブックマーク</div></div>
                        <div class="content-preview-action">
                            <div>
                                <span v-if="item.data.action == 1">つける</span>
                                <span v-else>外す</span>
                            </div>
                            <div></div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'friend_info'">
                        <div class="type">
                            <div>
                                友だち情報
                                <span v-if="item.data.type == 1">（選択肢）</span>
                                <span v-else-if="item.data.type == 2">（記述）</span>
                                <span v-else-if="item.data.type == 3">（年月日）</span>
                                <span v-else-if="item.data.type == 6">（ポイント）</span>
                            </div>
                        </div>
                        <div class="content-preview-action">
                            <div>@{{ item.display_name }}</div>
                            <div>
                                <span v-if="item.data.type == 2 || item.data.type == 1">
                                    <span v-if="item.data.action == 1">の登録情報を削除</span>
                                    <span v-else>に@{{ item.data.content }}を登録</span>
                                </span>
                                <span v-else-if="item.data.type == 3">
                                    <span v-if="item.data.action == 1">の登録情報を削除</span>
                                    <span v-else-if="item.data.action == 2">に@{{ item.data.content }}を登録</span>
                                    <span v-else>に当日日付を登録</span>
                                </span>
                                <span v-else-if="item.data.type == 6">
                                    <span v-if="item.data.action == 0">の登録情報を削除</span>
                                    <span v-else-if="item.data.action == 1">
                                        <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)を登録</span>
                                        <span v-else>に@{{ item.data.content }}を登録</span>
                                    </span>
                                    <span v-else-if="item.data.action == 2">
                                        <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)をプラス</span>
                                        <span v-else>に@{{ item.data.content }}をプラス</span>
                                    </span>
                                    <span v-else-if="item.data.action == 3">
                                        <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)をマイナス</span>
                                        <span v-else>に@{{ item.data.content }}をマイナス</span>
                                    </span>
                                </span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'compliant_status'">
                        <div class="type"><div>対応ステータス</div></div>
                        <div class="content-preview-action">
                            <div>@{{ item.data.action == 1 ? item.display_name : '外す' }}</div>
                            <div><span v-if="item.data.action == 1">をつける</span></div>
                        </div>
                    </template>
                    <template v-else-if="item.type === 'block'">
                        <div class="type"><div>ブロック・非表示</div></div>
                        <div class="content-preview-action">
                            <div>
                                <span v-if="item.data.action == 1">ブロックする</span>
                                <span v-else-if="item.data.action == 2">ブロック解除</span>
                                <span v-else-if="item.data.action == 3">再表示する</span>
                                <span v-else-if="item.data.action == 4">非表示にする</span>
                            </div>
                            <div></div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="type"><div>@{{ item.type || 'その他' }}</div></div>
                        <div class="content-preview-action">
                            <div>@{{ item.display_name || '—' }}</div>
                            <div></div>
                        </div>
                    </template>
                </div>
            </template>
        </template>
        <div v-else class="fd-acp-empty">アクションなし</div>
    </div>
</div>