<?php
 
$ctrActive = PluginManager::isActive('ctr');

 
$videoSortOptions = ['newest' => 'Newest', 'popular' => 'Most Viewed', 'top_rated' => 'Top Rated'];
$videoSortOptions = HookSystem::applyFilter('front.sort_tabs', $videoSortOptions);
if (!isset($videoSortOptions['trending'])) {
    $videoSortOptions = ['trending' => 'Trending'] + $videoSortOptions;
}

 
$catSortOptions = ['alphabetical' => 'Alphabetical', 'popularity' => 'Popularity'];
$catSortOptions = HookSystem::applyFilter('front.category_sort_tabs', $catSortOptions);
if (!isset($catSortOptions['trending'])) {
    $catSortOptions['trending'] = 'Trending';
}

 
$perfSortOptions = ['alphabetical' => 'Alphabetical', 'popularity' => 'Popularity'];
$perfSortOptions = HookSystem::applyFilter('front.performer_sort_tabs', $perfSortOptions);
if (!isset($perfSortOptions['trending'])) {
    $perfSortOptions['trending'] = 'Trending';
}

 
$channelSortOptions = ['alphabetical' => 'Alphabetical', 'popularity' => 'Popularity'];
$channelSortOptions = HookSystem::applyFilter('front.channel_sort_tabs', $channelSortOptions);
if (!isset($channelSortOptions['trending'])) {
    $channelSortOptions['trending'] = 'Trending';
}

 
$albumSortOptions = ['newest' => 'Newest', 'popular' => 'Most Viewed', 'top_rated' => 'Top Rated', 'most_images' => 'Most Images'];
$albumSortOptions = HookSystem::applyFilter('front.album_sort_tabs', $albumSortOptions);
if (!isset($albumSortOptions['trending'])) {
    $albumSortOptions = ['trending' => 'Trending'] + $albumSortOptions;
}

$sortIcons = [
    'trending'     => 'fa-arrow-trend-up',
    'newest'       => 'fa-clock',
    'popular'      => 'fa-fire',
    'top_rated'    => 'fa-star',
    'alphabetical' => 'fa-arrow-down-a-z',
    'popularity'   => 'fa-fire',
    'most_images'  => 'fa-images',
];

 
function renderSortPills(string $name, string $current, array $options, array $icons, bool $ctrActive): void {
     
    if ($current === 'trending' && !$ctrActive) {
        foreach ($options as $k => $v) {
            if ($k !== 'trending') { $current = $k; break; }
        }
    }
    echo '<div class="flex flex-wrap gap-1.5">';
    foreach ($options as $key => $label) {
        $locked = ($key === 'trending' && !$ctrActive);
        $icon = $icons[$key] ?? 'fa-sort';
        $checked = (!$locked && $current === $key) ? 'checked' : '';
        if ($locked) {
            echo '<div class="flex items-center gap-1 px-2 py-1.5 border rounded-md text-xs border-gray-100 bg-gray-50 cursor-default" title="Requires CTR plugin">';
            echo '<i class="fa-solid ' . $icon . '" style="font-size:10px;color:#d1d5db;"></i>';
            echo '<span class="font-medium text-gray-400">' . htmlspecialchars($label) . '</span>';
            echo '<i class="fa-solid fa-lock" style="font-size:8px;color:#d1d5db;margin-left:1px;"></i>';
            echo '</div>';
        } else {
            echo '<label class="cursor-pointer">';
            echo '<input type="radio" name="' . $name . '" value="' . htmlspecialchars($key) . '" class="sr-only peer" ' . $checked . '>';
            echo '<div class="flex items-center gap-1 px-2 py-1.5 border rounded-md transition-all text-xs peer-checked:border-primary-600 peer-checked:bg-primary-50 border-gray-200 hover:border-gray-300">';
            echo '<i class="fa-solid ' . $icon . '" style="font-size:10px;color:#9ca3af;"></i>';
            echo '<span class="font-medium text-gray-700">' . htmlspecialchars($label) . '</span>';
            echo '</div></label>';
        }
    }
    echo '</div>';
    if (!$ctrActive) {
        echo '<p class="mt-1.5 text-[10px] text-gray-400"><i class="fa-solid fa-lock mr-0.5" style="font-size:8px;"></i> Trending requires the <a href="/admin/plugins" class="text-primary-600 hover:underline font-medium">CTR plugin</a></p>';
    }
}

 
function renderPerRowCards(string $name, int $current, array $values): void {
    echo '<div class="flex gap-2" style="max-width:280px">';
    foreach ($values as $n) {
        $checked = $current === $n ? 'checked' : '';
        echo '<label class="flex-1 cursor-pointer">';
        echo '<input type="radio" name="' . $name . '" value="' . $n . '" class="sr-only peer" ' . $checked . '>';
        echo '<div class="border-2 rounded-lg p-2 text-center transition-all peer-checked:border-primary-600 peer-checked:bg-primary-50 border-gray-200 hover:border-gray-300">';
        echo '<div class="flex gap-0.5 justify-center mb-1">';
        $w = round(40 / $n);
        for ($i = 0; $i < $n; $i++) {
            echo '<div class="h-3 bg-gray-300 rounded-sm" style="width:' . $w . 'px"></div>';
        }
        echo '</div>';
        echo '<span class="text-xs font-medium text-gray-600">' . $n . '</span>';
        echo '</div></label>';
    }
    echo '</div>';
}

 
function renderChoicePills(string $name, string $current, array $options, array $icons): void {
    if (!array_key_exists($current, $options)) {
        $current = (string) array_key_first($options);
    }
    echo '<div class="flex flex-wrap gap-1.5">';
    foreach ($options as $key => $label) {
        $icon = $icons[$key] ?? 'fa-circle';
        $checked = $current === $key ? 'checked' : '';
        echo '<label class="cursor-pointer">';
        echo '<input type="radio" name="' . $name . '" value="' . htmlspecialchars((string) $key) . '" class="sr-only peer" ' . $checked . '>';
        echo '<div class="flex items-center gap-1 px-2.5 py-1.5 border rounded-md transition-all text-xs peer-checked:border-primary-600 peer-checked:bg-primary-50 border-gray-200 hover:border-gray-300">';
        echo '<i class="fa-solid ' . $icon . '" style="font-size:10px;color:#9ca3af;"></i>';
        echo '<span class="font-medium text-gray-700">' . htmlspecialchars((string) $label) . '</span>';
        echo '</div></label>';
    }
    echo '</div>';
}

 
function renderSidebarCheck(string $name, string $label, string $icon, bool $checked): void {
    echo '<label class="cursor-pointer">';
    echo '<input type="checkbox" name="' . $name . '" value="1" class="sr-only peer" ' . ($checked ? 'checked' : '') . '>';
    echo '<div class="flex items-center gap-1.5 px-3 py-2 border-2 rounded-lg transition-all text-xs peer-checked:border-primary-600 peer-checked:bg-primary-50 peer-checked:text-primary-700 border-gray-200 text-gray-500 hover:border-gray-300">';
    echo '<i class="fa-solid ' . $icon . '" style="font-size:11px;"></i>';
    echo '<span class="font-medium">' . htmlspecialchars($label) . '</span>';
    echo '</div></label>';
}

 
function renderPerPageSlider(string $id, string $name, int $value, int $min, int $max, int $step): void {
    ?>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Per page</label>
        <div class="lt-slider-row">
            <input type="range" id="<?= $id ?>_range" min="<?= $min ?>" max="<?= $max ?>" step="<?= $step ?>" value="<?= $value ?>"
                   class="lt-range" oninput="document.getElementById('<?= $id ?>_num').value=this.value">
            <input type="number" id="<?= $id ?>_num" name="<?= $name ?>" value="<?= $value ?>" min="<?= $min ?>" max="<?= $max ?>" step="<?= $step ?>"
                   class="lt-num" oninput="document.getElementById('<?= $id ?>_range').value=this.value">
        </div>
    </div>
    <?php
}
?>

<style>
.lt-tabs{display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lt-tabs::-webkit-scrollbar{display:none}
.lt-tab{padding:10px 16px;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
.lt-tab:hover{color:#374151}
.lt-tab.active{color:#4f46e5;border-bottom-color:#4f46e5}
.lt-tab i{font-size:12px}
.lt-panel{display:none;padding:20px}
.lt-panel.active{display:block}
.lt-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:1280px){.lt-grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px) and (max-width:1279px){.lt-grid--3{grid-template-columns:1fr 1fr}}
.lt-slider-row{display:flex;align-items:center;gap:10px;max-width:360px}
.lt-range{flex:1;min-width:0;height:8px;background:#e5e7eb;border-radius:4px;appearance:none;-webkit-appearance:none;cursor:pointer;accent-color:#4f46e5}
.lt-num{width:60px;padding:5px 4px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;text-align:center;outline:none;flex-shrink:0}
.lt-num:focus{border-color:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.1)}
@media(max-width:1100px){.lt-panel{padding:16px}.lt-grid{gap:16px}}
@media(max-width:900px){.lt-tab{padding:8px 12px;font-size:12px}.lt-tab i{font-size:11px}.lt-panel{padding:14px}.lt-grid{gap:14px}.lt-slider-row{max-width:300px;gap:8px}.lt-num{width:54px;font-size:12px}}
@media(max-width:699px){.lt-panel{padding:12px}.lt-grid{gap:12px}.lt-tab{padding:6px 10px;font-size:11px;gap:4px}.lt-tab i{font-size:10px}.lt-num{width:48px;padding:3px 2px;font-size:11px}.lt-range{height:6px}.lt-slider-row{max-width:260px;gap:6px}.lt-grid--3>div{max-width:360px}}
@media(max-width:479px){.lt-tab{padding:5px 8px;font-size:10px}.lt-slider-row{max-width:220px}}
</style>

<form method="POST" action="/admin/appearance">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="appearance">
    <input type="hidden" name="_sub" value="layout">

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
        <div class="px-5 py-3.5 border-b border-gray-200">
            <div class="flex items-center gap-2.5">
                <span class="text-gray-400"><i class="fa-solid fa-arrows-left-right text-sm"></i></span>
                <h3 class="text-sm font-semibold text-gray-900">Site Dimensions</h3>
            </div>
        </div>
        <div class="p-5">
            <div class="lt-grid lt-grid--3">
                <?php $smw = (int)($settings['site_max_width'] ?? 1800); ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Max width (px)</label>
                    <div class="lt-slider-row">
                        <input type="range" id="smw_range" min="1000" max="2400" step="50" value="<?= $smw ?>"
                               class="lt-range" oninput="document.getElementById('smw_num').value=this.value">
                        <input type="number" id="smw_num" name="site_max_width" value="<?= $smw ?>" min="1000" max="2400" step="50"
                               class="lt-num" style="width:68px" oninput="document.getElementById('smw_range').value=this.value">
                    </div>
                    <p class="mt-1 text-xs text-gray-400">Default: 1800px</p>
                </div>

                <?php $spd = (int)($settings['site_padding_desktop'] ?? 24); ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2"><i class="fa-solid fa-desktop text-gray-400 mr-1" style="font-size:11px;"></i> Padding desktop</label>
                    <div class="lt-slider-row">
                        <input type="range" id="spd_range" min="0" max="80" step="2" value="<?= $spd ?>"
                               class="lt-range" oninput="document.getElementById('spd_num').value=this.value">
                        <input type="number" id="spd_num" name="site_padding_desktop" value="<?= $spd ?>" min="0" max="80" step="2"
                               class="lt-num" oninput="document.getElementById('spd_range').value=this.value">
                    </div>
                    <p class="mt-1 text-xs text-gray-400">Default: 24px</p>
                </div>

                <?php $spm = (int)($settings['site_padding_mobile'] ?? 10); ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2"><i class="fa-solid fa-mobile-screen text-gray-400 mr-1" style="font-size:11px;"></i> Padding mobile</label>
                    <div class="lt-slider-row">
                        <input type="range" id="spm_range" min="0" max="40" step="2" value="<?= $spm ?>"
                               class="lt-range" oninput="document.getElementById('spm_num').value=this.value">
                        <input type="number" id="spm_num" name="site_padding_mobile" value="<?= $spm ?>" min="0" max="40" step="2"
                               class="lt-num" oninput="document.getElementById('spm_range').value=this.value">
                    </div>
                    <p class="mt-1 text-xs text-gray-400">Default: 10px</p>
                </div>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
        <div class="lt-tabs" id="ltTabs">
            <div class="lt-tab active" data-tab="videos"><i class="fa-solid fa-play"></i> Videos</div>
            <div class="lt-tab" data-tab="categories"><i class="fa-solid fa-folder"></i> Categories</div>
            <div class="lt-tab" data-tab="performers"><i class="fa-solid fa-user"></i> Pornstars</div>
            <div class="lt-tab" data-tab="channels"><i class="fa-solid fa-building"></i> Channels</div>
            <div class="lt-tab" data-tab="albums"><i class="fa-solid fa-images"></i> Albums</div>
        </div>

        
        <div class="lt-panel active" id="lt-videos">
            <div class="lt-grid lt-grid--3">
                <?php renderPerPageSlider('vpp', 'videos_per_page', (int)($settings['videos_per_page'] ?? 24), 4, 120, 1); ?>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Per row</label>
                    <?php renderPerRowCards('videos_per_row', (int)($settings['videos_per_row'] ?? 5), [4, 5, 6]); ?>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default sort</label>
                    <?php $currentSort = $settings['default_sort'] ?? 'newest'; ?>
                    <?php renderSortPills('default_sort', $currentSort, $videoSortOptions, $sortIcons, $ctrActive); ?>
                </div>
            </div>
        </div>

        
        <div class="lt-panel" id="lt-categories">
            <div class="lt-grid lt-grid--3">
                <?php renderPerPageSlider('cpp', 'categories_per_page', (int)($settings['categories_per_page'] ?? 30), 6, 120, 1); ?>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default sort</label>
                    <?php $catSort = $settings['categories_default_sort'] ?? 'alphabetical'; ?>
                    <?php renderSortPills('categories_default_sort', $catSort, $catSortOptions, $sortIcons, $ctrActive); ?>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Per row</label>
                    <?php renderPerRowCards('categories_per_row', (int)($settings['categories_per_row'] ?? 5), [3, 4, 5, 6]); ?>
                </div>
                <?php HookSystem::doAction('admin.appearance_extra.categories', $settings); ?>
            </div>
        </div>

        
        <div class="lt-panel" id="lt-performers">
            <div class="lt-grid lt-grid--3">
                <?php renderPerPageSlider('ppp', 'performers_per_page', (int)($settings['performers_per_page'] ?? 30), 6, 120, 1); ?>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default sort</label>
                    <?php $perfSort = $settings['performers_default_sort'] ?? 'alphabetical'; ?>
                    <?php renderSortPills('performers_default_sort', $perfSort, $perfSortOptions, $sortIcons, $ctrActive); ?>
                </div>

                <?php HookSystem::doAction('admin.appearance_extra.performers', $settings); ?>
            </div>
        </div>

        
        <div class="lt-panel" id="lt-channels">
            <div class="lt-grid lt-grid--3">
                <?php renderPerPageSlider('spp', 'channels_per_page', (int)($settings['channels_per_page'] ?? 30), 6, 120, 1); ?>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default sort</label>
                    <?php $channelSort = $settings['channels_default_sort'] ?? 'alphabetical'; ?>
                    <?php renderSortPills('channels_default_sort', $channelSort, $channelSortOptions, $sortIcons, $ctrActive); ?>
                </div>

                <?php HookSystem::doAction('admin.appearance_extra.channels', $settings); ?>
            </div>
        </div>

        
        <div class="lt-panel" id="lt-albums">
            <div class="lt-grid lt-grid--3">
                <?php renderPerPageSlider('app', 'albums_per_page', (int)($settings['albums_per_page'] ?? 24), 4, 120, 1); ?>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Per row</label>
                    <?php renderPerRowCards('albums_per_row', (int)($settings['albums_per_row'] ?? 5), [4, 5, 6]); ?>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default sort</label>
                    <?php $albSort = $settings['albums_default_sort'] ?? 'newest'; ?>
                    <?php renderSortPills('albums_default_sort', $albSort, $albumSortOptions, $sortIcons, $ctrActive); ?>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default display</label>
                    <?php renderChoicePills('albums_display_mode', $settings['albums_display_mode'] ?? 'grid', ['grid' => 'Grid', 'masonry' => 'Masonry'], ['grid' => 'fa-table-cells', 'masonry' => 'fa-table-cells-large']); ?>
                    <p class="mt-1.5 text-[10px] text-gray-400">Initial layout of the album grid (visitors can still switch).</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Default navigation</label>
                    <?php renderChoicePills('albums_nav_mode', $settings['albums_nav_mode'] ?? 'pages', ['pages' => 'Pages', 'infinite' => 'Infinite'], ['pages' => 'fa-list-ol', 'infinite' => 'fa-infinity']); ?>
                    <p class="mt-1.5 text-[10px] text-gray-400">Paginated pages or infinite scroll.</p>
                </div>
            </div>

            <div style="margin-top:18px;padding-top:18px;border-top:1px solid #f1f5f9">
                <label class="block text-sm font-medium text-gray-700 mb-1"><i class="fa-solid fa-bars-staggered text-gray-400 mr-1" style="font-size:11px;"></i> Sidebar filters</label>
                <p class="text-xs text-gray-400 mb-3">Choose which taxonomy filters appear in the albums sidebar &amp; browse bar. A filter with no items is hidden automatically.</p>
                <div class="flex flex-wrap gap-2">
                    <?php renderSidebarCheck('albums_sidebar_categories', 'Categories', 'fa-folder',   ($settings['albums_sidebar_categories'] ?? '1') === '1'); ?>
                    <?php renderSidebarCheck('albums_sidebar_channels',   'Channels',   'fa-tv',       ($settings['albums_sidebar_channels'] ?? '1') === '1'); ?>
                    <?php renderSidebarCheck('albums_sidebar_performers', 'Pornstars',  'fa-star',     ($settings['albums_sidebar_performers'] ?? '1') === '1'); ?>
                    <?php renderSidebarCheck('albums_sidebar_tags',       'Tags',       'fa-hashtag',  ($settings['albums_sidebar_tags'] ?? '1') === '1'); ?>
                </div>
            </div>
        </div>
    </div>

    <div>
        <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>

<script>
document.querySelectorAll('.lt-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
        document.querySelectorAll('.lt-tab').forEach(function(t) { t.classList.remove('active'); });
        document.querySelectorAll('.lt-panel').forEach(function(p) { p.classList.remove('active'); });
        this.classList.add('active');
        document.getElementById('lt-' + this.dataset.tab).classList.add('active');
    });
});
</script>
