{% extends "base.html" %}
{% set active_page = "bugs" %}
{% block title %}Bugs{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold text-white">Bugs</h1>
    <div class="flex gap-2">
        <a href="/bugs" class="px-3 py-1.5 rounded-lg text-xs {% if not status_filter %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">All</a>
        <a href="/bugs?status=open" class="px-3 py-1.5 rounded-lg text-xs {% if status_filter == 'open' %}bg-red-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">Open</a>
        <a href="/bugs?status=fixed" class="px-3 py-1.5 rounded-lg text-xs {% if status_filter == 'fixed' %}bg-green-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">Fixed</a>
        <a href="/bugs?status=in_progress" class="px-3 py-1.5 rounded-lg text-xs {% if status_filter == 'in_progress' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">In Progress</a>
    </div>
</div>

{% if not bugs %}
<div class="card rounded-lg p-12 text-center">
    <div class="text-gray-600 text-sm">No bugs found</div>
</div>
{% else %}

<div class="space-y-3">
    {% for bug in bugs %}
    {% set project = projects_map.get(bug.project_id) %}
    <div class="card rounded-lg p-5">
        <div class="flex items-start justify-between mb-3">
            <div class="flex items-center gap-3">
                <span class="font-mono text-xs px-2 py-0.5 rounded
                    {% if bug.severity == 'critical' %}bg-red-900/50 text-red-400 border border-red-800
                    {% elif bug.severity == 'high' %}bg-orange-900/50 text-orange-400 border border-orange-800
                    {% elif bug.severity == 'medium' %}bg-yellow-900/50 text-yellow-400 border border-yellow-800
                    {% else %}bg-gray-800 text-gray-400 border border-gray-700{% endif %}">
                    {{ bug.severity | upper }}
                </span>
                <span class="badge badge-{% if bug.status == 'open' %}red{% elif bug.status == 'fixed' %}green{% elif bug.status == 'in_progress' %}blue{% else %}gray{% endif %}">
                    {{ bug.status | replace('_', ' ') | title }}
                </span>
                <span class="font-mono text-xs text-gray-600">{{ bug.bug_id }}</span>
            </div>
            <span class="text-xs text-gray-600">{{ bug.created_at | timeago }}</span>
        </div>

        <h3 class="text-sm font-medium text-white mb-2">{{ bug.title }}</h3>

        {% if project %}
        <div class="text-xs text-gray-500 mb-2">
            <a href="/projects/{{ project.id }}" class="text-blue-400 hover:text-blue-300">{{ project.title[:60] }}</a>
            {% if bug.component %}
            <span class="ml-2 text-gray-600">{{ bug.component }}</span>
            {% endif %}
        </div>
        {% endif %}

        {% if bug.description %}
        <div class="text-sm text-gray-400 mb-3 bg-gray-900/50 rounded-lg p-3 font-mono text-xs whitespace-pre-wrap">{{ bug.description[:500] }}</div>
        {% endif %}

        {% if bug.root_cause %}
        <details class="mb-2">
            <summary class="text-xs text-purple-400 cursor-pointer hover:text-purple-300">Root Cause Analysis</summary>
            <div class="mt-2 text-xs text-gray-400 bg-gray-900/50 rounded-lg p-3 whitespace-pre-wrap">{{ bug.root_cause }}</div>
        </details>
        {% endif %}

        {% if bug.fix_summary %}
        <details class="mb-2">
            <summary class="text-xs text-green-400 cursor-pointer hover:text-green-300">Fix Applied</summary>
            <div class="mt-2 text-xs text-gray-400 bg-gray-900/50 rounded-lg p-3 whitespace-pre-wrap">{{ bug.fix_summary[:2000] }}</div>
        </details>
        {% endif %}

        <div class="flex items-center gap-4 mt-3">
            {% if bug.pr_url %}
            <a href="{{ bug.pr_url }}" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 16 16"><path d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
                Pull Request
            </a>
            {% endif %}
            {% if bug.sentry_issue_id %}
            <a href="https://sentry.bridgestack.systems/organizations/sentry/issues/{{ bug.sentry_issue_id }}/" target="_blank" class="text-xs text-orange-400 hover:text-orange-300">
                Sentry #{{ bug.sentry_issue_id }}
            </a>
            {% endif %}
            {% if bug.assigned_to %}
            <span class="text-xs text-gray-600">Assigned: {{ bug.assigned_to }}</span>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}