{{--
    [#40041] API連携 — SCR-01 danh sách API key.
    Toàn bộ 5 màn nằm trên MỘT route duy nhất; SCR-02…SCR-05 là modal/drawer chồng lên màn này
    (Common Spec §2). Mỗi màn con tách thành partial riêng (LUẬT FE: khối UI của màn riêng
    không inline trong file cha).
--}}
@extends('layout.v2.admin.main')

@section('title')
    API連携
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/base.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/icon/icon.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/input/select.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/radio/radio.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/tag.css?v={{config("sns-line.version")}}">
    {{-- title.css: tieu de section 「APIキー」 dung <lme-title> nhu design (weight 600 + nen xam) --}}
    <link rel="stylesheet" href="/lme-ui/src/css/title/title.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tooltip/tooltip.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/drawer/drawer.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="/lme-ui/src/css/toast/toast.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/empty-view/empty-view.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/history-card/history-card.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/modules/api_integration/css/index.css?v={{config("sns-line.version")}}">
@endpush

@section('content')
    <section id="api-integration-page" v-cloak>

        {{-- Page header — E-015…E-018 --}}
        <div class="api-page-header">
            <div class="api-page-header__left">
                <h1 class="api-page-title">API連携</h1>
                {{-- D-06: URL do khách cấp sau ⇒ cấu hình rỗng thì ẩn nút, không dẫn tới trang chết --}}
                <lme-button-flat
                    v-if="docsUrl"
                    type="primary"
                    size="md"
                    @click="openDocs">
                    <lme-icon file_name="book1"></lme-icon>
                    使い方を見る
                </lme-button-flat>
            </div>
            <div class="api-page-header__right">
                <lme-button-flat type="primary" size="lg" @click="openHistoryDrawer">
                    <lme-icon file_name="reloadtime-outlined"></lme-icon>
                    操作履歴
                </lme-button-flat>
                <lme-button-default type="primary" size="lg" @click="openIssueModal">
                    <lme-icon file_name="plus-outlined"></lme-icon>
                    APIキーを発行
                </lme-button-default>
            </div>
        </div>

        {{-- Card 「APIキー」 — E-019, E-020 --}}
        <div class="api-card">
            <div class="api-card__head">
                {{-- Dung <lme-title> dung nhu design (SRC-009): weight 600 + khoi nen xam.
                     Ban cu la <h2 class="api-card__title"> tu ve, weight 700 va khong co nen. --}}
                <lme-title element="h1" color="gray" title="APIキー"></lme-title>
                {{-- [#40302] MOT khoi lead duy nhat, ca 2 dong CUNG mau phu (#878A92) va
                     ngat dong bang <br> — dung nhu design (`p.api-section-lead`, SRC-009).
                     Ban truoc tach 2 the <p> va to DO dong canh bao ⇒ tester bao test failed. --}}
                <p class="api-card__desc">
                    発行したAPIキーで外部システムからエルメのデータを操作できます。<br>
                    キーは第三者に共有しないでください。漏洩した場合はすぐに削除して再発行してください。
                </p>
            </div>

            {{-- Toolbar — E-021, E-022, E-023 --}}
            <div class="api-toolbar">
                <div class="api-toolbar__left">
                    <lme-input-search
                        v-model="keyword"
                        placeholder="キー名を入力して検索"
                        width="280px"
                        size="lg"
                        @input="onKeywordInput"
                        @search="onKeywordSearch"
                        @clear="onKeywordSearch">
                    </lme-input-search>
                    <lme-select
                        v-model="statusFilter"
                        :options="statusOptions"
                        width="200px"
                        size="lg"
                        @change="onStatusChange">
                    </lme-select>
                </div>
                <div class="api-toolbar__right">
                    {{-- BR-17: đếm số bản ghi SAU khi lọc.
                         Tải hỏng mà chưa có dữ liệu ⇒ `totalCountText` ra 「全 — 件」 chứ KHÔNG in
                         0: 「全 0 件」 là khẳng định "bot không có key nào", sai khi chỉ là lỗi tải. --}}
                    <span class="api-total-count">@{{ totalCountText }}</span>
                </div>
            </div>

            {{-- Lần tải gần nhất hỏng nhưng bảng vẫn còn dữ liệu của lần trước ⇒ nói rõ đang xem
                 bản cũ + cho đường thử lại. Trường hợp bảng RỖNG thì error state nằm trong
                 `slot="empty"` của lme-table bên dưới (không đẩy 2 thông báo cùng lúc). --}}
            <div v-if="hasStaleList" class="api-list-error">
                <lme-alert
                    v-model="showLoadError"
                    type="error"
                    width="100%"
                    :message="staleListMessage">
                </lme-alert>
                <lme-button-flat type="primary" size="md" :disabled="loading" @click="fetchKeys">
                    {{-- `reload-outlined` = mũi tên làm mới (giống nút 「最新に更新」 màn Webhook転送);
                         `reloadtime-outlined` ở header là icon lịch sử, không dùng cho 再試行. --}}
                    <lme-icon file_name="reload-outlined"></lme-icon>
                    <span style="margin-left: 8px;">再試行</span>
                </lme-button-flat>
            </div>

            {{-- [#40306][#40546] Bang LUON render — 2 empty state nam trong `slot="empty"` cua
                 lme-table (dung nhu design SRC-009) thay vi thay the ca bang bang lme-empty-view.
                 Nho vay hang TIEU DE COT khong bien mat khi loc khong ra ket qua, va luc dang tai
                 khong hien nham 「データがありません」.
                 [#40304] `max-height` PHAI la gia tri tuyet doi. Ban cu dung `100%`:
                 `.lme-table-wrapper` nam trong `.api-card` cao auto nen max-height dang %
                 resolve ve `none` ⇒ wrapper khong bao gio cuon doc ⇒ `thead th` (position:
                 sticky) cua lme-table khong co scroll container de bam, header troi theo khi
                 cuon trang. 340px = chrome co dinh tren+duoi bang (header layout 61 + padding
                 trang 20 + hang tieu de 48 + vien/padding card 17 + card head 88 + toolbar 52
                 + vien/padding duoi card 17 + padding duoi trang 32); da tru bot 48px cua
                 footer phan trang vi khoi do bi bo o [#40333]. --}}
            <div class="api-table-wrap">
                <lme-table
                    :columns="columns"
                    :data-source="keys"
                    row-key="id"
                    :fixed-right-count="1"
                    :row-class-name="rowClassName"
                    {{-- [NEW-282] Bao cho bang biet dang tai. Chi boc slot `empty` trong
                         `v-if="!loading"` là KHONG DU: Vue 2 loc bo vnode rong khi resolve
                         slot ⇒ slot bi coi nhu khong truyen va `<slot>` roi ve noi dung mac
                         dinh `emptyText` = 「データがありません」, hien suot luc dang tai. --}}
                    :loading="loading"
                    max-height="calc(100vh - 340px)">

                    {{-- ステータス — E-032 --}}
                    <template slot="cell-status" slot-scope="{ record }">
                        <lme-tag v-if="record.status === 'active'" type="success" text="有効" size="md"></lme-tag>
                        {{-- [NEW-699] Ly do bi vo hieu chi nam trong tooltip (hover-only) va
                             `lme-tag` khong phai tab stop ⇒ nguoi dung ban phim / trinh doc man
                             hinh khong lay duoc. Nhoi ca ly do vao TEN KHA TRUY CAP cua the.
                             PHAI kem `role="img"`: aria-label dat tren <div> tran (role=generic)
                             bi spec cam dat ten nen nhieu screen reader bo qua; role="img" la
                             role ho tro dat ten va thay luon text con bang nhan nay. --}}
                        <lme-tooltip v-else content="有効期限切れのため自動で無効になりました" position="top">
                            <lme-tag
                                type="default"
                                text="無効"
                                size="md"
                                role="img"
                                aria-label="無効：有効期限切れのため自動で無効になりました"></lme-tag>
                        </lme-tooltip>
                    </template>

                    {{-- APIキー — dạng che mặc định + 👁 + copy (BR-13, BR-15) --}}
                    <template slot="cell-key" slot-scope="{ record }">
                        <div class="api-key-cell">
                            <span class="api-key-cell__value">@{{ displayKey(record) }}</span>
                            {{-- [#40296] icon 👁 + copy dung ghost MAU XANH + bo tron, dung design
                                 (`color="blue" :rounded="true"` — SRC-009). Ban truoc dung
                                 `type="secondary"` khong co color ⇒ ra class ghost-secondary (xam). --}}
                            {{-- [NEW-698] Nut chi co icon PHAI tu mang aria-label mo ta HANH DONG.
                                 Tooltip chi hien khi hover/focus nen khong tinh la ten cua nut, con
                                 <lme-icon> thi la trang tri (aria-hidden) — khong co aria-label o day
                                 thi nut khong co ten nao ca. Kem ten key de phan biet giua cac dong,
                                 vi bang co nhieu dong cung 3 nut giong het nhau. --}}
                            <lme-tooltip :content="revealed[record.id] ? 'マスクする' : '表示する'" position="top">
                                <lme-button-ghost
                                    color="blue" size="sm" :icon="true" :rounded="true"
                                    :aria-label="(revealed[record.id] ? 'APIキーをマスクする' : 'APIキーを表示する') + '：' + record.name"
                                    @click="toggleReveal(record)">
                                    <lme-icon :file_name="revealed[record.id] ? 'eye-close-outlined' : 'eye-outlined'"></lme-icon>
                                </lme-button-ghost>
                            </lme-tooltip>
                            <lme-tooltip content="コピー" position="top">
                                <lme-button-ghost
                                    color="blue" size="sm" :icon="true" :rounded="true"
                                    :aria-label="'APIキーをコピー：' + record.name"
                                    @click="copyKey(record)">
                                    <lme-icon file_name="file-copy-outlined"></lme-icon>
                                </lme-button-ghost>
                            </lme-tooltip>
                        </div>
                    </template>

                    {{-- 権限 — E-029 --}}
                    <template slot="cell-scope" slot-scope="{ record }">
                        <lme-tag
                            :type="record.scope === 'full' ? 'warning' : 'default'"
                            :text="record.scope_label"
                            size="md">
                        </lme-tag>
                    </template>

                    {{-- 有効期限 — rỗng ⇒ chữ mờ 「無期限」 (E-030) --}}
                    <template slot="cell-expires_at" slot-scope="{ record }">
                        <span v-if="record.expires_at">@{{ record.expires_at }}</span>
                        <span v-else class="api-text-muted">無期限</span>
                    </template>

                    {{-- [#40303] Icon help cua 最終利用 nay dung `helpText` san co cua lme-table
                         (khai bao trong `columns`) thay vi slot header tu ve — dung nhu design
                         SRC-009. Slot cu boc tieu de trong `.api-header-help` co `color:#878A92`
                         ⇒ cot nay nhat hon 7 cot khac (th = #1F1F1F/600), tester doc thanh
                         "khong in dam". THAY THE ban va o commit b82c27faf4 "fix UI" (bo color +
                         them `.lme-tooltip-wrapper-custom`): van giu slot tu ve nen con lech
                         design va ticket van bi re-open. --}}
                    <template slot="cell-last_used_at" slot-scope="{ record }">
                        <span v-if="record.last_used_at">@{{ record.last_used_at }}</span>
                        <span v-else class="api-text-muted">未使用</span>
                    </template>

                    {{-- 発行者 — BR-21 (snapshot tên lúc phát hành) --}}
                    <template slot="cell-issued_by" slot-scope="{ record }">
                        <lme-tooltip :content="record.issued_by" position="top">
                            <span class="api-issued-by lme-truncate">@{{ record.issued_by }}</span>
                        </lme-tooltip>
                    </template>

                    {{-- 操作 — nút xoá hiện trên MỌI dòng, kể cả dòng 「無効」 (SCR-01 quy tắc 5) --}}
                    <template slot="cell-actions" slot-scope="{ record }">
                        <div class="api-actions-cell">
                            {{-- [NEW-698] Xem chu thich o cot APIキー — nut chi co icon can aria-label. --}}
                            {{-- position="left" ĐÚNG như design (SRC-009), KHÔNG phải "top": cột 操作
                                 là cột ghim phải, tooltip đặt phía trên sẽ đè lên header và dễ chạm
                                 mép phải màn hình. Đặt sang trái thì luôn nằm gọn trong vùng bảng. --}}
                            <lme-tooltip content="削除" position="left">
                                <lme-button-ghost
                                    type="primary" color="red" size="sm" icon
                                    :aria-label="'APIキーを削除：' + record.name"
                                    @click="openDeleteModal(record)">
                                    <lme-icon file_name="delete-outlined"></lme-icon>
                                </lme-button-ghost>
                            </lme-tooltip>
                        </div>
                    </template>

                    {{-- [#40306][#40546] Empty state nam TRONG bang ⇒ hang tieu de cot van con.
                         [NEW-282] `v-if="!loading"` o day CHI de tranh dung slot khi dang tai;
                         thu chan 「データがありません」 thi phai dua vao prop `:loading` cua
                         lme-table o tren (xem chu thich tai do). Overlay dang tai la
                         `$.LoadingOverlay` goi tu `fetchKeys`. --}}
                    <template slot="empty">
                        <template v-if="!loading">
                            {{-- Tải HỎNG (timeout / 500 / body success=false) ⇒ PHẢI báo lỗi, tuyệt đối
                                 không rơi xuống 2 empty state bên dưới: người dùng sẽ bị nói sai là
                                 「APIキーがまだありません」 trong khi bot đang có key. `network-error`
                                 là biến thể có sẵn của lme-empty-view, nút bấm ra dạng flat + icon
                                 reload — đúng ngữ nghĩa 再試行. --}}
                            <lme-empty-view
                                v-if="loadError"
                                style="margin-block: 20px"
                                type="network-error"
                                :title="loadError"
                                description="時間をおいて再試行してください。改善しない場合はサポートへお問い合わせください。"
                                :show-button="true"
                                button-text="再試行"
                                @click="fetchKeys">
                            </lme-empty-view>
                            {{-- Request còn đang bay nhưng đã quá SLOW_NOTICE_MS (endpoint treo /
                                 mạng cực chậm): KHÔNG để màn trống dưới overlay tới lúc hết hạn
                                 timeout. Hiện lý do + nút 再試行 ngay; bấm 再試行 sẽ huỷ request
                                 đang treo và gửi ĐÚNG MỘT request mới (xem fetchKeys). --}}
                            <lme-empty-view
                                v-else-if="loadSlow"
                                style="margin-block: 20px"
                                type="network-error"
                                title="APIキーの取得に時間がかかっています"
                                description="通信エラーの可能性があります。再試行するか、しばらくお待ちください。"
                                :show-button="true"
                                button-text="再試行"
                                @click="fetchKeys">
                            </lme-empty-view>
                            <lme-empty-view
                                v-else-if="!hasActiveFilter"
                                style="margin-block: 20px"
                                type="empty"
                                title="APIキーがまだありません"
                                description="APIキーを発行すると外部システムと連携できます"
                                :show-button="true"
                                button-text="APIキーを発行"
                                button-type="primary"
                                @click="openIssueModal">
                            </lme-empty-view>
                            <lme-empty-view
                                v-else
                                style="margin-block: 20px"
                                type="no-results"
                                title="該当するAPIキーがありません"
                                description="絞り込み条件を変えてお試しください">
                            </lme-empty-view>
                        </template>
                    </template>
                </lme-table>

                {{-- [NEW-282] Chi bao dang tai chuyen sang jQuery LoadingOverlay
                     (`$.LoadingOverlay('show')` trong `fetchKeys`) cho khop spinner chung cua
                     he thong — toan bo man admin khac deu dung plugin nay. THAY THE cho
                     `<lme-loading>` cua [#40546]: dung y "overlay bam dung vung bang" van tot
                     nhung icon lech voi phan con lai cua san pham nen tester bao failed.
                     `.api-table-wrap` giu `position: relative` — vo hai, va can cho cac overlay
                     khac neu sau nay quay lai dung overlay pham vi hep. --}}
            </div>

            {{-- [#40333] BO khoi phan trang o card footer (E-035 cu). BR-03 chan cung 10 key/bot
                 nen danh sach LUON lay het trong 1 lan (EP-S01 khong con page/per_page); khoi
                 dieu huong trang von da tu an vi `last_page` luon = 1, chi con dropdown
                 「件表示」 la thua. Bo phan trang la QUYET DINH cua dev/BA ngay 2026-09-05,
                 LECH so voi design SRC-009 + spec E-035 — spec can cap nhat theo. --}}
        </div>

        {{-- SCR-02 / SCR-03 / SCR-04 / SCR-05 --}}
        @include('basic.api_integration.components.issue_modal')
        @include('basic.api_integration.components.issued_modal')
        @include('basic.api_integration.components.delete_modal')
        @include('basic.api_integration.components.history_drawer')
    </section>
@endsection

@push('script')
    {{-- [#40041] KHONG nap /js/media/vue.min.js (Vue 2.2.6) o day: layout/v2/admin/footer.blade.php:1
         da nap Vue 2.6.12, ma stack script render SAU nen ban 2.2.6 se de len global Vue va
         lam slot-scope/v-slot cua lme-ui khong render (vo bang 8 cot + drawer lich su thao tac). --}}
    <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/button/lme-button-ghost.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-risk.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/input/lme-input-search.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/input/lme-select.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/radio/lme-radio.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/radio/lme-radio-group.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-tag.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/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/modal/lme-modal.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/drawer/lme-drawer.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="/lme-ui/src/js/toast/lme-toast.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/empty-view/lme-empty-view.js?v={{config("sns-line.version")}}"></script>
    <script src="/lme-ui/src/js/history-card/lme-history-card.js?v={{config("sns-line.version")}}"></script>

    <script>
        window.API_INTEGRATION_CONFIG = {
            urls: {
                keys: '{{ route('apiIntegration.keys') }}',
                issue: '{{ route('apiIntegration.keys.store') }}',
                logs: '{{ route('apiIntegration.logs') }}',
                // {id} được thay ở JS — tránh hardcode prefix
                destroy: '{{ url('/basic/api-integration/keys') }}',
                reveal: '{{ url('/basic/api-integration/keys') }}'
            },
            maxKeysPerBot: {{ (int) $maxKeysPerBot }},
            docsUrl: @json($docsUrl)
        };
    </script>
    <script src="/_assets/modules/api_integration/js/index.js?v={{config("sns-line.version")}}"></script>
@endpush