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

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

{% block contents %}
<div class="container-fluid" id="test-browser-container">
    {% include "tcms_test_browser/_nav.html" %}
    <!-- Product Filter + Dashboard Export -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon"><span class="fa fa-filter"></span></span>
                <select id="filter-product" class="form-control">
                    <option value="">{% trans "All Products" %}</option>
                    {% for product in products %}
                    <option value="{{ product.id }}">{{ product.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="col-sm-8 text-right">
            <div class="btn-group" id="dash-export-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 Dashboard" %} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#" class="btn-dash-export" data-format="csv"><span class="fa fa-file-text-o"></span> {% trans "Export CSV" %}</a></li>
                    <li><a href="#" class="btn-dash-export" data-format="excel"><span class="fa fa-file-excel-o"></span> {% trans "Export Excel" %}</a></li>
                    <li><a href="#" class="btn-dash-export" data-format="docx"><span class="fa fa-file-word-o"></span> {% trans "Export Word" %}</a></li>
                    <li><a href="#" class="btn-dash-export" data-format="pdf"><span class="fa fa-file-pdf-o"></span> {% trans "Export PDF" %}</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs" id="consolidated-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#tab-dashboard" role="tab" data-toggle="tab">
                <span class="pficon pficon-trend-up"></span> {% trans "Dashboard" %}
            </a>
        </li>
        <li role="presentation">
            <a href="#tab-plan-drilldown" role="tab" data-toggle="tab">
                <span class="pficon pficon-catalog"></span> {% trans "Plan Drill-Down" %}
            </a>
        </li>
        <li role="presentation">
            <a href="#tab-case-drilldown" role="tab" data-toggle="tab">
                <span class="pficon pficon-catalog"></span> {% trans "Case Drill-Down" %}
            </a>
        </li>
        <li role="presentation">
            <a href="#tab-sankey" role="tab" data-toggle="tab">
                <span class="fa fa-random"></span> {% trans "Flow Diagram" %}
            </a>
        </li>
    </ul>

    <div class="tab-content" style="padding-top: 20px;">
        <!-- Dashboard Tab -->
        <div role="tabpanel" class="tab-pane active" id="tab-dashboard">
            <!-- Stat Cards -->
            <div class="row">
                <div class="col-sm-3">
                    <div class="panel panel-default text-center">
                        <div class="panel-body stat-total">
                            <span class="pficon pficon-catalog" style="font-size: 24px; color: #0088ce;"></span>
                            <div id="dash-total-cases" class="stat-number">--</div>
                            <div class="stat-label">{% trans "Test Cases" %}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="panel panel-default text-center">
                        <div class="panel-body stat-total">
                            <span class="pficon pficon-catalog" style="font-size: 24px; color: #3f9c35;"></span>
                            <div id="dash-total-plans" class="stat-number">--</div>
                            <div class="stat-label">{% trans "Test Plans" %}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="panel panel-default text-center">
                        <div class="panel-body stat-total">
                            <span class="pficon pficon-running" style="font-size: 24px; color: #ec7a08;"></span>
                            <div id="dash-total-runs" class="stat-number">--</div>
                            <div class="stat-label">{% trans "Test Runs" %}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="panel panel-default text-center">
                        <div class="panel-body stat-total">
                            <span class="pficon pficon-ok" style="font-size: 24px; color: #3f9c35;"></span>
                            <div id="dash-pass-rate" class="stat-number">--%</div>
                            <div class="stat-label">{% trans "Pass Rate" %}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3 class="panel-title">{% trans "Execution Status" %}</h3></div>
                        <div class="panel-body">
                            <div id="dash-chart-exec-status" style="height: 250px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3 class="panel-title">{% trans "Coverage Gaps" %}</h3></div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h5>{% trans "Cases Without Plans" %} <span class="badge" id="dash-cases-no-plans-count">0</span></h5>
                                    <div id="dash-cases-no-plans"></div>
                                    <nav class="text-center" id="dash-cases-no-plans-pagination"></nav>
                                </div>
                                <div class="col-sm-6">
                                    <h5>{% trans "Plans Without Runs" %} <span class="badge" id="dash-plans-no-runs-count">0</span></h5>
                                    <div id="dash-plans-no-runs"></div>
                                    <nav class="text-center" id="dash-plans-no-runs-pagination"></nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3 class="panel-title">{% trans "Recent Test Runs" %}</h3></div>
                        <div class="panel-body">
                            <table class="table table-striped table-condensed" id="dash-recent-runs">
                                <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "Summary" %}</th>
                                        <th>{% trans "Plan" %}</th>
                                        <th>{% trans "Status" %}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <nav class="text-center" id="dash-recent-runs-pagination"></nav>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3 class="panel-title">{% trans "Recent Test Cases" %}</h3></div>
                        <div class="panel-body">
                            <table class="table table-striped table-condensed" id="dash-recent-cases">
                                <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "Summary" %}</th>
                                        <th>{% trans "Product" %}</th>
                                        <th>{% trans "Author" %}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <nav class="text-center" id="dash-recent-cases-pagination"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plan Drill-Down Tab -->
        <div role="tabpanel" class="tab-pane" id="tab-plan-drilldown">
            <div class="row" style="margin-bottom: 15px;">
                <div class="col-sm-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="plan-search-input"
                               placeholder="{% trans 'Search by name, ID, or description...' %}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btn-plan-search">
                                <span class="fa fa-search"></span>
                            </button>
                            <button class="btn btn-default" type="button" id="btn-plan-browse"
                                    data-toggle="modal" data-target="#plan-browse-modal">
                                <span class="fa fa-list"></span> {% trans "Browse" %}
                            </button>
                        </span>
                    </div>
                    <div id="plan-search-results" class="list-group" style="display: none; position: absolute; z-index: 100; width: calc(100% - 30px); max-height: 300px; overflow-y: auto;"></div>
                </div>
            </div>

            <!-- Plan detail area -->
            <div id="plan-drilldown-placeholder" class="text-center text-muted" style="padding: 50px;">
                <span class="pficon pficon-info" style="font-size: 48px;"></span>
                <h4>{% trans "Search and select a test plan above" %}</h4>
            </div>

            <div id="plan-drilldown-content" style="display: none;">
                <!-- Plan info header -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title pull-left">
                            <span class="pficon pficon-catalog"></span>
                            <span id="pd-plan-name"></span>
                            <span id="pd-plan-status" class="label label-default" style="margin-left: 10px;"></span>
                        </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-plan-dd-export" data-format="csv"><span class="fa fa-file-text-o"></span> {% trans "Export CSV" %}</a></li>
                                    <li><a href="#" class="btn-plan-dd-export" data-format="excel"><span class="fa fa-file-excel-o"></span> {% trans "Export Excel" %}</a></li>
                                    <li><a href="#" class="btn-plan-dd-export" data-format="docx"><span class="fa fa-file-word-o"></span> {% trans "Export Word" %}</a></li>
                                    <li><a href="#" class="btn-plan-dd-export" data-format="pdf"><span class="fa fa-file-pdf-o"></span> {% trans "Export PDF" %}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-3"><strong>{% trans "Product" %}:</strong> <span id="pd-product"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Version" %}:</strong> <span id="pd-version"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Type" %}:</strong> <span id="pd-type"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Author" %}:</strong> <span id="pd-author"></span></div>
                        </div>
                    </div>
                </div>

                <!-- Runs summary bar -->
                <div class="panel panel-default">
                    <div class="panel-heading"><h3 class="panel-title">{% trans "Test Runs" %}</h3></div>
                    <div class="panel-body">
                        <table class="table table-striped table-condensed" id="pd-runs-table">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Summary" %}</th>
                                    <th>{% trans "Started" %}</th>
                                    <th>{% trans "Stopped" %}</th>
                                    <th>{% trans "Executions" %}</th>
                                    <th>{% trans "Passed" %}</th>
                                    <th>{% trans "Completion" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- Cases × Runs matrix -->
                <div class="panel panel-default">
                    <div class="panel-heading"><h3 class="panel-title">{% trans "Cases Execution Matrix" %}</h3></div>
                    <div class="panel-body" style="overflow-x: auto;">
                        <table class="table table-bordered table-condensed" id="pd-matrix-table">
                            <thead id="pd-matrix-head"></thead>
                            <tbody id="pd-matrix-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Case Drill-Down Tab -->
        <div role="tabpanel" class="tab-pane" id="tab-case-drilldown">
            <div class="row" style="margin-bottom: 15px;">
                <div class="col-sm-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="case-search-input"
                               placeholder="{% trans 'Search by name, ID, or description...' %}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btn-case-search">
                                <span class="fa fa-search"></span>
                            </button>
                            <button class="btn btn-default" type="button" id="btn-case-browse"
                                    data-toggle="modal" data-target="#case-browse-modal">
                                <span class="fa fa-list"></span> {% trans "Browse" %}
                            </button>
                        </span>
                    </div>
                    <div id="case-search-results" class="list-group" style="display: none; position: absolute; z-index: 100; width: calc(100% - 30px); max-height: 300px; overflow-y: auto;"></div>
                </div>
            </div>

            <!-- Case detail area -->
            <div id="case-drilldown-placeholder" class="text-center text-muted" style="padding: 50px;">
                <span class="pficon pficon-info" style="font-size: 48px;"></span>
                <h4>{% trans "Search and select a test case above" %}</h4>
            </div>

            <div id="case-drilldown-content" style="display: none;">
                <!-- Case info header -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title pull-left">
                            <span class="pficon pficon-catalog"></span>
                            TC-<span id="cd-case-id"></span>: <span id="cd-case-summary"></span>
                        </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-case-dd-export" data-format="csv"><span class="fa fa-file-text-o"></span> {% trans "Export CSV" %}</a></li>
                                    <li><a href="#" class="btn-case-dd-export" data-format="excel"><span class="fa fa-file-excel-o"></span> {% trans "Export Excel" %}</a></li>
                                    <li><a href="#" class="btn-case-dd-export" data-format="docx"><span class="fa fa-file-word-o"></span> {% trans "Export Word" %}</a></li>
                                    <li><a href="#" class="btn-case-dd-export" data-format="pdf"><span class="fa fa-file-pdf-o"></span> {% trans "Export PDF" %}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-3"><strong>{% trans "Status" %}:</strong> <span id="cd-status"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Priority" %}:</strong> <span id="cd-priority"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Product" %}:</strong> <span id="cd-product"></span></div>
                            <div class="col-sm-3"><strong>{% trans "Author" %}:</strong> <span id="cd-author"></span></div>
                        </div>
                    </div>
                </div>

                <!-- Plans containing this case -->
                <div class="panel panel-default">
                    <div class="panel-heading"><h3 class="panel-title">{% trans "Test Plans" %}</h3></div>
                    <div class="panel-body">
                        <table class="table table-striped table-condensed" id="cd-plans">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Name" %}</th>
                                    <th>{% trans "Status" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- Executions by Run -->
                <div class="panel panel-default">
                    <div class="panel-heading"><h3 class="panel-title">{% trans "Executions by Run" %}</h3></div>
                    <div class="panel-body">
                        <table class="table table-striped table-condensed" id="cd-executions-table">
                            <thead>
                                <tr>
                                    <th>{% trans "Run" %}</th>
                                    <th>{% trans "Plan" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Tested By" %}</th>
                                    <th>{% trans "Date" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Flow Diagram Tab -->
        <div role="tabpanel" class="tab-pane" id="tab-sankey">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="fa fa-random"></span>
                        {% trans "Test Flow: Products → Plans → Runs" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="sankey-loading" class="text-center" style="padding: 30px;">
                        <span class="spinner spinner-lg"></span> {% trans "Loading diagram..." %}
                    </div>
                    <div id="sankey-empty" class="text-center text-muted" style="padding: 50px; display: none;">
                        <span class="pficon pficon-info" style="font-size: 48px;"></span>
                        <h4>{% trans "No data available for the Sankey diagram" %}</h4>
                    </div>
                    <div id="sankey-chart" style="width: 100%; overflow-x: auto;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Plan Browse Modal -->
<div class="modal fade" id="plan-browse-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">{% trans "Browse Test Plans" %}</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-condensed" id="plan-browse-table">
                    <thead>
                        <tr>
                            <th>{% trans "ID" %}</th>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Product" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Action" %}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <nav class="text-center" id="plan-browse-pagination"></nav>
            </div>
        </div>
    </div>
</div>

<!-- Case Browse Modal -->
<div class="modal fade" id="case-browse-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">{% trans "Browse Test Cases" %}</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-condensed" id="case-browse-table">
                    <thead>
                        <tr>
                            <th>{% trans "ID" %}</th>
                            <th>{% trans "Summary" %}</th>
                            <th>{% trans "Product" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Action" %}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <nav class="text-center" id="case-browse-pagination"></nav>
            </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/consolidated.js' %}?v={{ cache_bust }}"></script>
{% endblock %}