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

{% block title %}{% trans "Test Run Browser" %}{% endblock %}

{% block contents %}
<div class="container-fluid" id="test-browser-container">
    {% include "tcms_test_browser/_nav.html" %}
    <!-- 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="pficon pficon-trend-up"></span>
                        {% trans "Statistics Dashboard" %}
                    </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="pficon pficon-running" style="font-size: 24px; color: #0088ce;"></span>
                                <div id="stat-total-count" class="stat-number">--</div>
                                <div class="stat-label">{% trans "Total Test Runs" %}</div>
                            </div>
                        </div>
                        <!-- By Execution Status Donut -->
                        <div class="col-sm-3 stat-card">
                            <strong class="stat-chart-title">{% trans "By Execution Status" %}</strong>
                            <div id="chart-exec-status" class="stat-chart-container"></div>
                        </div>
                        <!-- Completed vs In Progress -->
                        <div class="col-sm-7 stat-card">
                            <strong class="stat-chart-title">{% trans "Completion" %}</strong>
                            <div class="automation-stats">
                                <div id="completed-percent" class="stat-number" style="font-size: 28px;">--%</div>
                                <div class="progress" style="margin-top: 10px;">
                                    <div id="completed-bar" class="progress-bar progress-bar-success" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div id="inprogress-bar" class="progress-bar progress-bar-info" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="small text-muted">
                                    <span class="label label-success" id="completed-count">0</span> {% trans "completed" %}
                                    <span class="label label-info" id="inprogress-count" style="margin-left: 5px;">0</span> {% trans "in progress" %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- By Product Bar (own row) -->
                    <div class="row">
                        <div class="col-sm-12 stat-card" style="min-height: auto;">
                            <strong class="stat-chart-title">{% trans "By Product" %}</strong>
                            <div id="chart-product" 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-4 col-lg-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/Filter -->
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text"
                                   class="form-control"
                                   id="tree-search"
                                   placeholder="{% trans 'Search test runs...' %}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="btn-search">
                                    <span class="fa fa-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-inline tree-select-all-label">
                            <input type="checkbox" id="select-all-tree"> {% trans "Select All" %}
                        </label>
                        <span class="badge selection-count" id="selection-count" style="display: none;">0</span>
                    </div>

                    <!-- Filter Options -->
                    <div class="form-group">
                        <select id="filter-product" class="form-control">
                            <option value="">{% trans "All Products" %}</option>
                            {% for product in tree_data %}
                            <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" data-type="run" data-id="{{ run.id }}">
                                                <input type="checkbox" class="tree-checkbox" data-id="{{ run.id }}" title="Select for export">&nbsp;<span class="pficon pficon-running"></span>
                                                <span class="tree-label">{{ run.summary }}</span>
                                                {% if run.stop_date %}
                                                <span class="label label-success" style="margin-left: 5px;">Completed</span>
                                                {% else %}
                                                <span class="label label-info" style="margin-left: 5px;">In Progress</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>
        </div>

        <!-- Right Panel: Test Run Details -->
        <div class="col-md-8 col-lg-9" id="detail-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="detail-title">
                        <span class="pficon pficon-running"></span>
                        {% trans "Test Run Details" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Placeholder -->
                    <div id="detail-placeholder" class="text-center text-muted" style="padding: 50px;">
                        <span class="pficon pficon-info" 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 details here." %}</p>
                    </div>

                    <!-- Test Run Detail Content -->
                    <div id="detail-content" style="display: none;">
                        <!-- Header -->
                        <div class="row">
                            <div class="col-xs-12">
                                <h2 id="run-summary" class="page-header"></h2>
                            </div>
                        </div>

                        <!-- Quick Info -->
                        <div class="row">
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "ID" %}</dt>
                                    <dd><a id="run-id-link" href="#" target="_blank">TR-<span id="run-id"></span></a></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Status" %}</dt>
                                    <dd><span id="run-status" class="label label-default"></span></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Plan" %}</dt>
                                    <dd><a id="run-plan-link" href="#" target="_blank"><span id="run-plan"></span></a></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Build" %}</dt>
                                    <dd><span id="run-build"></span></dd>
                                </dl>
                            </div>
                        </div>

                        <hr>

                        <!-- Main Content Tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#tab-executions" role="tab" data-toggle="tab">
                                    {% trans "Executions" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-info" role="tab" data-toggle="tab">
                                    {% trans "Information" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-notes" role="tab" data-toggle="tab">
                                    {% trans "Notes" %}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" style="padding-top: 15px;">
                            <!-- Executions Tab -->
                            <div role="tabpanel" class="tab-pane active" id="tab-executions">
                                <table class="table table-striped table-condensed" id="executions-table">
                                    <thead>
                                        <tr>
                                            <th>{% trans "Case ID" %}</th>
                                            <th>{% trans "Summary" %}</th>
                                            <th>{% trans "Status" %}</th>
                                            <th>{% trans "Tested By" %}</th>
                                            <th>{% trans "Date" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="executions-body"></tbody>
                                </table>
                            </div>

                            <!-- Information Tab -->
                            <div role="tabpanel" class="tab-pane" id="tab-info">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "Product" %}</dt>
                                            <dd id="run-product"></dd>
                                            <dt>{% trans "Plan" %}</dt>
                                            <dd id="run-plan-info"></dd>
                                            <dt>{% trans "Build" %}</dt>
                                            <dd id="run-build-info"></dd>
                                        </dl>
                                    </div>
                                    <div class="col-sm-6">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "Manager" %}</dt>
                                            <dd id="run-manager"></dd>
                                            <dt>{% trans "Default Tester" %}</dt>
                                            <dd id="run-default-tester"></dd>
                                            <dt>{% trans "Started" %}</dt>
                                            <dd id="run-start-date"></dd>
                                            <dt>{% trans "Stopped" %}</dt>
                                            <dd id="run-stop-date"></dd>
                                            <dt>{% trans "Planned Start" %}</dt>
                                            <dd id="run-planned-start"></dd>
                                            <dt>{% trans "Planned Stop" %}</dt>
                                            <dd id="run-planned-stop"></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>

                            <!-- Notes Tab -->
                            <div role="tabpanel" class="tab-pane" id="tab-notes">
                                <div id="run-notes" class="markdown-content"></div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row" style="margin-top: 20px;">
                            <div class="col-xs-12">
                                <a id="btn-view-full" href="#" class="btn btn-primary" target="_blank">
                                    <span class="fa fa-external-link"></span> {% trans "View Full Details" %}
                                </a>
                            </div>
                        </div>
                    </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 "ID" %}</th>
                                    <th>{% trans "Summary" %}</th>
                                    <th>{% trans "Plan" %}</th>
                                    <th>{% trans "Product" %}</th>
                                    <th>{% trans "Status" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="chart-filter-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="chart-filter-modal-title">Filtered Results</h4>
            </div>
            <div class="modal-body">
                <div id="chart-filter-loading" class="text-center" style="display:none;">
                    <span class="spinner spinner-lg"></span> Loading...
                </div>
                <table class="table table-striped table-hover" id="chart-filter-table" style="display:none;">
                    <thead><tr id="chart-filter-thead"></tr></thead>
                    <tbody id="chart-filter-tbody"></tbody>
                </table>
                <div class="text-muted text-center" id="chart-filter-empty" style="display:none;">No results found</div>
                <nav class="text-center" id="chart-filter-pagination"></nav>
            </div>
        </div>
    </div>
</div>

{% now "U" as cache_bust %}
<link rel="stylesheet" href="{% static 'c3/c3.min.css' %}?v={{ cache_bust }}">
<link rel="stylesheet" href="{% static 'tcms_test_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_test_browser/js/run_browser.js' %}?v={{ cache_bust }}"></script>
{% endblock %}