{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Artifact Browser" %}{% endblock %}

{% block contents %}
<div class="container-fluid" id="artifact-browser-container">
    <!-- Statistics Dashboard -->
    <div class="row" id="stats-panel">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title pull-left">
                        <span class="fa fa-bar-chart"></span>
                        {% trans "Artifact Statistics" %}
                    </h3>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fa fa-download"></span> {% trans "Export" %} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="#" class="btn-export" data-format="csv"><span class="fa fa-file-text-o"></span> {% trans "Export CSV" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="excel"><span class="fa fa-file-excel-o"></span> {% trans "Export Excel" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="docx"><span class="fa fa-file-word-o"></span> {% trans "Export Word" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="pdf"><span class="fa fa-file-pdf-o"></span> {% trans "Export PDF" %}</a></li>
                            </ul>
                        </div>
                        <button class="btn btn-link btn-xs" id="btn-toggle-stats" type="button">
                            <span class="fa fa-chevron-up"></span>
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body" id="stats-body">
                    <div class="row">
                        <!-- Total Count -->
                        <div class="col-sm-2 stat-card text-center">
                            <div class="stat-total">
                                <span class="fa fa-paperclip" style="font-size: 24px; color: #0088ce;"></span>
                                <div id="stat-total-count" class="stat-number">--</div>
                                <div class="stat-label">{% trans "Total Artifacts" %}</div>
                                <div id="stat-total-size" class="stat-label" style="color: #0088ce;">--</div>
                            </div>
                        </div>
                        <!-- By File Type Donut -->
                        <div class="col-sm-5 stat-card">
                            <strong class="stat-chart-title">{% trans "By File Type" %}</strong>
                            <div id="chart-file-type" class="stat-chart-container"></div>
                        </div>
                        <!-- By Source Donut -->
                        <div class="col-sm-5 stat-card">
                            <strong class="stat-chart-title">{% trans "By Source" %}</strong>
                            <div id="chart-source" class="stat-chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Browser Panels -->
    <div class="row" id="browser-row">
        <!-- Left Panel: Tree Navigation -->
        <div class="col-md-3" id="tree-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="pficon pficon-folder-open"></span>
                        {% trans "Test Runs" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Search -->
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text"
                                   class="form-control"
                                   id="tree-search"
                                   placeholder="{% trans 'Search artifacts...' %}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="btn-global-search">
                                    <span class="fa fa-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>

                    <!-- Product Filter -->
                    <div class="form-group">
                        <select id="filter-product" class="form-control">
                            <option value="">{% trans "All Products" %}</option>
                            {% for product in filter_products %}
                            <option value="{{ product.id }}">{{ product.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Tree View -->
                    <div id="tree-view" class="list-group tree-list-view-pf">
                        {% for product in tree_data %}
                        <div class="tree-node product-node" data-product-id="{{ product.id }}">
                            <div class="list-group-item tree-item" data-type="product" data-id="{{ product.id }}">
                                <span class="tree-toggle fa fa-angle-right"></span>
                                <span class="pficon pficon-folder-close"></span>
                                <span class="tree-label">{{ product.name }}</span>
                                <span class="badge">{{ product.count }}</span>
                            </div>
                            <div class="tree-children" style="display: none;">
                                {% for plan in product.plans %}
                                <div class="tree-node plan-node">
                                    <div class="list-group-item tree-item" data-type="plan" data-id="{{ plan.id }}">
                                        <span class="tree-toggle fa fa-angle-right"></span>
                                        <span class="pficon pficon-folder-close"></span>
                                        <span class="tree-label">{{ plan.name }}</span>
                                        <span class="badge">{{ plan.count }}</span>
                                    </div>
                                    <div class="tree-children" style="display: none;">
                                        {% for run in plan.runs %}
                                        <div class="tree-node run-node">
                                            <div class="list-group-item tree-item run-item{% if not run.has_attachments %} no-attachments{% endif %}" data-type="run" data-id="{{ run.id }}">
                                                <span class="pficon pficon-running"></span>
                                                <span class="tree-label">{{ run.summary }}</span>
                                                {% if not run.has_attachments %}
                                                <span class="fa fa-ban no-att-icon" title="{% trans 'No attachments' %}"></span>
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-muted text-center">
                            {% trans "No products found" %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Bug Tree Panel -->
            <div class="panel panel-default" id="bug-tree-panel">
                <div class="panel-heading" id="bug-tree-heading" style="cursor: pointer;">
                    <h3 class="panel-title">
                        <span class="fa fa-bug" style="color: #cc0000;"></span>
                        {% trans "Bugs" %}
                        <span class="fa fa-angle-down pull-right bug-tree-toggle" style="line-height: 20px;"></span>
                    </h3>
                </div>
                <div class="panel-body" id="bug-tree-body">
                    <div id="bug-tree-view" class="list-group tree-list-view-pf">
                        {% for product in bug_tree_data %}
                        <div class="tree-node product-node bug-product-node" data-product-id="{{ product.id }}">
                            <div class="list-group-item tree-item" data-type="bug-product" data-id="{{ product.id }}">
                                <span class="tree-toggle fa fa-angle-right"></span>
                                <span class="pficon pficon-folder-close"></span>
                                <span class="tree-label">{{ product.name }}</span>
                                <span class="badge">{{ product.bugs|length }}</span>
                            </div>
                            <div class="tree-children" style="display: none;">
                                {% for bug in product.bugs %}
                                <div class="tree-node bug-node">
                                    <div class="list-group-item tree-item bug-item" data-type="bug" data-id="{{ bug.id }}">
                                        <span class="fa fa-bug bug-icon-{{ bug.status }}"></span>
                                        <span class="tree-label">BUG-{{ bug.id }}: {{ bug.summary }}</span>
                                        <span class="bug-status-badge bug-status-{{ bug.status }}">{{ bug.status }}</span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-muted text-center">
                            {% trans "No bugs with attachments" %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div><!-- /tree-panel -->

        <!-- Right Panel: Attachment List -->
        <div class="col-md-9" id="detail-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="detail-title">
                        <span class="fa fa-paperclip"></span>
                        {% trans "Artifacts" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Placeholder -->
                    <div id="detail-placeholder" class="text-center text-muted" style="padding: 50px;">
                        <span class="fa fa-archive" style="font-size: 48px;"></span>
                        <h4>{% trans "Select a test run from the tree" %}</h4>
                        <p>{% trans "Click on a test run in the left panel to view its artifacts here." %}</p>
                    </div>

                    <!-- Toolbar (hidden until run selected) -->
                    <div id="attachment-toolbar" style="display: none;">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="filter-filename"
                                           placeholder="{% trans 'Filter by filename...' %}">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="btn-filter-filename">
                                            <span class="fa fa-filter"></span>
                                        </button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <select id="filter-file-type" class="form-control">
                                    <option value="">{% trans "All Types" %}</option>
                                    <option value="image">{% trans "Images" %}</option>
                                    <option value="text">{% trans "Text/Code" %}</option>
                                    <option value="markdown">{% trans "Markdown" %}</option>
                                    <option value="pdf">{% trans "PDF" %}</option>
                                    <option value="document">{% trans "Documents" %}</option>
                                    <option value="video">{% trans "Video" %}</option>
                                    <option value="audio">{% trans "Audio" %}</option>
                                    <option value="other">{% trans "Other" %}</option>
                                </select>
                            </div>
                            <div class="col-sm-5 text-right">
                                <label class="checkbox-inline" style="margin-right: 10px;">
                                    <input type="checkbox" id="select-all-attachments"> {% trans "Select All" %}
                                </label>
                                <button class="btn btn-primary btn-sm" id="btn-download-zip" disabled>
                                    <span class="fa fa-download"></span>
                                    {% trans "Download ZIP" %}
                                    <span class="badge" id="zip-count" style="display: none;">0</span>
                                </button>
                            </div>
                        </div>
                        <hr style="margin: 10px 0;">
                        <div id="attachment-summary" class="small text-muted"></div>
                    </div>

                    <!-- Bug Linked Entities (shown for bug views) -->
                    <div id="bug-linked-panel" class="panel panel-default bug-linked-panel" style="display: none;"></div>

                    <!-- Attachment Groups -->
                    <div id="attachment-groups" style="display: none;"></div>

                    <!-- Empty State -->
                    <div id="attachment-empty" style="display: none;" class="text-center text-muted" style="padding: 30px;">
                        <span class="fa fa-folder-open-o" style="font-size: 36px;"></span>
                        <h4>{% trans "No attachments found" %}</h4>
                        <p>{% trans "This test run has no attachments, or no attachments match your filters." %}</p>
                    </div>

                    <!-- Search Results -->
                    <div id="search-results" style="display: none;">
                        <h4>{% trans "Search Results" %}</h4>
                        <table class="table table-striped table-hover" id="search-results-table">
                            <thead>
                                <tr>
                                    <th>{% trans "Filename" %}</th>
                                    <th>{% trans "Type" %}</th>
                                    <th>{% trans "Size" %}</th>
                                    <th>{% trans "Context" %}</th>
                                    <th>{% trans "Uploader" %}</th>
                                    <th>{% trans "Date" %}</th>
                                    <th>{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody id="search-results-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include "tcms_artifact_browser/_preview.html" %}

<!-- Hidden form for ZIP download -->
<form id="zip-download-form" method="post" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="data" id="zip-form-data">
</form>

{% now "U" as cache_bust %}
<link rel="stylesheet" href="{% static 'c3/c3.min.css' %}?v={{ cache_bust }}">
<link rel="stylesheet" href="{% static 'tcms_artifact_browser/css/browser.css' %}?v={{ cache_bust }}">
<script src="{% static 'd3/d3.min.js' %}?v={{ cache_bust }}"></script>
<script src="{% static 'c3/c3.min.js' %}?v={{ cache_bust }}"></script>
<script src="{% static 'tcms_artifact_browser/js/browser.js' %}?v={{ cache_bust }}"></script>
{% endblock %}