{% extends "base.html" %}
{% block title %}Gallery{% endblock %}

{% macro generate_filter_url(endpoint, filter_key, filter_value, filter_params, search) %}
    {% set params = {} %}
    {% for key, values in filter_params.items() %}
        {% if key != filter_key %}
            {% for value in values %}
                {% if params[key] is not defined %}
                    {% set _ = params.update({key: [value]}) %}
                {% else %}
                    {% set _ = params[key].append(value) %}
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endfor %}
    {% set _ = params.update({filter_key: filter_value}) %}
    {% if search %}
        {% set _ = params.update({'search': search}) %}
    {% endif %}
    {{ url_for(endpoint, **params) }}
{% endmacro %}

{% block content %}
    <div class="container-fluid">
        <!-- Sticky Top Filter Bar -->
        <nav class="navbar navbar-expand-lg navbar-light sticky-top shadow-sm mb-4">
            <div class="container-fluid">
                <span class="navbar-brand d-flex align-items-center">
                    <img src="{{ url_for('static', filename='smartflare.png') }}" alt="SMARTFLARE" height="40" class="me-2" onerror="this.style.display='none';">
                    Filter Apps
                </span>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#filterNavbar" aria-controls="filterNavbar" aria-expanded="false" aria-label="Toggle filters">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="filterNavbar">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link {% if not filter_params and not request.args.get('search') %}active{% endif %}" href="{{ url_for('gallery.gallery') }}">All Apps</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('application_type') %}active{% endif %}" href="#" id="appTypeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Application Type
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="appTypeDropdown">
                                {% for app_type in application_types %}
                                    <li>
                                        <a class="dropdown-item {% if app_type.id in filter_params.get('application_type', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'application_type', app_type.id, filter_params, request.args.get('search', '')) }}">{{ app_type.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('category') %}active{% endif %}" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Categories
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
                                {% for category in categories %}
                                    <li>
                                        <a class="dropdown-item {% if category.id in filter_params.get('category', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'category', category.id, filter_params, request.args.get('search', '')) }}">{{ category.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('os_support') %}active{% endif %}" href="#" id="osSupportDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                OS Support
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="osSupportDropdown">
                                {% for os in os_supports %}
                                    <li>
                                        <a class="dropdown-item {% if os.id in filter_params.get('os_support', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'os_support', os.id, filter_params, request.args.get('search', '')) }}">{{ os.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('fhir_support') %}active{% endif %}" href="#" id="fhirSupportDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                FHIR Support
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="fhirSupportDropdown">
                                {% for fhir in fhir_supports %}
                                    <li>
                                        <a class="dropdown-item {% if fhir.id in filter_params.get('fhir_support', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'fhir_support', fhir.id, filter_params, request.args.get('search', '')) }}">{{ fhir.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('speciality') %}active{% endif %}" href="#" id="specialityDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Speciality
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="specialityDropdown">
                                {% for speciality in specialties %}
                                    <li>
                                        <a class="dropdown-item {% if speciality.id in filter_params.get('speciality', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'speciality', speciality.id, filter_params, request.args.get('search', '')) }}">{{ speciality.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('pricing_license') %}active{% endif %}" href="#" id="pricingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Pricing/License
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="pricingDropdown">
                                {% for pricing in pricing_licenses %}
                                    <li>
                                        <a class="dropdown-item {% if pricing.id in filter_params.get('pricing_license', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'pricing_license', pricing.id, filter_params, request.args.get('search', '')) }}">{{ pricing.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('designed_for') %}active{% endif %}" href="#" id="designedForDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Designed For
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="designedForDropdown">
                                {% for designed in designed_fors %}
                                    <li>
                                        <a class="dropdown-item {% if designed.id in filter_params.get('designed_for', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'designed_for', designed.id, filter_params, request.args.get('search', '')) }}">{{ designed.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle {% if filter_params.get('ehr_support') %}active{% endif %}" href="#" id="ehrSupportDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                EHR Support
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="ehrSupportDropdown">
                                {% for ehr in ehr_supports %}
                                    <li>
                                        <a class="dropdown-item {% if ehr.id in filter_params.get('ehr_support', []) %}active{% endif %}" href="{{ generate_filter_url('gallery.gallery', 'ehr_support', ehr.id, filter_params, request.args.get('search', '')) }}">{{ ehr.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Filter Chips and App Display -->
        <div class="container mt-4">
            <p>Explore SMART on FHIR apps. Filter to find the perfect app.</p>
            {% if filter_params or request.args.get('search') %}
                <div class="mb-3">
                    <h5>Active Filters:</h5>
                    {% for key, values in filter_params.items() %}
                        {% for value in values %}
                            {% set item = {'application_type': application_types, 'category': categories, 'os_support': os_supports, 'fhir_support': fhir_supports, 'speciality': specialties, 'pricing_license': pricing_licenses, 'designed_for': designed_fors, 'ehr_support': ehr_supports}[key] | selectattr('id', 'equalto', value) | first %}
                            {% if item %}
                                <span class="badge bg-primary me-1 filter-chip" data-key="{{ key }}" data-value="{{ value }}" data-bs-toggle="tooltip" title="Click to remove filter">{{ item.name }} <i class="fas fa-times ms-1" onclick="removeFilter('{{ key }}', {{ value }})"></i></span>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                    {% if request.args.get('search') %}
                        <span class="badge bg-primary me-1 filter-chip" data-key="search" data-value="{{ request.args.get('search') | urlencode }}" data-bs-toggle="tooltip" title="Click to clear search">Search: {{ request.args.get('search') }} <i class="fas fa-times ms-1" onclick="removeFilter('search', '{{ request.args.get('search') | urlencode }}')"></i></span>
                    {% endif %}
                    <a href="{{ url_for('gallery.gallery') }}" class="btn btn-sm btn-outline-danger ms-2">Clear All</a>
                </div>
            {% endif %}
            {% if apps %}
                <div id="appContainer" class="row">
                    {% for app in apps %}
                        <div class="app-item col-md-4 mb-3" style="animation: fadeIn 0.5s;">
                            <div class="card app-card shadow-sm h-100">
                                {% if app.logo_url %}
                                    <img src="{{ app.logo_url }}" class="card-img-top" alt="{{ app.name }} logo" style="max-height: 150px; object-fit: contain; padding: 1rem;" onerror="this.style.display='none';">
                                {% else %}
                                    <img src="https://via.placeholder.com/150?text=No+Logo" class="card-img-top" alt="No Logo" style="max-height: 150px; object-fit: contain; padding: 1rem;">
                                {% endif %}
                                <div class="card-body d-flex flex-column">
                                    <h5 class="card-title">{{ app.name }}</h5>
                                    <p class="card-text flex-grow-1">{{ app.description | truncate(100) }}</p>
                                    <p class="card-text"><small class="text-muted">By {{ app.developer }}</small></p>
                                    <a href="{{ url_for('gallery.app_detail', app_id=app.id) }}" class="btn btn-primary mt-auto">View Details</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div id="appTable" class="d-none">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Developer</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for app in apps %}
                                <tr style="animation: fadeIn 0.5s;">
                                    <td>{{ app.name }}</td>
                                    <td>{{ app.description | truncate(100) }}</td>
                                    <td>{{ app.developer }}</td>
                                    <td>
                                        <a href="{{ url_for('gallery.app_detail', app_id=app.id) }}" class="btn btn-primary btn-sm">View</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-muted">No apps match your filters or search. Try adjusting the criteria.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}