{% extends "base.html" %}
{% set active_page = "projects" %}
{% block title %}{{ project.title[:40] }}{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-6">
    <a href="/projects" class="text-xs text-gray-500 hover:text-gray-300">&larr; All Projects</a>
    <h1 class="text-xl font-semibold text-white mt-2">{{ project.title }}</h1>
    <div class="flex items-center gap-3 mt-2">
        <span class="badge badge-{{ project.bid_status.value | status_color }}">
            {{ project.bid_status.value | replace('_', ' ') | title }}
        </span>
        {% if project.ref_number %}
        <span class="text-sm font-mono text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded">BS-{{ '%03d' % project.ref_number }}</span>
        {% endif %}
        <span class="text-sm text-gray-500">FL#{{ project.freelancer_project_id }}</span>
        {% if project.bid_amount %}
        <span class="text-sm text-gray-400">{{ project.bid_amount | currency }}</span>
        {% endif %}
        {% if project.github_repo_url %}
        <a href="{{ project.github_repo_url }}" target="_blank" class="text-xs text-blue-400 hover:text-blue-300">GitHub &rarr;</a>
        {% endif %}
        {% if project.source.value == 'freelancer' %}
        <form method="POST" action="/projects/{{ project.id }}/move-to-intake" class="inline ml-2">
            <button type="submit" class="px-3 py-1 text-xs bg-purple-600 hover:bg-purple-500 text-white rounded-lg transition"
                onclick="this.disabled=true;this.textContent='Generating questionnaire...';this.form.submit();">
                Move to Intake
            </button>
        </form>
        {% endif %}
    </div>
</div>

<!-- Tabs -->
<div class="flex gap-1 border-b border-gray-800 mb-6">
    <a href="?tab=overview" class="tab-btn {% if tab == 'overview' %}active{% endif %}">Overview</a>
    <a href="?tab=questions" class="tab-btn {% if tab == 'questions' %}active{% endif %}">
        Questions
        {% if qa_pairs %}<span class="ml-1 text-xs {% if answers_count == qa_pairs | length %}text-green-500{% elif answers_count > 0 %}text-yellow-500{% else %}text-gray-600{% endif %}">({{ answers_count }}/{{ qa_pairs | length }})</span>{% endif %}
    </a>
    <a href="?tab=conversation" class="tab-btn {% if tab == 'conversation' %}active{% endif %}">
        Conversation
        {% if messages %}<span class="ml-1 text-xs text-gray-600">({{ messages | length }})</span>{% endif %}
    </a>
    <a href="?tab=bids" class="tab-btn {% if tab == 'bids' %}active{% endif %}">Bids</a>
    <a href="?tab=development" class="tab-btn {% if tab == 'development' %}active{% endif %}">Development</a>
    <a href="?tab=logs" class="tab-btn {% if tab == 'logs' %}active{% endif %}">Logs</a>
    <a href="?tab=decisions" class="tab-btn {% if tab == 'decisions' %}active{% endif %}">
        Decisions
        {% set pending = decisions | selectattr('status.value', 'equalto', 'pending') | list %}
        {% if pending %}<span class="ml-1 text-xs text-yellow-500">({{ pending | length }})</span>{% endif %}
    </a>
    <a href="?tab=reports" class="tab-btn {% if tab == 'reports' %}active{% endif %}">Reports</a>
    {% if intake_questions %}
    <a href="?tab=intake" class="tab-btn {% if tab == 'intake' %}active{% endif %}">
        Intake
        <span class="ml-1 text-xs text-purple-400">({{ intake_questions | length }})</span>
    </a>
    {% endif %}
</div>

<!-- Tab Content -->

{% if tab == 'overview' %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="card rounded-lg p-5">
        <h3 class="text-sm font-medium text-white mb-3">Description</h3>
        <div class="text-sm text-gray-400 whitespace-pre-wrap">{{ project.description or 'No description' }}</div>
    </div>
    <div class="space-y-4">
        {% if project.delivery_plan %}
        <div class="card rounded-lg p-5">
            <h3 class="text-sm font-medium text-white mb-3">Delivery Plan</h3>
            <div class="text-sm text-gray-400 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ project.delivery_plan | e }}"></div>
        </div>
        {% endif %}
        {% if qa_pairs %}
        <div class="card rounded-lg p-5">
            <div class="flex items-center justify-between mb-1">
                <h3 class="text-sm font-medium text-white">Questions</h3>
                <a href="?tab=questions" class="text-xs text-blue-400 hover:text-blue-300">View all &rarr;</a>
            </div>
            <div class="text-xs text-gray-500">{{ answers_count }}/{{ qa_pairs | length }} answered</div>
        </div>
        {% endif %}
    </div>
</div>

{% elif tab == 'questions' %}
<div class="space-y-4">
    {% if qa_pairs %}
    <div class="card rounded-lg p-4 flex items-center justify-between">
        <div class="text-sm text-gray-400">{{ answers_count }}/{{ qa_pairs | length }} answered</div>
        {% if answers_count == qa_pairs | length %}
        <span class="badge badge-green">Complete</span>
        {% elif answers_count > 0 %}
        <span class="badge badge-yellow">In Progress</span>
        {% else %}
        <span class="badge badge-gray">Waiting</span>
        {% endif %}
    </div>

    {% for qa in qa_pairs %}
    <div class="card rounded-lg p-5">
        <div class="flex items-start gap-3">
            <div class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium
                {% if qa.answer %}bg-blue-900/50 text-blue-400 border border-blue-800{% else %}bg-gray-800 text-gray-500 border border-gray-700{% endif %}">
                {{ qa.num }}
            </div>
            <div class="flex-1">
                <div class="text-sm text-white mb-3">{{ qa.question }}</div>
                {% if qa.answer %}
                <div class="bg-gray-900 rounded-lg px-4 py-3 text-sm text-gray-300 whitespace-pre-wrap">{{ qa.answer }}</div>
                {% else %}
                <div class="text-xs text-gray-600 italic">Awaiting answer</div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="card rounded-lg p-8 text-center text-sm text-gray-600">No questionnaire generated for this project</div>
    {% endif %}
</div>

{% elif tab == 'conversation' %}
<div class="card rounded-lg p-5">
    <div class="space-y-4 max-h-[600px] overflow-y-auto mb-4">
        {% for msg in messages %}
        <div class="flex {% if msg.sender.value == 'agent' %}justify-end{% else %}justify-start{% endif %}">
            <div class="max-w-[70%] rounded-lg px-4 py-3 text-sm
                {% if msg.sender.value == 'agent' %}bg-blue-900/30 border border-blue-800/50
                {% elif msg.sender.value == 'owner' %}bg-gray-800 border border-gray-700
                {% else %}bg-gray-900 border border-gray-800{% endif %}">
                <div class="text-xs {% if msg.sender.value == 'agent' %}text-blue-400{% else %}text-gray-500{% endif %} mb-1">
                    {{ msg.sender.value | title }} &middot; {{ msg.created_at | timeago }}
                </div>
                <div class="text-gray-300 whitespace-pre-wrap">{{ msg.message_text }}</div>
            </div>
        </div>
        {% else %}
        <div class="text-sm text-gray-600 text-center py-8">No messages yet</div>
        {% endfor %}
    </div>
</div>

{% elif tab == 'bids' %}
<div class="space-y-4">
    {% if our_bid %}
    <!-- Our Bid -->
    <div class="card rounded-lg p-5 border-blue-800">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <span class="text-sm font-medium text-blue-400">Our Bid</span>
                <span class="badge badge-blue">Bridgestack</span>
                {% if our_bid.award_status == 'awarded' %}
                <span class="badge badge-green">Awarded</span>
                {% endif %}
            </div>
            <div class="text-xl font-bold text-white">${{ "%.2f" | format(our_bid.amount) }}</div>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-500 mb-3">
            <span>{{ our_bid.period }} days delivery</span>
        </div>
        {% if our_bid.description %}
        <details>
            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">View bid description</summary>
            <div class="mt-2 text-sm text-gray-400 prose prose-invert prose-sm max-w-none bg-gray-900 rounded-lg p-4 max-h-80 overflow-y-auto markdown-body" data-markdown="{{ our_bid.description | e }}"></div>
        </details>
        {% endif %}
    </div>
    {% endif %}

    <!-- Competing Bids -->
    {% set competitors = bids_data | rejectattr('is_ours') | list %}
    {% if competitors %}
    <div class="card rounded-lg p-5">
        <h3 class="text-sm font-medium text-white mb-4">Competing Bids ({{ competitors | length }})</h3>
        <div class="space-y-4">
            {% for bid in competitors %}
            <div class="py-4 {% if not loop.last %}border-b border-gray-800{% endif %}">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-xs text-gray-400 font-medium">
                            {{ loop.index }}
                        </div>
                        <div>
                            <div class="text-sm text-gray-200 font-medium">
                                @{{ bid.username or ('Bidder #' ~ bid.bidder_id) }}
                                {% if bid.display_name and bid.display_name != bid.username %}
                                <span class="text-gray-500 font-normal">({{ bid.display_name }})</span>
                                {% endif %}
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-500">
                                {% if bid.country %}<span>{{ bid.country }}</span>{% endif %}
                                {% if bid.rating %}
                                <span>{{ "%.1f" | format(bid.rating) }} rating</span>
                                {% endif %}
                                {% if bid.reviews %}
                                <span>{{ bid.reviews }} reviews</span>
                                {% endif %}
                                <span>{{ bid.period }} days</span>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-lg font-medium {% if our_bid and bid.amount < our_bid.amount %}text-red-400{% elif our_bid and bid.amount > our_bid.amount %}text-green-400{% else %}text-gray-300{% endif %}">
                            ${{ "%.2f" | format(bid.amount) }}
                        </div>
                        {% if bid.award_status == 'awarded' %}
                        <span class="badge badge-green text-xs">Awarded</span>
                        {% endif %}
                    </div>
                </div>
                {% if bid.description %}
                <div class="ml-11 text-sm text-gray-400 whitespace-pre-wrap">{{ bid.description }}</div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if not bids_data %}
    <div class="card rounded-lg p-8 text-center text-sm text-gray-600">No bids found for this project</div>
    {% elif bids_data[0].get('error') %}
    <div class="card rounded-lg p-5 text-sm text-red-400">Failed to load bids: {{ bids_data[0].error }}</div>
    {% endif %}

    <!-- Bid Summary -->
    {% if bids_data and not bids_data[0].get('error') %}
    <div class="card rounded-lg p-4">
        <div class="flex items-center justify-between text-sm">
            <span class="text-gray-500">Total bids: {{ bids_data | length }}</span>
            {% set amounts = bids_data | map(attribute='amount') | select('number') | list %}
            {% if amounts %}
            <span class="text-gray-500">Range: ${{ "%.0f" | format(amounts | min) }} — ${{ "%.0f" | format(amounts | max) }}</span>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

{% elif tab == 'development' %}
<div class="space-y-4">
    {% for session in dev_sessions %}
    <div class="card rounded-lg p-5">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <span class="badge badge-{% if session.status.value == 'running' %}blue{% elif session.status.value == 'completed' %}green{% elif session.status.value == 'failed' %}red{% else %}gray{% endif %}">
                    {{ session.status.value | replace('_', ' ') | title }}
                </span>
                <span class="text-sm text-gray-500">{{ session.iteration_count or 0 }} iterations</span>
            </div>
            <span class="text-xs text-gray-600">
                {% if session.started_at %}Started {{ session.started_at | timeago }}{% endif %}
            </span>
        </div>
        {% if session.claude_md %}
        <details class="mt-3">
            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">CLAUDE.md</summary>
            <pre class="mt-2 text-xs text-gray-400 bg-gray-900 rounded p-3 overflow-x-auto">{{ session.claude_md }}</pre>
        </details>
        {% endif %}
    </div>
    {% else %}
    <div class="card rounded-lg p-8 text-center text-sm text-gray-600">No development sessions</div>
    {% endfor %}
</div>

{% elif tab == 'logs' %}
<!-- Project Timeline -->
<div class="card rounded-lg p-5 mb-6">
    <h3 class="text-sm font-medium text-white mb-4">Project Timeline</h3>
    <div class="relative pl-6 space-y-0">
        {% for entry in timeline %}
        <div class="relative pb-6 {% if not loop.last %}border-l border-gray-800{% endif %}" style="margin-left: 4px;">
            <!-- Dot -->
            <div class="absolute -left-[7px] top-1 w-3.5 h-3.5 rounded-full border-2
                {% if entry.type == 'discovery' %}bg-gray-600 border-gray-500
                {% elif entry.type == 'analysis' %}bg-purple-600 border-purple-500
                {% elif entry.type == 'bid' %}bg-blue-600 border-blue-500
                {% elif entry.type == 'response' %}bg-yellow-600 border-yellow-500
                {% elif entry.type == 'plan' %}bg-cyan-600 border-cyan-500
                {% elif entry.type == 'awarded' %}bg-green-600 border-green-500
                {% elif entry.type == 'dev' %}bg-indigo-600 border-indigo-500
                {% elif entry.type == 'complete' %}bg-emerald-600 border-emerald-500
                {% else %}bg-gray-600 border-gray-500{% endif %}">
            </div>
            <!-- Content -->
            <div class="ml-6">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium
                        {% if entry.type == 'discovery' %}text-gray-300
                        {% elif entry.type == 'analysis' %}text-purple-400
                        {% elif entry.type == 'bid' %}text-blue-400
                        {% elif entry.type == 'response' %}text-yellow-400
                        {% elif entry.type == 'plan' %}text-cyan-400
                        {% elif entry.type == 'awarded' %}text-green-400
                        {% elif entry.type == 'dev' %}text-indigo-400
                        {% elif entry.type == 'complete' %}text-emerald-400
                        {% else %}text-gray-300{% endif %}">
                        {{ entry.event }}
                    </span>
                    <span class="text-xs text-gray-600 mono">{{ entry.time.strftime('%Y-%m-%d %H:%M:%S') if entry.time else '' }}</span>
                </div>
                {% if entry.detail %}
                <div class="text-xs text-gray-500 mt-1">{{ entry.detail }}</div>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="text-sm text-gray-600 text-center py-4">No timeline events</div>
        {% endfor %}
    </div>
</div>

<!-- Dev Session Logs (live-updating) -->
<div class="card rounded-lg p-5">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-white">Development Logs</h3>
        <div id="log-status" class="flex items-center gap-1.5">
            <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
            <span class="text-xs text-gray-500">Live</span>
        </div>
    </div>
    <div id="dev-logs" class="space-y-1 max-h-[500px] overflow-y-auto mono text-xs">
        {% for log in dev_logs %}
        <div class="pl-3 py-1 border-l-2 {% if log.log_type.value == 'error' %}border-red-500/50 bg-red-950/20{% else %}border-gray-800{% endif %}" data-log-id="{{ log.id }}">
            <span class="text-gray-600">{{ log.created_at.strftime('%H:%M:%S') }}</span>
            <span class="{% if log.log_type.value == 'error' %}text-red-400{% elif log.log_type.value == 'decision_needed' %}text-yellow-400{% elif log.log_type.value == 'thinking' %}text-purple-400{% elif log.log_type.value == 'tool_call' %}text-cyan-400{% else %}text-gray-500{% endif %} font-medium">
                [{{ log.log_type.value }}]
            </span>
            <span class="text-gray-300">{{ log.content[:500] }}</span>
        </div>
        {% endfor %}
        {% if not dev_logs %}
        <div class="text-gray-600 text-center py-4">No logs yet</div>
        {% endif %}
    </div>
</div>
<script>
(function() {
    const container = document.getElementById('dev-logs');
    const projectId = '{{ project.id }}';
    let knownIds = new Set();
    document.querySelectorAll('[data-log-id]').forEach(el => knownIds.add(el.dataset.logId));

    const typeColors = {
        thinking: 'text-purple-400',
        tool_call: 'text-cyan-400',
        tool_result: 'text-gray-500',
        error: 'text-red-400',
        decision_needed: 'text-yellow-400',
    };

    async function poll() {
        try {
            const res = await fetch(`/api/v1/projects/${projectId}/logs`);
            const logs = await res.json();
            let added = false;
            for (const l of logs) {
                if (knownIds.has(l.id)) continue;
                knownIds.add(l.id);
                const color = typeColors[l.log_type] || 'text-gray-400';
                const border = l.log_type === 'error' ? 'border-red-500/50 bg-red-950/20' : 'border-gray-800';
                const time = l.created_at ? new Date(l.created_at).toLocaleTimeString('en-GB', {hour12:false}) : '';
                const html = `<div class="pl-3 py-1 border-l-2 ${border}" data-log-id="${l.id}">
                    <span class="text-gray-600">${time}</span>
                    <span class="${color} font-medium">[${l.log_type}]</span>
                    <span class="text-gray-300">${l.content.substring(0, 500)}</span>
                </div>`;
                // Remove "No logs yet" placeholder
                const placeholder = container.querySelector('.text-center');
                if (placeholder) placeholder.remove();
                container.insertAdjacentHTML('beforeend', html);
                added = true;
            }
            if (added) container.scrollTop = container.scrollHeight;
        } catch (e) {
            console.error('Log poll error:', e);
        }
    }
    setInterval(poll, 5000);
})();
</script>

{% elif tab == 'decisions' %}
<div class="space-y-4">
    {% for d in decisions %}
    <div class="card rounded-lg p-5 {% if d.status.value == 'pending' %}border-yellow-800{% endif %}">
        <div class="flex items-center justify-between mb-3">
            <span class="badge badge-{% if d.status.value == 'pending' %}yellow{% elif d.status.value == 'answered' %}green{% else %}red{% endif %}">
                {{ d.status.value | title }}
            </span>
            <span class="text-xs text-gray-600">{{ d.notified_at | timeago }}</span>
        </div>
        <div class="text-sm text-gray-300 mb-3">{{ d.question }}</div>
        {% if d.status.value == 'pending' %}
        <form method="POST" action="/projects/{{ project.id }}/decisions/{{ d.id }}/answer" class="mt-3">
            <textarea name="answer" rows="3" placeholder="Type your answer..."
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
            <button type="submit"
                class="mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm rounded-lg transition">
                Submit Answer
            </button>
        </form>
        {% elif d.answer %}
        <div class="mt-2 p-3 bg-gray-900 rounded-lg text-sm text-gray-400">
            <span class="text-xs text-green-500 block mb-1">Answer:</span>
            {{ d.answer }}
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="card rounded-lg p-8 text-center text-sm text-gray-600">No decisions requested</div>
    {% endfor %}
</div>

{% elif tab == 'reports' %}
<div class="space-y-4">
    {% for r in reports %}
    <div class="card rounded-lg p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-medium text-white">{{ r.report_date }}</h3>
        </div>
        {% if r.commit_diff_summary %}
        <div class="text-sm text-gray-400 whitespace-pre-wrap mb-3">{{ r.commit_diff_summary }}</div>
        {% endif %}
        {% if r.claude_md_diff %}
        <details>
            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">CLAUDE.md diff</summary>
            <pre class="mt-2 text-xs text-gray-400 bg-gray-900 rounded p-3 overflow-x-auto">{{ r.claude_md_diff }}</pre>
        </details>
        {% endif %}
    </div>
    {% else %}
    <div class="card rounded-lg p-8 text-center text-sm text-gray-600">No reports yet</div>
    {% endfor %}
</div>

{% elif tab == 'intake' %}
<form method="POST" action="/projects/{{ project.id }}/intake-submit">
    {% if intake_analysis %}
    <!-- Analysis Summary -->
    <div class="card rounded-lg p-5 mb-4">
        <h3 class="text-sm font-medium text-white mb-2">AI Analysis Summary</h3>
        {% if intake_analysis.client_project_summary %}
        <p class="text-sm text-gray-400 mb-3">{{ intake_analysis.client_project_summary }}</p>
        {% endif %}
        <div class="flex items-center gap-4 text-xs">
            {% if intake_analysis.completeness_score %}
            <span class="text-gray-500">Completeness:
                <span class="{% if intake_analysis.completeness_score.overall >= 70 %}text-green-400{% elif intake_analysis.completeness_score.overall >= 40 %}text-yellow-400{% else %}text-red-400{% endif %} font-medium">
                    {{ intake_analysis.completeness_score.overall }}%
                </span>
            </span>
            {% endif %}
            {% if intake_analysis.project_type_classification %}
            <span class="text-gray-500">Type:
                <span class="text-purple-400 font-medium">{{ intake_analysis.project_type_classification.type | replace('_', ' ') | title }}</span>
            </span>
            {% if not intake_analysis.project_type_classification.is_software %}
            <span class="badge badge-red text-xs">Not Software</span>
            {% endif %}
            {% endif %}
            {% if intake_analysis.promo_qualification %}
            <span class="text-gray-500">Promo:
                {% if intake_analysis.promo_qualification.qualifies %}
                <span class="text-green-400 font-medium">Qualifies ($99.99)</span>
                {% else %}
                <span class="text-gray-600">No</span>
                {% endif %}
            </span>
            {% endif %}
        </div>
    </div>

    {% if intake_analysis.risk_flags %}
    <div class="card rounded-lg p-4 mb-4 border-yellow-800/50">
        <h4 class="text-xs font-medium text-yellow-400 mb-2">Risk Flags</h4>
        {% for rf in intake_analysis.risk_flags %}
        <div class="text-xs text-gray-400 mb-1">
            <span class="text-yellow-500">{{ rf.id }}:</span> {{ rf.flag }}
            {% if rf.recommendation %}<span class="text-gray-600"> — {{ rf.recommendation }}</span>{% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endif %}

    <!-- Questions -->
    <div class="space-y-3 mb-6">
        {% set current_category = namespace(value='') %}
        {% for q in intake_questions %}
        {% if q.category != current_category.value %}
        {% set current_category.value = q.category %}
        <div class="pt-4 pb-1">
            <h3 class="text-sm font-semibold text-purple-400">{{ q.category }}</h3>
        </div>
        {% endif %}
        <div class="card rounded-lg p-4">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium
                    {% if q.priority == 'high' %}bg-red-900/50 text-red-400 border border-red-800
                    {% elif q.priority == 'medium' %}bg-yellow-900/50 text-yellow-400 border border-yellow-800
                    {% else %}bg-gray-800 text-gray-500 border border-gray-700{% endif %}">
                    {{ q.idx + 1 }}
                </div>
                <div class="flex-1">
                    <div class="text-sm text-white mb-1">{{ q.question }}</div>
                    {% if q.context %}
                    <div class="text-xs text-gray-600 mb-2">{{ q.context }}</div>
                    {% endif %}

                    {% if q.q_type == 'yes_no' %}
                    <div class="flex gap-4 mt-2">
                        <label class="flex items-center gap-1.5 text-sm text-gray-300 cursor-pointer">
                            <input type="radio" name="q_{{ q.idx }}" value="Yes" class="accent-blue-500"> Yes
                        </label>
                        <label class="flex items-center gap-1.5 text-sm text-gray-300 cursor-pointer">
                            <input type="radio" name="q_{{ q.idx }}" value="No" class="accent-blue-500"> No
                        </label>
                        <label class="flex items-center gap-1.5 text-sm text-gray-300 cursor-pointer">
                            <input type="radio" name="q_{{ q.idx }}" value="Not sure" class="accent-blue-500"> Not sure
                        </label>
                    </div>

                    {% elif q.q_type == 'multiple_choice' and q.options %}
                    <div class="space-y-1.5 mt-2">
                        {% for opt in q.options %}
                        <label class="flex items-center gap-1.5 text-sm text-gray-300 cursor-pointer">
                            <input type="radio" name="q_{{ q.idx }}" value="{{ opt }}" class="accent-blue-500"> {{ opt }}
                        </label>
                        {% endfor %}
                    </div>

                    {% elif q.q_type == 'multi_select' and q.options %}
                    <div class="space-y-1.5 mt-2">
                        {% for opt in q.options %}
                        <label class="flex items-center gap-1.5 text-sm text-gray-300 cursor-pointer">
                            <input type="checkbox" name="q_{{ q.idx }}" value="{{ opt }}" class="accent-blue-500 rounded"> {{ opt }}
                        </label>
                        {% endfor %}
                    </div>

                    {% else %}
                    <textarea name="q_{{ q.idx }}" rows="2" placeholder="Your answer..."
                        class="w-full mt-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="flex items-center gap-4">
        <button type="submit"
            class="px-6 py-3 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition"
            onclick="this.disabled=true;this.textContent='Processing...';this.form.submit();">
            Submit Answers & Create Project
        </button>
        <span class="text-xs text-gray-600">This will generate a delivery plan and queue a dev session</span>
    </div>
</form>
{% endif %}

<style>
.markdown-body h1,.markdown-body h2,.markdown-body h3{color:#e5e7eb;margin-top:0.8em;margin-bottom:0.4em;font-weight:600;}
.markdown-body h1{font-size:1.25em;} .markdown-body h2{font-size:1.1em;} .markdown-body h3{font-size:1em;}
.markdown-body p{margin-bottom:0.5em;}
.markdown-body ul,.markdown-body ol{padding-left:1.5em;margin-bottom:0.5em;}
.markdown-body li{margin-bottom:0.2em;}
.markdown-body code{background:#1f2937;padding:1px 4px;border-radius:3px;font-size:0.85em;}
.markdown-body pre{background:#111827;padding:0.75em;border-radius:6px;overflow-x:auto;margin-bottom:0.5em;}
.markdown-body pre code{background:none;padding:0;}
.markdown-body strong{color:#d1d5db;}
.markdown-body a{color:#60a5fa;text-decoration:underline;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-markdown]').forEach(function(el) {
        var raw = el.getAttribute('data-markdown');
        if (raw && typeof marked !== 'undefined') {
            el.innerHTML = marked.parse(raw);
        }
    });
    // Also render markdown in details elements when they open
    document.querySelectorAll('details').forEach(function(d) {
        d.addEventListener('toggle', function() {
            d.querySelectorAll('[data-markdown]').forEach(function(el) {
                if (!el.dataset.rendered && typeof marked !== 'undefined') {
                    el.innerHTML = marked.parse(el.getAttribute('data-markdown'));
                    el.dataset.rendered = '1';
                }
            });
        });
    });
});
</script>
{% endblock %}