<?php
$isConnected = !empty($marketplaceConfigured);
$rate = (float)($creditRate ?? 0.01);
?>

<?php include __DIR__ . '/_mp_modal.php'; ?>


<div class="mb-4">
    <div class="relative">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <input type="text" id="pluginSearch" placeholder="Search plugins..." class="w-full sm:w-64 pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white outline-none" autocomplete="off">
    </div>
</div>

<?php if (!empty($marketplaceError)): ?>
    <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 text-sm text-red-700">
        <?= htmlspecialchars($marketplaceError) ?>
    </div>
<?php endif; ?>


<?php if (!empty($plugins)): ?>
<div id="pluginsInstalled" class="mb-6">
    <h2 class="text-[11px] font-semibold text-gray-500 uppercase tracking-wider mb-2">Installed</h2>
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="overflow-x-auto">
            <table class="w-full" id="pluginsInstalledTable">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Plugin</th>
                        <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 hide-mobile">Version</th>
                        <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 hide-mobile">Author</th>
                        <th class="px-3 py-2 text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500">Status</th>
                        <th class="px-3 py-2 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php foreach ($plugins as $plugin): ?>
                        <?php $slug = htmlspecialchars($plugin['slug'] ?? $plugin['id'] ?? ''); ?>
                        <tr class="plugin-row hover:bg-gray-50 transition-colors"
                            data-name="<?= htmlspecialchars(strtolower($plugin['name'])) ?>"
                            data-desc="<?= htmlspecialchars(strtolower($plugin['description'] ?? '')) ?>">
                            <td class="px-4 py-2.5">
                                <div class="flex items-center gap-3 min-w-0">
                                    <?php
                                        $pluginIcon = '';
                                        $iconFile = APP_ROOT . '/public/uploads/plugins/' . ($plugin['slug'] ?? '') . '.svg';
                                        if (file_exists($iconFile)) {
                                            $pluginIcon = '/uploads/plugins/' . ($plugin['slug'] ?? '') . '.svg';
                                        } elseif (!empty($plugin['mp_icon_url'])) {
                                            $pluginIcon = $plugin['mp_icon_url'];
                                        }
                                    ?>
                                    <?php if ($pluginIcon !== ''): ?>
                                    <img src="<?= htmlspecialchars($pluginIcon) ?>" alt="" class="w-8 h-8 rounded-lg shrink-0">
                                    <?php else: ?>
                                    <div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 <?= !empty($plugin['is_active']) ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' ?>">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" stroke-width="1.5"/><line x1="12" y1="8" x2="12" y2="16" stroke-width="1.5"/><line x1="8" y1="12" x2="16" y2="12" stroke-width="1.5"/></svg>
                                    </div>
                                    <?php endif; ?>
                                    <div class="min-w-0">
                                        <button type="button" onclick="document.getElementById('modal-<?= $slug ?>').classList.remove('hidden')" class="text-sm font-medium text-gray-900 hover:text-primary-600 truncate block text-left transition-colors">
                                            <?= htmlspecialchars($plugin['name']) ?>
                                        </button>
                                        <p class="text-[11px] text-gray-400 truncate max-w-xs"><?= htmlspecialchars(mb_strimwidth($plugin['description'] ?? 'No description.', 0, 80, '...')) ?></p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-3 py-2.5 text-xs text-gray-500 hide-mobile">
                                <?php if (!empty($plugin['version'])): ?>v<?= htmlspecialchars($plugin['version']) ?><?php endif; ?>
                                <?php if (!empty($plugin['mp_has_update'])): ?>
                                    <span class="inline-flex items-center ml-1 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-orange-100 text-orange-700">
                                        &rarr; v<?= htmlspecialchars($plugin['mp_latest_version']) ?>
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td class="px-3 py-2.5 text-xs text-gray-400 hide-mobile"><?= htmlspecialchars($plugin['author'] ?? '') ?></td>
                            <td class="px-3 py-2.5 text-center">
                                <?php if (!empty($plugin['is_active'])): ?>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-green-100 text-green-800">Active</span>
                                <?php else: ?>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 text-gray-600">Inactive</span>
                                <?php endif; ?>
                            </td>
                            <td class="px-3 py-2.5 text-right">
                                <div class="flex items-center justify-end gap-1">
                                    <button type="button" onclick="document.getElementById('modal-<?= $slug ?>').classList.remove('hidden')"
                                            class="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 rounded-lg transition-colors">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        Details
                                    </button>
                                    <?php if (!empty($plugin['is_active'])): ?>
                                        <form method="POST" action="/admin/plugins/<?= $slug ?>/deactivate" class="inline">
                                            <?= Router::csrfField() ?>
                                            <button type="submit" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors" title="Deactivate">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                            </button>
                                        </form>
                                    <?php else: ?>
                                        <form method="POST" action="/admin/plugins/<?= $slug ?>/activate" class="inline">
                                            <?= Router::csrfField() ?>
                                            <button type="submit" class="p-1.5 text-green-500 hover:text-green-700 hover:bg-green-50 rounded transition-colors" title="Activate">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                    <form method="POST" action="/admin/plugins/<?= $slug ?>/uninstall" onsubmit="return confirm('Uninstall this plugin? All plugin files will be deleted.')" class="inline">
                                        <?= Router::csrfField() ?>
                                        <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors" title="Uninstall">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>


<?php foreach ($plugins as $plugin): ?>
    <?php
    $slug = htmlspecialchars($plugin['slug'] ?? $plugin['id'] ?? '');
     
    $_author = $plugin['mp_author'] ?? $plugin['author'] ?? '';
    $_longDesc = $plugin['mp_long_description'] ?? $plugin['long_description'] ?? '';
    $_shortDesc = $plugin['mp_description'] ?? $plugin['description'] ?? 'No description.';
    $_features = $plugin['mp_features'] ?? $plugin['features'] ?? [];
    if (is_string($_features)) $_features = json_decode($_features, true) ?: [];
    $_downloads = (int)($plugin['mp_download_count'] ?? 0);
    $_requires = $plugin['mp_requires_cms'] ?? $plugin['requires'] ?? '';
    ?>
    <div id="modal-<?= $slug ?>" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)this.classList.add('hidden')">
        <div class="fixed inset-0 bg-black/50"></div>
        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] sm:max-h-[85vh] flex flex-col overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <div class="flex items-center gap-3">
                    <h2 class="text-lg font-semibold text-gray-900"><?= htmlspecialchars($plugin['name']) ?></h2>
                    <?php if (!empty($plugin['version'])): ?>
                        <span class="text-xs text-gray-400">v<?= htmlspecialchars($plugin['version']) ?></span>
                    <?php endif; ?>
                    <?php if (!empty($plugin['is_active'])): ?>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                    <?php else: ?>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">Inactive</span>
                    <?php endif; ?>
                </div>
                <button type="button" onclick="this.closest('[id^=modal-]').classList.add('hidden')"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="px-6 py-5 overflow-y-auto flex-1">
                <p class="text-xs text-gray-400 mb-4">
                    <?php if ($_author !== ''): ?>By <?= htmlspecialchars($_author) ?><?php endif; ?>
                    <?php if ($_downloads > 0): ?> &middot; <?= number_format($_downloads) ?> downloads<?php endif; ?>
                    <?php if ($_requires !== ''): ?> &middot; Requires TubePress <?= htmlspecialchars($_requires) ?>+<?php endif; ?>
                </p>
                <?php if ($_longDesc !== ''): ?>
                    <div class="prose prose-sm text-gray-700 mb-6">
                        <?php foreach (preg_split('/\R{2,}/', $_longDesc) as $para): ?>
                            <p class="mb-3 last:mb-0"><?= htmlspecialchars(trim($para)) ?></p>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p class="text-sm text-gray-600 mb-6"><?= htmlspecialchars($_shortDesc) ?></p>
                <?php endif; ?>
                <?php if (!empty($_features)): ?>
                    <h3 class="text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wide">Features</h3>
                    <div class="space-y-3">
                        <?php foreach ($_features as $feature): ?>
                            <div class="bg-gray-50 rounded-lg p-4 flex gap-3.5 items-start">
                                <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center mt-0.5">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-sm font-medium text-gray-900 mb-1"><?= htmlspecialchars($feature['title'] ?? '') ?></h4>
                                    <p class="text-sm text-gray-600"><?= htmlspecialchars($feature['description'] ?? '') ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end items-center gap-2 flex-shrink-0 bg-gray-50">
                <button type="button" onclick="this.closest('[id^=modal-]').classList.add('hidden')"
                        class="px-4 py-2 bg-white text-gray-700 text-sm font-medium rounded-lg border border-gray-300 hover:bg-gray-50">Close</button>
            </div>
        </div>
    </div>
<?php endforeach; ?>
<?php endif; ?>


<?php if (!empty($available)): ?>
<div id="pluginsAvailable">
    <h2 class="text-[11px] font-semibold text-gray-500 uppercase tracking-wider mb-3">Marketplace</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="pluginsAvailableGrid">
        <?php foreach ($available as $mp): ?>
            <?php
            $mpSlug = htmlspecialchars($mp['slug'] ?? '');
            $isFree = !empty($mp['is_free']);
            $isOwned = !empty($mp['owned']);
            $price = (float)($mp['price_credits'] ?? 0);
            $priceUsd = $price * $rate;
            $mpFeaturesList = $mp['features'] ?? [];
            if (is_string($mpFeaturesList)) $mpFeaturesList = json_decode($mpFeaturesList, true) ?: [];
            $featureCount = count($mpFeaturesList);
            ?>
            <div class="plugin-row bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md hover:border-gray-300 transition-all duration-200 flex flex-col"
                 data-name="<?= htmlspecialchars(strtolower($mp['name'] ?? '')) ?>"
                 data-desc="<?= htmlspecialchars(strtolower($mp['description'] ?? '')) ?>">
                
                <div class="p-5 flex-1">
                    <div class="flex items-start gap-3.5 mb-3">
                        <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-primary-50 to-primary-100 text-primary-600 flex items-center justify-center shrink-0">
                            <?php if (!empty($mp['icon_url'])): ?>
                                <img src="<?= htmlspecialchars($mp['icon_url']) ?>" alt="" class="w-6 h-6 rounded">
                            <?php else: ?>
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                            <?php endif; ?>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <button type="button" onclick="document.getElementById('mp-modal-<?= $mpSlug ?>').classList.remove('hidden')"
                                        class="text-sm font-semibold text-gray-900 hover:text-primary-600 transition-colors truncate text-left">
                                    <?= htmlspecialchars($mp['name'] ?? '') ?>
                                </button>
                            </div>
                            <p class="text-[11px] text-gray-400 mt-0.5">
                                By <?= htmlspecialchars($mp['author'] ?? 'Unknown') ?>
                                <?php if (!empty($mp['latest_version'])): ?>&middot; v<?= htmlspecialchars($mp['latest_version']) ?><?php endif; ?>
                            </p>
                        </div>
                        
                        <div class="shrink-0">
                            <?php if ($isFree): ?>
                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[11px] font-bold bg-green-50 text-green-700 border border-green-200">Free</span>
                            <?php elseif ($isOwned): ?>
                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[11px] font-bold bg-blue-50 text-blue-700 border border-blue-200">Owned</span>
                            <?php else: ?>
                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200">$<?= number_format($priceUsd, 2) ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <p class="text-[13px] text-gray-600 leading-relaxed line-clamp-3"><?= htmlspecialchars($mp['description'] ?? 'No description.') ?></p>
                    
                    <?php if ($featureCount > 0): ?>
                        <p class="mt-3 text-[11px] text-gray-400 flex items-center gap-1">
                            <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            <?= $featureCount ?> feature<?= $featureCount > 1 ? 's' : '' ?> included
                        </p>
                    <?php endif; ?>
                </div>
                
                <div class="px-5 py-3.5 border-t border-gray-100 flex items-center justify-between gap-2 bg-gray-50/50 rounded-b-xl">
                    <button type="button" onclick="document.getElementById('mp-modal-<?= $mpSlug ?>').classList.remove('hidden')"
                            class="text-[12px] font-medium text-gray-500 hover:text-primary-600 transition-colors">
                        View details &rarr;
                    </button>
                    <?php if ($isFree || $isOwned): ?>
                        <form method="POST" action="/admin/plugins/<?= $mpSlug ?>/install" class="inline">
                            <?= Router::csrfField() ?>
                            <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-[12px] font-semibold text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors shadow-sm">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                Install
                            </button>
                        </form>
                    <?php elseif ($isConnected): ?>
                        <button type="button" onclick="MP.openPurchaseModal('<?= $mpSlug ?>', 'plugin', '<?= htmlspecialchars($mp['name'] ?? '', ENT_QUOTES) ?>')"
                                class="inline-flex items-center gap-1.5 px-4 py-2 text-[12px] font-semibold text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors shadow-sm">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                            Get
                        </button>
                    <?php else: ?>
                        <button type="button" onclick="MP.autoConnect()"
                                class="inline-flex items-center gap-1.5 px-4 py-2 text-[12px] font-semibold text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors shadow-sm"
                                title="Connect your account to purchase this plugin">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            Connect &amp; Get
                        </button>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>


<?php foreach ($available as $mp): ?>
    <?php
    $mpSlug = htmlspecialchars($mp['slug'] ?? '');
    $isFree = !empty($mp['is_free']);
    $isOwned = !empty($mp['owned']);
    $mpPrice = (float)($mp['price_credits'] ?? 0);
    $mpPriceUsd = $mpPrice * $rate;
    $mpFeatures = $mp['features'] ?? [];
    if (is_string($mpFeatures)) $mpFeatures = json_decode($mpFeatures, true) ?: [];
    $mpLongDesc = $mp['long_description'] ?? '';
    $mpShortDesc = $mp['description'] ?? 'No description.';
    ?>
    <div id="mp-modal-<?= $mpSlug ?>" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)this.classList.add('hidden')">
        <div class="fixed inset-0 bg-black/50"></div>
        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] sm:max-h-[85vh] flex flex-col overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <div class="flex items-center gap-3">
                    <h2 class="text-lg font-semibold text-gray-900"><?= htmlspecialchars($mp['name'] ?? '') ?></h2>
                    <?php if (!empty($mp['latest_version'])): ?>
                        <span class="text-xs text-gray-400">v<?= htmlspecialchars($mp['latest_version']) ?></span>
                    <?php endif; ?>
                    <?php if ($isFree): ?>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-green-100 text-green-700">Free</span>
                    <?php elseif ($isOwned): ?>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-700">Owned</span>
                    <?php else: ?>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-amber-100 text-amber-700">$<?= number_format($mpPriceUsd, 2) ?></span>
                    <?php endif; ?>
                </div>
                <button type="button" onclick="this.closest('[id^=mp-modal-]').classList.add('hidden')"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="px-6 py-5 overflow-y-auto flex-1">
                <p class="text-xs text-gray-400 mb-4">
                    <?php if (!empty($mp['author'])): ?>By <?= htmlspecialchars($mp['author']) ?><?php endif; ?>
                    <?php if (!empty($mp['download_count'])): ?> &middot; <?= number_format((int)$mp['download_count']) ?> downloads<?php endif; ?>
                    <?php if (!empty($mp['requires_cms'])): ?> &middot; Requires TubePress <?= htmlspecialchars($mp['requires_cms']) ?>+<?php endif; ?>
                </p>
                <?php if ($mpLongDesc !== ''): ?>
                    <div class="prose prose-sm text-gray-700 mb-6">
                        <?php foreach (preg_split('/\R{2,}/', $mpLongDesc) as $para): ?>
                            <p class="mb-3 last:mb-0"><?= htmlspecialchars(trim($para)) ?></p>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p class="text-sm text-gray-600 mb-6"><?= htmlspecialchars($mpShortDesc) ?></p>
                <?php endif; ?>
                <?php if (!empty($mpFeatures)): ?>
                    <h3 class="text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wide">Features</h3>
                    <div class="space-y-3">
                        <?php foreach ($mpFeatures as $feature): ?>
                            <div class="bg-gray-50 rounded-lg p-4 flex gap-3.5 items-start">
                                <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center mt-0.5">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-sm font-medium text-gray-900 mb-1"><?= htmlspecialchars($feature['title'] ?? '') ?></h4>
                                    <p class="text-sm text-gray-600"><?= htmlspecialchars($feature['description'] ?? '') ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center flex-shrink-0 bg-gray-50">
                <div>
                    <?php if (!$isFree && !$isOwned): ?>
                        <span class="text-sm font-semibold text-gray-900">$<?= number_format($mpPriceUsd, 2) ?></span>
                    <?php endif; ?>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="this.closest('[id^=mp-modal-]').classList.add('hidden')"
                            class="px-4 py-2 bg-white text-gray-700 text-sm font-medium rounded-lg border border-gray-300 hover:bg-gray-50">Close</button>
                    <?php if ($isFree || $isOwned): ?>
                        <form method="POST" action="/admin/plugins/<?= $mpSlug ?>/install" class="inline">
                            <?= Router::csrfField() ?>
                            <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                Install
                            </button>
                        </form>
                    <?php elseif ($isConnected): ?>
                        <button type="button" onclick="this.closest('[id^=mp-modal-]').classList.add('hidden'); MP.openPurchaseModal('<?= $mpSlug ?>', 'plugin', '<?= htmlspecialchars($mp['name'] ?? '', ENT_QUOTES) ?>')"
                                class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                            Get
                        </button>
                    <?php else: ?>
                        <button type="button" onclick="this.closest('[id^=mp-modal-]').classList.add('hidden'); MP.autoConnect()"
                                class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            Connect &amp; Get
                        </button>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
<?php endforeach; ?>

<?php elseif (!$isConnected): ?>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
    <p class="text-gray-500 text-sm mb-3">Connect to the marketplace to browse more plugins.</p>
    <button type="button" onclick="MP.autoConnect()" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors">Connect</button>
</div>
<?php endif; ?>

<?php if (empty($plugins) && empty($available)): ?>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
    <p class="text-gray-500 text-sm">No plugins available.</p>
</div>
<?php endif; ?>


<div id="pluginsNoResults" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
    <p class="text-gray-500 text-sm">No plugins match your search.</p>
</div>

<script>
document.getElementById('pluginSearch').addEventListener('input', function() {
    var q = this.value.toLowerCase().trim();
    var rows = document.querySelectorAll('.plugin-row');
    var visibleInstalled = 0, visibleAvailable = 0;

    rows.forEach(function(row) {
        var name = row.dataset.name || '';
        var desc = row.dataset.desc || '';
        var match = !q || name.includes(q) || desc.includes(q);
        row.style.display = match ? '' : 'none';
        if (match) {
            if (row.closest('#pluginsInstalled')) visibleInstalled++;
            else if (row.closest('#pluginsAvailable')) visibleAvailable++;
        }
    });

    var installedSection = document.getElementById('pluginsInstalled');
    var availableSection = document.getElementById('pluginsAvailable');
    if (installedSection) installedSection.style.display = visibleInstalled > 0 ? '' : 'none';
    if (availableSection) availableSection.style.display = visibleAvailable > 0 ? '' : 'none';

    document.getElementById('pluginsNoResults').classList.toggle('hidden', visibleInstalled + visibleAvailable > 0);
});
</script>
