@extends('admin.layout')

@section('title', 'Payment Gateway')

@section('content')
@php
    $activeDompetX = $dompetXProfiles[$activeDompetXProfile] ?? $dompetXProfiles['basic'];
    $activeDompetXCheck = $activeDompetX['last_check'] ?? null;
    $selectedDompetXProfile = old('dompetx_active_profile', $activeDompetXProfile);

    $dompetXHasError = $errors->has('dompetx_active_profile')
        || $errors->has('dompetx_basic_api_key')
        || $errors->has('dompetx_custom_api_key');
    $pakasirHasError = $errors->has('pakasir_project_slug') || $errors->has('pakasir_api_key');

    $initialSection = $dompetXHasError ? 'dompetx' : ($pakasirHasError ? 'pakasir' : 'overview');
    $initialMerchantTab = $errors->has('dompetx_custom_api_key')
        ? 'custom'
        : ($errors->has('dompetx_basic_api_key') ? 'basic' : $selectedDompetXProfile);

    $pakasirReady = $pakasirApiKeyAvailable && filled($pakasirProjectSlug);
@endphp

<div class="admin-settings-page admin-payment-page" data-payment-page data-initial-section="{{ $initialSection }}" data-initial-merchant="{{ $initialMerchantTab }}">
    <section class="admin-section-header admin-payment-page-header">
        <div>
            <h1 class="admin-section-title font-display">Payment <span>Gateway</span></h1>
            <p class="admin-section-description">
                Atur gateway untuk order baru, kredensial merchant, dan kesiapan QRIS tanpa mengubah <code>.env</code>.
                Order yang sudah dibuat tetap menggunakan gateway asalnya.
            </p>
        </div>
    </section>

    @if ($errors->any())
        <section class="admin-payment-alert is-danger" role="alert">
            <span class="admin-payment-alert-icon">!</span>
            <div>
                <strong>Perubahan belum disimpan</strong>
                <p>{{ $errors->first() }}</p>
            </div>
        </section>
    @endif

    <nav class="admin-payment-tabs" aria-label="Payment Gateway">
        <button type="button" class="admin-payment-tab" data-payment-tab="overview" aria-controls="payment-panel-overview">Ringkasan</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="dompetx" aria-controls="payment-panel-dompetx">DompetX</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="pakasir" aria-controls="payment-panel-pakasir">Pakasir</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="guide" aria-controls="payment-panel-guide">Panduan</button>
    </nav>

    <form id="payment-gateway-form" method="POST" action="{{ route('admin.settings.update') }}" class="admin-settings-form admin-payment-form">
        @csrf

        <section id="payment-panel-overview" class="admin-payment-view" data-payment-panel="overview">
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">Order baru</span>
                        <h2>Pilih gateway</h2>
                    </div>
                    <p>Perubahan hanya berlaku untuk checkout berikutnya.</p>
                </header>

                <div class="admin-payment-provider-grid">
                    <article
                        class="admin-payment-provider-card {{ old('active_gateway', $activeGateway) === 'pakasir' ? 'is-selected' : '' }}"
                        data-provider-card="pakasir"
                        data-provider-ready="{{ ($pakasirReady || $activeGateway === 'pakasir') ? '1' : '0' }}"
                    >
                        <input type="radio" name="active_gateway" value="pakasir" @checked(old('active_gateway', $activeGateway) === 'pakasir') hidden>

                        <div class="admin-payment-provider-topline">
                            <div class="admin-payment-provider-identity">
                                <span class="admin-payment-provider-icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" focusable="false">
                                        <path d="M4 7.5h16v10H4z"></path>
                                        <path d="M7 11h4"></path>
                                        <path d="M16.5 12.5h.01"></path>
                                    </svg>
                                </span>
                                <div>
                                    <h3>Pakasir</h3>
                                    <p>Gateway transisi</p>
                                </div>
                            </div>
                            <span class="admin-payment-status" data-provider-status="pakasir"></span>
                        </div>

                        <dl class="admin-payment-provider-summary">
                            <div>
                                <dt>Kesiapan</dt>
                                <dd>{{ $pakasirReady ? 'Siap digunakan' : 'Perlu konfigurasi' }}</dd>
                            </div>
                            <div>
                                <dt>Biaya pembayaran</dt>
                                <dd>Pembeli atau Toko</dd>
                            </div>
                        </dl>

                        <div class="admin-payment-provider-actions">
                            <button
                                type="button"
                                class="admin-button admin-button-primary"
                                data-provider-select-button="pakasir"
                                data-choose-provider="pakasir"
                                @if(! ($pakasirReady || $activeGateway === 'pakasir')) hidden @endif
                            >Gunakan Pakasir</button>
                            <button
                                type="button"
                                class="admin-button admin-button-ghost"
                                data-provider-setup-button="pakasir"
                                data-open-section="pakasir"
                                @if($pakasirReady || $activeGateway === 'pakasir') hidden @endif
                            >Atur Pakasir</button>
                        </div>
                    </article>

                    <article
                        class="admin-payment-provider-card {{ old('active_gateway', $activeGateway) === 'dompetx' ? 'is-selected' : '' }}"
                        data-provider-card="dompetx"
                        data-provider-ready="{{ (($activeDompetXCheck['ready'] ?? false) || $activeGateway === 'dompetx') ? '1' : '0' }}"
                    >
                        <input type="radio" name="active_gateway" value="dompetx" @checked(old('active_gateway', $activeGateway) === 'dompetx') hidden>

                        <div class="admin-payment-provider-topline">
                            <div class="admin-payment-provider-identity">
                                <span class="admin-payment-provider-icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" focusable="false">
                                        <path d="M4 4h6v6H4z"></path>
                                        <path d="M14 4h6v6h-6z"></path>
                                        <path d="M4 14h6v6H4z"></path>
                                        <path d="M14 14h2v2h-2zM18 14h2v6h-2zM14 18h2v2h-2z"></path>
                                    </svg>
                                </span>
                                <div>
                                    <h3>DompetX</h3>
                                    <p>QRIS · biaya ditanggung pembeli</p>
                                </div>
                            </div>
                            <span class="admin-payment-status" data-provider-status="dompetx"></span>
                        </div>

                        <dl class="admin-payment-provider-summary">
                            <div>
                                <dt>Merchant</dt>
                                <dd data-overview-dompetx-profile>{{ ucfirst($selectedDompetXProfile) }}</dd>
                            </div>
                            <div>
                                <dt>Kesiapan</dt>
                                <dd data-overview-dompetx-readiness>
                                    @if ($activeDompetXCheck['ready'] ?? false)
                                        Siap digunakan
                                    @elseif ($activeDompetX['api_key_stored'] ?? false)
                                        Perlu diuji
                                    @else
                                        Perlu konfigurasi
                                    @endif
                                </dd>
                            </div>
                        </dl>

                        <div class="admin-payment-provider-actions">
                            <button
                                type="button"
                                class="admin-button admin-button-primary"
                                data-provider-select-button="dompetx"
                                data-choose-provider="dompetx"
                                @if(! (($activeDompetXCheck['ready'] ?? false) || $activeGateway === 'dompetx')) hidden @endif
                            >Gunakan DompetX</button>
                            <button
                                type="button"
                                class="admin-button admin-button-ghost"
                                data-provider-setup-button="dompetx"
                                data-open-section="dompetx"
                                @if(($activeDompetXCheck['ready'] ?? false) || $activeGateway === 'dompetx') hidden @endif
                            >Atur DompetX</button>
                        </div>
                    </article>
                </div>

                <div class="admin-payment-change-summary" data-provider-change-summary hidden>
                    <span class="admin-payment-change-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" focusable="false">
                            <path d="M5 12h14"></path>
                            <path d="m15 8 4 4-4 4"></path>
                        </svg>
                    </span>
                    <div>
                        <strong data-provider-change-title>Perubahan gateway belum disimpan</strong>
                        <p data-provider-change-copy></p>
                    </div>
                </div>

                @error('active_gateway')
                    <p class="admin-form-error admin-payment-inline-error">{{ $message }}</p>
                @enderror
            </div>
        </section>

        <section id="payment-panel-dompetx" class="admin-payment-view" data-payment-panel="dompetx" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">DompetX</span>
                        <h2>Merchant & QRIS</h2>
                    </div>
                    <span class="admin-payment-policy">Biaya ditanggung pembeli</span>
                </header>

                <input type="hidden" name="dompetx_active_profile" id="dompetx-active-profile" value="{{ $selectedDompetXProfile }}">

                <div class="admin-payment-merchant-tabs" role="tablist" aria-label="Merchant DompetX">
                    @foreach (['basic', 'custom'] as $profile)
                        @php
                            $profileData = $dompetXProfiles[$profile];
                            $lastCheck = $profileData['last_check'];
                            $isReady = (bool) ($lastCheck['ready'] ?? false);
                            $isCurrentForOrders = $activeGateway === 'dompetx' && $activeDompetXProfile === $profile;
                        @endphp
                        <button
                            type="button"
                            class="admin-payment-merchant-tab"
                            data-merchant-tab="{{ $profile }}"
                            aria-controls="merchant-panel-{{ $profile }}"
                        >
                            <span>{{ ucfirst($profile) }}</span>
                            <strong data-merchant-tab-state="{{ $profile }}">
                                @if ($isCurrentForOrders)
                                    Aktif
                                @elseif ($isReady)
                                    Siap
                                @elseif ($profileData['api_key_stored'])
                                    Perlu diuji
                                @else
                                    Belum disiapkan
                                @endif
                            </strong>
                        </button>
                    @endforeach
                </div>

                <div class="admin-payment-merchant-workspace">
                    @foreach (['basic', 'custom'] as $profile)
                        @php
                            $profileData = $dompetXProfiles[$profile];
                            $lastCheck = $profileData['last_check'];
                            $isReady = (bool) ($lastCheck['ready'] ?? false);
                            $isSelectedProfile = $selectedDompetXProfile === $profile;
                            $isCurrentForOrders = $activeGateway === 'dompetx' && $activeDompetXProfile === $profile;
                            $inputName = 'dompetx_'.$profile.'_api_key';
                        @endphp

                        <section
                            id="merchant-panel-{{ $profile }}"
                            class="admin-payment-merchant-panel"
                            data-dompetx-profile="{{ $profile }}"
                            data-ready="{{ $isReady ? '1' : '0' }}"
                            data-key-stored="{{ $profileData['api_key_stored'] ? '1' : '0' }}"
                            hidden
                        >
                            <div class="admin-payment-merchant-heading">
                                <div class="admin-payment-merchant-identity">
                                    <span class="admin-payment-merchant-icon" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" focusable="false">
                                            <path d="M5 10h14v10H5z"></path>
                                            <path d="M4 10 6 4h12l2 6"></path>
                                            <path d="M9 20v-5h6v5"></path>
                                        </svg>
                                    </span>
                                    <div>
                                        <h3>Merchant {{ ucfirst($profile) }}</h3>
                                        <p>{{ $profile === 'basic' ? 'Merchant utama DompetX yang tersedia sekarang.' : 'Merchant terpisah untuk akun Custom setelah disetujui.' }}</p>
                                    </div>
                                </div>
                                <span class="admin-payment-status {{ $isCurrentForOrders ? 'is-active' : ($isReady ? 'is-ready' : 'is-warning') }}" data-profile-badge>
                                    @if ($isCurrentForOrders)
                                        Aktif untuk order baru
                                    @elseif ($isSelectedProfile && $isReady)
                                        Dipilih
                                    @elseif ($isReady)
                                        Siap digunakan
                                    @elseif ($profileData['api_key_stored'])
                                        Perlu diuji
                                    @else
                                        Belum disiapkan
                                    @endif
                                </span>
                            </div>

                            <div class="admin-payment-control-list">
                                <section class="admin-payment-control-row admin-payment-step-row" data-step="1">
                                    <div class="admin-payment-control-copy">
                                        <span class="admin-payment-control-label">API Key</span>
                                        <strong>{{ $profileData['api_key_stored'] ? 'API key tersimpan' : 'Belum ada API key' }}</strong>
                                    </div>

                                    @if ($profileData['api_key_stored'])
                                        <button type="button" class="admin-button admin-button-ghost" data-toggle-key-input="{{ $profile }}">Ganti API Key</button>
                                    @endif

                                    <div class="admin-payment-key-editor" data-key-editor="{{ $profile }}" @if($profileData['api_key_stored']) hidden @endif>
                                        <label for="dompetx-{{ $profile }}-key" class="admin-form-label">API Key Merchant {{ ucfirst($profile) }}</label>
                                        <input
                                            id="dompetx-{{ $profile }}-key"
                                            type="password"
                                            name="{{ $inputName }}"
                                            value=""
                                            class="admin-form-control font-figures"
                                            placeholder="{{ $profileData['api_key_stored'] ? 'Masukkan API key baru' : 'Masukkan API key Merchant '.ucfirst($profile) }}"
                                            autocomplete="new-password"
                                            data-api-key-input="{{ $profile }}"
                                            data-key-stored="{{ $profileData['api_key_stored'] ? '1' : '0' }}"
                                        >
                                        <p class="admin-payment-field-note">
                                            {{ $profileData['api_key_stored'] ? 'Kosongkan jika batal mengganti. API key lama tetap dipakai.' : 'API key disimpan terenkripsi dan tidak ditampilkan kembali.' }}
                                        </p>
                                        @error($inputName)
                                            <p class="admin-form-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </section>

                                <section class="admin-payment-control-row admin-payment-step-row" data-step="2">
                                    <div class="admin-payment-control-copy">
                                        <span class="admin-payment-control-label">Uji konfigurasi</span>
                                        <strong data-readiness-title="{{ $profile }}">
                                            @if ($isReady)
                                                Siap menerima pembayaran
                                            @elseif ($lastCheck)
                                                Konfigurasi perlu diperiksa
                                            @elseif ($profileData['api_key_stored'])
                                                Belum diuji
                                            @else
                                                Menunggu API key
                                            @endif
                                        </strong>
                                    </div>

                                    <button
                                        type="button"
                                        class="admin-button admin-button-primary admin-payment-test-button"
                                        data-test-profile="{{ $profile }}"
                                        data-test-url="{{ route('admin.settings.dompetx.test', ['profile' => $profile]) }}"
                                        @disabled(! $profileData['api_key_stored'])
                                    >
                                        {{ $lastCheck ? 'Uji Ulang' : 'Uji Konfigurasi' }}
                                    </button>
                                </section>

                                <section class="admin-payment-health-result" data-health-result="{{ $profile }}" @if(! $lastCheck) hidden @endif>
                                    <div>
                                        <span>QRIS</span>
                                        <strong data-qris-status>{{ $lastCheck ? (($lastCheck['qris_active'] ?? false) ? 'Aktif' : 'Tidak aktif') : '—' }}</strong>
                                    </div>
                                    <div>
                                        <span>Biaya ke pelanggan</span>
                                        <strong data-customer-fee>{{ $lastCheck ? (($lastCheck['fee_to_customer'] ?? false) ? 'Aktif' : 'Tidak aktif') : '—' }}</strong>
                                    </div>
                                    <div>
                                        <span>Biaya QRIS</span>
                                        <strong data-fee-info>
                                            @if ($lastCheck && $lastCheck['fee_percentage'] !== null)
                                                {{ rtrim(rtrim(number_format((float) $lastCheck['fee_percentage'], 2, ',', '.'), '0'), ',') }}%{{ ($lastCheck['fee_value'] ?? 0) > 0 ? ' + Rp'.number_format($lastCheck['fee_value'], 0, ',', '.') : '' }}
                                            @else
                                                —
                                            @endif
                                        </strong>
                                    </div>
                                    <div>
                                        <span>Batas transaksi</span>
                                        <strong data-limit-info>
                                            @if ($lastCheck && $lastCheck['min_transaction'] !== null && $lastCheck['max_transaction'] !== null)
                                                Rp{{ number_format($lastCheck['min_transaction'], 0, ',', '.') }} – Rp{{ number_format($lastCheck['max_transaction'], 0, ',', '.') }}
                                            @else
                                                —
                                            @endif
                                        </strong>
                                    </div>
                                </section>

                                <section class="admin-payment-control-row admin-payment-step-row admin-payment-select-row" data-step="3">
                                    <div class="admin-payment-control-copy">
                                        <span class="admin-payment-control-label">Merchant aktif</span>
                                        <strong data-merchant-choice-copy="{{ $profile }}">
                                            @if ($isCurrentForOrders)
                                                Dipakai untuk order baru
                                            @elseif ($isSelectedProfile && $isReady)
                                                Dipilih, belum disimpan
                                            @elseif ($isReady)
                                                Siap dipilih
                                            @else
                                                Tersedia setelah konfigurasi siap
                                            @endif
                                        </strong>
                                    </div>

                                    <button
                                        type="button"
                                        class="admin-button admin-button-ghost admin-payment-select-profile-button {{ $isSelectedProfile && $isReady ? 'is-selected' : '' }}"
                                        data-select-profile="{{ $profile }}"
                                        @if(! $isReady) hidden @endif
                                    >
                                        {{ $isSelectedProfile ? 'Dipilih' : 'Gunakan '.ucfirst($profile) }}
                                    </button>
                                </section>
                            </div>

                            <div class="admin-payment-merchant-footer">
                                <span data-last-check>
                                    @if ($lastCheck['checked_at'] ?? null)
                                        Terakhir diuji {{ \Carbon\Carbon::parse($lastCheck['checked_at'])->setTimezone(config('app.timezone'))->format('d M Y H:i') }} WIB
                                    @else
                                        Belum pernah diuji
                                    @endif
                                </span>

                                <details class="admin-payment-technical">
                                    <summary>Webhook & detail teknis</summary>
                                    <div class="admin-payment-webhook-block">
                                        <code data-webhook-url="{{ $profile }}">{{ $profileData['webhook_url'] }}</code>
                                        <button type="button" class="admin-button admin-button-ghost admin-payment-copy-button" data-copy-webhook="{{ $profile }}">Salin URL</button>
                                    </div>
                                </details>
                            </div>
                        </section>
                    @endforeach
                </div>

                @error('dompetx_active_profile')
                    <p class="admin-form-error admin-payment-inline-error">{{ $message }}</p>
                @enderror
            </div>
        </section>

        <section id="payment-panel-pakasir" class="admin-payment-view" data-payment-panel="pakasir" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">Pakasir</span>
                        <h2>Kredensial Pakasir</h2>
                    </div>
                    <span class="admin-payment-status {{ $pakasirReady ? 'is-ready' : 'is-warning' }}">
                        {{ $pakasirReady ? 'Siap digunakan' : 'Belum lengkap' }}
                    </span>
                </header>

                <div class="admin-payment-pakasir-form">
                    <div class="admin-form-group">
                        <label for="pakasir-project-slug" class="admin-form-label">Project Slug</label>
                        <input
                            id="pakasir-project-slug"
                            type="text"
                            name="pakasir_project_slug"
                            value="{{ old('pakasir_project_slug', $pakasirProjectSlug) }}"
                            class="admin-form-control font-figures"
                            placeholder="Project Slug Pakasir"
                        >
                        @error('pakasir_project_slug')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>

                    <div class="admin-form-group">
                        <div class="admin-payment-pakasir-key-heading">
                            <label for="pakasir-api-key" class="admin-form-label">API Key Pakasir</label>
                            <span class="admin-payment-status {{ $pakasirApiKeyAvailable ? 'is-ready' : 'is-warning' }}">
                                {{ $pakasirApiKeyStored ? 'Tersimpan di dashboard' : ($pakasirApiKeyAvailable ? 'Tersedia dari server' : 'Belum tersedia') }}
                            </span>
                        </div>
                        <input
                            id="pakasir-api-key"
                            type="password"
                            name="pakasir_api_key"
                            value=""
                            class="admin-form-control font-figures"
                            placeholder="{{ $pakasirApiKeyAvailable ? 'Masukkan hanya jika ingin mengganti API key' : 'Masukkan API key Pakasir' }}"
                            autocomplete="new-password"
                        >
                        <p class="admin-payment-field-note">Input kosong mempertahankan API key saat ini.</p>
                        @error('pakasir_api_key')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>
        </section>

        <section id="payment-panel-guide" class="admin-payment-view" data-payment-panel="guide" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">Panduan</span>
                        <h2>Cara mengelola payment gateway</h2>
                    </div>
                </header>

                <div class="admin-payment-guide-list">
                    <article class="admin-payment-guide-item">
                        <span>1</span>
                        <div>
                            <h3>Siapkan merchant DompetX</h3>
                            <p>Buka selector DompetX, pilih Basic atau Custom, masukkan API key, lalu jalankan Uji Konfigurasi.</p>
                        </div>
                    </article>
                    <article class="admin-payment-guide-item">
                        <span>2</span>
                        <div>
                            <h3>Pilih Basic atau Custom</h3>
                            <p>Keduanya menyimpan API key terpisah. Merchant hanya dapat dipilih setelah QRIS dan Biaya ke Pelanggan dinyatakan siap.</p>
                        </div>
                    </article>
                    <article class="admin-payment-guide-item">
                        <span>3</span>
                        <div>
                            <h3>Ganti gateway untuk order baru</h3>
                            <p>Buka Ringkasan lalu pilih Pakasir atau DompetX. Password admin diperlukan saat perubahan disimpan.</p>
                        </div>
                    </article>
                    <article class="admin-payment-guide-item">
                        <span>4</span>
                        <div>
                            <h3>Order lama tidak ikut berpindah</h3>
                            <p>Invoice lama tetap memakai gateway dan merchant yang tersimpan ketika checkout, termasuk Basic atau Custom.</p>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section class="admin-payment-savebar" data-payment-savebar>
            <div class="admin-payment-savebar-copy">
                <strong>Simpan perubahan</strong>
                <span>Password admin diperlukan untuk perubahan gateway, merchant, atau kredensial.</span>
            </div>
            <div class="admin-payment-savebar-actions">
                <div class="admin-form-group admin-payment-password-group">
                    <label for="current-password" class="admin-form-label">Password admin</label>
                    <input
                        id="current-password"
                        type="password"
                        name="current_password"
                        class="admin-form-control"
                        autocomplete="current-password"
                        placeholder="Masukkan saat akan menyimpan"
                    >
                    @error('current_password')<p class="admin-form-error">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="admin-button admin-button-primary admin-settings-submit-button">Simpan Pengaturan</button>
            </div>
        </section>
    </form>
</div>

<div id="payment-switch-modal" class="admin-payment-modal" aria-hidden="true">
    <button type="button" class="admin-payment-modal-backdrop" data-close-switch aria-label="Tutup"></button>
    <section class="admin-payment-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="payment-switch-title">
        <span class="admin-payment-section-label">Konfirmasi switch</span>
        <h2 id="payment-switch-title" class="font-display">Aktifkan konfigurasi pembayaran baru?</h2>
        <p>Order baru akan memakai konfigurasi yang dipilih. Order yang sudah dibuat tidak berubah.</p>
        <div class="admin-payment-modal-summary">
            <span>Dari</span><strong id="payment-switch-from">—</strong>
            <span>Menjadi</span><strong id="payment-switch-to">—</strong>
        </div>
        <div class="admin-payment-modal-actions">
            <button type="button" class="admin-button admin-button-ghost" data-close-switch>Batal</button>
            <button type="button" class="admin-button admin-button-primary" id="confirm-payment-switch">Aktifkan & Simpan</button>
        </div>
    </section>
</div>

<script>
(() => {
    const page = document.querySelector('[data-payment-page]');
    const form = document.getElementById('payment-gateway-form');
    const csrfToken = @json(csrf_token());
    const initialGateway = @json($activeGateway);
    const initialProfile = @json($activeDompetXProfile);
    const modal = document.getElementById('payment-switch-modal');
    const activeProfileInput = document.getElementById('dompetx-active-profile');
    let switchConfirmed = false;

    const rupiah = value => new Intl.NumberFormat('id-ID').format(Number(value || 0));
    const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
    const gatewayLabel = (gateway, profile) => gateway === 'dompetx'
        ? `DompetX · ${capitalize(profile)}`
        : 'Pakasir';

    function setSection(section) {
        document.querySelectorAll('[data-payment-panel]').forEach(panel => {
            panel.hidden = panel.dataset.paymentPanel !== section;
        });

        document.querySelectorAll('[data-payment-tab]').forEach(button => {
            const selected = button.dataset.paymentTab === section;
            button.classList.toggle('is-active', selected);
            button.setAttribute('aria-selected', selected ? 'true' : 'false');
        });

        const savebar = document.querySelector('[data-payment-savebar]');
        if (savebar) savebar.hidden = section === 'guide';
    }

    document.querySelectorAll('[data-payment-tab]').forEach(button => {
        button.addEventListener('click', () => setSection(button.dataset.paymentTab));
    });

    document.querySelectorAll('[data-open-section]').forEach(button => {
        button.addEventListener('click', () => setSection(button.dataset.openSection));
    });

    function setMerchantTab(profile) {
        document.querySelectorAll('[data-dompetx-profile]').forEach(panel => {
            panel.hidden = panel.dataset.dompetxProfile !== profile;
        });

        document.querySelectorAll('[data-merchant-tab]').forEach(button => {
            const selected = button.dataset.merchantTab === profile;
            button.classList.toggle('is-active', selected);
            button.setAttribute('aria-selected', selected ? 'true' : 'false');
        });
    }

    document.querySelectorAll('[data-merchant-tab]').forEach(button => {
        button.addEventListener('click', () => setMerchantTab(button.dataset.merchantTab));
    });

    function refreshProviderCards() {
        const selectedGateway = form?.querySelector('input[name="active_gateway"]:checked')?.value || initialGateway;
        const selectedProfile = activeProfileInput?.value || initialProfile;
        const changeSummary = document.querySelector('[data-provider-change-summary]');
        const changeCopy = document.querySelector('[data-provider-change-copy]');

        document.querySelectorAll('[data-provider-card]').forEach(card => {
            const provider = card.dataset.providerCard;
            const input = card.querySelector('input[name="active_gateway"]');
            const selected = Boolean(input?.checked);
            const persisted = provider === initialGateway;
            const profilePending = provider === 'dompetx' && selected && selectedProfile !== initialProfile;
            const ready = card.dataset.providerReady === '1';
            const status = card.querySelector(`[data-provider-status="${provider}"]`);
            const selectButton = card.querySelector(`[data-provider-select-button="${provider}"]`);
            const setupButton = card.querySelector(`[data-provider-setup-button="${provider}"]`);
            const canSelect = ready || persisted;

            card.classList.toggle('is-selected', selected);
            card.classList.toggle('is-current', persisted);

            if (status) {
                status.classList.remove('is-active', 'is-ready', 'is-warning', 'is-pending');

                if (selected && persisted && !profilePending) {
                    status.classList.add('is-active');
                    status.textContent = 'Aktif saat ini';
                } else if (selected) {
                    status.classList.add('is-pending');
                    status.textContent = 'Akan digunakan';
                } else if (ready) {
                    status.classList.add('is-ready');
                    status.textContent = 'Siap';
                } else {
                    status.classList.add('is-warning');
                    status.textContent = 'Belum siap';
                }
            }

            if (selectButton) {
                selectButton.hidden = !canSelect;
                selectButton.disabled = selected;
                selectButton.textContent = selected
                    ? (persisted && !profilePending ? 'Dipakai saat ini' : 'Dipilih')
                    : `Gunakan ${provider === 'dompetx' ? 'DompetX' : 'Pakasir'}`;
            }

            if (setupButton) setupButton.hidden = canSelect;
        });

        if (changeSummary) {
            const changed = selectedGateway !== initialGateway
                || (selectedGateway === 'dompetx' && selectedProfile !== initialProfile);
            changeSummary.hidden = !changed;
            if (changed && changeCopy) {
                changeCopy.textContent = `${gatewayLabel(initialGateway, initialProfile)} akan diganti menjadi ${gatewayLabel(selectedGateway, selectedProfile)} setelah disimpan.`;
            }
        }
    }

    document.querySelectorAll('[data-choose-provider]').forEach(button => {
        button.addEventListener('click', () => {
            const input = form?.querySelector(`input[name="active_gateway"][value="${button.dataset.chooseProvider}"]`);
            if (!input) return;

            input.checked = true;
            refreshProviderCards();
        });
    });

    function profileStateLabel(profile, ready, chosen) {
        const persisted = initialGateway === 'dompetx' && initialProfile === profile;

        if (chosen && persisted) return 'Aktif';
        if (chosen && ready) return 'Akan digunakan';
        if (persisted) return 'Aktif saat ini';
        if (ready) return 'Siap';

        const panel = document.querySelector(`[data-dompetx-profile="${profile}"]`);
        return panel?.dataset.keyStored === '1' ? 'Perlu diuji' : 'Belum disiapkan';
    }

    function refreshProfileState() {
        const selectedProfile = activeProfileInput?.value || initialProfile;

        document.querySelectorAll('[data-dompetx-profile]').forEach(panel => {
            const profile = panel.dataset.dompetxProfile;
            const ready = panel.dataset.ready === '1';
            const chosen = profile === selectedProfile;
            const persisted = initialGateway === 'dompetx' && initialProfile === profile;
            const selectButton = panel.querySelector('[data-select-profile]');
            const choiceCopy = panel.querySelector('[data-merchant-choice-copy]');
            const badge = panel.querySelector('[data-profile-badge]');
            const tabState = document.querySelector(`[data-merchant-tab-state="${profile}"]`);

            if (selectButton) {
                selectButton.hidden = !ready;
                selectButton.disabled = chosen;
                selectButton.classList.toggle('is-selected', chosen);
                selectButton.textContent = chosen
                    ? (persisted ? 'Merchant aktif' : 'Dipilih')
                    : `Gunakan ${capitalize(profile)}`;
            }

            if (choiceCopy) {
                if (chosen && persisted) {
                    choiceCopy.textContent = 'Merchant aktif untuk order baru';
                } else if (chosen && ready) {
                    choiceCopy.textContent = 'Akan digunakan setelah pengaturan disimpan';
                } else if (persisted) {
                    choiceCopy.textContent = 'Masih aktif sampai perubahan disimpan';
                } else if (ready) {
                    choiceCopy.textContent = 'Siap dipilih untuk transaksi DompetX';
                } else {
                    choiceCopy.textContent = 'Selesaikan uji konfigurasi terlebih dahulu';
                }
            }

            if (badge) {
                badge.classList.remove('is-active', 'is-ready', 'is-warning', 'is-pending');

                if (chosen && persisted) {
                    badge.classList.add('is-active');
                    badge.textContent = 'Aktif saat ini';
                } else if (chosen && ready) {
                    badge.classList.add('is-pending');
                    badge.textContent = 'Akan digunakan';
                } else if (persisted) {
                    badge.classList.add('is-active');
                    badge.textContent = 'Aktif saat ini';
                } else if (ready) {
                    badge.classList.add('is-ready');
                    badge.textContent = 'Siap digunakan';
                } else {
                    badge.classList.add('is-warning');
                    badge.textContent = panel.dataset.keyStored === '1' ? 'Perlu diuji' : 'Belum disiapkan';
                }
            }

            if (tabState) tabState.textContent = profileStateLabel(profile, ready, chosen);
        });

        const selectedPanel = document.querySelector(`[data-dompetx-profile="${selectedProfile}"]`);
        const selectedReady = selectedPanel?.dataset.ready === '1';
        const selectedHasKey = selectedPanel?.dataset.keyStored === '1';
        const overviewProfile = document.querySelector('[data-overview-dompetx-profile]');
        const overviewReadiness = document.querySelector('[data-overview-dompetx-readiness]');
        const dompetXCard = document.querySelector('[data-provider-card="dompetx"]');

        if (overviewProfile) overviewProfile.textContent = capitalize(selectedProfile);
        if (overviewReadiness) {
            overviewReadiness.textContent = selectedReady
                ? 'Siap digunakan'
                : (selectedHasKey ? 'Perlu diuji' : 'Perlu konfigurasi');
        }

        if (dompetXCard) {
            dompetXCard.dataset.providerReady = (selectedReady || initialGateway === 'dompetx') ? '1' : '0';
        }

        refreshProviderCards();
    }

    document.querySelectorAll('[data-toggle-key-input]').forEach(button => {
        button.addEventListener('click', () => {
            const profile = button.dataset.toggleKeyInput;
            const editor = document.querySelector(`[data-key-editor="${profile}"]`);
            const input = document.querySelector(`[data-api-key-input="${profile}"]`);
            if (!editor) return;

            editor.hidden = false;
            button.hidden = true;
            input?.focus();
        });
    });

    document.querySelectorAll('[data-api-key-input]').forEach(input => {
        input.addEventListener('input', () => {
            const profile = input.dataset.apiKeyInput;
            const testButton = document.querySelector(`[data-test-profile="${profile}"]`);
            const available = input.dataset.keyStored === '1' || Boolean(input.value.trim());
            if (testButton) testButton.disabled = !available;
        });
    });

    document.querySelectorAll('[data-select-profile]').forEach(button => {
        button.addEventListener('click', () => {
            const profile = button.dataset.selectProfile;
            const panel = document.querySelector(`[data-dompetx-profile="${profile}"]`);
            if (!activeProfileInput || panel?.dataset.ready !== '1') return;

            activeProfileInput.value = profile;
            refreshProfileState();
        });
    });

    function renderHealth(profile, data) {
        const panel = document.querySelector(`[data-dompetx-profile="${profile}"]`);
        if (!panel) return;

        panel.dataset.ready = data.ready ? '1' : '0';

        const readinessTitle = panel.querySelector('[data-readiness-title]');
        const result = panel.querySelector('[data-health-result]');
        const qris = panel.querySelector('[data-qris-status]');
        const customerFee = panel.querySelector('[data-customer-fee]');
        const fee = panel.querySelector('[data-fee-info]');
        const limits = panel.querySelector('[data-limit-info]');
        const checked = panel.querySelector('[data-last-check]');
        const testButton = panel.querySelector('[data-test-profile]');

        if (readinessTitle) readinessTitle.textContent = data.ready ? 'Siap menerima pembayaran' : 'Konfigurasi perlu diperiksa';
        if (result) result.hidden = false;
        if (qris) qris.textContent = data.qris_active ? 'Aktif' : 'Tidak aktif';
        if (customerFee) customerFee.textContent = data.fee_to_customer ? 'Aktif' : 'Tidak aktif';

        if (fee) {
            const percent = data.fee_percentage !== null && data.fee_percentage !== undefined
                ? `${Number(data.fee_percentage).toLocaleString('id-ID')}%`
                : '—';
            const flat = Number(data.fee_value || 0) > 0 ? ` + Rp${rupiah(data.fee_value)}` : '';
            fee.textContent = percent === '—' ? '—' : percent + flat;
        }

        if (limits) {
            limits.textContent = data.min_transaction !== null && data.max_transaction !== null
                ? `Rp${rupiah(data.min_transaction)} – Rp${rupiah(data.max_transaction)}`
                : '—';
        }

        if (checked) checked.textContent = 'Baru saja diuji';
        if (testButton) testButton.textContent = 'Uji Ulang';

        refreshProfileState();
    }

    document.querySelectorAll('[data-test-profile]').forEach(button => {
        button.addEventListener('click', async () => {
            const profile = button.dataset.testProfile;
            const input = document.querySelector(`[data-api-key-input="${profile}"]`);
            const original = button.textContent;
            button.disabled = true;
            button.textContent = 'Menguji...';

            try {
                const response = await fetch(button.dataset.testUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: JSON.stringify({ api_key: input?.value.trim() || null }),
                });

                const data = await response.json();
                renderHealth(profile, data);
                window.pushToast?.(data.message || (response.ok ? 'Konfigurasi berhasil diuji.' : 'Konfigurasi belum siap.'), response.ok && data.ready ? 'success' : 'error');
            } catch (error) {
                window.pushToast?.('Uji konfigurasi tidak dapat dijalankan.', 'error');
            } finally {
                button.disabled = false;
                if (button.textContent === 'Menguji...') button.textContent = original;
            }
        });
    });

    document.querySelectorAll('[data-copy-webhook]').forEach(button => {
        button.addEventListener('click', async () => {
            const profile = button.dataset.copyWebhook;
            const code = document.querySelector(`[data-webhook-url="${profile}"]`);
            if (!code) return;

            try {
                await navigator.clipboard.writeText(code.textContent.trim());
                const original = button.textContent;
                button.textContent = 'Tersalin';
                window.setTimeout(() => button.textContent = original, 1400);
            } catch (error) {
                window.pushToast?.('Webhook URL gagal disalin.', 'error');
            }
        });
    });

    function closeModal() {
        modal?.classList.remove('is-open');
        modal?.setAttribute('aria-hidden', 'true');
        document.documentElement.classList.remove('admin-payment-modal-open');
    }

    document.querySelectorAll('[data-close-switch]').forEach(button => button.addEventListener('click', closeModal));

    form?.addEventListener('submit', event => {
        if (switchConfirmed) return;

        const gateway = form.querySelector('input[name="active_gateway"]:checked')?.value || initialGateway;
        const profile = activeProfileInput?.value || initialProfile;
        const changed = gateway !== initialGateway
            || (gateway === 'dompetx' && profile !== initialProfile)
            || (initialGateway === 'dompetx' && gateway !== 'dompetx');

        if (!changed) return;

        event.preventDefault();
        document.getElementById('payment-switch-from').textContent = gatewayLabel(initialGateway, initialProfile);
        document.getElementById('payment-switch-to').textContent = gatewayLabel(gateway, profile);
        modal?.classList.add('is-open');
        modal?.setAttribute('aria-hidden', 'false');
        document.documentElement.classList.add('admin-payment-modal-open');
    });

    document.getElementById('confirm-payment-switch')?.addEventListener('click', () => {
        switchConfirmed = true;
        closeModal();
        form?.requestSubmit();
    });

    setSection(page?.dataset.initialSection || 'overview');
    setMerchantTab(page?.dataset.initialMerchant || initialProfile);
    refreshProviderCards();
    refreshProfileState();
})();
</script>
@endsection