@php
    $products = $products ?? collect();
    $orders = $orders ?? collect();
    $tenantAiCredit = $tenantAiCredit ?? [];
    $pendingOrder = $pendingOrder ?? null;
    $paymentInfo = $paymentInfo ?? null;

    $monthlyLimit = (int) ($tenantAiCredit['monthly_credit_limit'] ?? 0);
    $monthlyUsed = (int) ($tenantAiCredit['monthly_credit_used'] ?? 0);
    $monthlyRemaining = (int) ($tenantAiCredit['monthly_credit_remaining'] ?? 0);
    $purchasedRemaining = (int) ($tenantAiCredit['purchased_credit_remaining'] ?? 0);
    $totalRemaining = (int) ($tenantAiCredit['total_credit_remaining'] ?? 0);
    $monthlyPeriodLabel = null;

    if (! empty($tenantAiCredit['period_start']) && ! empty($tenantAiCredit['period_end'])) {
        $monthlyPeriodLabel = $tenantAiCredit['period_start']->format('Y.m.d') . ' ~ ' . $tenantAiCredit['period_end']->format('Y.m.d');
    }

    $selectedProductId = (int) ($selectedProductId ?? old('credit_product_id') ?? $pendingOrder?->credit_product_id ?? 0);
    $selectedProduct = $products->firstWhere('id', $selectedProductId) ?? $products->first();
    $pendingDepositorName = data_get($pendingOrder?->metadata, 'depositor_name');
    $storeAction = tenant_admin_url(null, 'credit-topups');

    if ($selectedProduct) {
        $selectedProductId = (int) $selectedProduct->id;
    }

    $statusLabels = [
        'pending' => '입금 대기',
        'completed' => '충전 완료',
        'cancelled' => '취소',
    ];

    $statusVariants = [
        'pending' => 'warning',
        'completed' => 'success',
        'cancelled' => 'secondary',
    ];

    $formatWon = static fn (int|float|string $value): string => number_format((float) $value) . '원';

    $productMap = $products->mapWithKeys(static function ($product) {
        return [
            $product->id => [
                'id' => (int) $product->id,
                'name' => $product->name,
                'credits' => (int) $product->credits,
                'price' => (int) round((float) $product->price),
                'currency' => (string) $product->currency,
            ],
        ];
    })->all();
@endphp

<x-layouts.tenant-admin title="Credit 충전" header="Credit 충전">
    <div class="space-y-6">
        @if (session('status'))
            <x-ui.alert variant="success" title="알림" dismiss-after="3000" class="border border-success-soft bg-success-soft">
                {{ session('status') }}
            </x-ui.alert>
        @endif

        @if (isset($errors) && $errors->any())
            <x-ui.alert variant="danger" title="입력 오류">
                <ul class="m-0 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </x-ui.alert>
        @endif

        <x-tenant::admin.section-header
            eyebrow="Credit topup"
            title="Credit 충전"
            title-tag="h1"
            description="월 Credit이 먼저 차감되며, 소진 후 충전 Credit이 사용됩니다. 충전 Credit은 추가 충전 및 이월이 가능합니다."
        />

        <div class="overflow-x-auto pb-2 -mx-1 px-1 lg:overflow-visible lg:px-0 lg:mx-0">
            <div class="flex min-w-max gap-4 lg:grid lg:min-w-0 lg:grid-cols-[1.35fr_1fr_1fr]">
            <div class="w-[min(18rem,82vw)] shrink-0 rounded-[1.5rem] border border-primary/20 bg-brand-gradient p-5 text-[rgb(var(--color-on-primary-rgb))] shadow-sm lg:w-auto">
                <div class="text-xs font-bold uppercase tracking-[0.2em] opacity-80">총 사용 가능 Credit</div>
                <div class="mt-2 text-3xl font-black tracking-[-0.05em]">{{ number_format($totalRemaining) }}</div>
                <div class="mt-2 text-sm opacity-85">월 잔여 Credit + 충전 Credit</div>
            </div>

            <x-ui.card padded class="w-[min(18rem,82vw)] shrink-0 border border-muted bg-card shadow-sm lg:w-auto">
                <div class="space-y-2">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">월 Credit</div>
                    <div class="flex items-end gap-1 text-3xl font-black tracking-[-0.05em] c-main">
                        <span>{{ number_format($monthlyRemaining) }}</span>
                        <span class="pb-[0.12em] text-sm font-semibold c-muted">/{{ number_format($monthlyLimit) }}</span>
                    </div>
                    <div class="text-sm c-muted">{{ $monthlyPeriodLabel ? '기간 ' . $monthlyPeriodLabel : '월 제공 Credit 기간' }}</div>
                </div>
            </x-ui.card>

            <x-ui.card padded class="w-[min(18rem,82vw)] shrink-0 border border-muted bg-card shadow-sm lg:w-auto">
                <div class="space-y-2">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">충전 Credit</div>
                    <div class="text-3xl font-black tracking-[-0.05em] c-main">{{ number_format($purchasedRemaining) }}</div>
                    <div class="text-sm c-muted">관리자 충전 및 주문 승인으로 누적되는 잔액</div>
                </div>
            </x-ui.card>
            </div>
        </div>

        @if ($pendingOrder)
            <x-ui.card padded class="border border-muted bg-card shadow-sm">
                <div class="space-y-4">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div class="space-y-1">
                            <h3 class="text-lg font-extrabold tracking-[-0.04em] c-main">입금 대기</h3>
                            <p class="text-xs c-muted">입금이 확인되면 Credit이 반영됩니다.</p>
                        </div>
                        <x-ui.badge size="sm" variant="warning">입금 대기</x-ui.badge>
                    </div>

                    <div class="rounded-[1.5rem] border border-muted bg-surface p-4 sm:p-5">
                        <div class="flex flex-wrap items-end justify-between gap-3">
                            <div>
                                <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">입금하실 금액</div>
                                <div class="mt-2 text-2xl font-black tracking-[-0.05em] c-main sm:text-2xl">{{ $formatWon($pendingOrder->amount) }}</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">지급 예정</div>
                                <div class="mt-2 text-lg font-black tracking-[-0.04em] c-main sm:text-2xl">{{ number_format((int) $pendingOrder->credits) }} Credit</div>
                            </div>
                        </div>

                        <div class="mt-4 grid gap-2 rounded-[1.25rem] border border-muted bg-base p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:gap-4 sm:p-4">
                            <div class="space-y-1">
                                <div class="text-xs font-semibold c-muted">입금자명</div>
                                <div class="text-lg font-black tracking-[-0.04em] c-main">{{ $pendingDepositorName ?: '-' }}</div>
                            </div>
                        </div>

                        <div class="mt-4 rounded-[1.25rem] border border-muted bg-base p-3 sm:p-4">
                            <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">입금 계좌</div>
                            <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
                                <div class="space-y-1">
                                    <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                                        <div class="text-lg font-black tracking-[-0.04em] c-main">{{ $paymentInfo?->credit_topup_bank_name ?: '-' }}</div>
                                        <div class="text-lg font-black tracking-[-0.04em] c-main" data-account-number>
                                            {{ $paymentInfo?->credit_topup_account_number ?: '-' }}
                                        </div>
                                    </div>
                                    <div class="text-lg font-black tracking-[-0.04em] c-main">예금주 {{ $paymentInfo?->credit_topup_account_holder ?: '-' }}</div>
                                </div>
                                @if ($paymentInfo?->credit_topup_account_number)
                                    <x-ui.button type="button" variant="soft" size="sm" data-copy-account-number>
                                        계좌번호 복사
                                    </x-ui.button>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="rounded-[1.25rem] border border-muted bg-base p-3">
                        <div class="text-xs font-semibold c-main">※ 위 입금자명과 정확한 금액으로 입금해 주세요.</div>
                    </div>
                </div>
            </x-ui.card>
        @endif

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="space-y-1">
                    <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">상품 선택</h2>
                    <p class="text-sm c-muted">원하는 Credit 상품을 선택하면 충전 신청 화면이 표시됩니다.</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.badge size="md" variant="soft">결제방법: 계좌이체</x-ui.badge>
                </div>
            </div>

            @if ($products->isEmpty())
                <div class="mt-6">
                    <x-ui.empty-state title="등록된 충전 상품이 없습니다" description="잠시 후 다시 확인해 주세요." />
                </div>
            @else
                <form method="POST" action="{{ $storeAction }}" class="mt-6 space-y-6" data-topup-form id="credit-topup-form">
                    @csrf

                    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach ($products as $product)
                            <label
                                class="group block cursor-pointer"
                                data-product-card
                                data-product-id="{{ $product->id }}"
                                data-open-topup-confirm
                            >
                                <input
                                    type="radio"
                                    name="credit_product_id"
                                    value="{{ $product->id }}"
                                    class="sr-only peer"
                                    @checked((int) $selectedProductId === (int) $product->id)
                                >

                                <div class="h-full rounded-[1.5rem] border border-muted bg-surface p-4 transition-all duration-150 peer-checked:border-primary peer-checked:bg-primary-soft group-hover:border-primary/70 group-hover:shadow-[0_0_0_1px_rgba(59,130,246,0.18)]">
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="min-w-0">
                                            <div class="truncate text-lg font-extrabold tracking-[-0.04em] c-main">
                                                {{ $product->name }}
                                            </div>
                                        </div>

                                        <div class="shrink-0 text-right">
                                            <div class="text-lg font-black tracking-[-0.04em] c-main">
                                                {{ $formatWon($product->price) }}
                                            </div>
                                            <div class="mt-1 text-xs font-semibold c-muted">
                                                1 Credit 당 약 {{ number_format($product->pricePerCredit()) }}원
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </form>

                <dialog
                    id="topup-confirm-modal"
                    class="fixed left-1/2 top-1/2 z-50 m-0 w-[min(520px,calc(100vw-1.5rem))] -translate-x-1/2 -translate-y-1/2 rounded-[28px] border border-muted bg-card p-0 shadow-2xl backdrop:bg-black/50"
                >
                    <div class="space-y-6 p-6 md:p-8">
                        <div class="flex items-start justify-between gap-4">
                            <div class="space-y-1">
                                <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">확인</div>
                                <h3 class="text-2xl font-extrabold tracking-[-0.04em] c-main">충전 신청 확인</h3>
                            </div>
                            <button type="button" class="rounded-full border border-muted px-3 py-2 text-sm font-semibold c-main hover:bg-surface" data-close-topup-confirm>
                                닫기
                            </button>
                        </div>

                        <div class="space-y-3 rounded-[1.5rem] border border-muted bg-surface p-5 text-sm">
                            <div class="flex items-start justify-between gap-4">
                                <div class="text-xs font-semibold c-muted">지급 Credit</div>
                                <div id="confirm-product-credits" class="font-black tracking-[-0.03em] c-main">{{ $selectedProduct ? number_format((int) $selectedProduct->credits) : '0' }}</div>
                            </div>
                            <div class="flex items-start justify-between gap-4">
                                <div class="text-xs font-semibold c-muted">결제금액</div>
                                <div id="confirm-product-price" class="font-black tracking-[-0.03em] c-main">{{ $selectedProduct ? $formatWon($selectedProduct->price) : '0원' }}</div>
                            </div>
                            <div class="flex items-start justify-between gap-4">
                                <div class="text-xs font-semibold c-muted">결제방법</div>
                                <div class="font-black tracking-[-0.03em] c-main">계좌이체</div>
                            </div>
                        </div>

                        <div class="rounded-[1.5rem] border border-muted bg-surface p-5">
                            <x-ui.input
                                id="depositor_name"
                                name="depositor_name"
                                label="입금자명"
                                placeholder="실제 입금자명을 입력해 주세요."
                                value="{{ old('depositor_name') }}"
                                required
                                autocomplete="off"
                                form="credit-topup-form"
                            />
                        </div>

                        <p class="text-xs leading-5 c-muted">
                            입력한 입금자명으로 꼭 입금해 주세요. 실제 입금 명의와 다르면 확인이 늦어질 수 있습니다.
                        </p>

                        <div class="flex items-center justify-end gap-3">
                            <button type="button" class="rounded-xl border border-muted px-4 py-2 text-sm font-semibold c-main hover:bg-surface" data-close-topup-confirm>
                                취소
                            </button>
                            <x-ui.button type="submit" variant="primary" size="md" form="credit-topup-form" data-confirm-topup-submit>
                                충전 신청
                            </x-ui.button>
                        </div>
                    </div>
                </dialog>
            @endif
        </x-ui.card>

        <div class="space-y-4">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="space-y-1">
                    <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">충전내역</h2>
                    <p class="text-sm c-muted">최근 Credit 충전 신청과 처리 상태를 확인할 수 있습니다.</p>
                </div>
            </div>

            @if ($orders->isEmpty())
                <div class="mt-6">
                    <x-ui.empty-state title="충전 신청 내역이 없습니다" description="첫 충전 신청을 완료하면 여기에서 확인할 수 있습니다." />
                </div>
            @else
                <div class="table-container bg-card">
                    <div class="overflow-x-auto">
                        <table class="table table-hover">
                            <thead class="bg-surface/70 text-left text-xs font-bold uppercase tracking-[0.12em] c-subtle">
                                <tr>
                                    <th class="px-4 py-3">신청일</th>
                                    <th class="px-4 py-3">처리일</th>
                                    <th class="px-4 py-3">상품</th>
                                    <th class="px-4 py-3">결제금액</th>
                                    <th class="px-4 py-3">지급 Credit</th>
                                    <th class="px-4 py-3">상태</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-muted">
                                @foreach ($orders as $order)
                                    <tr>
                                        <td class="px-4 py-4 whitespace-nowrap">{{ $order->created_at?->format('Y.m.d H:i') }}</td>
                                        <td class="px-4 py-4 whitespace-nowrap">{{ $order->approved_at?->format('Y.m.d H:i') ?? '-' }}</td>
                                        <td class="px-4 py-4">
                                            <div class="font-semibold c-main">{{ $order->product_name_snapshot }}</div>
                                            <div class="text-xs c-muted">{{ $order->payment_method === 'bank_transfer' ? '계좌이체' : ($order->payment_method ?? '-') }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">{{ $formatWon($order->amount) }}</td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="font-semibold c-main">{{ number_format((int) $order->credits) }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <x-ui.badge size="sm" variant="{{ $statusVariants[$order->status] ?? 'secondary' }}">
                                                {{ $statusLabels[$order->status] ?? $order->status }}
                                            </x-ui.badge>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <script>
        (() => {
            const productMap = @json($productMap);
            const initialSelectedId = @json($selectedProductId);
            const hasErrors = @json(isset($errors) && $errors->any());
            const oldDepositorName = @json(old('depositor_name'));
            const form = document.querySelector('[data-topup-form]');
            const productRadios = Array.from(document.querySelectorAll('input[name="credit_product_id"]'));
            const productCards = Array.from(document.querySelectorAll('[data-open-topup-confirm]'));
            const modal = document.getElementById('topup-confirm-modal');
            const confirmSubmitButton = document.querySelector('[data-confirm-topup-submit]');
            const confirmCreditsNode = document.getElementById('confirm-product-credits');
            const confirmPriceNode = document.getElementById('confirm-product-price');
            const depositorNameInput = document.getElementById('depositor_name');
            const copyButton = document.querySelector('[data-copy-account-number]');
            const accountNumberNode = document.querySelector('[data-account-number]');

            const formatWon = (value) => new Intl.NumberFormat('ko-KR').format(Math.round(Number(value) || 0)) + '원';
            const selectedRadio = () => productRadios.find((radio) => radio.checked) ?? productRadios[0] ?? null;

            const updateConfirm = (productId) => {
                const product = productMap[String(productId)];

                if (! product) {
                    confirmCreditsNode.textContent = '0';
                    confirmPriceNode.textContent = '0원';
                    return;
                }

                confirmCreditsNode.textContent = new Intl.NumberFormat('ko-KR').format(product.credits);
                confirmPriceNode.textContent = formatWon(product.price);
            };

            productRadios.forEach((radio) => {
                radio.addEventListener('change', () => updateConfirm(radio.value));
            });

            updateConfirm(initialSelectedId || (selectedRadio()?.value ?? ''));

            const openModalForProduct = (productId) => {
                const targetRadio = productRadios.find((radio) => radio.value === String(productId)) ?? selectedRadio();

                if (targetRadio) {
                    targetRadio.checked = true;
                    updateConfirm(targetRadio.value);
                }

                modal?.showModal();
                if (depositorNameInput) {
                    depositorNameInput.focus({ preventScroll: true });
                }
            };

            productCards.forEach((card) => {
                card.addEventListener('click', (event) => {
                    event.preventDefault();
                    openModalForProduct(card.dataset.productId);
                });
            });

            if (modal && form) {
                const openModal = () => {
                    const currentRadio = selectedRadio();

                    if (currentRadio && ! currentRadio.checked) {
                        currentRadio.checked = true;
                    }

                    updateConfirm(currentRadio?.value ?? '');
                    modal.showModal();
                    if (depositorNameInput) {
                        depositorNameInput.focus({ preventScroll: true });
                    }
                };

                if (hasErrors) {
                    window.setTimeout(() => {
                        openModal();
                    }, 0);
                } else if (oldDepositorName) {
                    window.setTimeout(() => {
                        openModal();
                    }, 0);
                }

                modal.querySelectorAll('[data-close-topup-confirm]').forEach((button) => {
                    button.addEventListener('click', () => modal.close());
                });

                modal.addEventListener('click', (event) => {
                    if (event.target === modal) {
                        modal.close();
                    }
                });

                form.addEventListener('submit', () => {
                    if (confirmSubmitButton) {
                        confirmSubmitButton.disabled = true;
                        confirmSubmitButton.textContent = '신청 중';
                    }
                    modal.close();
                });
            }

            if (copyButton && accountNumberNode) {
                copyButton.addEventListener('click', async () => {
                    const text = accountNumberNode.textContent?.trim() || '';

                    if (! text || text === '-') {
                        return;
                    }

                    try {
                        await navigator.clipboard.writeText(text);
                        copyButton.textContent = '복사됨';
                        window.setTimeout(() => {
                            copyButton.textContent = '복사';
                        }, 1200);
                    } catch (_) {
                        const textarea = document.createElement('textarea');
                        textarea.value = text;
                        textarea.setAttribute('readonly', 'readonly');
                        textarea.style.position = 'absolute';
                        textarea.style.left = '-9999px';
                        document.body.appendChild(textarea);
                        textarea.select();
                        document.execCommand('copy');
                        document.body.removeChild(textarea);
                        copyButton.textContent = '복사됨';
                        window.setTimeout(() => {
                            copyButton.textContent = '복사';
                        }, 1200);
                    }
                });
            }
        })();
    </script>
</x-layouts.tenant-admin>