{% extends "base.html" %}
{% set active_page = "opensource" %}
{% block title %}Opensource{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold text-white">Opensource Contributions</h1>
    <div class="text-sm text-gray-500">{{ contributions | length }} total</div>
</div>

<!-- Stats row -->
<div class="grid grid-cols-3 md:grid-cols-5 gap-3 md:gap-4 mb-6">
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-white">{{ stats.total }}</div>
        <div class="text-xs text-gray-400">Total</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-green-400">{{ stats.pr_opened }}</div>
        <div class="text-xs text-gray-400">PRs Opened</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-emerald-400">{{ stats.pr_merged }}</div>
        <div class="text-xs text-gray-400">Merged</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-blue-400">{{ stats.in_progress }}</div>
        <div class="text-xs text-gray-400">In Progress</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-red-400">{{ stats.failed }}</div>
        <div class="text-xs text-gray-400">Failed</div>
    </div>
</div>

<!-- Status Filters -->
<div class="flex items-center gap-2 md:gap-3 mb-6 flex-wrap">
    <a href="/opensource"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if not current_status %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        All
    </a>
    {% for s in statuses %}
    <a href="/opensource?status={{ s }}"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if current_status == s %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        {{ s | replace('_', ' ') | title }}
    </a>
    {% endfor %}
</div>

<!-- Table -->
<div class="card rounded-lg overflow-hidden">
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-800 text-left">
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Repository</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Issue</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider hidden md:table-cell">Time</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">PR</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider hidden md:table-cell">Created</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            {% for c in contributions %}
            <tr class="hover:bg-gray-900/50 transition cursor-pointer" onclick="document.getElementById('detail-{{ c.id }}').classList.toggle('hidden')">
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        {% if c.repo_language %}
                        <span class="text-xs font-mono text-purple-400 bg-purple-400/10 px-1.5 py-0.5 rounded">{{ c.repo_language }}</span>
                        {% endif %}
                        <a href="{{ c.repo_url }}" target="_blank" class="text-blue-400 hover:text-blue-300" onclick="event.stopPropagation()">
                            {{ c.repo_full_name }}
                        </a>
                        {% if c.repo_stars %}
                        <span class="text-xs text-yellow-500">{{ c.repo_stars | star_count }}</span>
                        {% endif %}
                    </div>
                </td>
                <td class="px-4 py-3">
                    <a href="{{ c.issue_url }}" target="_blank" class="text-gray-300 hover:text-white" onclick="event.stopPropagation()">
                        #{{ c.issue_number }}: {{ c.issue_title[:60] }}{% if c.issue_title | length > 60 %}...{% endif %}
                    </a>
                </td>
                <td class="px-4 py-3">
                    <span class="badge badge-{{ c.status.value | oss_status_color }}">
                        {{ c.status.value | replace('_', ' ') | title }}
                    </span>
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">
                    {% if c.analysis_duration_seconds %}
                    <div>Analysis: {{ c.analysis_duration_seconds | duration }}</div>
                    {% endif %}
                    {% if c.implementation_duration_seconds %}
                    <div>Impl: {{ c.implementation_duration_seconds | duration }}</div>
                    {% endif %}
                </td>
                <td class="px-4 py-3">
                    {% if c.pr_url %}
                    <a href="{{ c.pr_url }}" target="_blank" class="text-green-400 hover:text-green-300 text-xs" onclick="event.stopPropagation()">PR #{{ c.pr_number }} &rarr;</a>
                    {% else %}
                    <span class="text-gray-700">&mdash;</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">{{ c.created_at | timeago }}</td>
            </tr>
            <!-- Expandable detail row -->
            <tr id="detail-{{ c.id }}" class="hidden">
                <td colspan="6" class="px-4 py-4 bg-gray-900/30">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {% if c.analysis_summary %}
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">Analysis</div>
                            <div class="text-sm text-gray-300">{{ c.analysis_summary[:500] }}</div>
                        </div>
                        {% endif %}
                        {% if c.implementation_plan %}
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">Plan</div>
                            <div class="text-sm text-gray-300">{{ c.implementation_plan[:500] }}</div>
                        </div>
                        {% endif %}
                        {% if c.commit_log %}
                        <div class="md:col-span-2">
                            <div class="text-xs text-gray-500 uppercase mb-1">Commit Log</div>
                            <pre class="text-xs text-gray-400 bg-black/30 rounded p-2 overflow-x-auto">{{ c.commit_log }}</pre>
                        </div>
                        {% endif %}
                        {% if c.error_message %}
                        <div class="md:col-span-2">
                            <div class="text-xs text-red-500 uppercase mb-1">Error</div>
                            <div class="text-sm text-red-400">{{ c.error_message }}</div>
                        </div>
                        {% endif %}
                        {% if c.fork_url %}
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">Fork</div>
                            <a href="{{ c.fork_url }}" target="_blank" class="text-xs text-blue-400 hover:text-blue-300">{{ c.fork_url }}</a>
                        </div>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="px-4 py-8 text-center text-gray-600">No contributions yet — the opensource agent is searching for issues to fix</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}