{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Extension Marketplace{% endblock %}

{% block admin_content %}
<main class="admin-marketplace-page mx-auto w-full max-w-screen-2xl px-3 py-5 text-foreground sm:px-6 lg:px-8">
    {{ mh::management_header_open(title="Extension Marketplace", subtitle="Manage your installed lightweight extensions and specialized plugin groups.") }}
            <div class="flex gap-2">
                {% if is_root_admin %}
                <button id="rescanPluginsBtn" class="blocks-button blocks-button-secondary">
                    <i class="fas fa-sync" aria-hidden="true"></i> <span>Rescan</span>
                </button>
                <a href="/plugins/core-marketplace/marketplace/pricing" class="blocks-button blocks-button-secondary">
                    <i class="fas fa-dollar-sign" aria-hidden="true"></i> <span>Pricing</span>
                </a>
                <a href="/plugins/core-plugin-registry/plugins" class="blocks-button blocks-button-secondary">
                    <i class="fas fa-code" aria-hidden="true"></i> <span>Editor</span>
                </a>
                {% endif %}
                <button type="button" class="blocks-button blocks-button-secondary" title="Coming soon" disabled>
                    <i class="fas fa-store" aria-hidden="true"></i> Browse
                </button>
            </div>
    {{ mh::management_header_close() }}

    {% set active_count = active_plugins | length %}

    <div class="category-section mb-6">
        <div class="widget-group-container">
            <div class="widget-group span-full">
                <div class="widget-group-header">
                    <i class="fas fa-cubes mr-1.5 opacity-70"></i>
                    Platform Extensions Oversight
                </div>
                <div class="widget-mini-grid">
                    <div class="widget-mini-card">
                        <div class="widget-mini-value">{{ plugins | length }}</div>
                        <div class="widget-mini-label">Installed Extensions</div>
                    </div>
                    <div class="widget-mini-card">
                        <div class="widget-mini-value">{{ active_count }}</div>
                        <div class="widget-mini-label">Active Extensions</div>
                    </div>
                    <div class="widget-mini-card">
                        <div class="widget-mini-value">{{ profiles | length }}</div>
                        <div class="widget-mini-label">Plugin Groups</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<section class="marketplace-controls mb-4" aria-label="Filter extensions">
    <div class="view-toggle">
        <button id="showProfileView" type="button" class="blocks-button blocks-button-primary blocks-button-sm active" aria-pressed="true">Group view</button>
        <button id="showPluginView" type="button" class="blocks-button blocks-button-secondary blocks-button-sm" aria-pressed="false">Extension view</button>
    </div>

    <div class="search-filter-group">
        <div class="search-wrapper">
            <i class="fas fa-search" aria-hidden="true"></i>
            <input type="search" id="pluginSearch" placeholder="Search extensions..." class="blocks-input pl-10" aria-label="Search extensions">
        </div>

        <select id="categoryFilter" class="blocks-input" aria-label="Filter by category">
            <option value="">All Categories</option>
            {% for cat in categories %}
            <option value="{{ cat }}">{{ cat }}</option>
            {% endfor %}
        </select>
    </div>

    <button id="manageProfilesBtn" type="button" class="blocks-button blocks-button-secondary"><i class="fas fa-layer-group" aria-hidden="true"></i> Manage Groups</button>
</section>

<!-- Profile View Grid -->
<div class="marketplace-grid" id="profilesGrid">
    {% for profile in profiles %}
    <div class="plugin-card profile-card {% if profile.is_active %}plugin-active{% endif %} flex flex-col"
        data-name="{{ profile.name }}">
        <div class="plugin-header">
            <div class="plugin-icon">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="plugin-title-area">
                <h3>{{ profile.name }}</h3>
                <p class="author">{{ profile.plugins | length }} plugins</p>
            </div>
            <div class="plugin-actions-top">
                <div class="flex items-center gap-2">
                    {% if profile.is_active %}
                    <button type="button" class="blocks-button blocks-button-warning blocks-button-sm apply-profile-route-btn" data-name="{{ profile.name }}"
                        data-action="disable">Disable Group</button>
                    <span class="blocks-status-pill is-success">Active</span>
                    {% else %}
                    <button type="button" class="blocks-button blocks-button-success blocks-button-sm apply-profile-route-btn" data-name="{{ profile.name }}"
                        data-action="enable">Enable Group</button>
                    {% endif %}

                    {% if is_root_admin %}
                    <div class="dropdown relative">
                        <button type="button" class="blocks-icon-button profile-menu-toggle" aria-label="Group actions for {{ profile.name }}" aria-expanded="false">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <div class="dropdown-menu absolute right-0 top-full z-20 mt-1 min-w-40 rounded-lg border border-divider bg-surface p-1 shadow-lg" hidden>
                            <a href="#" class="edit-profile-action flex min-h-11 items-center gap-2 px-3 py-2 text-sm text-foreground transition-colors hover:bg-canvas" data-name="{{ profile.name }}">
                                <i class="fas fa-edit w-4"></i> Edit Group
                            </a>
                            <a href="#" class="clone-profile-action flex min-h-11 items-center gap-2 border-t border-divider px-3 py-2 text-sm text-foreground transition-colors hover:bg-canvas" data-name="{{ profile.name }}">
                                <i class="fas fa-copy w-4"></i> Clone Group
                            </a>
                            <a href="#" class="delete-profile-action flex min-h-11 items-center gap-2 border-t border-divider px-3 py-2 text-sm text-danger transition-colors hover:bg-canvas" data-name="{{ profile.name }}">
                                <i class="fas fa-trash w-4"></i> Delete Group
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="plugin-description flex flex-1 flex-col">
            <p>{{ profile.description | default(value='Custom plugin collection.') }}</p>

            <div class="profile-contents mt-3 flex-1 border-t border-divider pt-3">
                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
                    Included Plugins</p>
                <div class="plugin-list-initial flex flex-wrap gap-1.5">
                    {% for p_name in profile.plugins | slice(end=5) %}
                    <span class="blocks-status-pill is-neutral">{{ p_name }}</span>
                    {% endfor %}
                    {% if profile.plugins | length > 5 %}
                    <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-toggle-profile-plugins aria-expanded="false">
                        +{{ profile.plugins | length - 5 }} more
                    </button>
                    {% endif %}
                </div>
                <div class="plugin-list-all flex flex-wrap gap-1.5" hidden
                    data-more="{{ profile.plugins | length - 5 }}">
                    {% for p_name in profile.plugins %}
                    <span class="blocks-status-pill is-neutral">{{ p_name }}</span>
                    {% endfor %}
                </div>
            </div>

            {% if profile.one_time_fee or profile.daily_recurring_fee %}
            <div class="profile-pricing-footer mt-auto flex flex-col gap-2 border-t border-divider pt-4">
                <div class="text-xs font-semibold uppercase tracking-wider text-muted">
                    Group Total Pricing</div>
                <div class="flex flex-wrap gap-3">
                    {% if profile.one_time_fee %}
                    <div class="pricing-badge flex items-center gap-1.5 rounded-lg bg-brand/10 px-3 py-1.5 font-bold text-brand">
                        <span class="text-xs font-medium opacity-80">ONE-TIME:</span>
                        {{ currency_symbol }}{{ profile.one_time_fee }}
                    </div>
                    {% endif %}
                    {% if profile.daily_recurring_fee %}
                    <div class="pricing-badge flex items-center gap-1.5 rounded-lg bg-success/10 px-3 py-1.5 font-bold text-success">
                        <span class="text-xs font-medium opacity-80">RECURRING (30 DAYS):</span>
                        {{ currency_symbol }}{{ profile.monthly_recurring_fee | round(precision=2) }}/30 days
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="empty-state">
        <h3>No profiles found</h3>
        <p>Click "Manage Profiles" to create your first plugin group.</p>
    </div>
    {% endfor %}
</div>

<!-- Plugin View Grid (Old View) -->
<div class="marketplace-grid" id="pluginsGrid" hidden>
    {% for plugin in plugins %}
    <div class="plugin-card {% if plugin.is_active %}plugin-active{% endif %}" data-name="{{ plugin.name }}"
        data-category="{{ plugin.category | default(value='') }}">
        <div class="plugin-header">
            <div class="plugin-icon">
                <i class="fas {{ plugin.icon }}"></i>
            </div>
            <div class="plugin-title-area">
                <h3>{{ plugin.title }}</h3>
                <span class="version-badge">v{{ plugin.version }}</span>
                {% if plugin.author %}
                <p class="author">by {{ plugin.author }}</p>
                {% endif %}
            </div>
            <div class="plugin-actions-top">
                {% if plugin.is_active %}
                <button type="button" class="blocks-button blocks-button-warning blocks-button-sm toggle-plugin-btn" data-name="{{ plugin.name }}"
                    data-active="true">Disable</button>
                <span class="blocks-status-pill is-success">Active</span>
                {% else %}
                <button type="button" class="blocks-button blocks-button-success blocks-button-sm toggle-plugin-btn" data-name="{{ plugin.name }}"
                    data-active="false">Enable</button>
                {% endif %}
            </div>
        </div>

        <div class="plugin-description">
            <p>{{ plugin.description }}</p>
            {% if plugin.one_time_fee or plugin.daily_recurring_fee %}
            <div class="plugin-pricing mt-2">
                <span class="blocks-status-pill is-info">
                    {% if plugin.one_time_fee %}
                    {{ currency_symbol }}{{ plugin.one_time_fee }} one-time
                    {% endif %}
                    {% if plugin.one_time_fee and plugin.daily_recurring_fee %} + {% endif %}
                    {% if plugin.daily_recurring_fee %}
                    {{ currency_symbol }}{{ plugin.daily_recurring_fee }}/day
                    {% endif %}
                </span>
            </div>
            {% endif %}
        </div>

        {% if plugin.tags and plugin.tags|length > 0 %}
        <div class="plugin-tags">
            {% if plugin.category %}
            <span class="blocks-status-pill is-info">{{ plugin.category }}</span>
            {% endif %}
            {% for tag in plugin.tags %}
            <span class="blocks-status-pill is-neutral">{{ tag }}</span>
            {% endfor %}
        </div>
        {% elif plugin.category %}
        <div class="plugin-tags">
            <span class="blocks-status-pill is-info">{{ plugin.category }}</span>
        </div>
        {% endif %}

        <div class="plugin-details-section">
            <button type="button" class="blocks-button blocks-button-secondary w-full justify-start" data-toggle-details aria-expanded="false">
                <i class="fas fa-chevron-down"></i> Show Details
            </button>
            <div class="plugin-details" hidden>
                {% if plugin.long_description %}
                <div class="detail-block">
                    <h4><i class="fas fa-info-circle"></i> About</h4>
                    <p>{{ plugin.long_description }}</p>
                </div>
                {% endif %}

                {% if plugin.usage_instructions %}
                <div class="detail-block">
                    <h4><i class="fas fa-book"></i> Usage Instructions</h4>
                    <div class="markdown-content">
                        {{ plugin.usage_instructions }}
                    </div>
                </div>
                {% endif %}

                {% if plugin.homepage %}
                <div class="detail-block">
                    <h4><i class="fas fa-external-link-alt"></i> Links</h4>
                    <a href="{{ plugin.homepage }}" target="_blank" rel="noopener noreferrer" class="external-link">
                        Documentation & Homepage <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="empty-state">
        <h3>No plugins found</h3>
        <p>Add plugins to the <code>plugins/</code> directory.</p>
    </div>
    {% endfor %}
</div>

<!-- Profiles Modal -->
<div id="profilesModal" class="modal crud-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="profilesModalTitle">
    <div class="modal-content max-w-2xl">
        <div class="modal-header">
            <h3 id="profilesModalTitle"><i class="fas fa-layer-group" aria-hidden="true"></i> Plugin Groups</h3>
            <button type="button" class="blocks-icon-button close-btn" data-modal-close="profilesModal" aria-label="Close group editor">&times;</button>
        </div>
        <div class="modal-body">
            <p class="mb-5 text-sm text-muted">
                Select plugins to include when saving a group, or load an existing group to edit.
            </p>

            <div class="mb-3 flex flex-col gap-2 sm:flex-row">
            <input type="text" id="newProfileName" class="blocks-input min-w-0 flex-1" placeholder="Group name" aria-label="Group name" autocomplete="off">
                <button id="saveProfileBtn" type="button" class="blocks-button blocks-button-primary">Save Group</button>
            </div>

            <div class="mb-4 flex flex-wrap gap-2 text-sm">
                <button id="selectAllPluginsBtn" type="button" class="blocks-button blocks-button-secondary blocks-button-sm">Select all</button>
                <button id="clearAllPluginsBtn" type="button" class="blocks-button blocks-button-secondary blocks-button-sm">Clear all</button>
                <button id="inversePluginsBtn" type="button" class="blocks-button blocks-button-secondary blocks-button-sm">Invert selection</button>
            </div>

            <div class="mb-4 rounded-lg border border-dashed border-divider bg-canvas p-3" id="projectedPricing" hidden>
                <div class="mb-2 text-xs font-semibold uppercase text-muted">
                    Projected Group Total
                </div>
                <div class="flex flex-wrap gap-3">
                    <span class="font-bold text-brand" id="projectedOneTime"></span>
                    <span class="font-bold text-success" id="projectedRecurring"></span>
                    <span class="text-sm font-bold text-success opacity-80" id="projectedRecurringMonthly"></span>
                </div>
            </div>

            <div class="mb-6 max-h-64 overflow-y-auto rounded-lg border border-divider bg-canvas">
                <div class="flex flex-col" id="pluginCheckboxesList">
                    {% for plugin in plugins %}
                    <label class="m-0 flex cursor-pointer items-center gap-3 border-b border-divider px-4 py-3 transition-colors hover:bg-surface">
                        <input type="checkbox" class="profile-plugin-checkbox" value="{{ plugin.name }}"
                            data-one-time="{{ plugin.one_time_fee }}" data-daily="{{ plugin.daily_recurring_fee }}">
                        <span class="flex flex-col">
                            <strong>{{ plugin.title }}</strong>
                            {% if plugin.category %}
                            <small class="text-muted">{{ plugin.category }}</small>
                            {% endif %}
                        </span>
                    </label>
                    {% endfor %}
                </div>
            </div>

            <h4 class="mb-4 border-t border-divider pt-4">Existing Groups</h4>
            <ul class="m-0 list-none p-0" id="profilesList">
                <!-- Loaded dynamically -->
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="blocks-button blocks-button-secondary" data-modal-close="profilesModal">Close</button>
        </div>
    </div>
</div>
</div>
        </main>

{% endblock %}