<?php



 
HookSystem::addAction('admin.appearance_render.homepage', function (array $vars): void {
    $settings = $vars['settings'] ?? $vars;
     
    $watchedEnabled = Setting::get('hentai_hp_watched_enabled', '1') === '1';

    $heroErr = $_SESSION['hentai_hero_err'] ?? '';
    unset($_SESSION['hentai_hero_err']);

    $heroEnabled = Setting::get('hentai_hero_enabled', '1') === '1';
    $heroChips   = Setting::get('hentai_hero_chips', '1') === '1';
    $heroImage   = Setting::get('hentai_hero_image', '');

     
    $defaultSort = Setting::get('hentai_hp_default_sort', 'newest');

     
    $baseTabs = [
        'newest'    => __('newest'),
        'popular'   => __('most_viewed'),
        'top_rated' => __('top_rated'),
    ];
    $sortOptions = HookSystem::applyFilter('front.sort_tabs', $baseTabs);

     
    $ctrActive = PluginManager::isActive('ctr');

     
    if (!isset($sortOptions['trending'])) {
        $sortOptions = ['trending' => __('trending')] + $sortOptions;
    }

    $icons = [
        'trending'  => 'fa-solid fa-fire',
        'newest'    => 'fa-solid fa-clock',
        'popular'   => 'fa-solid fa-eye',
        'top_rated' => 'fa-solid fa-thumbs-up',
    ];

    $descriptions = [
        'trending'  => 'Videos ranked by engagement score (CTR plugin)',
        'newest'    => 'Most recently published videos first',
        'popular'   => 'Videos with the most views',
        'top_rated' => 'Videos with the best like ratio',
    ];
    ?>
    <form method="POST" action="/admin/appearance" enctype="multipart/form-data">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="homepage">

<style>
    .hn-up{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background:#fafafa}
    .hn-up__preview{position:relative;border-radius:8px;overflow:hidden;background:#111;aspect-ratio:1920/760;display:flex;align-items:center;justify-content:center}
    .hn-up__preview img{width:100%;height:100%;object-fit:cover;display:block}
    .hn-up__del{position:absolute;top:6px;right:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(239,68,68,.92);color:#fff;font-size:11px;cursor:pointer;transition:all .12s}
    .hn-up__del:hover{background:#dc2626}
    .hn-up__del:has(input:checked){outline:2px solid #dc2626;outline-offset:1px}
    .hn-up__badge{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.62);color:#e5e7eb;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:5px}
    .hn-up__file{display:block;width:100%;font-size:12px;color:#6b7280}
    .hn-up__err{display:flex;align-items:flex-start;gap:9px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.5}
    .hn-up__err i{margin-top:1px;color:#dc2626}
    @media(max-width:640px){.hn-up{grid-template-columns:1fr}}
</style>
        <div class="space-y-6">

            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-gem text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Hero banner</h3>
                                <p class="text-xs text-gray-500 mt-0.5">The gilded night-gallery banner at the top of the homepage.</p>
                            </div>
                        </div>
                        <label class="hp-toggle">
                            <input type="checkbox" name="hentai_hero_enabled" value="1" <?= $heroEnabled ? 'checked' : '' ?>>
                            <span class="hp-toggle__slider"></span>
                        </label>
                    </div>
                </div>
                <div class="p-6 space-y-5">
                    <?php if ($heroErr !== ''): ?>
                    <div class="hn-up__err">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        <span><strong>The banner was not replaced.</strong> <?= htmlspecialchars($heroErr) ?></span>
                    </div>
                    <?php endif; ?>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 uppercase tracking-wide mb-1.5">Background image</label>
                        <div class="hn-up">
                            <div class="hn-up__preview">
                                <?php if ($heroImage !== ''): ?>
                                    <img src="/uploads/branding/<?= htmlspecialchars($heroImage) ?>" alt="Hero banner">
                                    <label class="hn-up__del" title="Remove image">
                                        <input type="checkbox" name="remove_hentai_hero_image" value="1" hidden>
                                        <i class="fa-solid fa-trash-can"></i>
                                    </label>
                                <?php else: ?>
                                    <img src="/themes/hentai/assets/brand/hero.webp" alt="Artwork bundled with the theme">
                                    <span class="hn-up__badge">Bundled artwork</span>
                                <?php endif; ?>
                            </div>
                            <div class="hn-up__body">
                                <input type="file" name="hentai_hero_image_file" accept="image/jpeg,image/png,image/webp" class="hn-up__file">
                                <p class="mt-2 text-xs text-gray-500">JPG, PNG or WebP &middot; 5&nbsp;MB max. The banner spans the full width of the page, so use a wide image &mdash; <strong>1920&times;760</strong> works best. Remove it to fall back to the artwork bundled with the theme.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between border-t border-gray-100 pt-4">
                        <div>
                            <span class="block text-xs font-semibold text-gray-700 uppercase tracking-wide">Category chips</span>
                            <p class="text-xs text-gray-500 mt-0.5">Show the most popular categories as quick links under the search field.</p>
                        </div>
                        <label class="hp-toggle">
                            <input type="checkbox" name="hentai_hero_chips" value="1" <?= $heroChips ? 'checked' : '' ?>>
                            <span class="hp-toggle__slider"></span>
                        </label>
                    </div>
                    <p class="text-xs text-gray-500 border-t border-gray-100 pt-4">
                        <i class="fa-solid fa-language mr-1"></i>
                        The kicker, headline and intro sentence are translatable strings: edit them per language in <a href="/admin/languages" class="text-primary-600 hover:text-primary-700 font-medium">Languages</a> under the <strong>Hentai Noir Theme</strong> section (<code class="text-[11px] bg-gray-100 px-1 py-0.5 rounded">hentai_hero_*</code>).
                    </p>
                </div>
            </div>

            
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-history text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Watch It Again</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Shows recently watched videos from the visitor's browser history.</p>
                            </div>
                        </div>
                        <label class="hp-toggle">
                            <input type="checkbox" name="hentai_hp_watched_enabled" value="1" <?= $watchedEnabled ? 'checked' : '' ?>>
                            <span class="hp-toggle__slider"></span>
                        </label>
                    </div>
                </div>
            </div>

            
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center gap-2.5">
                        <span class="text-gray-400"><i class="fa-solid fa-film text-base"></i></span>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Video Section</h3>
                            <p class="text-xs text-gray-500 mt-0.5">Choose the default sort. Visitors see the title matching the active filter.</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="hp-sort-grid">
                        <?php
                         
                        if ($defaultSort === 'trending' && !$ctrActive) {
                            foreach ($sortOptions as $k => $v) {
                                if ($k !== 'trending') { $defaultSort = $k; break; }
                            }
                        }
                        ?>
                        <?php foreach ($sortOptions as $key => $label): ?>
                            <?php
                            $locked = ($key === 'trending' && !$ctrActive);
                            $checked = (!$locked && $defaultSort === $key) ? 'checked' : '';
                            $icon = $icons[$key] ?? 'fa-solid fa-sort';
                            $desc = $descriptions[$key] ?? '';
                            ?>
                            <?php if ($locked): ?>
                                
                                <div class="hp-sort-card hp-sort-card--locked">
                                    <div class="hp-sort-card__header">
                                        <i class="<?= $icon ?> hp-sort-card__icon"></i>
                                        <span class="hp-sort-card__name"><?= htmlspecialchars($label) ?></span>
                                        <span class="hp-sort-card__badge hp-sort-card__badge--locked"><i class="fa-solid fa-lock" style="font-size:9px;margin-right:3px;"></i> Plugin</span>
                                    </div>
                                    <p class="hp-sort-card__desc"><?= $desc ?></p>
                                    <div class="hp-sort-card__cta">
                                        <i class="fa-solid fa-puzzle-piece" style="margin-right:5px;"></i>
                                        Requires the <strong>CTR Ranking</strong> plugin to enable smart trending sort.
                                        <a href="/admin/plugins" class="hp-sort-card__cta-link">Manage Plugins &rarr;</a>
                                    </div>
                                </div>
                            <?php else: ?>
                                <label class="hp-sort-card<?= $checked ? ' hp-sort-card--active' : '' ?>">
                                    <input type="radio" name="hentai_hp_default_sort" value="<?= $key ?>" <?= $checked ?>
                                           onchange="document.querySelectorAll('.hp-sort-card').forEach(function(c){c.classList.remove('hp-sort-card--active')});this.closest('.hp-sort-card').classList.add('hp-sort-card--active')">
                                    <div class="hp-sort-card__header">
                                        <i class="<?= $icon ?> hp-sort-card__icon"></i>
                                        <span class="hp-sort-card__name"><?= htmlspecialchars($label) ?></span>
                                        <?php if ($checked): ?>
                                            <span class="hp-sort-card__badge">Default</span>
                                        <?php endif; ?>
                                    </div>
                                    <?php if ($desc): ?>
                                        <p class="hp-sort-card__desc"><?= $desc ?></p>
                                    <?php endif; ?>
                                </label>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                    <p class="mt-4 text-xs text-gray-500">
                        <i class="fa-solid fa-circle-info mr-1"></i>
                        The <strong>default sort</strong> is applied when visitors first arrive. The dropdown lets them switch — and the section title updates to match the active filter.
                    </p>
                    <p class="mt-2 text-xs text-gray-500">
                        <i class="fa-solid fa-language mr-1"></i>
                        Section titles can be edited per language in <a href="/admin/languages" class="text-primary-600 hover:text-primary-700 font-medium">Languages</a> under the <strong>Hentai Noir Theme</strong> section.
                    </p>
                </div>
            </div>

        </div>

        <div class="mt-6">
            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">
                <i class="fa-solid fa-check" style="margin-right:6px;font-size:12px;"></i> Save changes
            </button>
        </div>
    </form>

    <style>
    .hp-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
    .hp-toggle input { opacity:0; width:0; height:0; }
    .hp-toggle__slider { position:absolute; cursor:pointer; inset:0; background:#d1d5db; border-radius:24px; transition:.2s; }
    .hp-toggle__slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
    .hp-toggle input:checked + .hp-toggle__slider { background:#4f46e5; }
    .hp-toggle input:checked + .hp-toggle__slider:before { transform:translateX(20px); }

    .hp-sort-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
    .hp-sort-card {
        position:relative; display:flex; flex-direction:column; padding:16px;
        border-radius:10px; border:2px solid #e5e7eb; cursor:pointer;
        transition:border-color .15s, box-shadow .15s; background:#fff;
    }
    .hp-sort-card:hover { border-color:#a5b4fc; }
    .hp-sort-card--active { border-color:#6366f1; box-shadow:0 0 0 1px #6366f1; }
    .hp-sort-card input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
    .hp-sort-card__header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
    .hp-sort-card__icon { font-size:15px; color:#6b7280; }
    .hp-sort-card--active .hp-sort-card__icon { color:#4f46e5; }
    .hp-sort-card__name { font-size:15px; font-weight:600; color:#111827; }
    .hp-sort-card__badge {
        margin-left:auto; font-size:11px; font-weight:600; text-transform:uppercase;
        color:#4f46e5; background:#eef2ff; padding:2px 8px; border-radius:4px; letter-spacing:.02em;
    }
    .hp-sort-card__desc { font-size:12px; color:#6b7280; margin-bottom:12px; line-height:1.4; }

     
    .hp-sort-card--locked {
        cursor:default; background:#f9fafb; border-color:#e5e7eb; opacity:1;
    }
    .hp-sort-card--locked:hover { border-color:#e5e7eb; }
    .hp-sort-card--locked .hp-sort-card__icon { color:#d1d5db; }
    .hp-sort-card--locked .hp-sort-card__name { color:#9ca3af; }
    .hp-sort-card--locked .hp-sort-card__desc { color:#9ca3af; }
    .hp-sort-card__badge--locked {
        color:#9ca3af; background:#f3f4f6;
    }
    .hp-sort-card__cta {
        margin-top:auto; padding:10px 12px; border-radius:6px;
        background:#fef3c7; border:1px solid #fde68a;
        font-size:12px; color:#92400e; line-height:1.5;
    }
    .hp-sort-card__cta-link {
        display:inline-block; margin-top:4px; font-weight:600;
        color:#4f46e5; text-decoration:none;
    }
    .hp-sort-card__cta-link:hover { text-decoration:underline; }

@media(max-width:479px){
    .hp-sort-grid{gap:8px}
    .hp-sort-card{padding:12px}
    .hp-sort-card__cta{padding:8px 10px;font-size:11px}
}
    </style>

    <script>
    
    document.querySelectorAll('.hp-sort-card input[type=radio]').forEach(function(r) {
        r.addEventListener('change', function() {
            document.querySelectorAll('.hp-sort-card__badge').forEach(function(b) {
                if (!b.classList.contains('hp-sort-card__badge--locked')) b.remove();
            });
            if (this.checked) {
                var header = this.closest('.hp-sort-card').querySelector('.hp-sort-card__header');
                var badge = document.createElement('span');
                badge.className = 'hp-sort-card__badge';
                badge.textContent = 'Default';
                header.appendChild(badge);
            }
        });
    });
    </script>
    <?php
});

 
HookSystem::addAction('admin.appearance_save.homepage', function (): void {
    Setting::set('hentai_hp_watched_enabled', isset($_POST['hentai_hp_watched_enabled']) ? '1' : '0');
    Setting::set('hentai_hero_enabled', isset($_POST['hentai_hero_enabled']) ? '1' : '0');
    Setting::set('hentai_hero_chips', isset($_POST['hentai_hero_chips']) ? '1' : '0');
    if (!empty($_FILES['hentai_hero_image_file']['tmp_name']) && $_FILES['hentai_hero_image_file']['error'] === UPLOAD_ERR_OK) {
        $up = FileUpload::image($_FILES['hentai_hero_image_file'], 'branding');
        if ($up['success']) {
            $oldHero = Setting::get('hentai_hero_image', '');
            if ($oldHero !== '') { FileUpload::delete('branding/' . $oldHero); }
            Setting::set('hentai_hero_image', $up['path']);
        } else {
            $_SESSION['hentai_hero_err'] = $up['error'];
        }
    } elseif (!empty($_POST['remove_hentai_hero_image'])) {
        $oldHero = Setting::get('hentai_hero_image', '');
        if ($oldHero !== '') { FileUpload::delete('branding/' . $oldHero); }
        Setting::set('hentai_hero_image', '');
    }

    $validSorts = array_keys(HookSystem::applyFilter('front.sort_tabs', [
        'newest' => 'Newest', 'popular' => 'Popular', 'top_rated' => 'Top rated',
    ]));
    $sort = trim($_POST['hentai_hp_default_sort'] ?? 'newest');
    if (!in_array($sort, $validSorts, true)) {
        $sort = 'newest';
    }
    Setting::set('hentai_hp_default_sort', $sort);
});
