@php
    $products = $products ?? collect();
    $orders = $orders ?? collect();
    $usdPerCredit = (float) ($usdPerCredit ?? 0.001);
    $usdKrwRate = (float) ($usdKrwRate ?? 1400);

    $statusLabels = [
        'pending' => '입금대기',
        'completed' => '완료',
        'cancelled' => '취소',
    ];
    $paymentMethodLabels = [
        'bank_transfer' => '계좌입금',
        'card' => '카드',
    ];

    $formatCurrency = static function (float|int|string $value): string {
        return number_format((float) $value) . '원';
    };

    $estimateCost = static function (int|float|string $credits) use ($usdPerCredit, $usdKrwRate): int {
        return (int) round(((float) $credits) * $usdPerCredit * $usdKrwRate);
    };

    $estimateMargin = static function (int|float|string $price, int|float|string $cost): int {
        return (int) round((float) $price - (float) $cost);
    };

    $estimateMarginRate = static function (int|float|string $price, int|float|string $margin): float {
        $price = (float) $price;

        if ($price <= 0) {
            return 0.0;
        }

        return round(((float) $margin / $price) * 100, 1);
    };

    $productModalMap = $products->mapWithKeys(function ($product) use ($estimateCost, $estimateMargin, $estimateMarginRate) {
        $cost = $estimateCost($product->credits);
        $margin = $estimateMargin($product->price, $cost);

        return [
            $product->id => [
                'id' => $product->id,
                'name' => $product->name,
                'credits' => (int) $product->credits,
                'price' => (float) $product->price,
                'active' => (bool) $product->active,
                'sort_order' => (int) $product->sort_order,
                'action' => route('platform.credit-topups.products.update', $product),
                'cost' => $cost,
                'margin' => $margin,
                'margin_rate' => $estimateMarginRate($product->price, $margin),
                'user_per_credit' => $product->pricePerCredit(),
            ],
        ];
    })->all();
@endphp

<x-layouts.platform-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-admin.section-header
            eyebrow="Credit topup admin"
            title="Credit 충전 관리"
            title-tag="h1"
            description="상품 가격과 충전 요청을 한 화면에서 관리합니다. 판매가는 KRW 고정이며, 예상 원가는 참고용입니다."
        >
            <div class="flex flex-wrap items-center gap-2">
                <x-ui.badge variant="soft" size="md">1 Credit = ${{ rtrim(rtrim(number_format($usdPerCredit, 3, '.', ''), '0'), '.') }}</x-ui.badge>
                <x-ui.badge variant="secondary" size="md">1 USD = {{ number_format($usdKrwRate) }} KRW</x-ui.badge>
                <x-ui.button href="{{ route('platform.admin.settings.edit') }}" variant="soft" size="sm">입금 안내 수정</x-ui.button>
                <x-ui.button type="button" variant="primary" size="sm" data-open-product-modal>상품 추가</x-ui.button>
            </div>
        </x-admin.section-header>

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="space-y-3">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div class="space-y-1">
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Products</div>
                        <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">Credit 상품 관리</h2>
                        <p class="text-sm c-muted">상품명, 지급 Credit, 판매가격, 활성 여부만 기본 화면에 노출합니다. 정렬은 고급 설정으로 이동했습니다.</p>
                    </div>
                    <p class="max-w-xl text-xs c-muted">
                        예상 기준 원가 = 지급 Credit × 1 Credit당 USD × 기준 환율. 마진 표시는 가격 책정 참고용이며 AI 사용 과금과는 무관합니다.
                    </p>
                </div>

                @if ($products->isEmpty())
                    <x-ui.empty-state title="등록된 상품이 없습니다" description="상품 추가 버튼으로 첫 충전 상품을 등록해 주세요." />
                @else
                    <div class="overflow-hidden rounded-[var(--radius-xl)] border border-muted bg-base">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-muted text-sm">
                                <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">Credit</th>
                                        <th class="px-4 py-3">판매가</th>
                                        <th class="px-4 py-3">1 Credit당 체감가</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 text-right">관리</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-muted">
                                    @foreach ($products as $product)
                                        @php
                                            $expectedCost = $estimateCost($product->credits);
                                            $expectedMargin = $estimateMargin($product->price, $expectedCost);
                                            $expectedMarginRate = $estimateMarginRate($product->price, $expectedMargin);
                                            $userPerCredit = $product->pricePerCredit();
                                        @endphp
                                        <tr class="{{ $product->active ? 'bg-base' : 'bg-surface/40' }}">
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">{{ $product->name }}</div>
                                                <div class="text-xs c-muted">KRW 고정</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">{{ number_format((int) $product->credits) }}</div>
                                                <div class="text-xs c-muted">지급 Credit</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">{{ $formatCurrency($product->price) }}</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">{{ number_format($userPerCredit) }}원</div>
                                                <div class="text-xs c-muted">크레딧당 가격</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">약 {{ $formatCurrency($expectedCost) }}</div>
                                                <div class="text-xs c-muted">예상 마진 {{ $formatCurrency($expectedMargin) }}</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <div class="font-semibold c-main">{{ number_format($expectedMarginRate, 1) }}%</div>
                                            </td>
                                            <td class="px-4 py-4">
                                                <x-ui.badge size="sm" variant="{{ $product->active ? 'success' : 'secondary' }}">
                                                    {{ $product->active ? '활성' : '비활성' }}
                                                </x-ui.badge>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <x-ui.button
                                                    type="button"
                                                    variant="soft"
                                                    size="sm"
                                                    data-open-product-modal
                                                    data-product-id="{{ $product->id }}"
                                                >
                                                    수정
                                                </x-ui.button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>
        </x-ui.card>

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="space-y-4">
                <div class="space-y-1">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Orders</div>
                    <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">Credit 충전 요청 관리</h2>
                </div>

                <div class="table-container bg-card">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>신청일</th>
                                <th>테넌트 / 신청자</th>
                                <th>상품</th>
                                <th>결제금액</th>
                                <th>지급 Credit</th>
                                <th>상태</th>
                                <th>관리</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($orders as $order)
                                <tr>
                                    <td>{{ $order->created_at?->format('Y.m.d H:i') }}</td>
                                    <td>
                                        <div class="font-semibold c-main">{{ $order->tenant?->name ?? $order->tenant_id }}</div>
                                        <div class="text-xs c-muted">{{ $order->user?->name ?? '-' }}</div>
                                    </td>
                                    <td>
                                        <div class="font-semibold c-main">{{ $order->product_name_snapshot }}</div>
                                        <div class="text-xs c-muted">{{ $paymentMethodLabels[$order->payment_method] ?? $order->payment_method }}</div>
                                    </td>
                                    <td>{{ $formatCurrency($order->amount) }}</td>
                                    <td>{{ number_format((int) $order->credits) }}</td>
                                    <td>
                                        <x-ui.badge size="sm" variant="{{ $order->status === 'completed' ? 'success' : ($order->status === 'cancelled' ? 'secondary' : 'warning') }}">
                                            {{ $statusLabels[$order->status] ?? $order->status }}
                                        </x-ui.badge>
                                    </td>
                                    <td>
                                        @if ($order->status === 'pending')
                                            <div class="flex flex-wrap gap-2">
                                                <form method="POST" action="{{ route('platform.credit-topups.orders.approve', $order) }}">
                                                    @csrf
                                                    <x-ui.button type="submit" variant="primary" size="sm">승인</x-ui.button>
                                                </form>
                                                <form method="POST" action="{{ route('platform.credit-topups.orders.cancel', $order) }}">
                                                    @csrf
                                                    <x-ui.button type="submit" variant="soft" size="sm">취소</x-ui.button>
                                                </form>
                                            </div>
                                        @else
                                            <div class="text-xs c-muted">
                                                @if ($order->status === 'completed')
                                                    {{ $order->approvedBy?->name ?? '-' }} 승인
                                                @elseif ($order->status === 'cancelled')
                                                    {{ $order->cancelledBy?->name ?? '-' }} 취소
                                                @else
                                                    -
                                                @endif
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 py-10 text-center text-sm c-muted">
                                        등록된 충전 요청이 없습니다.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div>
                    <x-ui.pagination :paginator="$orders" />
                </div>
            </div>
        </x-ui.card>
    </div>

    <dialog
        id="product-modal"
        class="fixed left-1/2 top-1/2 z-50 m-0 w-[min(760px,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"
    >
        <form method="POST" action="{{ route('platform.credit-topups.products.store') }}" id="product-form" class="space-y-6 p-6 md:p-8">
            @csrf
            <input type="hidden" name="product_modal_mode" id="product_modal_mode" value="{{ old('product_modal_mode', 'add') }}">
            <input type="hidden" name="product_id" id="product_id" value="{{ old('product_id', '') }}">
            <input type="hidden" name="_method" id="product_method" value="">
            <input type="hidden" name="currency" value="KRW">

            <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">Credit 상품</div>
                    <h3 id="product-modal-title" class="text-2xl font-extrabold tracking-[-0.04em] c-main">상품 추가</h3>
                    <p class="text-sm c-muted">상품명, 지급 Credit, 판매가격, 활성 여부만 기본 화면에서 관리합니다.</p>
                </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-product-modal>
                    닫기
                </button>
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <x-ui.input floating name="name" id="product_name" label="상품명" value="{{ old('name', '') }}" required />
                <x-ui.input type="number" floating name="credits" id="product_credits" label="지급 Credit" min="1" step="1" value="{{ old('credits', '') }}" required />
            </div>

            <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
                <x-ui.input type="number" floating name="price" id="product_price" label="판매가격" min="0.01" step="0.01" value="{{ old('price', '') }}" required />
                <div class="flex items-end">
                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface px-4 py-3">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">통화</div>
                        <div class="mt-1 text-lg font-black tracking-[-0.04em] c-main">KRW 고정</div>
                    </div>
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <div class="space-y-2 rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                    <div class="text-sm font-semibold c-main">활성 여부</div>
                    <label class="flex items-center gap-2 text-sm c-main">
                        <input type="checkbox" name="active" id="product_active" value="1" @checked(old('active', true))>
                        활성
                    </label>
                    <p class="text-xs c-muted">비활성화한 상품은 사용자 화면에서 노출되지 않습니다.</p>
                </div>

                <div class="space-y-2 rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                    <div class="text-sm font-semibold c-main">예상 원가 / 마진</div>
                    <div class="space-y-1">
                        <div class="text-xs c-muted">예상 기준 원가</div>
                        <div id="product-preview-cost" class="text-2xl font-black tracking-[-0.04em] c-main">약 0원</div>
                    </div>
                    <div class="space-y-1">
                        <div class="text-xs c-muted">예상 마진</div>
                        <div id="product-preview-margin" class="text-xl font-extrabold tracking-[-0.04em] c-main">0원</div>
                    </div>
                    <div class="space-y-1">
                        <div class="text-xs c-muted">예상 마진율</div>
                        <div id="product-preview-margin-rate" class="text-xl font-extrabold tracking-[-0.04em] c-main">0.0%</div>
                    </div>
                    <p class="text-xs leading-5 c-muted">
                        Credit 환산 기준과 기준 환율을 사용한 참고값입니다. 실제 AI 사용 원가와는 별개입니다.
                    </p>
                </div>
            </div>

            <div class="rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                <div class="text-sm font-semibold c-main">1 Credit당 사용자 체감 가격</div>
                <div id="product-preview-user-per-credit" class="mt-2 text-2xl font-black tracking-[-0.04em] c-main">0원</div>
                <p class="mt-2 text-xs leading-5 c-muted">
                    판매가를 지급 Credit으로 나눈 값입니다. 실제 AI 과금과는 무관한 판매 단가 참고용입니다.
                </p>
            </div>

            <details class="rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                <summary class="cursor-pointer text-sm font-semibold c-main">고급 설정</summary>
                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <x-ui.input type="number" floating name="sort_order" id="product_sort_order" label="정렬" min="0" step="1" value="{{ old('sort_order', 0) }}" />
                </div>
            </details>

            <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-product-modal>
                    취소
                </button>
                <x-ui.button type="submit" variant="primary" size="sm">저장</x-ui.button>
            </div>
        </form>
    </dialog>

    <script>
        (() => {
            const products = @json($productModalMap);
            const hasErrors = @json(isset($errors) && $errors->any());
            const oldMode = @json(old('product_modal_mode'));
            const oldProductId = @json(old('product_id'));

            const modal = document.getElementById('product-modal');
            const form = document.getElementById('product-form');
            const title = document.getElementById('product-modal-title');
            const methodInput = document.getElementById('product_method');
            const productIdInput = document.getElementById('product_id');
            const modeInput = document.getElementById('product_modal_mode');
            const nameInput = document.getElementById('product_name');
            const creditsInput = document.getElementById('product_credits');
            const priceInput = document.getElementById('product_price');
            const activeInput = document.getElementById('product_active');
            const sortOrderInput = document.getElementById('product_sort_order');
            const costNode = document.getElementById('product-preview-cost');
            const marginNode = document.getElementById('product-preview-margin');
            const marginRateNode = document.getElementById('product-preview-margin-rate');
            const userPerCreditNode = document.getElementById('product-preview-user-per-credit');
            const usdPerCredit = @json($usdPerCredit);
            const usdKrwRate = @json($usdKrwRate);

            const addButton = document.querySelector('[data-open-product-modal]:not([data-product-id])');
            const editButtons = document.querySelectorAll('[data-open-product-modal][data-product-id]');

            const toNumber = (value) => {
                const parsed = parseFloat(value);
                return Number.isFinite(parsed) ? parsed : 0;
            };

            const formatWon = (value) => new Intl.NumberFormat('ko-KR').format(Math.round(value)) + '원';
            const pricePerCredit = (price, credits) => (credits > 0 ? Math.round(price / credits) : 0);

            const updatePreview = () => {
                const credits = toNumber(creditsInput.value);
                const price = toNumber(priceInput.value);
                const cost = Math.round(credits * usdPerCredit * usdKrwRate);
                const margin = Math.round(price - cost);
                const marginRate = price > 0 ? ((margin / price) * 100) : 0;
                const userPerCredit = pricePerCredit(price, credits);

                costNode.textContent = '약 ' + formatWon(cost);
                marginNode.textContent = formatWon(margin);
                marginRateNode.textContent = marginRate.toFixed(1) + '%';
                userPerCreditNode.textContent = formatWon(userPerCredit);
            };

            const resetForm = () => {
                form.reset();
                form.action = @json(route('platform.credit-topups.products.store'));
                methodInput.value = '';
                modeInput.value = 'add';
                productIdInput.value = '';
                title.textContent = '상품 추가';
                activeInput.checked = true;
                sortOrderInput.value = '0';
                nameInput.value = '';
                creditsInput.value = '';
                priceInput.value = '';
                updatePreview();
            };

            const openModal = ({ productId = null, preserveValues = false } = {}) => {
                const product = productId ? products[String(productId)] : null;

                if (! preserveValues) {
                    resetForm();
                }

                if (product) {
                    form.action = product.action;
                    methodInput.value = 'PUT';
                    modeInput.value = 'edit';
                    productIdInput.value = product.id;
                    title.textContent = '상품 수정';

                    if (! preserveValues) {
                        nameInput.value = product.name;
                        creditsInput.value = product.credits;
                        priceInput.value = product.price;
                        activeInput.checked = Boolean(product.active);
                        sortOrderInput.value = product.sort_order;
                    }

                    updatePreview();
                }

                modal.showModal();
            };

            addButton?.addEventListener('click', () => openModal());

            editButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    openModal({ productId: button.dataset.productId });
                });
            });

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

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

            [creditsInput, priceInput].forEach((input) => {
                input.addEventListener('input', updatePreview);
            });

            form.addEventListener('submit', () => {
                updatePreview();
            });

            if (hasErrors) {
                if (oldMode === 'edit' && oldProductId && products[String(oldProductId)]) {
                    openModal({ productId: oldProductId, preserveValues: true });
                } else {
                    modeInput.value = oldMode || 'add';
                    title.textContent = modeInput.value === 'edit' ? '상품 수정' : '상품 추가';
                    updatePreview();
                    modal.showModal();
                }
            } else {
                updatePreview();
            }
        })();
    </script>
</x-layouts.platform-admin>