@php
    $pricingRules = $pricingRules ?? collect();
    $models = $models ?? collect();
    $policy = $policy ?? null;
    $defaultImageModelId = $defaultImageModelId ?? null;
    $usdKrwRate = $usdKrwRate ?? 1400;
    $usdKrwRateUpdatedAt = $usdKrwRateUpdatedAt ?? null;

    $modeLabels = [
        'token_rates' => 'Token',
        'unit_rates' => '단위',
        'image' => '이미지',
        'megapixel' => 'Megapixel',
        'duration' => 'Duration',
    ];

    $pricingRuleModalMap = $pricingRules->mapWithKeys(function ($rule) {
        return [
            $rule->id => [
                'id' => $rule->id,
                'action' => route('platform.ai-credits.pricing.update', $rule),
                'provider' => $rule->provider,
                'model' => $rule->model,
                'type' => $rule->type,
                'calculation_mode' => $rule->calculation_mode,
                'active' => (bool) $rule->active,
                'sort_order' => (int) $rule->sort_order,
                'pricing_data' => (array) ($rule->pricing_data ?? []),
            ],
        ];
    })->all();

    $modelModalMap = $models->mapWithKeys(function ($model) {
        return [
            $model->id => [
                'id' => $model->id,
                'action' => route('platform.ai-credits.models.update', $model),
                'provider' => $model->provider,
                'model' => $model->model,
                'type' => $model->type,
                'label' => $model->label,
                'active' => (bool) $model->active,
                'sort_order' => (int) $model->sort_order,
            ],
        ];
    })->all();

    $imageModels = $models->where('type', 'image')->values();
    $typeLabels = [
        'text' => '텍스트',
        'image' => '이미지',
    ];

    $formatUsd = static function (float $value): string {
        $precision = $value >= 0.01 ? 2 : 4;

        return '$' . number_format($value, $precision, '.', ',');
    };

    $estimateCredits = static function (?float $providerCostUsd) use ($usdPerCredit, $defaultMarkup): int {
        $providerCostUsd = $providerCostUsd ?? 0.0;
        $billableUsd = max(0.0, $providerCostUsd) * max(0.0, (float) $defaultMarkup);

        return $billableUsd <= 0 ? 0 : (int) ceil($billableUsd / max(0.00000001, (float) $usdPerCredit));
    };
@endphp

<x-layouts.platform-admin title="AI Credit 관리" header="AI 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 ($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="AI credit policy"
            title="AI Credit 관리"
            title-tag="h1"
            description="정책과 Provider / Model 가격표를 DB에서 직접 관리합니다. 변경 사항은 새로운 AI 요청부터 적용됩니다."
        >
        <x-ui.badge variant="primary" size="md">1 Credit = ${{ rtrim(rtrim(number_format((float) $usdPerCredit, 3, '.', ''), '0'), '.') }}</x-ui.badge>
        <x-ui.badge variant="secondary" size="md">기본 마크업 {{ number_format((float) $defaultMarkup, 1) }}x</x-ui.badge>
        <x-ui.badge variant="soft" size="md">1 USD = {{ number_format((float) $usdKrwRate) }} KRW</x-ui.badge>
        <x-ui.button href="{{ route('platform.ai-plans.index') }}" variant="soft" size="sm">플랜관리</x-ui.button>
    </x-admin.section-header>

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="space-y-5">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div class="space-y-1">
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">AI Credit 정책</div>
                        <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">환산 기준</h2>
                        <p class="text-sm c-muted">현재 정책값이 실제 AI 과금 계산에 사용되며, 상품 마진 계산에도 참고됩니다.</p>
                    </div>
                    <p class="max-w-xl text-xs c-muted">
                        1 Credit당 USD와 기본 Markup은 새 요청부터 적용됩니다. 환율은 아래 버튼으로 최신화할 수 있습니다.
                    </p>
                </div>

                <div class="grid gap-4 md:grid-cols-2">
                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">1 Credit당 USD</div>
                        <div class="mt-2 text-2xl font-black tracking-[-0.04em] c-main">${{ rtrim(rtrim(number_format((float) $usdPerCredit, 3, '.', ''), '0'), '.') }}</div>
                    </div>
                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">기본 Markup</div>
                        <div class="mt-2 text-2xl font-black tracking-[-0.04em] c-main">{{ number_format((float) $defaultMarkup, 1) }}x</div>
                    </div>
                </div>

                <div class="grid gap-4 md:grid-cols-[repeat(2,minmax(0,1fr))_auto]">
                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">현재 기준 환율</div>
                        <div class="mt-2 text-2xl font-black tracking-[-0.04em] c-main">1 USD = {{ number_format((float) $usdKrwRate) }} KRW</div>
                    </div>
                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">최근 업데이트 시간</div>
                        <div class="mt-2 text-2xl font-black tracking-[-0.04em] c-main">
                            {{ $usdKrwRateUpdatedAt?->format('Y.m.d H:i') ?? '-' }}
                        </div>
                    </div>
                    <form method="POST" action="{{ route('platform.ai-credits.exchange-rate.refresh') }}" class="flex items-end">
                        @csrf
                        <x-ui.button type="submit" variant="soft" size="md">
                            최신 환율 불러오기
                        </x-ui.button>
                    </form>
                </div>
            </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">AI links</div>
                    <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">AI 정보 링크</h2>
                    <p class="text-sm c-muted">관리자가 모델 정책과 외부 가격 정보를 빠르게 확인할 수 있는 참고 영역입니다.</p>
                </div>

                <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                    <a
                        href="https://developers.openai.com/api/docs/pricing"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="group rounded-[var(--radius-xl)] border border-muted bg-surface p-4 transition hover:-translate-y-0.5 hover:border-primary/40 hover:bg-primary/5"
                    >
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">OpenAI</div>
                        <div class="mt-2 text-base font-extrabold tracking-[-0.03em] c-main">GPT Pricing</div>
                        <div class="mt-1 text-sm c-muted">텍스트 모델 가격표를 확인합니다.</div>
                    </a>

                    <a
                        href="https://bfl.ai/pricing?category=flux.2"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="group rounded-[var(--radius-xl)] border border-muted bg-surface p-4 transition hover:-translate-y-0.5 hover:border-primary/40 hover:bg-primary/5"
                    >
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">BFL</div>
                        <div class="mt-2 text-base font-extrabold tracking-[-0.03em] c-main">FLUX.2 Pricing</div>
                        <div class="mt-1 text-sm c-muted">이미지 모델과 과금 기준을 확인합니다.</div>
                    </a>
                </div>
            </div>
        </x-ui.card>

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="space-y-4">
                <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">Model catalog</div>
                        <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">Provider / Model 관리</h2>
                        <p class="text-sm c-muted">텍스트와 이미지 모델을 같은 카탈로그에서 관리하고, 기본 이미지 모델은 별도 설정으로 지정합니다.</p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <x-ui.button
                            type="button"
                            variant="primary"
                            size="sm"
                            data-open-model-modal
                        >
                            모델 추가
                        </x-ui.button>
                    </div>
                </div>

                <form method="POST" action="{{ route('platform.ai-credits.default-image-model.update') }}" class="grid gap-3 rounded-[var(--radius-xl)] border border-muted bg-surface p-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
                    @csrf
                    <div class="space-y-2">
                        <div class="text-sm font-semibold c-main">기본 이미지 모델</div>
                        <select name="default_image_model_id" class="input input-md w-full">
                            <option value="">선택 안 함</option>
                            @foreach ($imageModels as $imageModel)
                                <option value="{{ $imageModel->id }}" @selected((int) $defaultImageModelId === (int) $imageModel->id)>
                                    {{ $imageModel->displayName() }}{{ $imageModel->active ? '' : ' (비활성)' }}
                                </option>
                            @endforeach
                        </select>
                        <p class="text-xs c-muted">활성화된 이미지 모델만 기본값으로 지정할 수 있습니다.</p>
                    </div>
                    <x-ui.button type="submit" variant="soft" size="sm">저장</x-ui.button>
                </form>

                <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">Provider / Model</th>
                                    <th class="px-4 py-3">Type</th>
                                    <th class="px-4 py-3">Label</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">
                                @forelse ($models as $model)
                                    <tr class="{{ $model->active ? 'bg-base' : 'bg-surface/40' }}">
                                        <td class="px-4 py-4">
                                            <div class="font-semibold c-main">{{ $model->provider }}/{{ $model->model }}</div>
                                            <div class="text-xs c-muted">sort {{ (int) $model->sort_order }}</div>
                                        </td>
                                        <td class="px-4 py-4">
                                            <span class="inline-flex rounded-full border border-muted bg-surface px-2.5 py-1 text-xs font-semibold c-main">
                                                {{ $typeLabels[$model->type] ?? $model->type }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-4">
                                            <div class="font-semibold c-main">{{ $model->label ?: '-' }}</div>
                                        </td>
                                        <td class="px-4 py-4">
                                            <x-ui.badge size="sm" variant="{{ $model->active ? 'success' : 'secondary' }}">
                                                {{ $model->active ? '활성' : '비활성' }}
                                            </x-ui.badge>
                                        </td>
                                        <td class="px-4 py-4">
                                            @if ((int) $defaultImageModelId === (int) $model->id)
                                                <x-ui.badge size="sm" variant="primary">기본</x-ui.badge>
                                            @else
                                                <span class="text-xs c-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-4 text-right">
                                            <x-ui.button
                                                type="button"
                                                variant="soft"
                                                size="sm"
                                                data-open-model-modal
                                                data-model-id="{{ $model->id }}"
                                            >
                                                수정
                                            </x-ui.button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-4 py-10 text-center text-sm c-muted">
                                            등록된 모델이 없습니다.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </x-ui.card>

        <x-ui.card padded class="border border-muted bg-card shadow-sm">
            <div class="space-y-4">
                <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">Provider pricing</div>
                        <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">Provider / Model 가격표</h2>
                        <p class="text-sm c-muted">활성화된 가격표만 계산에 반영되며, JSON은 관리자에게 노출하지 않습니다.</p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <x-ui.button
                            type="button"
                            variant="primary"
                            size="sm"
                            data-open-pricing-modal
                        >
                            가격표 추가
                        </x-ui.button>
                    </div>
                </div>

                <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">Provider / Model</th>
                                    <th class="px-4 py-3">과금 방식</th>
                                    <th class="px-4 py-3">Input</th>
                                    <th class="px-4 py-3">Cached input</th>
                                    <th class="px-4 py-3">Output</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">
                                @forelse ($pricingRules as $rule)
                                    @php
                                        $pricingData = (array) ($rule->pricing_data ?? []);
                                        $inputRate = null;
                                        $cachedInputRate = null;
                                        $outputRate = null;

                                        if ($rule->calculation_mode === 'token_rates') {
                                            $inputRate = (float) data_get($pricingData, 'input_usd_per_million_tokens', 0);
                                            $cachedInputRate = data_get($pricingData, 'cached_input_usd_per_million_tokens');
                                            $outputRate = (float) data_get($pricingData, 'output_usd_per_million_tokens', 0);
                                        } elseif ($rule->calculation_mode === 'unit_rates') {
                                            $inputRate = (float) data_get($pricingData, 'unit_usd', 0);
                                        } elseif ($rule->calculation_mode === 'image') {
                                            $inputRate = (float) data_get($pricingData, 'price_per_image_usd', 0);
                                        } elseif ($rule->calculation_mode === 'megapixel') {
                                            $inputRate = (float) data_get($pricingData, 'price_per_first_megapixel_usd', data_get($pricingData, 'price_per_megapixel_usd', 0));
                                            $cachedInputRate = (float) data_get($pricingData, 'price_per_additional_megapixel_usd', data_get($pricingData, 'price_per_megapixel_usd', 0));
                                            $outputRate = (float) data_get($pricingData, 'price_per_reference_image_megapixel_usd', data_get($pricingData, 'price_per_megapixel_usd', 0));
                                        } elseif ($rule->calculation_mode === 'duration') {
                                            $inputRate = (float) data_get($pricingData, 'price_per_second_usd', 0);
                                        }
                                    @endphp

                                    <tr class="{{ $rule->active ? 'bg-base' : 'bg-surface/40' }}">
                                        <td class="px-4 py-4">
                                            <div class="font-semibold c-main">{{ $rule->provider }}/{{ $rule->model }}</div>
                                            @if ($rule->type !== 'text')
                                                <div class="text-xs c-muted">{{ $rule->type }}</div>
                                            @endif
                                        </td>
                                        <td class="px-4 py-4">
                                            <span class="inline-flex rounded-full border border-muted bg-surface px-2.5 py-1 text-xs font-semibold c-main">
                                                {{ $modeLabels[$rule->calculation_mode] ?? $rule->calculation_mode }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-4">
                                            @if ($inputRate !== null)
                                                @if ($rule->calculation_mode === 'megapixel')
                                                    <div class="text-[11px] font-bold uppercase tracking-[0.16em] c-subtle">First MP</div>
                                                @endif
                                                <div class="font-semibold c-main">{{ $formatUsd((float) $inputRate) }}</div>
                                                <div class="text-xs c-muted">(≈ {{ number_format($estimateCredits((float) $inputRate)) }} Credit)</div>
                                            @else
                                                <div class="text-xs c-muted">-</div>
                                            @endif
                                        </td>
                                        <td class="px-4 py-4">
                                            @if ($rule->calculation_mode === 'token_rates')
                                                @if (is_numeric($cachedInputRate))
                                                    <div class="font-semibold c-main">{{ $formatUsd((float) $cachedInputRate) }}</div>
                                                    <div class="text-xs c-muted">(≈ {{ number_format($estimateCredits((float) $cachedInputRate)) }} Credit)</div>
                                                @else
                                                    <div class="text-xs c-muted">-</div>
                                                @endif
                                            @elseif ($rule->calculation_mode === 'megapixel')
                                                @if (is_numeric($cachedInputRate))
                                                    <div class="text-[11px] font-bold uppercase tracking-[0.16em] c-subtle">Additional MP</div>
                                                    <div class="font-semibold c-main">{{ $formatUsd((float) $cachedInputRate) }}</div>
                                                    <div class="text-xs c-muted">(≈ {{ number_format($estimateCredits((float) $cachedInputRate)) }} Credit)</div>
                                                @else
                                                    <div class="text-xs c-muted">-</div>
                                                @endif
                                            @else
                                                <div class="text-xs c-muted">-</div>
                                            @endif
                                        </td>
                                        <td class="px-4 py-4">
                                            @if ($outputRate !== null)
                                                @if ($rule->calculation_mode === 'megapixel')
                                                    <div class="text-[11px] font-bold uppercase tracking-[0.16em] c-subtle">Reference Image MP</div>
                                                @endif
                                                <div class="font-semibold c-main">{{ $formatUsd((float) $outputRate) }}</div>
                                                <div class="text-xs c-muted">(≈ {{ number_format($estimateCredits((float) $outputRate)) }} Credit)</div>
                                            @else
                                                <div class="text-xs c-muted">-</div>
                                            @endif
                                        </td>
                                        <td class="px-4 py-4">
                                            <x-ui.badge size="sm" variant="{{ $rule->active ? 'success' : 'secondary' }}">
                                                {{ $rule->active ? '활성' : '비활성' }}
                                            </x-ui.badge>
                                        </td>
                                        <td class="px-4 py-4 text-right">
                                            <x-ui.button
                                                type="button"
                                                variant="soft"
                                                size="sm"
                                                data-open-pricing-modal
                                                data-pricing-rule-id="{{ $rule->id }}"
                                            >
                                                수정
                                            </x-ui.button>
                                        </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>
            </div>
        </x-ui.card>
    </div>

    <dialog
        id="model-modal"
        class="w-[min(720px,calc(100vw-1.5rem))] rounded-[28px] border border-muted bg-card p-0 shadow-2xl backdrop:bg-black/50"
    >
        <form method="POST" action="{{ route('platform.ai-credits.models.store') }}" id="model-form" class="space-y-6 p-6 md:p-8">
            @csrf
            <input type="hidden" name="pricing_data" value="">
            <input type="hidden" name="_method" id="model_method" value="">
            <input type="hidden" name="model_id" id="model_id" value="{{ old('model_id', '') }}">

            <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">Provider / Model 관리</div>
                    <h3 id="model-modal-title" class="text-2xl font-extrabold tracking-[-0.04em] c-main">모델 추가</h3>
                    <p class="text-sm c-muted">이미지 모델은 여기서 등록하고, 가격은 아래 가격표에서 연결합니다.</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-model-modal>
                    닫기
                </button>
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <x-ui.input floating name="provider" id="model_provider" label="Provider" value="{{ old('provider', 'openai') }}" required />
                <x-ui.input floating name="model" id="model_model" label="Model" value="{{ old('model', '') }}" required />
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <x-ui.input floating name="type" id="model_type" label="Type" value="{{ old('type', 'image') }}" required help="예: text, image" />
                <x-ui.input floating name="sort_order" id="model_sort_order" type="number" label="Sort order" min="0" step="1" value="{{ old('sort_order', 0) }}" />
            </div>

            <x-ui.input floating name="label" id="model_label" label="Label" value="{{ old('label', '') }}" />

            <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                <label class="flex items-center gap-2 text-sm c-main">
                    <input type="checkbox" name="active" id="model_active" value="1" @checked(old('active', true))>
                    사용 중
                </label>
                <p class="mt-2 text-xs c-muted">비활성화된 모델은 기본 이미지 모델로 선택할 수 없습니다.</p>
            </div>

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

    <dialog
        id="pricing-modal"
        class="w-[min(720px,calc(100vw-1.5rem))] rounded-[28px] border border-muted bg-card p-0 shadow-2xl backdrop:bg-black/50"
    >
        <form method="POST" action="{{ route('platform.ai-credits.pricing.store') }}" id="pricing-rule-form" class="space-y-6 p-6 md:p-8">
            @csrf
            <input type="hidden" name="pricing_data" id="pricing_data" value="{{ old('pricing_data', '') }}">
            <input type="hidden" name="pricing_rule_id" id="pricing_rule_id" value="{{ old('pricing_rule_id', '') }}">
            <input type="hidden" name="type" id="pricing_type" value="{{ old('type', 'text') }}">
            <input type="hidden" name="sort_order" id="pricing_sort_order" value="{{ old('sort_order', 0) }}">
            <input type="hidden" name="_method" id="pricing_method" value="">

            <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">Provider / Model 가격표</div>
                    <h3 id="pricing-modal-title" class="text-2xl font-extrabold tracking-[-0.04em] c-main">가격표 추가</h3>
                    <p class="text-sm c-muted">관리자는 JSON 없이 일반 입력으로만 수정하면 됩니다.</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-pricing-modal>
                    닫기
                </button>
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <x-ui.input floating name="provider" id="pricing_provider" label="Provider" value="{{ old('provider', 'openai') }}" required />
                <x-ui.input floating name="model" id="pricing_model" label="Model" value="{{ old('model', '') }}" required />
            </div>

            <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
                <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>
                    <select name="calculation_mode" id="pricing_calculation_mode" class="input input-md w-full" required>
                        <option value="token_rates" @selected(old('calculation_mode', 'token_rates') === 'token_rates')>Token rates</option>
                        <option value="unit_rates" @selected(old('calculation_mode') === 'unit_rates')>Unit rates</option>
                        <option value="image" @selected(old('calculation_mode') === 'image')>Image</option>
                        <option value="megapixel" @selected(old('calculation_mode') === 'megapixel')>Megapixel</option>
                        <option value="duration" @selected(old('calculation_mode') === 'duration')>Duration</option>
                    </select>
                    <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>
                    <label class="flex items-center gap-2 text-sm c-main">
                        <input type="checkbox" name="active" id="pricing_active" value="1" @checked(old('active', true))>
                        사용 중
                    </label>
                    <p class="text-xs c-muted">비활성화하면 새 요청에서 사용되지 않습니다.</p>
                </div>
            </div>

            <div class="space-y-4">
                <div data-pricing-section="token_rates" class="space-y-4 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">Token rates</div>
                    <div class="grid gap-4 md:grid-cols-3">
                        <x-ui.input type="number" floating name="pricing_token_input" id="pricing_token_input" label="Input / 1M tokens" min="0.00000001" step="0.00000001" />
                        <x-ui.input type="number" floating name="pricing_token_cached_input" id="pricing_token_cached_input" label="Cached Input / 1M tokens (선택)" min="0.00000001" step="0.00000001" />
                        <x-ui.input type="number" floating name="pricing_token_output" id="pricing_token_output" label="Output / 1M tokens" min="0.00000001" step="0.00000001" />
                    </div>
                </div>

                <div data-pricing-section="unit_rates" class="hidden space-y-4 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">Unit rates</div>
                    <x-ui.input type="number" floating name="pricing_unit_usd" id="pricing_unit_usd" label="Unit price" min="0.00000001" step="0.00000001" />
                </div>

                <div data-pricing-section="image" class="hidden space-y-4 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">Image pricing</div>
                    <x-ui.input type="number" floating name="pricing_image_usd" id="pricing_image_usd" label="이미지당 가격" min="0.00000001" step="0.00000001" />
                </div>

                <div data-pricing-section="megapixel" class="hidden space-y-4 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">Megapixel pricing</div>
                    <div class="grid gap-4 md:grid-cols-3">
                        <x-ui.input type="number" floating name="pricing_megapixel_first_usd" id="pricing_megapixel_first_usd" label="First MP" min="0.00000001" step="0.00000001" />
                        <x-ui.input type="number" floating name="pricing_megapixel_additional_usd" id="pricing_megapixel_additional_usd" label="Additional MP" min="0.00000001" step="0.00000001" />
                        <x-ui.input type="number" floating name="pricing_megapixel_reference_usd" id="pricing_megapixel_reference_usd" label="Reference Image MP" min="0.00000001" step="0.00000001" />
                    </div>
                </div>

                <div data-pricing-section="duration" class="hidden space-y-4 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">Duration pricing</div>
                    <x-ui.input type="number" floating name="pricing_second_usd" id="pricing_second_usd" label="초당 가격" min="0.00000001" step="0.00000001" />
                </div>
            </div>

            <details class="rounded-[var(--radius-xl)] border border-muted bg-surface 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 floating name="type" label="Type" value="{{ old('type', 'text') }}" />
                    <x-ui.input type="number" floating name="sort_order" label="Sort order" 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-pricing-modal>
                    취소
                </button>
                <x-ui.button type="submit" variant="primary" size="sm">저장</x-ui.button>
            </div>
        </form>
    </dialog>

<script>
        (() => {
            const rules = @json($pricingRuleModalMap);
            const models = @json($modelModalMap);
            const hasErrors = @json($errors->any());
            const oldPricingRuleId = @json(old('pricing_rule_id'));
            const oldModelId = @json(old('model_id'));

            const modelModal = document.getElementById('model-modal');
            const modelForm = document.getElementById('model-form');
            const modelTitle = document.getElementById('model-modal-title');
            const modelMethodInput = document.getElementById('model_method');
            const modelIdInput = document.getElementById('model_id');
            const modelActiveCheckbox = document.getElementById('model_active');

            const modal = document.getElementById('pricing-modal');
            const form = document.getElementById('pricing-rule-form');
            const title = document.getElementById('pricing-modal-title');
            const methodInput = document.getElementById('pricing_method');
            const ruleIdInput = document.getElementById('pricing_rule_id');
            const pricingDataInput = document.getElementById('pricing_data');
            const modeSelect = document.getElementById('pricing_calculation_mode');
            const activeCheckbox = document.getElementById('pricing_active');

            const fieldMap = {
                token_rates: [
                    document.getElementById('pricing_token_input'),
                    document.getElementById('pricing_token_cached_input'),
                    document.getElementById('pricing_token_output'),
                ],
                unit_rates: [document.getElementById('pricing_unit_usd')],
                image: [document.getElementById('pricing_image_usd')],
                megapixel: [
                    document.getElementById('pricing_megapixel_first_usd'),
                    document.getElementById('pricing_megapixel_additional_usd'),
                    document.getElementById('pricing_megapixel_reference_usd'),
                ],
                duration: [document.getElementById('pricing_second_usd')],
            };

            const sectionMap = {
                token_rates: document.querySelector('[data-pricing-section="token_rates"]'),
                unit_rates: document.querySelector('[data-pricing-section="unit_rates"]'),
                image: document.querySelector('[data-pricing-section="image"]'),
                megapixel: document.querySelector('[data-pricing-section="megapixel"]'),
                duration: document.querySelector('[data-pricing-section="duration"]'),
            };

            const addButton = document.querySelector('[data-open-pricing-modal]:not([data-pricing-rule-id])');
            const editButtons = document.querySelectorAll('[data-open-pricing-modal][data-pricing-rule-id]');
            const addModelButton = document.querySelector('[data-open-model-modal]:not([data-model-id])');
            const editModelButtons = document.querySelectorAll('[data-open-model-modal][data-model-id]');

            const openModelModal = ({ mode = 'add', model = null, preserveValues = false } = {}) => {
                const isEdit = mode === 'edit' && model !== null;
                const modelData = model ? models[String(model)] : null;

                modelForm.action = isEdit && modelData ? modelData.action : @json(route('platform.ai-credits.models.store'));
                modelMethodInput.value = isEdit ? 'PUT' : '';
                modelIdInput.value = isEdit && modelData ? modelData.id : '';
                modelTitle.textContent = isEdit ? '모델 수정' : '모델 추가';

                if (! preserveValues) {
                    modelForm.reset();
                    document.getElementById('model_provider').value = modelData?.provider ?? 'openai';
                    document.getElementById('model_model').value = modelData?.model ?? '';
                    document.getElementById('model_type').value = modelData?.type ?? 'image';
                    document.getElementById('model_label').value = modelData?.label ?? '';
                    document.getElementById('model_sort_order').value = modelData?.sort_order ?? 0;
                    modelActiveCheckbox.checked = modelData ? Boolean(modelData.active) : true;
                }

                modelModal.showModal();
            };

            const setRequiredState = (mode) => {
                Object.entries(fieldMap).forEach(([key, inputs]) => {
                    const visible = key === mode;
                    const section = sectionMap[key];

                    if (section) {
                        section.classList.toggle('hidden', ! visible);
                    }

                    inputs.forEach((input) => {
                        if (! input) {
                            return;
                        }

                        if (visible && input.id !== 'pricing_token_cached_input') {
                            input.setAttribute('required', 'required');
                        } else {
                            input.removeAttribute('required');
                        }
                    });
                });
            };

            const clearValues = () => {
                Object.values(fieldMap).flat().forEach((input) => {
                    if (input) {
                        input.value = '';
                    }
                });
            };

            const setValuesForMode = (mode, pricingData = {}) => {
                clearValues();

                if (mode === 'token_rates') {
                    document.getElementById('pricing_token_input').value = pricingData.input_usd_per_million_tokens ?? '';
                    document.getElementById('pricing_token_cached_input').value = pricingData.cached_input_usd_per_million_tokens ?? '';
                    document.getElementById('pricing_token_output').value = pricingData.output_usd_per_million_tokens ?? '';
                } else if (mode === 'unit_rates') {
                    document.getElementById('pricing_unit_usd').value = pricingData.unit_usd ?? '';
                } else if (mode === 'image') {
                    document.getElementById('pricing_image_usd').value = pricingData.price_per_image_usd ?? '';
                } else if (mode === 'megapixel') {
                    document.getElementById('pricing_megapixel_first_usd').value = pricingData.price_per_first_megapixel_usd ?? pricingData.price_per_megapixel_usd ?? '';
                    document.getElementById('pricing_megapixel_additional_usd').value = pricingData.price_per_additional_megapixel_usd ?? pricingData.price_per_megapixel_usd ?? '';
                    document.getElementById('pricing_megapixel_reference_usd').value = pricingData.price_per_reference_image_megapixel_usd ?? pricingData.price_per_megapixel_usd ?? '';
                } else if (mode === 'duration') {
                    document.getElementById('pricing_second_usd').value = pricingData.price_per_second_usd ?? '';
                }
            };

            const collectPricingData = (mode) => {
                const numberValue = (id) => {
                    const value = parseFloat(document.getElementById(id).value);
                    return Number.isFinite(value) ? value : null;
                };

                if (mode === 'token_rates') {
                    return Object.fromEntries(Object.entries({
                        input_usd_per_million_tokens: numberValue('pricing_token_input'),
                        cached_input_usd_per_million_tokens: numberValue('pricing_token_cached_input'),
                        output_usd_per_million_tokens: numberValue('pricing_token_output'),
                    }).filter(([, value]) => value !== null));
                }

                if (mode === 'unit_rates') {
                    return {
                        unit_usd: numberValue('pricing_unit_usd'),
                    };
                }

                if (mode === 'image') {
                    return {
                        price_per_image_usd: numberValue('pricing_image_usd'),
                    };
                }

                if (mode === 'megapixel') {
                    return {
                        price_per_first_megapixel_usd: numberValue('pricing_megapixel_first_usd'),
                        price_per_additional_megapixel_usd: numberValue('pricing_megapixel_additional_usd'),
                        price_per_reference_image_megapixel_usd: numberValue('pricing_megapixel_reference_usd'),
                    };
                }

                return {
                    price_per_second_usd: numberValue('pricing_second_usd'),
                };
            };

            const openModal = ({ mode = 'add', rule = null, preserveValues = false } = {}) => {
                const isEdit = mode === 'edit' && rule !== null;
                const pricingRule = rule ? rules[String(rule)] : null;

                form.action = isEdit && pricingRule ? pricingRule.action : @json(route('platform.ai-credits.pricing.store'));
                methodInput.value = isEdit ? 'PUT' : '';
                ruleIdInput.value = isEdit && pricingRule ? pricingRule.id : '';
                title.textContent = isEdit ? '가격표 수정' : '가격표 추가';

                if (! preserveValues) {
                    form.reset();
                    activeCheckbox.checked = true;
                    document.getElementById('pricing_provider').value = pricingRule?.provider ?? 'openai';
                    document.getElementById('pricing_model').value = pricingRule?.model ?? '';
                    document.getElementById('pricing_type').value = pricingRule?.type ?? 'text';
                    document.getElementById('pricing_sort_order').value = pricingRule?.sort_order ?? 0;
                    modeSelect.value = pricingRule?.calculation_mode ?? 'token_rates';
                    activeCheckbox.checked = pricingRule ? Boolean(pricingRule.active) : true;
                    setValuesForMode(modeSelect.value, pricingRule?.pricing_data ?? {});
                }

                setRequiredState(modeSelect.value);
                modal.showModal();
            };

            addButton?.addEventListener('click', () => openModal({ mode: 'add' }));
            addModelButton?.addEventListener('click', () => openModelModal({ mode: 'add' }));

            editButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    openModal({ mode: 'edit', rule: button.dataset.pricingRuleId });
                });
            });

            editModelButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    openModelModal({ mode: 'edit', model: button.dataset.modelId });
                });
            });

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

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

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

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

            modeSelect.addEventListener('change', () => {
                setRequiredState(modeSelect.value);
                setValuesForMode(modeSelect.value);
            });

            form.addEventListener('submit', () => {
                pricingDataInput.value = JSON.stringify(collectPricingData(modeSelect.value));
                ruleIdInput.value = ruleIdInput.value || '';
            });

            modelForm.addEventListener('submit', () => {
                modelIdInput.value = modelIdInput.value || '';
            });

            if (hasErrors) {
                if (oldPricingRuleId && rules[String(oldPricingRuleId)]) {
                    openModal({ mode: 'edit', rule: oldPricingRuleId, preserveValues: true });
                } else if (oldModelId && models[String(oldModelId)]) {
                    openModelModal({ mode: 'edit', model: oldModelId, preserveValues: true });
                } else {
                    setRequiredState(modeSelect.value);
                    modal.showModal();
                }
            } else {
                setRequiredState(modeSelect.value);
            }
        })();
    </script>
</x-layouts.platform-admin>