{% extends "base.html" %}
{% set active_page = 'worksets' %}

{% block title %}Worksets - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container container-wide">
    <!-- Page Header -->
    <div class="page-header d-flex justify-between align-center flex-wrap gap-lg">
        <div>
            <h1 class="page-title">Worksets</h1>
            <p class="page-subtitle">Manage your genomics processing jobs</p>
        </div>
        <div class="page-actions" style="margin-top: 0;">
            <a href="/portal/worksets/new" class="btn btn-primary">
                <i class="fas fa-plus"></i> New Workset
            </a>
            <a href="/portal/worksets/archived" class="btn btn-outline">
                <i class="fas fa-archive"></i> Archived
            </a>
            <button class="btn btn-outline" onclick="refreshWorksets()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="card mb-lg">
        <div class="d-flex flex-wrap gap-md align-center">
            <div class="form-group mb-0" style="min-width: 200px;">
                <select class="form-control form-select" id="filter-status" onchange="filterWorksets()">
                    <option value="">All Statuses</option>
                    <option value="ready"{% if filter_status == 'ready' %} selected{% endif %}>Ready</option>
                    <option value="in_progress"{% if filter_status == 'in_progress' %} selected{% endif %}>In Progress</option>
                    <option value="complete"{% if filter_status == 'complete' %} selected{% endif %}>Complete</option>
                    <option value="error"{% if filter_status == 'error' %} selected{% endif %}>Error</option>
                    <option value="canceled"{% if filter_status == 'canceled' %} selected{% endif %}>Canceled</option>

                </select>
            </div>
            <div class="form-group mb-0" style="min-width: 150px;">
                <select class="form-control form-select" id="filter-type" onchange="filterWorksets()">
                    <option value="">All Types</option>
                    <option value="clinical"{% if filter_type == 'clinical' %} selected{% endif %}>Clinical</option>
                    <option value="ruo"{% if filter_type == 'ruo' %} selected{% endif %}>Research (RUO)</option>
                    <option value="lsmc"{% if filter_type == 'lsmc' %} selected{% endif %}>Lab Services (LSMC)</option>
                </select>
            </div>
            <div class="form-group mb-0" style="flex: 1; min-width: 250px;">
                <input type="text" class="form-control" id="search-worksets"
                       placeholder="Search worksets..."
                       value="{{ filter_search | default('') }}"
                       oninput="handleSearchInput()">
            </div>
            <div class="form-group mb-0">
                <select class="form-control form-select" id="filter-sort" onchange="filterWorksets()">
                    <option value="created_desc"{% if filter_sort == 'created_desc' or not filter_sort %} selected{% endif %}>Newest First</option>
                    <option value="created_asc"{% if filter_sort == 'created_asc' %} selected{% endif %}>Oldest First</option>
                    <option value="status"{% if filter_sort == 'status' %} selected{% endif %}>By Status</option>
                </select>
            </div>
            {% if filter_status or filter_type or filter_search %}
            <div class="form-group mb-0">
                <button type="button" class="btn btn-outline btn-sm" onclick="clearFilters()" title="Clear all filters">
                    <i class="icon-x"></i> Clear
                </button>
            </div>
            {% endif %}
        </div>
        {% if total_count is defined %}
        <div class="mt-sm text-muted" style="font-size: 0.875rem;">
            Showing {{ worksets | length }} of {{ total_count }} workset{{ 's' if total_count != 1 else '' }}{% if filter_status or filter_type or filter_search %} (filtered){% endif %}
        </div>
        {% endif %}
    </div>
    
    <!-- Worksets Table -->
    <div class="table-container" style="overflow-x: auto;">
        <table class="table" id="worksets-table" data-sortable>
            <thead>
                <tr>
                    <th data-no-sort>
                        <label class="checkbox-label">
                            <input type="checkbox" id="select-all" onchange="toggleSelectAll()">
                        </label>
                    </th>
                    <th>Workset ID</th>
                    <th>Workset Name</th>
                    <th>Created</th>
                    <th>Type</th>
                    <th>Customer</th>
                    <th>TapDB Status</th>
                    <th>S3 Status</th>
                    <th>Cluster</th>
                    <th>Region</th>
                    <th>Pipeline</th>
                    <th>Samples</th>
                    <th>Progress</th>
                    <th>Started</th>
                    <th>Last Updated</th>
                    <th>Compute Cost</th>
                    <th>Dir Size</th>
                    <th data-no-sort>Actions</th>
                </tr>
            </thead>
            <tbody id="worksets-tbody">
                {% if worksets %}
                {% for ws in worksets %}
                <tr data-workset-id="{{ ws.workset_id }}" data-status="{{ ws.state | lower }}" data-type="{{ ws.workset_type | default('ruo') | lower }}">
                    <td>
                        <label class="checkbox-label">
                            <input type="checkbox" class="workset-checkbox" value="{{ ws.workset_id }}">
                        </label>
                    </td>
                    <td>
                        <a href="/portal/worksets/{{ ws.workset_id }}" class="text-accent" style="font-family: monospace; font-size: 0.8rem;">
                            {{ ws.workset_id }}
                        </a>
                    </td>
                    <td>
                        <a href="/portal/worksets/{{ ws.workset_id }}" class="text-accent" style="font-weight: 500;">
                            {{ ws.workset_name or ws.workset_id[:20] ~ '...' }}
                        </a>
                    </td>
                    <td style="font-size: 0.8rem;" data-sort-value="{{ ws.created_at | default('') }}">{% if ws.created_at %}{{ ws.created_at[:16] | replace('T', ' ') }}{% else %}—{% endif %}</td>
                    <td>
                        {% set wtype = ws.workset_type | default('ruo') | lower %}
                        {% if wtype == 'clinical' %}
                        <span class="badge badge-clinical" title="Clinical - Patient data with regulatory requirements">Clinical</span>
                        {% elif wtype == 'lsmc' %}
                        <span class="badge badge-lsmc" title="Laboratory Services Management Company">LSMC</span>
                        {% else %}
                        <span class="badge badge-ruo" title="Research Use Only">RUO</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="text-muted" title="{{ ws.customer_id | default('Unknown') }}">
                            {{ ws.customer_id | default('Unknown') | truncate(12, True, '...') }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ ws.state | lower | replace('_', '-') }}">
                            {{ ws.state }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ ws.s3_status | default('unknown') | lower | replace('_', '-') }}" title="Status from S3 sentinel files">
                            {{ ws.s3_status | default('unknown') }}
                        </span>
                    </td>
                    <td>
                        {% if ws.execution_cluster_name or ws.cluster_name %}
                        <code style="font-size: 0.75rem;">{{ ws.execution_cluster_name or ws.cluster_name }}</code>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if ws.execution_cluster_region or ws.cluster_region %}
                        <span class="badge badge-secondary" style="font-size: 0.7rem; font-weight: normal;" title="AWS Region">
                            {{ ws.execution_cluster_region or ws.cluster_region }}
                        </span>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>{{ ws.pipeline_type | default('germline') }}</td>
                    <td>{{ ws.sample_count | default(0) }}</td>
                    <td style="min-width: 140px;">
                        {% if ws.state == 'in_progress' %}
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar primary" style="width: {{ ws.progress | default(0) }}%"></div>
                        </div>
                        <small class="text-muted">{{ ws.progress | default(0) }}%</small>
                        {% set step = ws.progress_step or ws.current_step %}
                        {% if step %}
                        <br><small class="text-muted" title="Current processing step">{{ step | replace('_', ' ') | title }}</small>
                        {% endif %}
                        {% elif ws.state == 'complete' or ws.state == 'completed' %}
                        <span class="text-success"><i class="fas fa-check"></i> Done</span>
                        {% elif ws.state == 'error' %}
                        <span class="text-error"><i class="fas fa-times"></i> Failed</span>
                        {% set step = ws.progress_step or ws.current_step %}
                        {% if step %}
                        <br><small class="text-muted" title="Last progress step before failure">{{ step | replace('_', ' ') | title }}</small>
                        {% endif %}
                        {% elif ws.state == 'canceled' %}
                        <span class="text-warning"><i class="fas fa-ban"></i> Canceled</span>
                        {% else %}
                        <span class="text-muted">Pending</span>
                        {% endif %}
                    </td>
                    <td style="font-size: 0.8rem;" data-sort-value="{{ ws.started_at or ws.execution_started_at | default('') }}">{% set started = ws.started_at or ws.execution_started_at %}{% if started %}{{ started[:16] | replace('T', ' ') }}{% else %}—{% endif %}</td>
                    <td style="font-size: 0.8rem;" data-sort-value="{{ ws.updated_at | default('') }}">{% if ws.updated_at %}{{ ws.updated_at[:16] | replace('T', ' ') }}{% else %}—{% endif %}</td>
                    <td data-sort-value="{{ ws.compute_cost | default(0) }}">
                        {% if ws.compute_cost and ws.compute_cost > 0 %}
                        <span {% if ws.is_actual_cost %}style="color: var(--success-color); font-weight: 600;" title="Actual compute cost from benchmark data"{% else %}class="text-muted" title="Estimated cost"{% endif %}>
                            ${{ "%.2f"|format(ws.compute_cost) }}
                        </span>
                        {% if ws.is_actual_cost %}<i class="fas fa-check-circle text-success" style="font-size: 0.7rem; margin-left: 2px;"></i>{% endif %}
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td data-sort-value="{{ ws.storage_bytes | default(0) }}" style="font-size: 0.85rem;">
                        {% if ws.storage_available %}
                        <span title="{{ ws.storage_bytes | default(0) }} bytes">{{ ws.storage_human }}</span>
                        {% elif ws.state == 'in_progress' %}
                        <span class="text-muted"><i class="fas fa-spinner fa-spin" style="font-size: 0.7rem;"></i></span>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-sm">
                            <a href="/portal/worksets/{{ ws.workset_id }}" class="btn btn-outline btn-sm" title="View Details">
                                <i class="fas fa-eye"></i>
                            </a>
                            {% if ws.state == 'in_progress' %}
                            <button class="btn btn-outline btn-sm" onclick="cancelWorkset('{{ ws.workset_id }}')" title="Cancel">
                                <i class="fas fa-stop"></i>
                            </button>
                            {% elif ws.state == 'error' %}
                            <button class="btn btn-outline btn-sm" onclick="retryWorkset('{{ ws.workset_id }}')" title="Retry">
                                <i class="fas fa-redo"></i>
                            </button>
                            {% elif ws.state == 'canceled' %}
                            <button class="btn btn-outline btn-sm" onclick="retryWorkset('{{ ws.workset_id }}')" title="Restart">
                                <i class="fas fa-redo"></i>
                            </button>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% else %}
                <tr id="empty-row">
                    <td colspan="16">
                        <div class="empty-state">
                            <div class="empty-state-icon"><i class="fas fa-folder-open"></i></div>
                            <h4 class="empty-state-title">No worksets yet</h4>
                            <p class="empty-state-text">Create your first workset to start processing genomics data</p>
                            <a href="/portal/worksets/new" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Create Workset
                            </a>
                        </div>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    
    <!-- Bulk Actions -->
    <div class="card mt-lg d-none" id="bulk-actions">
        <div class="d-flex align-center gap-lg flex-wrap">
            <span><strong id="selected-count">0</strong> worksets selected</span>
            <div class="d-flex gap-sm flex-wrap">
                <button class="btn btn-outline btn-sm" onclick="bulkCancel()">
                    <i class="fas fa-stop"></i> Cancel Selected
                </button>
                <button class="btn btn-outline btn-sm" onclick="bulkRetry()">
                    <i class="fas fa-redo"></i> Retry Failed
                </button>
                <button class="btn btn-outline btn-sm" onclick="bulkArchive()">
                    <i class="fas fa-archive"></i> Archive Selected
                </button>
                <button class="btn btn-outline btn-sm" onclick="bulkDelete()" style="color: #ef4444; border-color: #ef4444;">
                    <i class="fas fa-trash"></i> Delete Selected
                </button>
                <button class="btn btn-outline btn-sm" onclick="clearSelection()">
                    <i class="fas fa-times"></i> Clear
                </button>
            </div>
        </div>
    </div>
    
    <!-- Pagination -->
    {% if total_pages and total_pages > 1 %}
    {% set filter_params = '' %}
    {% if filter_status %}{% set filter_params = filter_params ~ '&status=' ~ (filter_status | urlencode) %}{% endif %}
    {% if filter_type %}{% set filter_params = filter_params ~ '&type=' ~ (filter_type | urlencode) %}{% endif %}
    {% if filter_search %}{% set filter_params = filter_params ~ '&search=' ~ (filter_search | urlencode) %}{% endif %}
    {% if filter_sort and filter_sort != 'created_desc' %}{% set filter_params = filter_params ~ '&sort=' ~ (filter_sort | urlencode) %}{% endif %}
    <div class="d-flex justify-center mt-xl">
        <nav class="pagination">
            {% if current_page > 1 %}
            <a href="?page={{ current_page - 1 }}{{ filter_params }}" class="btn btn-outline btn-sm">Previous</a>
            {% endif %}
            <span class="p-md">Page {{ current_page }} of {{ total_pages }}</span>
            {% if current_page < total_pages %}
            <a href="?page={{ current_page + 1 }}{{ filter_params }}" class="btn btn-outline btn-sm">Next</a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>

<style>
.checkbox-label { display: flex; align-items: center; cursor: pointer; }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--color-accent); }
</style>
{% endblock %}

{% block extra_js %}
<script src="/static/js/worksets.js?v={{ cache_bust | default('1') }}"></script>
{% endblock %}