{% extends "base.html" %}

{% block title %}Session {{ session_id }} - Subtle{% endblock %}

{% block content %}
<div x-data="sessionDetailApp('{{ session_id }}')">
    <div class="mb-6">
        <a href="/" class="text-white/40 hover:text-white/70 text-sm">&larr; Back to sessions</a>
        <h2 class="text-lg text-white/70 mt-2">
            Session <span class="text-white/50">{{ session_id }}</span>
        </h2>
    </div>

    <div class="mb-6 grid grid-cols-6 grid-rows-[auto_auto] gap-4" x-show="!loading">
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 col-span-2 row-span-2">
            <div class="text-white/40 text-xs uppercase mb-3">Time Breakdown</div>
            <div class="mb-4">
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-white/40">Total</span>
                    <span class="text-white/70" x-text="formatDuration(summary.durationSeconds)"></span>
                </div>
                <div class="h-2 bg-white/10 rounded-full">
                    <div class="h-2 bg-white/70 rounded-full" :style="'width: ' + getBarWidth(summary.durationSeconds) + '%'"></div>
                </div>
            </div>
            <div class="mb-4">
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-white/40">AI</span>
                    <span class="text-cyan-400" x-text="formatDuration(summary.agentTimeSeconds)"></span>
                </div>
                <div class="h-2 bg-white/10 rounded-full">
                    <div class="h-2 bg-cyan-500 rounded-full" :style="'width: ' + getBarWidth(summary.agentTimeSeconds) + '%'"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-white/40">Tools</span>
                    <span class="text-amber-400" x-text="formatDuration(summary.toolTimeSeconds)"></span>
                </div>
                <div class="h-2 bg-white/10 rounded-full">
                    <div class="h-2 bg-amber-500 rounded-full" :style="'width: ' + getBarWidth(summary.toolTimeSeconds) + '%'"></div>
                </div>
            </div>
        </div>
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 self-start">
            <div class="text-white/40 text-xs uppercase mb-1">Messages</div>
            <div class="text-2xl text-white/70" x-text="messages.length"></div>
        </div>
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 self-start">
            <div class="text-white/40 text-xs uppercase mb-1">Tool LOC</div>
            <div class="text-2xl">
                <span class="text-green-400" x-text="'+' + summary.toolLoc.added"></span>
                <span class="text-white/30">/</span>
                <span class="text-red-400" x-text="'-' + summary.toolLoc.removed"></span>
            </div>
        </div>
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 self-start">
            <div class="text-white/40 text-xs uppercase mb-1">Git LOC</div>
            <div class="text-2xl" x-show="summary.gitLoc.found">
                <span class="text-green-400" x-text="'+' + summary.gitLoc.added"></span>
                <span class="text-white/30">/</span>
                <span class="text-red-400" x-text="'-' + summary.gitLoc.removed"></span>
            </div>
            <div class="text-2xl text-white/30" x-show="!summary.gitLoc.found">–</div>
        </div>
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 self-start">
            <div class="text-white/40 text-xs uppercase mb-1">Commits</div>
            <div class="text-2xl text-purple-400" x-text="summary.commits"></div>
        </div>
        <div class="bg-white/[0.02] rounded-lg border border-white/10 p-4 col-span-4">
            <h3 class="text-white/40 text-xs uppercase mb-3">Session Timeline</h3>
            <div id="timeline-container" class="relative h-[30px]"></div>
            <div class="flex justify-center gap-6 mt-3 text-xs text-white/40">
                <span><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span>User</span>
                <span><span class="inline-block w-2 h-2 rounded-full bg-cyan-500 mr-1"></span>AI</span>
                <span><span class="inline-block w-2 h-2 rounded-full bg-amber-500 mr-1"></span>Tools</span>
            </div>
        </div>
    </div>

    <!-- Search input -->
    <div class="relative mb-4 w-fit">
        <input
            type="text"
            x-model="searchQuery"
            @input="handleSearchInput()"
            placeholder="Search messages..."
            class="w-48 sm:w-56 rounded-lg border border-white/10 bg-white/[0.02] px-4 py-2 pl-9 font-mono text-xs text-white placeholder-white/30 outline-none transition-colors focus:border-amber-500/50 focus:bg-white/[0.04]"
        />
        <svg x-show="!searchLoading" class="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
        <svg x-show="searchLoading" class="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-amber-400 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <button
            x-show="searchQuery"
            @click="clearSearch()"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors cursor-pointer"
        >
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- CLI-Style View -->
    <div class="font-mono text-sm">
        <template x-if="loading">
            <div class="text-center text-white/40 py-8">Loading conversation...</div>
        </template>
        <template x-if="!loading && turns.length === 0">
            <div class="text-center text-white/40 py-8">No messages found</div>
        </template>
        <template x-if="!loading && turns.length > 0 && filteredTurns.length === 0">
            <div class="text-center text-white/40 py-8">No messages match your search</div>
        </template>

        <template x-for="(turn, turnIndex) in filteredTurns" :key="turnIndex">
            <div class="py-4 -mx-4 px-4 rounded-lg mb-2"
                 :class="turn.type === 'user' ? 'bg-green-500/[0.04] border-l-2 border-green-500/30' : (turnIndex % 2 === 1 ? 'bg-white/[0.02]' : '')">
                <!-- User Message -->
                <template x-if="turn.type === 'user'">
                    <div class="cursor-pointer hover:bg-white/[0.03] -mx-2 px-2 py-1 rounded"
                         @click="selectTurn(turnIndex, turn.messageIndices[0])">
                        <div class="flex items-start gap-2">
                            <span class="text-green-400 flex-shrink-0">❯</span>
                            <span class="text-white/90 whitespace-pre-wrap" x-text="formatUserContent(turn.content)"></span>
                        </div>
                    </div>
                </template>

                <!-- Assistant Turn -->
                <template x-if="turn.type === 'assistant'">
                    <div>
                        <template x-for="(segment, segIndex) in turn.segments" :key="segIndex">
                            <div class="mb-3">
                                <!-- Tool call -->
                                <template x-if="segment.type === 'tool'">
                                    <div>
                                        <div class="flex items-start gap-2 cursor-pointer hover:bg-white/[0.02] -mx-2 px-2 py-1 rounded"
                                             @click="toggleToolExpand(turnIndex, segIndex)">
                                            <span class="text-amber-400 flex-shrink-0">⏺</span>
                                            <span class="text-white/70">
                                                <span class="text-cyan-400" x-text="segment.tool.name"></span><span class="text-white/50">(<span x-text="getToolArgs(segment.tool)"></span>)</span>
                                            </span>
                                        </div>
                                        <!-- Tool result -->
                                        <template x-if="segment.result">
                                            <div class="flex items-start gap-2 ml-4 mt-1">
                                                <span class="text-white/30 flex-shrink-0">⎿</span>
                                                <div class="text-white/50 flex-1 min-w-0">
                                                    <template x-if="!isToolExpanded(turnIndex, segIndex)">
                                                        <span x-text="truncateResult(segment.result.preview)" :class="{'text-red-400/70': segment.result.is_error}"></span>
                                                    </template>
                                                    <template x-if="isToolExpanded(turnIndex, segIndex)">
                                                        <pre class="whitespace-pre-wrap break-words text-xs" :class="{'text-red-400/70': segment.result.is_error}" x-text="segment.result.preview"></pre>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                        <template x-if="!segment.result">
                                            <div class="flex items-start gap-2 ml-4 mt-1">
                                                <span class="text-white/30 flex-shrink-0">⎿</span>
                                                <span class="text-white/30 italic">(No content)</span>
                                            </div>
                                        </template>
                                    </div>
                                </template>

                                <!-- Text content -->
                                <template x-if="segment.type === 'text'">
                                    <div>
                                        <div class="flex items-start gap-2">
                                            <span class="text-amber-400 flex-shrink-0">⏺</span>
                                            <div class="text-white/80 flex-1 min-w-0">
                                                <template x-if="!isExpanded(turnIndex + '-' + segIndex) && needsTruncation(segment.content, 500)">
                                                    <div>
                                                        <div class="prose prose-sm max-w-none" x-html="renderMarkdown(truncateText(segment.content, 500))"></div>
                                                        <button @click.stop="toggleExpand(turnIndex + '-' + segIndex)"
                                                                class="text-white/40 hover:text-white/60 text-xs mt-1 cursor-pointer">
                                                            … +<span x-text="Math.ceil((segment.content.length - 500) / 50)"></span> lines (click to expand)
                                                        </button>
                                                    </div>
                                                </template>
                                                <template x-if="isExpanded(turnIndex + '-' + segIndex) || !needsTruncation(segment.content, 500)">
                                                    <div class="prose prose-sm max-w-none" x-html="renderMarkdown(segment.content)"></div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>

                        <!-- Commit info -->
                        <template x-if="turn.hasCommit && turn.commitInfo">
                            <div class="flex items-start gap-2 mb-3">
                                <span class="text-amber-400 flex-shrink-0">⏺</span>
                                <span class="text-purple-400">
                                    Committed: <code class="text-purple-300" x-text="turn.commitInfo.hash"></code>
                                    <span class="text-purple-300/70" x-text="turn.commitInfo.message"></span>
                                </span>
                            </div>
                        </template>

                        <!-- Turn footer -->
                        <div class="flex items-center gap-2 text-white/30 text-xs mt-2">
                            <span class="text-white/20">✻</span>
                            <span x-text="formatTokens(turn.totalInputTokens + turn.totalOutputTokens) + ' tokens'"></span>
                            <span>·</span>
                            <span x-text="formatDuration(turn.totalDuration)"></span>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </div>

    <!-- Side Panel -->
    <div x-show="panelOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-black/50 z-40"
         @click="closePanel()">
    </div>

    <div x-show="panelOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
         class="fixed top-0 right-0 h-full w-1/2 max-w-2xl bg-[#0a0a0c] border-l border-white/10 z-50 flex flex-col"
         @click.stop>
        <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
            <h3 class="text-white/70 text-sm">
                Message <span class="text-white/40" x-text="selectedIndex"></span>
            </h3>
            <button @click="closePanel()" class="text-white/40 hover:text-white/70 text-xl">&times;</button>
        </div>
        <div class="flex-1 overflow-auto p-4">
            <template x-if="panelLoading">
                <div class="text-white/40 text-sm">Loading...</div>
            </template>
            <template x-if="!panelLoading && rawMessage">
                <pre class="text-xs text-white/70 whitespace-pre-wrap break-words" x-text="JSON.stringify(rawMessage, null, 2)"></pre>
            </template>
        </div>
    </div>
</div>
{% endblock %}