{{--
    Task #40044 「Webhook転送」 — dựng theo DESIGN REVISION 2 (prototype khách tự code,
    https://docs.missiona.co/product_lme/webhook-relay/ · snapshot 2026-09-03).

    Mô hình màn: **TAB = KÊNH CHUYỂN TIẾP**, không phải 転送設定/転送エラー như bản v1:
      tab 1 「LINE公式アカウントデータ転送」 (SCR-01) · tab 2 「L Messageデータ転送」 (SCR-02)
    Mỗi tab: card 「転送先設定」 (cấu hình của chính kênh đó) + card 「転送エラー」 (lỗi của
    chính kênh đó — BR-19). 「署名シークレット」 CHỈ có ở tab 2 (BR-02 / QA-spec-028).
    Nút 「保存する」 nằm ở footer NGOÀI tabpanel ⇒ luôn hiện ở cả 2 tab (BR-07) và chỉ lưu
    kênh của tab đang mở (BR-22 — CHỐT QA-spec-030).

    `activeTab` LUÔN khởi tạo = 1 khi vào/refresh: không nhớ tab, không đọc/ghi query string
    hay storage (CHỐT QA-spec-015).

    Chuỗi tiếng Nhật lấy NGUYÊN VĂN từ design — không tự dịch, không rút gọn (L25).
--}}
@extends('layout.admin.main')
@section('title', 'Webhook転送')

@push('css')
<link rel="stylesheet" href="/lme-ui/src/css/reset.css">
<link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/icon/icon.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/tab/tab.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/title/title.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/input/input.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/switch/switch.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/table/table.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/tag/status.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/toast/toast.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/admin/webhook-relay/webhook-relay.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
<div id="webhook-relay-app" v-cloak>
    <div class="wh-page">

        {{-- ページヘッダー --}}
        <div class="wh-header">
            <div class="wh-header-left">
                <div class="wh-title" style="line-height: 27.6px">Webhook転送</div>
                <lme-button-flat size="md" @click="openHelp">
                    <lme-icon file_name="book1"></lme-icon>
                    <span style="margin-left: 8px;">使い方を見る</span>
                </lme-button-flat>
            </div>
        </div>

        {{-- ============ 転送設定カード（タブで転送元を切り替える） ============ --}}
        <div class="wh-card">
            <div class="wh-card-inner">
                <lme-tab-horizontal v-model="activeTab" :tabs="tabs" @select="onSelectTab"></lme-tab-horizontal>

                <div class="wh-tabpanel">
                    <div class="wh-section">
                        <lme-title element="h1" color="gray" title="転送先設定"></lme-title>

                        <p class="wh-desc">@{{ current.description }}</p>

                        <div>
                            <span class="wh-label">転送の状態</span>
                            <div class="wh-state-row">
                                <lme-switch v-model="current.enabled"></lme-switch>
                                <lme-status
                                    :text="current.enabled ? '転送中' : '停止中'"
                                    :color="current.enabled ? '#52C41A' : '#D9D9D9'">
                                </lme-status>
                            </div>
                        </div>

                        <lme-input
                            v-model="current.url"
                            label="転送先URL"
                            required
                            size="md"
                            width="520px"
                            placeholder="https://example.com/webhook"
                            :error-message="current.urlError">
                        </lme-input>

                        {{-- 署名シークレットは「L Messageデータ転送」のみ (BR-02 / QA-spec-028) --}}
                        <div v-if="activeTab === channels.lme">
                            <span class="wh-label">署名シークレット</span>
                            <div class="wh-field-inline">
                                <div class="wh-field-inline-main">
                                    <lme-input
                                        :value="secretDisplay"
                                        size="md"
                                        width="520px"
                                        disabled>
                                    </lme-input>
                                </div>
                                <lme-button-flat size="md" icon :disabled="!hasSecret" @click="toggleSecret">
                                    <lme-icon :file_name="secretVisible ? 'eye-close-outlined' : 'eye-outlined'"></lme-icon>
                                </lme-button-flat>
                                <lme-button-flat size="md" icon :disabled="!hasSecret" @click="copySecret">
                                    <lme-icon file_name="file-copy-outlined"></lme-icon>
                                </lme-button-flat>
                                <lme-button-flat size="md" :disabled="!hasSecret || isRegenerating" @click="regenerateSecret">
                                    <lme-icon file_name="reload-outlined"></lme-icon>
                                    <span style="margin-left: 8px;">再生成</span>
                                </lme-button-flat>
                            </div>
                            <div class="wh-note" style="margin-top: 8px;">
                                <lme-icon class="wh-note-icon" file_name="info-circle-filled" :size="14"></lme-icon>
                                <span>リクエストヘッダー <span class="wh-mono">X-Lme-Signature</span> に署名を付与して送信します。外部ツール側でこの値を検証すると、エルメからの送信であることを確認できます。</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 「保存する」 nằm NGOÀI tabpanel ⇒ luôn hiện ở cả 2 tab (BR-07) --}}
            <div class="wh-footer">
                <lme-button-default size="lg" :disabled="isSaving" @click="save" style="width: 160px; padding-inline: 0 !important;">保存する</lme-button-default>
            </div>
        </div>

        {{-- ============ 転送エラーカード（選択中のタブの転送先が対象 — BR-19） ============ --}}
        <div class="wh-card">
            <div class="wh-card-inner">
                <div class="wh-section">
                    <lme-title element="h1" color="gray" title="転送エラー"></lme-title>

                    <p class="wh-desc">
                        「@{{ current.label }}」で転送に失敗したデータを新しい順に最大100件まで表示します。
                    </p>

                    <div class="wh-toolbar">
                        {{-- #41030: mốc lấy từ DB, MỖI TAB MỘT CỘT RIÊNG (`errors_refreshed_at`
                             cho tab LINE · `notify_errors_refreshed_at` cho tab L Message);
                             cập nhật khi VÀO MÀN (cả 2 cột) và khi bấm 「最新に更新」 (cột của tab
                             đang đứng). Đổi tab KHÔNG cập nhật. --}}
                        <span class="wh-updated">最終更新: @{{ lastUpdatedAt || '—' }}</span>
                        <lme-button-flat size="md" :disabled="isLoadingErrors" @click="refreshErrors">
                            <lme-icon file_name="reload-outlined"></lme-icon>
                            <span style="margin-left: 8px;">最新に更新</span>
                        </lme-button-flat>
                    </div>

                    <lme-table
                        {{-- ref: hai tab DÙNG CHUNG một instance lme-table (chỉ đổi data-source) nên
                             div cuộn không bị dựng lại khi đổi tab ⇒ phải tự đưa scroll về đầu,
                             xem resetErrorTableScroll() trong webhook-relay.js (bug #40792). --}}
                        ref="errorTable"
                        :columns="errorColumns"
                        :data-source="currentErrors"
                        row-key="id"
                        max-height="560px"
                        empty-text="転送エラーはありません"
                        @sort-change="onSortErrors">

                        <template slot="cell-event_type" slot-scope="{ value }">
                            <span class="wh-mono">@{{ value }}</span>
                        </template>

                        <template slot="cell-reason" slot-scope="{ record }">
                            <lme-status :text="record.reason" color="#FF4D4F" size="sm"></lme-status>
                        </template>

                        <template slot="cell-http_status" slot-scope="{ value }">
                            <span>@{{ value === null || value === '' ? '—' : value }}</span>
                        </template>
                    </lme-table>

                    <div class="wh-note">
                        <lme-icon class="wh-note-icon" file_name="info-circle-filled" :size="14"></lme-icon>
                        <span>転送に失敗した場合は自動で最大3回まで再送を試みます。3回とも失敗したものだけをここに記録します。表示は直近100件までです。これより古いエラーは表示されません。成功した送信は記録していません。</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/tab/lme-tab-horizontal.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/title/lme-title.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/input/lme-input.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/switch/lme-switch.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/table/lme-table.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/tag/lme-status.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/toast/lme-toast.js?v={{config('sns-line.version')}}"></script>
<script>
    // JS-01 + L23: KHÔNG nhúng `route()` vào string literal JS và CHỈ truyền MỘT BIẾN vào
    // directive json — Blade 5.5 cắt tham số bằng explode(',') nên array literal viết thẳng
    // ở đây sẽ sinh PHP hỏng. Config được dựng sẵn ở controller.
    window.WEBHOOK_RELAY_CONFIG = @json($webhookRelayConfig);
</script>
<script src="/js/admin/webhook-relay/webhook-relay.js?v={{config('sns-line.version')}}"></script>
@endpush