<?php



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

     
    $defaultSort = Setting::get('simply_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">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="homepage">

        <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-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="simply_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="simply_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>Simply 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('simply_hp_watched_enabled', isset($_POST['simply_hp_watched_enabled']) ? '1' : '0');

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