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

{% block title %}{% trans "Test Case 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-catalog" style="font-size: 24px; color: #0088ce;"></span>
                                <div id="stat-total-count" class="stat-number">--</div>
                                <div class="stat-label">{% trans "Total Test Cases" %}</div>
                            </div>
                        </div>
                        <!-- Status Donut -->
                        <div class="col-sm-3 stat-card">
                            <strong class="stat-chart-title">{% trans "By Status" %}</strong>
                            <div id="chart-status" class="stat-chart-container"></div>
                        </div>
                        <!-- Priority Donut -->
                        <div class="col-sm-3 stat-card">
                            <strong class="stat-chart-title">{% trans "By Priority" %}</strong>
                            <div id="chart-priority" class="stat-chart-container"></div>
                        </div>
                        <!-- Automation Progress -->
                        <div class="col-sm-4 stat-card">
                            <strong class="stat-chart-title">{% trans "Automation" %}</strong>
                            <div class="automation-stats">
                                <div id="automation-percent" class="stat-number" style="font-size: 28px;">--%</div>
                                <div class="progress" style="margin-top: 10px;">
                                    <div id="automation-bar-auto" class="progress-bar" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div id="automation-bar-manual" class="progress-bar progress-bar-warning" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="small text-muted">
                                    <span class="label label-primary" id="automation-auto-count">0</span> {% trans "automated" %}
                                    <span class="label label-warning" id="automation-manual-count" style="margin-left: 5px;">0</span> {% trans "manual" %}
                                </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 Cases" %}
                    </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 cases...' %}">
                            <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 category in product.categories %}
                                <div class="tree-node category-node" data-category-id="{{ category.id }}">
                                    <div class="list-group-item tree-item" data-type="category" data-id="{{ category.id }}">
                                        <span class="tree-toggle fa fa-angle-right"></span>
                                        <span class="pficon pficon-folder-close"></span>
                                        <span class="tree-label">{{ category.name }}</span>
                                        <span class="badge">{{ category.count }}</span>
                                    </div>
                                    <div class="tree-children testcase-list" style="display: none;">
                                        <!-- Test cases loaded dynamically -->
                                        <div class="loading-placeholder text-center text-muted">
                                            <span class="fa fa-spinner fa-spin"></span> {% trans "Loading..." %}
                                        </div>
                                    </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 Case 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-catalog"></span>
                        {% trans "Test Case Details" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Placeholder when no test case selected -->
                    <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 case from the tree" %}</h4>
                        <p>{% trans "Click on a test case in the left panel to view its details here." %}</p>
                    </div>

                    <!-- Test Case Detail Content -->
                    <div id="detail-content" style="display: none;">
                        <!-- Header -->
                        <div class="row">
                            <div class="col-xs-12">
                                <h2 id="tc-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="tc-id-link" href="#" target="_blank">TC-<span id="tc-id"></span></a></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Status" %}</dt>
                                    <dd><span id="tc-status" class="label label-default"></span></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Priority" %}</dt>
                                    <dd><span id="tc-priority"></span></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Automated" %}</dt>
                                    <dd><span id="tc-automated"></span></dd>
                                </dl>
                            </div>
                        </div>

                        <hr>

                        <!-- Main Content Tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#tab-steps" role="tab" data-toggle="tab">
                                    {% trans "Steps" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-info" role="tab" data-toggle="tab">
                                    {% trans "Information" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-related" role="tab" data-toggle="tab">
                                    {% trans "Related" %}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" style="padding-top: 15px;">
                            <!-- Steps Tab -->
                            <div role="tabpanel" class="tab-pane active" id="tab-steps">
                                <div id="tc-text" class="markdown-content"></div>
                                <div id="tc-notes-section" style="margin-top: 20px;">
                                    <h4>{% trans "Notes" %}</h4>
                                    <div id="tc-notes" class="markdown-content"></div>
                                </div>
                            </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 "Author" %}</dt>
                                            <dd id="tc-author"></dd>
                                            <dt>{% trans "Default Tester" %}</dt>
                                            <dd id="tc-default-tester"></dd>
                                            <dt>{% trans "Reviewer" %}</dt>
                                            <dd id="tc-reviewer"></dd>
                                            <dt>{% trans "Created" %}</dt>
                                            <dd id="tc-created"></dd>
                                        </dl>
                                    </div>
                                    <div class="col-sm-6">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "Category" %}</dt>
                                            <dd id="tc-category"></dd>
                                            <dt>{% trans "Setup Duration" %}</dt>
                                            <dd id="tc-setup-duration"></dd>
                                            <dt>{% trans "Testing Duration" %}</dt>
                                            <dd id="tc-testing-duration"></dd>
                                            <dt>{% trans "Script" %}</dt>
                                            <dd id="tc-script"></dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="row" id="tc-extra-link-row" style="display: none;">
                                    <div class="col-xs-12">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "External Link" %}</dt>
                                            <dd><a id="tc-extra-link" href="#" target="_blank"></a></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>

                            <!-- Related Tab -->
                            <div role="tabpanel" class="tab-pane" id="tab-related">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <h4>{% trans "Components" %}</h4>
                                        <div id="tc-components"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <h4>{% trans "Tags" %}</h4>
                                        <div id="tc-tags"></div>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 20px;">
                                    <div class="col-xs-12">
                                        <h4>{% trans "Test Plans" %}</h4>
                                        <table class="table table-striped table-condensed" id="tc-plans">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "ID" %}</th>
                                                    <th>{% trans "Name" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </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>
                                <a id="btn-edit" href="#" class="btn btn-default" target="_blank">
                                    <span class="pficon pficon-edit"></span> {% trans "Edit" %}
                                </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 "Product" %}</th>
                                    <th>{% trans "Category" %}</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/browser.js' %}?v={{ cache_bust }}"></script>
{% endblock %}