{% from "components/field_renderer.html" import render_hitl_field, status_badge %}
{% from "components/dialog_renderer.html" import render_hitl_dialog, render_dialog_confirmed %}

{# Determine if the job has reached a terminal state (EntityStatus.value is lowercase) #}
{% set job_status = job.status.value %}
{% set is_terminal = job_status in ("completed", "failed", "stopped", "cancelled") %}

{# Outer div — WebSocket pushes updates, no HTMX polling needed #}
<div
    id="workbench-monitor-partial"
    data-job-terminal="{{ 'true' if is_terminal else 'false' }}"
>

    {# ── Job status bar ──────────────────────────────────────────────── #}
    <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between flex-wrap gap-2">
        <div class="flex items-center gap-3 min-w-0">
            <span class="text-xs text-gray-400 font-mono truncate">{{ job.id }}</span>

            {{ status_badge(job_status) }}

            {# Case count #}
            {% if cases_data %}
            <span class="text-xs text-gray-400">{{ cases_data | length }} case{{ "s" if cases_data | length != 1 }}</span>
            {% endif %}
        </div>

        {# Created at timestamp #}
        {% if job.created_at %}
        <span class="text-xs text-gray-400 font-mono flex-shrink-0">{{ job.created_at }}</span>
        {% endif %}
    </div>

    {# ── Cases list ──────────────────────────────────────────────────── #}
    {% if cases_data %}
    <div class="divide-y divide-gray-100">
        {% for case_info in cases_data %}
        {% set case = case_info.case %}
        {% set hitl_form = case_info.hitl_form %}
        {% set hitl_dialog = case_info.hitl_dialog %}
        {% set case_status = case.status.value %}
        {% set auto_expand = case_status in ("awaiting", "in_progress") %}

        <div
            x-data="{ open: {{ 'true' if auto_expand else 'false' }} }"
            class="bg-white"
        >
            {# Case header — clickable to toggle #}
            <button
                type="button"
                @click="open = !open"
                class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors duration-150"
                :aria-expanded="open"
            >
                <div class="flex items-center gap-2 min-w-0">
                    {# Expand/collapse chevron #}
                    <svg
                        class="w-3.5 h-3.5 flex-shrink-0 transition-transform duration-200"
                        :class="open ? 'rotate-90' : ''"
                        :style="'color: ' + ({{ 'true' if case_status == 'awaiting' else 'false' }} ? '#d97706' : ({{ 'true' if case_status == 'in_progress' else 'false' }} ? '#3b82f6' : '#9ca3af'))"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>

                    {# Case name #}
                    <span class="text-sm font-medium text-gray-800 truncate"><span class="text-gray-400">Case:</span> {{ case.name or case.id }}</span>

                    {# Step count #}
                    {% if case.updates %}
                    <span class="text-xs text-gray-400 flex-shrink-0">{{ case.updates | length }} step{{ "s" if case.updates | length != 1 }}</span>
                    {% endif %}
                </div>

                <div class="flex items-center gap-3 flex-shrink-0 ml-3">
                    {# Cost (sum across updates) #}
                    {% set ns = namespace(total_cost=0) %}
                    {% for step in (case.updates or []) %}
                    {% if step.cost %}{% set ns.total_cost = ns.total_cost + step.cost %}{% endif %}
                    {% endfor %}
                    {% if ns.total_cost > 0 %}
                    <span class="text-xs text-gray-400 font-mono">${{ "%.4f"|format(ns.total_cost) }}</span>
                    {% endif %}

                    {{ status_badge(case_status) }}
                </div>
            </button>

            {# Expandable body: steps + HITL form #}
            <div
                x-show="open"
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0 -translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 -translate-y-1"
                x-cloak
            >
                {# Steps list #}
                {% if case.updates %}
                <div class="px-4 pb-2 space-y-1">
                    {% for step in case.updates %}
                    {% set step_payload = step.payload or {} %}
                    {% set step_duration = step_payload.get("duration") if step_payload is mapping else none %}
                    {% set step_message = step_payload.get("message") if step_payload is mapping else none %}
                    <div class="flex items-start gap-2 py-1.5 border-b border-gray-50 last:border-0">

                        {# Step status icon #}
                        <div class="flex-shrink-0 w-4 mt-0.5">
                            {% if step.error %}
                            <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            {% elif step.is_final %}
                            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            {% else %}
                            <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                            </svg>
                            {% endif %}
                        </div>

                        {# Step details #}
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                <span class="text-xs font-medium text-gray-700 truncate">
                                    {% if step.index %}
                                    <span class="text-gray-400 mr-1">#{{ step.index }}</span>
                                    {% endif %}
                                    {% if step.name == "HITL Answer" %}👤 {{ step_payload.get("_hitl_label", "User response") if step_payload is mapping else "User response" }}{% else %}{{ step.name or "Step" }}{% endif %}
                                </span>
                                <div class="flex items-center gap-2 flex-shrink-0">
                                    {% if step_duration is not none and step_duration is number %}
                                    <span class="text-xs text-gray-400 font-mono">{{ "%.1f"|format(step_duration) }}s</span>
                                    {% elif step_duration is not none and step_duration %}
                                    <span class="text-xs text-gray-400 font-mono">{{ step_duration }}s</span>
                                    {% endif %}
                                    {% if step.cost %}
                                    <span class="text-xs text-gray-400 font-mono">${{ "%.4f"|format(step.cost) }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            {% if step_message %}
                            <p class="text-xs text-gray-500 mt-0.5">{{ step_message }}</p>
                            {% endif %}
                            {% if step.name == "HITL Answer" and step_payload is mapping %}
                            <div class="mt-1 space-y-0.5">
                                {% for key, val in step_payload.items() if key != "_hitl_label" %}
                                <div class="text-xs">
                                    <span class="text-gray-400">{{ key }}:</span>
                                    {% if val is sameas true %}
                                    <span class="text-green-600 font-medium">Yes</span>
                                    {% elif val is sameas false %}
                                    <span class="text-red-500 font-medium">No</span>
                                    {% elif val %}
                                    <span class="text-gray-600">{{ val }}</span>
                                    {% else %}
                                    <span class="text-gray-300 italic">empty</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                            {% endif %}
                            {% if step.error %}
                            <p class="text-xs text-red-600 mt-0.5">{{ step.error }}</p>
                            {% endif %}
                        </div>
                    </div>
                    {# Show reply content as a blockquote #}
                    {% if step_payload is mapping and step_payload.get("reply") %}
                    <div class="mx-4 mb-2 rounded border border-blue-200 bg-blue-50 p-3">
                        <p class="text-xs font-medium text-blue-600 mb-1">Reply content:</p>
                        <blockquote class="text-xs text-gray-700 whitespace-pre-wrap border-l-2 border-blue-300 pl-2">{{ step_payload.get("reply") }}</blockquote>
                    </div>
                    {% endif %}
                    {# Show approved content card below the step row #}
                    {% if step_payload is mapping and step_payload.get("approved_content") %}
                    {{ render_dialog_confirmed(step_payload.get("approved_content"), step_payload.get("approved_content_type", "text")) }}
                    {% endif %}
                    {% endfor %}
                </div>
                {% else %}
                <div class="px-4 pb-3 text-xs text-gray-400 italic">No steps recorded yet.</div>
                {% endif %}

                {# HITL form — only shown when case is AWAITING and has form #}
                {% if hitl_form and has_human_answer %}
                <div class="mx-4 mb-4 mt-1 rounded-md border border-amber-200 bg-amber-50 p-4">
                    <div class="flex items-center gap-2 mb-3">
                        <svg class="w-4 h-4 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span class="text-sm font-semibold text-amber-800">Human Input Required</span>
                    </div>

                    <form id="hitl-form-{{ case.id }}" onsubmit="return false;">
                        {% if hitl_form is mapping %}
                        <div class="space-y-3">
                            {% for field_name, field_def in hitl_form.items() %}
                            {{ render_hitl_field(field_name, field_def) }}
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="mt-4">
                            <button
                                type="button"
                                onclick="window.workbenchForm && window.workbenchForm.submitHitlAnswer('{{ case.id }}', this.closest('form'))"
                                class="inline-flex items-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 cursor-pointer transition-colors duration-150"
                            >
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                Submit Answer
                            </button>
                        </div>
                    </form>
                </div>
                {% endif %}

                {# HITL dialog — chat-like interface for content review #}
                {% if hitl_dialog and has_human_answer %}
                {{ render_hitl_dialog(case.id, hitl_dialog) }}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    {% else %}
    {# No cases yet #}
    <div class="flex flex-col items-center justify-center py-12 text-center">
        <svg class="w-8 h-8 text-blue-400 animate-spin mb-3" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        <p class="text-sm text-gray-500">Waiting for cases...</p>
    </div>
    {% endif %}

</div>