{{--
    #36995 — SCR-01「アカウント情報自動更新確認モーダル」(modal xác nhận tự động cập nhật tên LOA & ảnh account)

    Render GLOBAL ở tầng app-shell (footer của mọi layout có bot active) — KHÔNG gắn route /admin/bot-edit
    (spec-dev-FE mục 0/1.3, QA-dev-04).
    Owner-only (BR-03 / QA-spec-06): CHỈ 主管理者 (bots.admin_id) mới render + gọi EP-14.
    副管理人/Staff → KHÔNG mount component, KHÔNG phát request (không phải ẩn bằng CSS — mục 4 FE spec).
--}}
@php
    use App\Bots;
    use Illuminate\Support\Facades\Auth;

    $aauUserId = Auth::id();
    $aauBotId = getBotId();
    $aauOwnerId = null;

    if (!empty($aauBotId)) {
        if (isset($getBotInfo) && !empty($getBotInfo) && (int) $getBotInfo->id === (int) $aauBotId) {
            // Tái dùng bot đã load ở layout — không query thêm
            $aauOwnerId = $getBotInfo->admin_id;
        } else {
            $aauOwnerId = Bots::where('id', $aauBotId)->where('is_deleted', 0)->value('admin_id');
        }
    }

    $aauIsOwner = !empty($aauUserId) && !empty($aauOwnerId) && (int) $aauOwnerId === (int) $aauUserId;
@endphp

@if ($aauIsOwner)
    <link rel="stylesheet" href="/lme-ui/src/css/icon/icon.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/avatar/avatar.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/tag.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/alert/alert.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/css/account_auto_update_modal.css?v={{ config('sns-line.version') }}">

    <div id="account-auto-update-app" data-bot-id="{{ $aauBotId }}" v-cloak>
        <lme-modal v-model="modalVisible" :header="false" :width="560">
            <div class="aau-modal">
                {{-- Header: icon 情報 + tiêu đề + nút「×」(OBSERVED — Figma 3574-50) --}}
                <div class="aau-header">
                    <div class="aau-header-title">
                        <lme-icon file_name="info-circle-filled" size="24" color="#1677FF"></lme-icon>
                        <span class="aau-title">LINE公式アカウントの情報変更を検知しました</span>
                    </div>
                    <lme-button-ghost type="secondary" size="sm" icon class="aau-close" :disabled="submitting" @click="closeModal()">
                        <lme-icon file_name="close-outlined"></lme-icon>
                    </lme-button-ghost>
                </div>

                {{-- Body: mô tả --}}
                <div class="aau-desc">LINE公式アカウントの情報変更を検知しました。エルメの表示にもこの内容を反映してよろしいですか？</div>

                {{-- Body: so sánh「変更前」→「変更後」(avatar 40×40 + tên Bold 16 căn giữa) --}}
                <div class="aau-compare">
                    <div class="aau-card aau-card-before">
                        <lme-tag text="変更前" class="aau-tag aau-tag-before"></lme-tag>
                        <lme-avatar size="large" type="image" :src="currentImage" alt=""></lme-avatar>
                        <div class="aau-name">@{{ currentName }}</div>
                    </div>

                    <div class="aau-arrow">
                        <svg width="19" height="10" viewBox="0 0 19 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.42 3.98001C14.9 3.58001 14.34 3.08668 13.74 2.50001C13.1533 1.91334 12.6333 1.31334 12.18 0.70001L13.38 9.05991e-06C13.8333 0.586676 14.34 1.16668 14.9 1.74001C15.4733 2.30001 16.0667 2.83334 16.68 3.34001C17.3067 3.83334 17.9133 4.27334 18.5 4.66001C17.9133 5.03334 17.3067 5.47334 16.68 5.98001C16.0667 6.48668 15.4733 7.02668 14.9 7.60001C14.34 8.16001 13.8333 8.73334 13.38 9.32001L12.18 8.62001C12.6333 8.00668 13.1533 7.40668 13.74 6.82001C14.34 6.22001 14.9 5.72668 15.42 5.34001H1.22637e-05V3.98001H15.42Z" fill="#9A9EAD"/>
                        </svg>
                    </div>

                    <div class="aau-card aau-card-after">
                        <lme-tag text="変更後" class="aau-tag aau-tag-after" type="primary"></lme-tag>
                        <div :class="['aau-avatar-wrap', { 'aau-changed': isImageChanged }]">
                            <lme-avatar size="large" type="image" :src="latestImage" alt=""></lme-avatar>
                        </div>
                        <div :class="['aau-name', { 'aau-changed-text': isNameChanged }]">@{{ latestName }}</div>
                    </div>
                </div>

                {{-- Nêu rõ field nào đã đổi (BR-09 / QA-spec-09) --}}
                {{-- v-if="changedFieldLabels.length" ẩn theo bug #39226 --}}
                <div class="aau-diff-note" v-if="false">
                    <span class="aau-diff-label">変更項目</span>
                    <lme-tag v-for="label in changedFieldLabels" :key="label" :text="label" type="primary"></lme-tag>
                </div>

                {{-- Lỗi khi ghi đè (EP-05 success:false) — giữ modal mở, cho thử lại --}}
                <lme-alert v-model="hasSubmitError" type="error" :message="submitError"></lme-alert>

                {{-- Footer: 反映しない (phụ) / 変更を反映する (chính) --}}
                <div class="aau-footer">
                    <lme-button-ghost type="primary" size="lg" :disabled="submitting" @click="closeModal()" style="padding-inline: 0 !important; width: 128px">反映しない</lme-button-ghost>
                    <lme-button-default type="primary" size="lg" :disabled="submitting" @click="confirmUpdate()" style="padding-inline: 0 !important; width: 160px">@{{ confirmLabel }}</lme-button-default>
                </div>
            </div>
        </lme-modal>
    </div>

    <script src="/lme-ui/src/js/icon/lme-icon.js?v={{ config('sns-line.version') }}"></script>
    <script src="/lme-ui/src/js/avatar/lme-avatar.js?v={{ config('sns-line.version') }}"></script>
    <script src="/lme-ui/src/js/tag/lme-tag.js?v={{ config('sns-line.version') }}"></script>
    <script src="/lme-ui/src/js/alert/lme-alert.js?v={{ config('sns-line.version') }}"></script>
    <script src="/js/account_auto_update_modal.js?v={{ config('sns-line.version') }}"></script>
@endif