<?php ob_start(); ?>

<?php
$headerActions = [];
if ($configured) {
    $headerActions[] = ['url' => admin_url('marketplace/licenses'), 'label' => __('admin.marketplace.licenses'), 'class' => 'btn-secondary'];
    $headerActions[] = ['url' => admin_url('marketplace/audit-log'), 'label' => __('admin.marketplace_audit.title'), 'class' => 'btn-ghost'];
}
admin_content_header(__('admin.marketplace.title'), 'store', $headerActions, __('admin.marketplace.subtitle'));
?>

<?php if (!$configured): ?>
<!-- ── Setup card ─────────────────────────────────────────── -->
<div class="card" style="max-width: 560px;">
    <div class="card-body">
        <h3 style="margin-top:0;"><?= __('admin.marketplace.configure') ?></h3>
        <p class="text-muted"><?= __('admin.marketplace.not_configured_hint') ?></p>

        <form method="POST" action="<?= admin_url('marketplace/settings') ?>">
            <?= $csrf->field() ?>
            <div class="form-group">
                <label for="marketplace_url"><?= __('admin.marketplace.marketplace_url') ?></label>
                <input type="url" id="marketplace_url" name="marketplace_url"
                       class="form-control" placeholder="<?= e(__('admin.marketplace.url_placeholder')) ?>"
                       value="<?= e($marketplaceUrl) ?>" required>
            </div>
            <button type="submit" class="btn btn-primary"><?= __('admin.marketplace.save_settings') ?></button>
        </form>
    </div>
</div>

<?php else: ?>

<?php if ($error === 'server_unreachable'): ?>
<div class="alert alert-warning" style="margin-bottom: 1.5rem;">
    <?= icon('wifi-off', 16) ?> <?= __('admin.marketplace.server_unreachable') ?>
</div>
<?php endif; ?>

<!-- ── Filter bar ─────────────────────────────────────────── -->
<div class="mp-toolbar" style="display:flex; gap:1rem; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap;">
    <form method="GET" action="<?= admin_url('marketplace') ?>" style="display:flex; gap:.75rem; align-items:center; flex:1; min-width:200px;">
        <input type="text" name="search" class="form-control" style="max-width:300px;"
               placeholder="<?= e(__('admin.marketplace.search_placeholder')) ?>"
               value="<?= e($searchFilter) ?>">
        <select name="type" class="form-control" style="max-width:160px;" onchange="this.form.submit()">
            <option value=""><?= __('admin.marketplace.filter_all') ?></option>
            <option value="theme" <?= $typeFilter === 'theme' ? 'selected' : '' ?>><?= __('admin.marketplace.filter_themes') ?></option>
            <option value="plugin" <?= $typeFilter === 'plugin' ? 'selected' : '' ?>><?= __('admin.marketplace.filter_plugins') ?></option>
        </select>
        <button type="submit" class="btn btn-secondary btn-sm"><?= icon('search', 16) ?></button>
    </form>

    <form method="POST" action="<?= admin_url('marketplace/settings') ?>" style="display:flex; gap:.5rem; align-items:center;">
        <?= $csrf->field() ?>
        <input type="url" name="marketplace_url" class="form-control" style="max-width:240px; font-size:.85rem;"
               value="<?= e($marketplaceUrl) ?>" placeholder="<?= e(__('admin.marketplace.url_placeholder')) ?>">
        <button type="submit" class="btn btn-secondary btn-sm" title="<?= e(__('admin.marketplace.save_settings')) ?>"><?= icon('settings', 16) ?></button>
    </form>
</div>

<?php if (empty($packages)): ?>
<?php admin_empty_state(__('admin.marketplace.no_packages'), 'store', '', ''); ?>

<?php else: ?>
<!-- ── Package grid ───────────────────────────────────────── -->
<div class="mp-grid">
    <?php foreach ($packages as $pkg):
        $slug       = $pkg['slug'] ?? '';
        $name       = $pkg['name'] ?? $slug;
        $type       = $pkg['type'] ?? 'plugin';
        $version    = $pkg['version'] ?? '';
        $author     = $pkg['author'] ?? '';
        $desc       = $pkg['description'] ?? '';
        $isPremium  = !empty($pkg['is_premium']);
        $thumbUrl   = $pkg['thumbnail'] ?? '';
        $isInstalled= $pkg['_installed'] ?? false;
        $hasUpdate  = $pkg['_has_update'] ?? false;
        $instVer    = $pkg['_installed_version'] ?? '';
    ?>
    <div class="mp-card <?= $isInstalled ? 'mp-card--installed' : '' ?>">
        <!-- Thumbnail -->
        <a href="<?= admin_url('marketplace/detail/' . e($slug)) ?>" class="mp-card__preview">
            <?php if ($thumbUrl): ?>
            <img src="<?= e($thumbUrl) ?>" alt="<?= e($name) ?>" loading="lazy" class="mp-card__thumb">
            <?php else: ?>
            <div class="mp-card__placeholder">
                <?= icon($type === 'theme' ? 'palette' : 'puzzle', 32) ?>
            </div>
            <?php endif; ?>
        </a>

        <!-- Info -->
        <div class="mp-card__body">
            <div class="mp-card__meta">
                <span class="mp-badge mp-badge--<?= e($type) ?>"><?= $type === 'theme' ? __('admin.marketplace.type_theme') : __('admin.marketplace.type_plugin') ?></span>
                <?php if ($isPremium): ?>
                <span class="mp-badge mp-badge--premium"><?= __('admin.marketplace.premium') ?></span>
                <?php else: ?>
                <span class="mp-badge mp-badge--free"><?= __('admin.marketplace.free') ?></span>
                <?php endif; ?>
            </div>

            <h3 class="mp-card__title">
                <a href="<?= admin_url('marketplace/detail/' . e($slug)) ?>"><?= e($name) ?></a>
            </h3>

            <?php if ($desc): ?>
            <p class="mp-card__desc"><?= e(mb_strimwidth($desc, 0, 100, '...')) ?></p>
            <?php endif; ?>

            <div class="mp-card__footer">
                <span class="text-muted" style="font-size:.8rem;">v<?= e($version) ?> &middot; <?= e($author) ?></span>

                <?php if ($isInstalled && $hasUpdate): ?>
                <span class="mp-badge mp-badge--update"><?= __('admin.marketplace.update_available') ?></span>
                <?php elseif ($isInstalled): ?>
                <span class="mp-badge mp-badge--installed"><?= __('admin.marketplace.installed') ?> (v<?= e($instVer) ?>)</span>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>
<?php endif; ?>

<style>
/* ── Marketplace grid ─────────────────────────────────────── */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.mp-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.mp-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.mp-card--installed {
    border-color: var(--color-success, #22c55e);
}

.mp-card__preview {
    display: block;
    aspect-ratio: 16/10;
    background: var(--color-muted-bg, #f1f5f9);
    overflow: hidden;
}
.mp-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted, #94a3b8);
}

.mp-card__body {
    padding: 1rem;
}
.mp-card__meta {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}
.mp-card__title {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    line-height: 1.3;
}
.mp-card__title a {
    color: inherit;
    text-decoration: none;
}
.mp-card__title a:hover {
    color: var(--color-primary, #3b82f6);
}
.mp-card__desc {
    font-size: .85rem;
    color: var(--color-muted, #64748b);
    margin: 0 0 .75rem;
    line-height: 1.4;
}
.mp-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.mp-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mp-badge--theme {
    background: var(--color-info-bg, #dbeafe);
    color: var(--color-info, #2563eb);
}
.mp-badge--plugin {
    background: var(--color-accent-bg, #f3e8ff);
    color: var(--color-accent, #7c3aed);
}
.mp-badge--premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}
.mp-badge--free {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #16a34a);
}
.mp-badge--installed {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #16a34a);
}
.mp-badge--update {
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning, #d97706);
}
</style>

<?php
$content = ob_get_clean();
include dirname(__DIR__) . '/layouts/admin.php';
?>
