{% extends "base.html" %}
{% block title %}詳細 - llm-devproxy{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="/history" style="color: var(--accent); text-decoration: none; font-size: 13px;">← 履歴に戻る</a>
        <h2 style="margin-top: 8px;">リクエスト詳細</h2>
    </div>
</div>

<!-- Meta info -->
<div class="detail-grid">
    <div class="detail-card">
        <h3>リクエスト情報</h3>
        <div class="detail-row">
            <span class="label">ID</span>
            <span class="value" style="font-family: var(--mono); font-size: 12px;">{{ record.id[:16] }}…</span>
        </div>
        <div class="detail-row">
            <span class="label">Time</span>
            <span class="value">{{ record.timestamp|format_time }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Provider</span>
            <span class="value">
                <span class="badge badge-{{ record.provider }}">{{ record.provider }}</span>
            </span>
        </div>
        <div class="detail-row">
            <span class="label">Model</span>
            <span class="value model-name">{{ record.model }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Session</span>
            <span class="value" style="font-size: 12px;">{{ record.session_id[:16] }}…</span>
        </div>
        <div class="detail-row">
            <span class="label">Step</span>
            <span class="value">{{ record.step_id }}</span>
        </div>
    </div>

    <div class="detail-card">
        <h3>コスト・トークン</h3>
        <div class="detail-row">
            <span class="label">Input tokens</span>
            <span class="value tokens">{{ record.input_tokens|format_tokens }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Output tokens</span>
            <span class="value tokens">{{ record.output_tokens|format_tokens }}</span>
        </div>
        {% if record.reasoning_tokens > 0 %}
        <div class="detail-row">
            <span class="label">🧠 Reasoning tokens</span>
            <span class="value tokens-reasoning">{{ record.reasoning_tokens|format_tokens }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Reasoning ratio</span>
            <span class="value">
                <div class="reasoning-bar">
                    {% set total_out = record.output_tokens + record.reasoning_tokens %}
                    {% set pct = (record.reasoning_tokens / total_out * 100) if total_out > 0 else 0 %}
                    <div class="reasoning-bar-bg">
                        <div class="reasoning-bar-fill" style="width: {{ pct }}%"></div>
                    </div>
                    <span class="reasoning-pct">{{ "%.0f"|format(pct) }}%</span>
                </div>
            </span>
        </div>
        {% endif %}
        <div class="detail-row">
            <span class="label">Total tokens</span>
            <span class="value tokens">{{ (record.input_tokens + record.output_tokens + record.reasoning_tokens)|format_tokens }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Cost</span>
            <span class="value cost">{{ record.cost_usd|format_cost }}</span>
        </div>
        <div class="detail-row">
            <span class="label">Status</span>
            <span class="value">
                {% if record.is_cached %}
                <span class="badge badge-cached">cached</span>
                {% elif "cost_limited" in record.tags %}
                <span class="badge badge-mock">mock</span>
                {% else %}
                <span style="color: var(--green);">live</span>
                {% endif %}
            </span>
        </div>
        {% if record.tags %}
        <div class="detail-row">
            <span class="label">Tags</span>
            <span class="value">{{ record.tags | join(", ") }}</span>
        </div>
        {% endif %}
        {% if record.memo %}
        <div class="detail-row">
            <span class="label">Memo</span>
            <span class="value">{{ record.memo }}</span>
        </div>
        {% endif %}
    </div>
</div>

<!-- Request body -->
<div class="detail-card" style="margin-bottom: 16px;">
    <h3>
        リクエスト
        <span class="json-toggle" onclick="toggleJson('req')">展開/折りたたみ</span>
    </h3>
    <div class="prompt-text" style="max-width: none; padding: 8px 0;">
        {{ prompt_preview }}
    </div>
    <div id="req-json" class="json-block" style="display: none;">
        <pre>{{ request_json }}</pre>
    </div>
</div>

<!-- Response body -->
<div class="detail-card">
    <h3>
        レスポンス
        <span class="json-toggle" onclick="toggleJson('res')">展開/折りたたみ</span>
    </h3>
    <div class="prompt-text" style="max-width: none; padding: 8px 0;">
        {{ response_preview }}
    </div>
    <div id="res-json" class="json-block" style="display: none;">
        <pre>{{ response_json }}</pre>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleJson(prefix) {
    const el = document.getElementById(prefix + '-json');
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>
{% endblock %}