@php
    $total = $logs->total();
    $formatUsd = function ($value): string {
        return '$' . rtrim(rtrim(number_format((float) $value, 8, '.', ''), '0'), '.');
    };
    $formatUsdFixed3 = function ($value): string {
        return '$' . number_format((float) $value, 3, '.', '');
    };
    $formatMp = function ($value): string {
        return rtrim(rtrim(number_format((float) $value, 2, '.', ''), '0'), '.') . ' MP';
    };
    $formatUsageSummary = function ($log): string {
        $usageData = (array) ($log->usage_data ?? []);
        $type = (string) ($log->type ?? '');

        if ($type === 'image' || data_get($usageData, 'image_count') !== null || data_get($usageData, 'megapixels') !== null) {
            $count = (int) (data_get($usageData, 'image_count') ?? data_get($usageData, 'count') ?? 1);
            $megapixels = data_get($usageData, 'megapixels');

            if ($megapixels !== null) {
                return number_format($count) . '장 · ' . rtrim(rtrim(number_format((float) $megapixels, 2, '.', ''), '0'), '.') . ' MP';
            }

            return number_format($count) . '장';
        }

        if ($type === 'video' || data_get($usageData, 'duration_seconds') !== null) {
            $duration = data_get($usageData, 'duration_seconds');
            $resolution = data_get($usageData, 'resolution');

            $parts = [];
            if ($duration !== null) {
                $parts[] = rtrim(rtrim(number_format((float) $duration, 1, '.', ''), '0'), '.') . '초';
            }
            if ($resolution) {
                $parts[] = (string) $resolution;
            }

            return $parts !== [] ? implode(' · ', $parts) : 'Video';
        }

        $inputTokens = (int) data_get($usageData, 'input_tokens', $log->input_tokens ?? 0);
        $cachedInputTokens = (int) data_get($usageData, 'cached_input_tokens', 0);
        $outputTokens = (int) data_get($usageData, 'output_tokens', $log->output_tokens ?? 0);

        if ($cachedInputTokens > 0) {
            return 'Input ' . number_format($inputTokens) . ' / Cached ' . number_format($cachedInputTokens) . ' / Output ' . number_format($outputTokens);
        }

        return 'Input ' . number_format($inputTokens) . ' / Output ' . number_format($outputTokens);
    };
    $formatTypeLabel = function ($log): string {
        return match ((string) ($log->type ?? '')) {
            'text' => 'Text',
            'image' => 'Image',
            'video' => 'Video',
            'audio' => 'Audio',
            default => (string) ($log->type ?? '-'),
        };
    };
@endphp

<x-layouts.platform-admin title="AI 사용내역" header="AI 사용내역" :hide-header-title="true">
    <div class="space-y-6">
        <x-admin.section-header
            eyebrow="AI usage logs"
            title="AI 사용내역"
            title-tag="h1"
            description="테넌트별 AI 호출 원가, 과금 기준, 차감 Credit을 한곳에서 확인합니다."
        >
            <x-ui.badge variant="primary" size="md">전체 {{ $total }}</x-ui.badge>
        </x-admin.section-header>

        <form method="GET" class="flex flex-col gap-3 sm:flex-row">
            <x-ui.input name="q" value="{{ $search }}" placeholder="테넌트 ID, 이름, 사용자, 모델, 플랜 검색" class="min-w-0 flex-1" />
            <x-ui.button type="submit" variant="soft">검색</x-ui.button>
        </form>

        @if ($logs->isEmpty())
            <x-ui.empty-state title="사용내역이 없습니다" description="AI 글쓰기 호출이 기록되면 여기에 표시됩니다." />
        @else
            <div class="table-container bg-card">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>일시</th>
                            <th>테넌트</th>
                            <th>사용자</th>
                            <th>유형</th>
                            <th>Provider / Model</th>
                            <th>사용량</th>
                            <th>API 원가</th>
                            <th>과금 기준</th>
                            <th>차감 Credit</th>
                            <th>상세</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $log)
                            @php
                                $pricing = (array) data_get($log->usage_data, 'pricing', []);
                                $quote = (array) data_get($log->usage_data, 'quote', []);
                                $quoteUsage = (array) data_get($quote, 'usage_data', []);
                                $isImageLog = (string) ($log->type ?? '') === 'image';
                                $imageQuote = $isImageLog && $quoteUsage !== [];
                                $creditTransaction = $log->creditTransaction;
                                $billableUsd = (float) ($log->billable_cost_usd ?? 0);
                                $providerUsd = (float) ($log->provider_cost_usd ?? 0);
                                $markup = data_get($pricing, 'markup');
                                $usdPerCredit = data_get($pricing, 'usd_per_credit');
                                $quoteWidth = data_get($quoteUsage, 'width', data_get($log->usage_data, 'width'));
                                $quoteHeight = data_get($quoteUsage, 'height', data_get($log->usage_data, 'height'));
                                $quoteOutputMp = data_get($quoteUsage, 'output_mp', data_get($log->usage_data, 'megapixels'));
                                $quoteFirstMpUsd = data_get($quoteUsage, 'first_mp_usd');
                                $quoteAdditionalMp = data_get($quoteUsage, 'additional_mp');
                                $quoteAdditionalMpUsd = data_get($quoteUsage, 'additional_mp_usd');
                                $quoteReferenceMp = data_get($quoteUsage, 'reference_mp');
                                $quoteReferenceMpUsd = data_get($quoteUsage, 'reference_mp_usd');
                                $quoteProviderUsd = data_get($quoteUsage, 'provider_cost_usd', $providerUsd);
                            @endphp
                            <tr>
                                <td class="align-top text-sm c-muted">{{ $log->created_at?->format('Y.m.d H:i') }}</td>
                                <td class="align-top">
                                    <div class="space-y-1">
                                        <div class="font-semibold c-main">{{ $log->tenant?->name ?? $log->tenant_id }}</div>
                                        <div class="text-xs c-muted">{{ $log->tenant_id }}</div>
                                    </div>
                                </td>
                                <td class="align-top text-sm c-muted">
                                    {{ $log->user?->name ?? '-' }}
                                    <div class="text-xs">{{ $log->user?->email ?? '' }}</div>
                                </td>
                                <td class="align-top text-sm c-muted">{{ $formatTypeLabel($log) }}</td>
                                <td class="align-top text-sm c-muted">
                                    {{ $log->provider }}/{{ $log->model }}
                                </td>
                                <td class="align-top text-sm c-muted">{{ $formatUsageSummary($log) }}</td>
                                <td class="align-top text-sm c-muted">{{ $formatUsd($providerUsd) }}</td>
                                <td class="align-top text-sm c-muted">
                                    <div>{{ $markup !== null ? rtrim(rtrim(number_format((float) $markup, 2, '.', ''), '0'), '.') . 'x' : '-' }}</div>
                                    <div class="text-xs">{{ $usdPerCredit !== null ? $formatUsd($usdPerCredit) . ' / Credit' : '-' }}</div>
                                </td>
                                <td class="align-top text-sm c-muted">
                                    <div>{{ number_format((int) ($log->credits_used ?? 0)) }} Credit</div>
                                    <div class="text-xs">
                                        월 {{ number_format((int) ($log->monthly_credits_used ?? 0)) }}
                                        · 충전 {{ number_format((int) ($log->purchased_credits_used ?? 0)) }}
                                    </div>
                                </td>
                                <td class="align-top">
                                    <button
                                        type="button"
                                        class="inline-flex items-center rounded-full border border-muted bg-base px-3 py-2 text-sm font-semibold c-main transition hover:bg-surface"
                                        data-ai-usage-toggle
                                        data-ai-usage-target="ai-usage-details-{{ $log->id }}"
                                        aria-expanded="false"
                                        aria-controls="ai-usage-details-{{ $log->id }}"
                                    >
                                        상세 보기
                                    </button>
                                </td>
                            </tr>
                            <tr id="ai-usage-details-{{ $log->id }}" class="hidden bg-surface/40" data-ai-usage-details-row>
                                <td colspan="10" class="px-4 pb-4 pt-0">
                                    <div class="rounded-2xl border border-muted bg-base p-4 shadow-sm md:p-5">
                                        @if ($isImageLog)
                                            <div class="grid gap-4 lg:grid-cols-3">
                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">생성 정보</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ number_format((int) data_get($quoteUsage, 'image_count', data_get($log->usage_data, 'image_count', 1))) }}장</div>
                                                        <div>{{ $quoteWidth && $quoteHeight ? $quoteWidth . ' × ' . $quoteHeight : '-' }}</div>
                                                        <div>
                                                            @if ($quoteOutputMp !== null)
                                                                {{ $formatMp($quoteOutputMp) }}
                                                            @elseif (data_get($log->usage_data, 'output_width') && data_get($log->usage_data, 'output_height'))
                                                                {{ $formatMp(((int) data_get($log->usage_data, 'output_width') * (int) data_get($log->usage_data, 'output_height')) / 1_048_576) }}
                                                            @else
                                                                -
                                                            @endif
                                                        </div>
                                                    </div>
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">가격 계산</div>
                                                    @if ($imageQuote)
                                                        <div class="space-y-2 text-sm">
                                                            <div class="flex items-start justify-between gap-4">
                                                                <span class="text-sm font-medium c-muted">First MP</span>
                                                                <span class="whitespace-nowrap text-sm font-semibold c-main">{{ $quoteFirstMpUsd !== null ? $formatUsd($quoteFirstMpUsd) : '-' }}</span>
                                                            </div>
                                                            <div class="flex items-start justify-between gap-4">
                                                                <span class="text-sm font-medium c-muted">Additional MP</span>
                                                                <span class="whitespace-nowrap text-right text-sm font-semibold c-main">
                                                                    {{ $quoteAdditionalMp !== null ? $formatMp($quoteAdditionalMp) : '-' }}
                                                                    · {{ $quoteAdditionalMpUsd !== null ? $formatUsdFixed3($quoteAdditionalMpUsd) : '-' }}
                                                                </span>
                                                            </div>
                                                            <div class="flex items-start justify-between gap-4">
                                                                <span class="text-sm font-medium c-muted">Reference Image</span>
                                                                <span class="whitespace-nowrap text-right text-sm font-semibold c-main">
                                                                    {{ $quoteReferenceMp !== null ? $formatMp($quoteReferenceMp) : '-' }}
                                                                    · {{ $quoteReferenceMpUsd !== null ? $formatUsdFixed3($quoteReferenceMpUsd) : '-' }}
                                                                </span>
                                                            </div>
                                                            <div class="flex items-start justify-between gap-4 border-t border-muted pt-3">
                                                                <span class="text-sm font-medium c-muted">API 원가</span>
                                                                <span class="whitespace-nowrap text-sm font-semibold c-main">{{ $formatUsd($quoteProviderUsd ?? $providerUsd) }}</span>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="text-sm c-muted">계산 스냅샷이 없는 과거 로그입니다.</div>
                                                        <div class="pt-1 text-sm font-semibold c-main">{{ $formatUsd($quoteProviderUsd ?? $providerUsd) }}</div>
                                                    @endif
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Credit 차감</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ number_format((int) ($log->credits_used ?? 0)) }} Credit</div>
                                                        <div class="text-sm font-medium c-muted">
                                                            월 {{ number_format((int) ($log->monthly_credits_used ?? 0)) }}
                                                            · 충전 {{ number_format((int) ($log->purchased_credits_used ?? 0)) }}
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>

                                            <div class="mt-4 grid gap-4 lg:grid-cols-2">
                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">과금 기준</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ $markup !== null ? rtrim(rtrim(number_format((float) $markup, 2, '.', ''), '0'), '.') . 'x' : '-' }}</div>
                                                        <div>{{ $usdPerCredit !== null ? $formatUsd($usdPerCredit) . ' / Credit' : '-' }}</div>
                                                        <div class="pt-1 text-sm c-muted">과금 원가 {{ $formatUsd($billableUsd) }}</div>
                                                    </div>
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">연결된 Credit 거래</div>
                                                    @if ($creditTransaction)
                                                        <div class="space-y-1 text-sm">
                                                            <div class="font-semibold c-main">#{{ $creditTransaction->id }} · {{ $creditTransaction->type }}</div>
                                                            <div class="font-semibold c-main">{{ number_format((int) $creditTransaction->amount) }} Credit</div>
                                                            <div class="break-words text-sm c-muted">{{ $creditTransaction->reason ?? '-' }}</div>
                                                            <div class="break-words text-sm c-muted">참조: {{ $creditTransaction->reference_type }}#{{ $creditTransaction->reference_id }}</div>
                                                        </div>
                                                    @else
                                                        <div class="text-sm c-muted">연결된 거래가 없습니다.</div>
                                                    @endif
                                                </section>
                                            </div>
                                        @else
                                            <div class="grid gap-4 lg:grid-cols-3">
                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">사용량</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ $formatUsageSummary($log) }}</div>
                                                        @if (data_get($log->usage_data, 'reasoning_tokens') !== null)
                                                            <div class="text-sm font-medium c-muted">Reasoning {{ number_format((int) data_get($log->usage_data, 'reasoning_tokens')) }}</div>
                                                        @endif
                                                    </div>
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">토큰 상세</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>Input {{ number_format((int) data_get($log->usage_data, 'input_tokens', $log->input_tokens ?? 0)) }}</div>
                                                        <div>Cached {{ number_format((int) data_get($log->usage_data, 'cached_input_tokens', 0)) }}</div>
                                                        <div>Output {{ number_format((int) data_get($log->usage_data, 'output_tokens', $log->output_tokens ?? 0)) }}</div>
                                                    </div>
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Credit 차감</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ number_format((int) ($log->credits_used ?? 0)) }} Credit</div>
                                                        <div class="text-sm font-medium c-muted">
                                                            월 {{ number_format((int) ($log->monthly_credits_used ?? 0)) }}
                                                            · 충전 {{ number_format((int) ($log->purchased_credits_used ?? 0)) }}
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>

                                            <div class="mt-4 grid gap-4 lg:grid-cols-2">
                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">과금 기준</div>
                                                    <div class="space-y-1 text-sm font-semibold c-main">
                                                        <div>{{ $markup !== null ? rtrim(rtrim(number_format((float) $markup, 2, '.', ''), '0'), '.') . 'x' : '-' }}</div>
                                                        <div>{{ $usdPerCredit !== null ? $formatUsd($usdPerCredit) . ' / Credit' : '-' }}</div>
                                                        <div class="pt-1 text-sm c-muted">과금 원가 {{ $formatUsd($billableUsd) }}</div>
                                                    </div>
                                                </section>

                                                <section class="space-y-3 rounded-xl border border-muted bg-surface px-4 py-4">
                                                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">연결된 Credit 거래</div>
                                                    @if ($creditTransaction)
                                                        <div class="space-y-1 text-sm">
                                                            <div class="font-semibold c-main">#{{ $creditTransaction->id }} · {{ $creditTransaction->type }}</div>
                                                            <div class="font-semibold c-main">{{ number_format((int) $creditTransaction->amount) }} Credit</div>
                                                            <div class="break-words text-sm c-muted">{{ $creditTransaction->reason ?? '-' }}</div>
                                                            <div class="break-words text-sm c-muted">참조: {{ $creditTransaction->reference_type }}#{{ $creditTransaction->reference_id }}</div>
                                                        </div>
                                                    @else
                                                        <div class="text-sm c-muted">연결된 거래가 없습니다.</div>
                                                    @endif
                                                </section>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        <div>
            <x-ui.pagination :paginator="$logs" />
        </div>
    </div>
</x-layouts.platform-admin>

<script>
    document.querySelectorAll('[data-ai-usage-toggle]').forEach((button) => {
        const targetId = button.dataset.aiUsageTarget;
        const row = targetId ? document.getElementById(targetId) : null;

        if (!row) {
            return;
        }

        button.addEventListener('click', () => {
            const isHidden = row.classList.toggle('hidden');
            button.setAttribute('aria-expanded', String(!isHidden));
        });
    });
</script>