{% extends "dashboard/base.html" %}

{% block title %}{{ task.title or 'Task' }} - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<div class="mb-4 flex items-center gap-2 text-sm">
    <a href="/dashboard/projects" class="text-accent-cyan hover:underline">Projects</a>
    {% if project %}
    <span class="text-text-muted">/</span>
    <a href="/dashboard/projects/{{ project.id }}" class="text-accent-cyan hover:underline">{{ project.title or 'Project' }}</a>
    {% endif %}
    <span class="text-text-muted">/</span>
    <span class="text-text-secondary">Task</span>
</div>

<!-- Page Header -->
<div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
     {% if task.status == 'active' %}x-data="{ tapping: false, tapped: false }"{% endif %}>
    <div>
        <h1 class="text-3xl font-bold">
            {{ task.title or 'Untitled Task' }}
        </h1>
        <div class="flex items-center gap-3 mt-1">
            <span class="font-mono-data text-sm text-text-muted">{{ task.id[:8] }}</span>
            <span class="text-xs px-2 py-1 rounded
                {% if task.status == 'completed' %}bg-accent-green/20 text-accent-green
                {% elif task.status == 'active' %}bg-accent-cyan/20 text-accent-cyan
                {% elif task.status == 'failed' %}bg-accent-red/20 text-accent-red
                {% elif task.status == 'blocked' %}bg-accent-orange/20 text-accent-orange
                {% elif task.status == 'submitted' %}bg-accent-purple/20 text-accent-purple
                {% else %}bg-bg-elevated text-text-muted{% endif %}">
                {{ task.status|upper }}
            </span>
            <span class="text-xs px-2 py-1 rounded
                {% if task.priority == 'critical' %}bg-accent-red/20 text-accent-red
                {% elif task.priority == 'high' %}bg-accent-orange/20 text-accent-orange
                {% elif task.priority == 'medium' %}bg-accent-cyan/20 text-accent-cyan
                {% else %}bg-bg-elevated text-text-muted{% endif %}">
                {{ task.priority|upper }}
            </span>
            {% if task.notification_count and task.notification_count > 0 %}
            <span class="text-xs text-text-muted">{{ task.notification_count }} notifications</span>
            {% endif %}
        </div>
    </div>
    <div class="flex gap-2">
        {% if task.status == 'active' %}
        <button
            x-show="!tapped"
            :disabled="tapping"
            @click="tapping = true;
                fetch('/dashboard/tasks/{{ task.id }}/tap', {method: 'POST'})
                    .then(r => { if (!r.ok) throw new Error(r.statusText); return r.json(); })
                    .then(() => { tapped = true; tapping = false; })
                    .catch(() => { tapping = false; })"
            class="px-4 py-2 bg-accent-orange/20 text-accent-orange border border-accent-orange/30 rounded-lg hover:bg-accent-orange/30 transition-colors text-sm disabled:opacity-50">
            <span x-show="!tapping">Tap</span>
            <span x-show="tapping" x-cloak>Sending...</span>
        </button>
        <span x-show="tapped" x-cloak class="px-4 py-2 rounded-lg bg-accent-green/20 text-accent-green text-sm">
            Nudged
        </span>
        {% endif %}
    </div>
</div>

<!-- Task Metadata -->
<div class="glass-card neon-border rounded-xl p-6 mb-8">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-cyan">◈</span>
        Task Details
    </h2>
    <div class="space-y-4">
        {% if task.description %}
        <div>
            <div class="text-text-secondary text-sm mb-1">DESCRIPTION</div>
            <div class="text-text-primary whitespace-pre-line">{{ task.description|unescape_newlines }}</div>
        </div>
        {% endif %}
        {% if task.plan %}
        <div>
            <div class="text-text-secondary text-sm mb-1">PLAN</div>
            <div class="text-text-primary whitespace-pre-line">{{ task.plan|unescape_newlines }}</div>
        </div>
        {% endif %}
        {% if task.result %}
        <div>
            <div class="text-text-secondary text-sm mb-1">RESULT</div>
            <div class="text-text-primary whitespace-pre-line">{{ task.result|unescape_newlines }}</div>
        </div>
        {% endif %}
        {% if task.blocked_reason %}
        <div>
            <div class="text-text-secondary text-sm mb-1">BLOCKED REASON</div>
            <div class="text-accent-orange whitespace-pre-line">{{ task.blocked_reason|unescape_newlines }}</div>
        </div>
        {% endif %}
        {% if task.blocked_resume_instructions %}
        <div>
            <div class="text-text-secondary text-sm mb-1">RESUME INSTRUCTIONS</div>
            <div class="text-text-secondary whitespace-pre-line">{{ task.blocked_resume_instructions|unescape_newlines }}</div>
        </div>
        {% endif %}
        <!-- Timestamps -->
        <div class="flex flex-wrap gap-6 text-sm">
            {% if task.created_at %}
            <div>
                <span class="text-text-muted">Created:</span>
                <span class="text-text-secondary ml-1">{{ task.created_at|relative_time }}</span>
            </div>
            {% endif %}
            {% if task.started_at %}
            <div>
                <span class="text-text-muted">Started:</span>
                <span class="text-text-secondary ml-1">{{ task.started_at|relative_time }}</span>
            </div>
            {% endif %}
            {% if task.submitted_at %}
            <div>
                <span class="text-text-muted">Submitted:</span>
                <span class="text-text-secondary ml-1">{{ task.submitted_at|relative_time }}</span>
            </div>
            {% endif %}
            {% if task.completed_at %}
            <div>
                <span class="text-text-muted">Completed:</span>
                <span class="text-text-secondary ml-1">{{ task.completed_at|relative_time }}</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Pending Input Form -->
{% if pending_approval %}
<div class="glass-card neon-border-pink rounded-xl p-6 mb-8" id="approval-{{ pending_approval.id }}">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-pink">◈</span>
        Input Required
    </h2>
    {% if pending_approval.proposal and pending_approval.proposal.reason %}
    <div class="text-sm text-text-secondary mb-3">{{ pending_approval.proposal.reason }}</div>
    {% endif %}
    {% if pending_approval.input_schema_parsed %}
    <div class="text-sm text-text-primary mb-3">{{ pending_approval.input_schema_parsed.prompt }}</div>
    <form hx-post="/dashboard/approve/{{ pending_approval.id }}/input"
          hx-target="#approval-{{ pending_approval.id }}"
          hx-swap="outerHTML"
          class="space-y-3">
        {% if pending_approval.input_schema_parsed.type == 'text' %}
        <textarea name="response"
                  rows="3"
                  class="w-full bg-bg-card border border-accent-cyan/20 rounded-lg p-3 text-sm text-text-primary placeholder-text-muted focus:border-accent-cyan focus:outline-none"
                  {% if pending_approval.input_schema_parsed.placeholder %}placeholder="{{ pending_approval.input_schema_parsed.placeholder }}"{% endif %}
                  required></textarea>
        {% elif pending_approval.input_schema_parsed.type == 'multi_choice' %}
        <div class="space-y-2">
            {% for option in pending_approval.input_schema_parsed.options %}
            <label class="flex items-start gap-3 p-3 rounded-lg hover:bg-bg-card cursor-pointer border border-transparent hover:border-accent-cyan/10 transition-colors">
                <div class="pt-0.5">
                    {% if pending_approval.input_schema_parsed.allow_multiple %}
                    <input type="checkbox" name="response" value="{{ option.value }}" class="accent-accent-cyan">
                    {% else %}
                    <input type="radio" name="response" value="{{ option.value }}" required class="accent-accent-cyan">
                    {% endif %}
                </div>
                <div class="flex-1 space-y-2">
                    <span class="text-sm text-text-primary">{{ option.label }}</span>
                    {% if option.image_url %}
                    <div class="mt-1">
                        <img src="{{ option.image_url }}"
                             alt="{{ option.label }}"
                             class="max-w-xs max-h-48 rounded-lg border border-accent-cyan/20 object-contain"
                             loading="lazy"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        <span class="text-xs text-accent-red hidden">Image failed to load</span>
                    </div>
                    {% endif %}
                    {% if option.audio_url %}
                    <div class="mt-1">
                        <audio controls
                               class="h-8 w-full max-w-xs"
                               preload="metadata"
                               style="filter: hue-rotate(160deg) saturate(2);">
                            <source src="{{ option.audio_url }}" type="audio/mpeg">
                            <span class="text-xs text-text-muted">Audio playback not supported</span>
                        </audio>
                    </div>
                    {% endif %}
                </div>
            </label>
            {% endfor %}
        </div>
        {% endif %}
        <div class="flex gap-2">
            <button type="submit"
                    class="px-4 py-2 bg-accent-green/20 text-accent-green border border-accent-green/30 rounded-lg hover:bg-accent-green/30 transition-colors font-medium text-sm">
                Submit Response
            </button>
            <button hx-post="/dashboard/reject/{{ pending_approval.id }}"
                    hx-target="#approval-{{ pending_approval.id }}"
                    hx-swap="outerHTML"
                    type="button"
                    class="px-4 py-2 bg-accent-red/20 text-accent-red border border-accent-red/30 rounded-lg hover:bg-accent-red/30 transition-colors text-sm">
                Decline
            </button>
        </div>
    </form>
    {% else %}
    <!-- No schema - simple unblock -->
    <div class="flex gap-2 mt-3">
        <button hx-post="/dashboard/approve/{{ pending_approval.id }}"
                hx-target="#approval-{{ pending_approval.id }}"
                hx-swap="outerHTML"
                class="px-4 py-2 bg-accent-green/20 text-accent-green border border-accent-green/30 rounded-lg hover:bg-accent-green/30 transition-colors font-medium text-sm">
            Unblock
        </button>
        <button hx-post="/dashboard/reject/{{ pending_approval.id }}"
                hx-target="#approval-{{ pending_approval.id }}"
                hx-swap="outerHTML"
                class="px-4 py-2 bg-accent-red/20 text-accent-red border border-accent-red/30 rounded-lg hover:bg-accent-red/30 transition-colors text-sm">
            Dismiss
        </button>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Task Steps -->
{% if steps %}
<div class="glass-card neon-border rounded-xl p-6 mb-8">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-green">✓</span>
        Steps
    </h2>
    <div class="space-y-3">
        {% for step in steps %}
        <div class="p-3 bg-bg-card rounded-lg" x-data="{ expanded: false }">
            <div class="flex items-center gap-3">
                <span class="text-xs font-mono-data text-text-muted w-6">#{{ step.step_number }}</span>
                <span class="text-sm font-medium flex-1">{{ step.description }}</span>
                <span class="text-xs px-2 py-1 rounded
                    {% if step.status == 'completed' %}bg-accent-green/20 text-accent-green
                    {% elif step.status == 'active' %}bg-accent-cyan/20 text-accent-cyan
                    {% elif step.status == 'failed' %}bg-accent-red/20 text-accent-red
                    {% else %}bg-bg-elevated text-text-muted{% endif %}">
                    {{ step.status|upper }}
                </span>
            </div>
            {% if step.result %}
            <div class="mt-2 text-sm text-text-secondary">
                <span x-show="!expanded">{{ step.result[:200] }}{% if step.result|length > 200 %}...{% endif %}</span>
                <span x-show="expanded" x-cloak class="whitespace-pre-line">{{ step.result|unescape_newlines }}</span>
                {% if step.result|length > 200 %}
                <button @click="expanded = !expanded" class="text-xs text-accent-cyan hover:underline ml-1">
                    <span x-show="!expanded">Show more</span>
                    <span x-show="expanded" x-cloak>Show less</span>
                </button>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Task Files -->
{% if task_files %}
<div class="glass-card neon-border rounded-xl p-6 mb-8">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-cyan">◈</span>
        Files
        <span class="ml-2 px-2 py-0.5 rounded-full text-xs bg-accent-cyan/20 text-accent-cyan">{{ task_files|length }}</span>
    </h2>
    <div class="space-y-1">
        {% for f in task_files %}
        <a href="/dashboard/projects/{{ project.id }}/files/{{ f.relative_path }}"
           target="_blank"
           class="block p-2 bg-bg-card rounded-lg flex items-center gap-3 hover:bg-bg-elevated transition-colors">
            <span class="text-sm">{{ f.filename|file_icon }}</span>
            <div class="flex-1 min-w-0">
                <span class="text-sm text-text-primary">{{ f.filename }}</span>
                {% if f.description %}
                <span class="text-xs text-text-muted ml-2">{{ f.description }}</span>
                {% endif %}
            </div>
            <span class="text-xs px-2 py-0.5 rounded bg-bg-elevated text-text-muted">{{ f.purpose }}</span>
            {% if f.size_bytes %}
            <span class="text-xs text-text-muted font-mono-data">{{ f.size_bytes|file_size }}</span>
            {% endif %}
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Unified Activity Timeline -->
<div class="glass-card neon-border rounded-xl p-6">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-pink">◈</span>
        Activity Timeline
        <span class="ml-2 px-2 py-0.5 rounded-full text-xs bg-accent-pink/20 text-accent-pink">{{ timeline|length }}</span>
    </h2>
    {% if timeline %}
    <div class="space-y-0">
        {% for entry in timeline %}
        {% set type_colors = {
            'notification': 'bg-accent-pink',
            'prompt': 'bg-accent-orange',
            'approval': 'bg-accent-purple',
            'history': 'bg-accent-cyan',
        } %}
        {% set label_colors = {
            'notification': 'text-accent-pink bg-accent-pink/15',
            'prompt': 'text-accent-orange bg-accent-orange/15',
            'approval': 'text-accent-purple bg-accent-purple/15',
            'history': 'text-accent-cyan bg-accent-cyan/15',
        } %}
        <div class="flex gap-4" x-data="{ expanded: false }">
            <div class="flex flex-col items-center">
                <div class="w-3 h-3 rounded-full {{ type_colors.get(entry.type, 'bg-bg-elevated') }}"></div>
                <div class="w-px flex-1 bg-accent-cyan/10"></div>
            </div>
            <div class="flex-1 pb-4">
                <div class="flex items-center gap-2 mb-1 flex-wrap">
                    <span class="text-xs px-2 py-0.5 rounded {{ label_colors.get(entry.type, 'text-text-muted bg-bg-elevated') }}">
                        {{ entry.label }}
                    </span>
                    <span class="text-xs text-text-muted">{{ entry.timestamp|relative_time }}</span>
                    {% if entry.type == 'prompt' and entry.tokens %}
                    <span class="text-xs text-text-muted">{{ entry.tokens }} tokens</span>
                    {% endif %}
                    {% if entry.status %}
                    <span class="text-xs px-1.5 py-0.5 rounded
                        {% if entry.status == 'approved' or entry.status == 'delivered' or entry.status == 'resolved' %}bg-accent-green/15 text-accent-green
                        {% elif entry.status == 'rejected' or entry.status == 'failed' %}bg-accent-red/15 text-accent-red
                        {% elif entry.status == 'pending' or entry.status == 'pending' %}bg-accent-orange/15 text-accent-orange
                        {% else %}bg-bg-elevated text-text-muted{% endif %}">
                        {{ entry.status }}
                    </span>
                    {% endif %}
                </div>
                <div class="text-sm text-text-primary">
                    {% if entry.type == 'prompt' %}
                    {% if entry.session_key %}
                    <span class="text-xs text-text-muted font-mono-data">{{ entry.session_key }}</span>
                    {% endif %}
                    <button @click="expanded = !expanded" class="text-xs text-accent-cyan hover:underline ml-1 cursor-pointer">
                        <span x-show="!expanded">Show prompt</span>
                        <span x-show="expanded" x-cloak>Hide prompt</span>
                    </button>
                    <div x-show="expanded" x-cloak class="mt-2 p-2 bg-bg-deep rounded-lg whitespace-pre-wrap break-words max-h-96 overflow-y-auto">
                        {{ entry.full_text }}
                    </div>
                    {% else %}
                    {{ entry.summary }}
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-text-muted text-sm">No activity recorded yet</div>
    {% endif %}
</div>
{% endblock %}