{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="/static/css/data.css" />

<section class="container py-md-5 py-3 d-flex flex-column min-vh-100">
    <!-- Page Title and Description -->
    <div data-vhp-glossary-skip class="">
        <h1><span class="text-vhpblue" id="collection-name">Data</span></h1>
        <p class="text-secondary fs-5">Explore datasets generated or used in <span id="collection-name-sub">{{ collection_name }} and hosted on BioStudies or Zenodo archives.</span></p>
    </div>

    <nav class="navbar navbar-expand-lg d-inline">
        <form method="GET" action="{{ url_for('data') }}" class="d-flex" role="search" id="search-form">
            <input type="text" class="form-control me-2" name="search" id="search-input" value="{{ search_query or '' }}" placeholder="Search for datasets (e.g., S-VHPS28, dinoseb, liver...)" />
            <!-- Filter hidden inputs are added dynamically by search_filter.js
                 in multipleInputs mode (one <input> per selected value). -->
            <div class="btn-group" role="group" aria-label="Search and filter buttons">
                <button type="submit" class="btn btn-outline-vhpblue">Search</button>
                <a href="{{ url_for('data') }}" class="btn btn-outline-danger text-nowrap">Clear</a>
                <button type="button" id="filter-toggle-btn" class="btn btn-outline-secondary">Filters</button>
            </div>
        </form>
        
        <!-- Filter Panel -->
        <div id="filter-panel" class="card bg-light p-3 mt-2" style="display: none;">
            <div class="gap-2 pb-1">
                <!-- Case Study Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm btn-vhppink-distinct dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Case Study
                    </button>
                    <ul class="dropdown-menu">
                        {% for slug in case_studies %}
                          <li><a class="dropdown-item text-wrap text-md-nowrap" href="#" data-filter-type="case-study" data-filter-value="{{ slug|title }}" data-case-slug="{{ slug }}">{{ slug|title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                
                
                <!-- Regulatory Questions Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm btn-vhppink-distinct dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Regulatory Question
                    </button>
                    <ul class="dropdown-menu">
                        {% for question in reg_questions.keys() %}
                          <li><a class="dropdown-item text-wrap text-md-nowrap" href="#" data-filter-type="reg-question" data-filter-value="{{ question }}" data-applies-to-case-slug="{{ reg_question_cases.get(question, '') }}"{% if question in reg_question_explanations %} data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="{{ reg_question_explanations[question] }}"{% endif %}>{{ question }}{% if question in reg_question_explanations %} <i class="bi bi-question-circle text-vhpblue"></i>{% endif %}</a></li>
                        {% endfor %}
                    </ul>
                </div>

                                <!-- Flow Step Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm  btn-vhppurple dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Flow Step
                    </button>
                    <ul class="dropdown-menu">
                        {% for step in process_flow_steps.values() %}
                        <li><a class="dropdown-item" href="#" data-filter-type="flow-step" data-filter-value="{{ step.label }}"{% if step.description %} data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="{{ step.description }}"{% endif %}>{{ step.label }}{% if step.description %} <i class="bi bi-question-circle text-vhpblue"></i>{% endif %}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            
            <!-- Selected Filters Display -->
            <div id="selected-filters" class="input-group">
                <span class="input-group-text d-none d-md-flex" id="filters_label">Selected Filters: <i class="bi bi-question-circle text-vhpblue ms-1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Multiple selections in one category match any (OR); combining categories requires all (AND)."></i></span>
                <div id="filter-tags"
                    class="form-control d-flex flex-wrap align-items-center gap-2 rounded-start rounded-start-md-0"
                    aria-describedby="filters_label"
                    role="group">
                </div>
                <button id="apply-filter-btn" class="btn btn-vhpblue" aria-label="Apply filters" title="Apply filters"><i class="bi bi-check-lg" aria-hidden="true"></i></button>
                <button id="clear-filter-btn" class="btn btn-outline-danger" aria-label="Clear filters" title="Clear filters"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
        </div>
        
        <div id="search-status" class="search-status"></div>
    </nav>

    <!-- Filter Status Display -->
    {% if filters_applied %}
    <div class="alert alert-info">
        <strong>Filters Active:</strong> Showing {{ hits_returned }} results
        {% if not page_size_met %}(fetched {{ pages_fetched }} page(s), timeout reached){% endif %}
        |
        {% for v in filter_case_study %}<span class="badge bg-vhppink-distinct text-white">Case Study: {{ v }}</span> {% endfor %}
        {% for v in filter_flow_step %}<span class="badge bg-vhppurple">Flow Step: {{ v }}</span> {% endfor %}
        {% for v in filter_regulatory_question %}<span class="badge bg-vhppink-distinct">Regulatory Question: {{ v }}</span> {% endfor %}
    </div>
    {% endif %}

    <!-- Pagination (top) -->
    {% include "_pagination.html" %}

    <div class="results-section">
        <div id="results-list" class="results-list">
            {% if errors.biostudies %}
                <div class="card mb-0 alert alert-warning">{{ errors.biostudies }}</div>
            {% elif studies %}
                <!-- Server-rendered studies -->
                {% for study in studies %}
                <div class="card p-0 mb-0" data-accession="{{ study.accession or study.accno }}">
                    <div class="card-header justify-content-between d-flex">
                        <span class="result-accession">{{ study.accession or study.accno }}</span>
                        <span class="badge bg-vhplight-blue text-secondary rounded-pill align-content-center">{{ study.type or 'unknown' }}</span>
                    </div>
                    <div class="card-header bg-white">
                        <div class="position-relative">
                            <div class="d-flex flex-nowrap overflow-x-auto gap-1 scrollbar-none pill-scroll">
                                {% set cs0 = study.metadata.case_study[0] if study.metadata.case_study else '' %}
                                {% set rq0 = reg_q_labels.get(study.metadata.regulatory_question[0], study.metadata.regulatory_question[0]) if study.metadata.regulatory_question else '' %}
                                {% for cs in study.metadata.case_study %}<a role="button" href="{{url_for('casestudy', case=cs|lower)}}" style="font-size:0.75em;" class="flex-shrink-0 lh-1 p-1 btn btn-outline-vhppink-distinct rounded-pill border border-vhppink-distinct d-inline-flex align-items-center text-nowrap">{{cs|capitalize }}</a>{% endfor %}
                                {% for rq in study.metadata.regulatory_question %}<a role="button" href="{{url_for('casestudy', case=cs0|lower, question=reg_q_labels.get(rq, rq) )}}" style="font-size:0.75em;" class="flex-shrink-0 lh-1 p-1 btn btn-outline-vhppink-distinct rounded-pill border border-vhppink-distinct d-inline-flex align-items-center text-nowrap">{{ reg_q_labels.get(rq, rq) }}</a>{% endfor %}
                                {% for fs in study.metadata.flow_step %}<a role="button" href="{{url_for('casestudy', case=cs0|lower, question=rq0, step=fs )}}" style="font-size:0.75em;" class="flex-shrink-0 lh-1 p-1 btn btn-outline-vhppurple rounded-pill border border-vhppurple d-inline-flex align-items-center text-nowrap">{{fs}}</a>{% endfor %}
                            </div>
                            <button type="button" class="scroll-caret d-none position-absolute end-0 top-50 translate-middle-y btn btn-light btn-sm rounded-circle shadow-sm p-1 lh-1 d-flex align-items-center justify-content-center" aria-label="Scroll for more">
                                <i class="bi bi-caret-right-fill text-secondary" style="font-size:0.7em;"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" style="word-break: break-word;">
                            {{ study.title or 'Untitled Study' }}
                        </h5>
                        <div class="card-text">
                            <span class="small text-muted fst-italic">Released: {{ study.release_date or study.rdate or 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="card-footer btn-group bg-white border-0 py-3" role="group">
                            <a href="{{ url_for('data_detail', dataid=study.accession) }}" style="min-width:70px" class="btn btn-vhpblue" role="button" data-bs-toggle="tooltip" data-bs-title="View details"><i class="bi bi-info-circle"></i></a>
                            {% if study.url%}
                            <a href="{{ study.url}}" class="btn btn-outline-vhpblue d-inline" target="_blank" rel="noopener"><i class="bi bi-box-arrow-up-right pe-1"></i> View in BioStudies</a>
                            {% endif%}

                            {% if study.metadata.rocrate_url %}
                            <a href="{{ study.metadata.rocrate_url }}" class="btn btn-outline-secondary d-inline view-details-btn" rel="noopener" target="_blank">
                                <i class="bi bi-box-fill pe-1"></i> RO‑Crate
                            </a>
                            {% else %}
                            {# optional: show disabled button if not found #}
                            <span class="btn btn-outline-secondary disabled d-inline">
                                <i class="bi bi-box-fill pe-1"></i> RO‑Crate
                            </span>
                            {% endif %}
                
                            


                    </div>
                </div>
                {% endfor %}
            {% endif %}
            {% if errors.zenodo %}
                <div class="card mb-0 alert alert-warning">{{ errors.zenodo }}</div>
            {% elif datasets%}
            <!-- Server-rendered studies -->
                {% for dataset in datasets %}
                <div class="card p-0 mb-0" data-accession="{{ dataset.doi or dataset.id }}">
                    <div class="card-header justify-content-between d-flex">
                        <span class="result-accession">{{ dataset.doi or dataset.id }}</span>
                        <span class="badge bg-vhplight-blue text-secondary rounded-pill align-content-center">{{ dataset.metadata.resource_type.type or 'unknown' }}</span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" style="word-break: break-word;">
                            {{ dataset.title or 'Untitled Dataset' }}
                        </h5>
                        <div class="card-text">
                            <span class="small text-muted fst-italic">Released: {{ dataset.metadata.publication_date or study.created or 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="card-footer btn-group bg-white border-0 py-3" role="group">
                            <a href="{{ url_for('data_detail', dataid=dataset.id) }}" style="min-width:70px" class="btn btn-vhpblue" role="button" data-bs-toggle="tooltip" data-bs-title="View details"><i class="bi bi-info-circle"></i></a>
                            {% if dataset.doi_url%}
                            <a href="{{ dataset.doi_url}}" class="btn btn-outline-vhpblue d-inline" target="_blank" rel="noopener"><i class="bi bi-box-arrow-up-right pe-1"></i> View on Zenodo</a>
                            {% endif%}
                            {% if dataset.links.archive%}
                            <a href="{{ dataset.links.archive}}" class="btn btn-outline-secondary d-inline view-details-btn"><i class="bi bi-box-fill pe-1"></i>{%if dataset.parsed_metadata.is_rocrate %}RO-Crate{% else %}Archive{% endif %}</a>
                            {% endif%}  
                    </div>
                </div>
                {% endfor %}
            {% endif %}
            {% if not datasets and not studies and not errors.biostudies and not errors.zenodo %}
                <div class="card alert alert-warning mb-0 justify-content-center align-items-center">No results found</div>
            {% endif %}
        </div>

        
        <!-- Loading indicator for infinite scroll (kept for potential AJAX use) -->
        <div id="loading-indicator" class="text-center my-4" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading more studies...</p>
        </div>
        
        <div id="study-detail" class="study-detail" style="display: none;">
            <button id="back-btn" class="btn btn-back">← Back to Results</button>
            <div id="study-content"></div>
        </div>
    </div>

    <!-- Pagination at bottom -->
    {% with extra_class="mt-auto py-3" %}
        {% include "_pagination.html" %}
    {% endwith %}
</section>

<script src="/static/js/search_filter.js"></script>
<script>
    // Initialize search and filter functionality for data catalog
    document.addEventListener('DOMContentLoaded', () => {
        SearchFilter.init({
            filterTypes: ['case-study', 'reg-question', 'flow-step'],
            multiSelect: true, // Multiple selections per category
            multipleInputs: true, // Create separate hidden input for each value
            initialFilters: {
                'case-study': [{% for c in filter_case_study %}'{{ c }}'{% if not loop.last %}, {% endif %}{% endfor %}],
                'flow-step': [{% for s in filter_flow_step %}'{{ s }}'{% if not loop.last %}, {% endif %}{% endfor %}],
                'reg-question': [{% for q in filter_regulatory_question %}'{{ q }}'{% if not loop.last %}, {% endif %}{% endfor %}]
            },
            filterFieldMap: {
                'case-study': 'case_study',
                'flow-step': 'stage',
                'reg-question': 'reg_q'
            },
            filterLabels: {
                'case-study': 'Case Study',
                'flow-step': 'Flow Step',
                'reg-question': 'Reg. Question'
            },
            badgeClass: 'badge rounded-pill text-bg-vhpblue',
            filterColors: {
                'case-study': 'vhppink-distinct',
                'reg-question': 'vhppink-distinct',
                'flow-step': 'vhppurple',
            },
            showFilterPanel: {% if filter_case_study or filter_flow_step or filter_regulatory_question %}true{% else %}false{% endif %}
        });
    });
</script>
<script>
    // Show the scroll-hint caret only when a pill strip actually overflows
    // (and hide it once scrolled to the end).
    document.addEventListener('DOMContentLoaded', () => {
        const strips = document.querySelectorAll('.pill-scroll');
        const sync = (strip) => {
            const caret = strip.parentElement.querySelector('.scroll-caret');
            if (!caret) return;
            const overflowing = strip.scrollWidth > strip.clientWidth + 1;
            const atEnd = strip.scrollLeft + strip.clientWidth >= strip.scrollWidth - 1;
            caret.classList.toggle('d-none', !overflowing || atEnd);
        };
        strips.forEach((strip) => {
            const caret = strip.parentElement.querySelector('.scroll-caret');
            if (caret) {
                caret.addEventListener('click', () => {
                    strip.scrollBy({ left: strip.clientWidth * 0.8, behavior: 'smooth' });
                });
            }
            strip.addEventListener('scroll', () => sync(strip), { passive: true });
            sync(strip);
        });
        window.addEventListener('resize', () => strips.forEach(sync));
    });
</script>


{% endblock %}