<?php
$typeIcons = [
    'hetero'  => 'fa-mars-and-venus',
    'gay'     => 'fa-mars-double',
    'hentai'  => 'fa-heart',
];
$typeColors = [
    'hetero'  => '#4a90d9',
    'gay'     => '#b44adb',
    'hentai'  => '#e84393',
];
$siteUrl = rtrim(Setting::get('site_url', 'https://example.com'), '/');
?>

<style>
.vt-card{border:2px solid #e5e7eb;border-radius:12px;padding:20px;transition:all .2s;position:relative;overflow:hidden}
.vt-card.active{border-color:var(--vt-color, var(--primary-600));background:linear-gradient(135deg,rgba(79,70,229,.03),rgba(79,70,229,.01))}
.vt-card.active::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--vt-color, var(--primary-600));border-radius:2px 0 0 2px}
.vt-card:hover:not(.active){border-color:#d1d5db}
.vt-radio{display:none}
.vt-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.vt-badge--default{background:var(--vt-color, #4f46e5);color:#fff}
.vt-badge--other{background:#f3f4f6;color:#9ca3af}
.vt-input{width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff}
.vt-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.vt-input--slug{padding-left:22px}
.vt-slug-wrap{position:relative}
.vt-slug-wrap::before{content:'/';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px;color:#9ca3af;font-weight:500;pointer-events:none}
.vt-preview{display:flex;align-items:center;gap:0;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;margin-top:6px;overflow:hidden;white-space:nowrap}
.vt-preview__base{color:#9ca3af}
.vt-preview__slug{color:var(--vt-color, #4f46e5);font-weight:600}
.vt-preview__default{color:#10b981;font-style:italic;font-weight:500;font-family:inherit}
.vt-field{margin-bottom:0}
.vt-field label{display:block;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.vt-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
.vt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.vt-header h4{font-size:15px;font-weight:700;color:#111827;margin:0}
.vt-header code{font-size:10px;color:#9ca3af;background:#f3f4f6;padding:1px 6px;border-radius:4px;margin-left:6px}
@media(max-width:640px){.vt-card{padding:16px}.vt-grid{grid-template-columns:1fr !important}.vt-header h4{font-size:14px}}
</style>

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

    
    <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-layer-group text-sm"></i></span>
                <h3 class="text-sm font-semibold text-gray-900">Video Types</h3>
            </div>
            <p class="text-xs text-gray-500 mt-1 ml-[30px]">Choose the default type, rename display labels, and customize URL slugs. The default type has no URL prefix.</p>
        </div>

        <div class="p-5 space-y-4">
            <?php foreach ($videoTypeConfig as $code => $cfg):
                $icon = $typeIcons[$code] ?? 'fa-circle';
                $color = $typeColors[$code] ?? '#6b7280';
                $isDefault = $cfg['is_default'];
                $slug = $cfg['slug'];
            ?>
            <label class="vt-card block cursor-pointer <?= $isDefault ? 'active' : '' ?>" style="--vt-color:<?= $color ?>" data-code="<?= $code ?>" onclick="vtSelect(this)">
                <input type="radio" name="default_video_type" value="<?= $code ?>" class="vt-radio" <?= $isDefault ? 'checked' : '' ?>>

                <div class="vt-header">
                    <div class="vt-icon" style="background:<?= $color ?>">
                        <i class="fa-solid <?= $icon ?>"></i>
                    </div>
                    <div class="flex items-center gap-2 flex-wrap">
                        <h4><?= htmlspecialchars($cfg['label']) ?></h4>
                        <code><?= $code ?></code>
                        <span class="vt-badge <?= $isDefault ? 'vt-badge--default' : 'vt-badge--other' ?>" style="<?= $isDefault ? 'background:' . $color : '' ?>" data-badge><?= $isDefault ? 'Default' : 'Prefixed' ?></span>
                    </div>
                </div>

                <div class="vt-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:16px" onclick="event.stopPropagation()">
                    <div class="vt-field">
                        <label for="vt_label_<?= $code ?>">Display Label</label>
                        <input type="text" id="vt_label_<?= $code ?>" name="type_label[<?= $code ?>]"
                               value="<?= htmlspecialchars($cfg['label']) ?>" placeholder="<?= ucfirst($code) ?>"
                               class="vt-input" oninput="vtUpdateHeader(this,'<?= $code ?>')">
                    </div>
                    <div class="vt-field">
                        <label for="vt_slug_<?= $code ?>">URL Slug</label>
                        <div class="vt-slug-wrap">
                            <input type="text" id="vt_slug_<?= $code ?>" name="type_slug[<?= $code ?>]"
                                   value="<?= htmlspecialchars($slug) ?>" placeholder="<?= $code ?>"
                                   class="vt-input vt-input--slug" pattern="[a-z0-9][a-z0-9-]*" minlength="2" maxlength="30"
                                   oninput="vtUpdatePreview('<?= $code ?>')">
                        </div>
                    </div>
                </div>

                <div class="vt-preview" data-preview="<?= $code ?>">
                    <span class="vt-preview__base"><?= htmlspecialchars($siteUrl) ?></span><?php if (!$isDefault): ?><span class="vt-preview__slug">/<?= htmlspecialchars($slug) ?></span><?php else: ?><span class="vt-preview__default"> &nbsp;(no prefix)</span><?php endif; ?><span class="vt-preview__base">/video/example-title</span>
                </div>
            </label>
            <?php endforeach; ?>
        </div>
    </div>

    
    <div class="flex items-start gap-3 mb-6 px-4 py-3 bg-blue-50 border border-blue-200 rounded-lg">
        <i class="fa-solid fa-circle-info text-blue-400 mt-0.5" style="font-size:14px"></i>
        <div class="text-xs text-blue-700 leading-relaxed">
            <strong>How it works:</strong> The default type's pages have clean URLs (no prefix). Other types get their slug as prefix (e.g. <code class="bg-blue-100 px-1 rounded">/gay/video/...</code>).
            Changing slugs automatically creates 301 redirects from old URLs — no broken links.
        </div>
    </div>

    
    <div class="sticky bottom-0 bg-gray-50 pt-4 pb-2 -mx-4 px-4 sm:-mx-6 sm:px-6" style="z-index: 10;">
        <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>
const vtSiteUrl = <?= json_encode($siteUrl) ?>;
const vtColors = <?= json_encode($typeColors) ?>;

function vtSelect(card) {
    
    document.querySelectorAll('.vt-card').forEach(c => {
        c.classList.remove('active');
        c.querySelector('.vt-radio').checked = false;
        const badge = c.querySelector('[data-badge]');
        badge.className = 'vt-badge vt-badge--other';
        badge.style.background = '';
        badge.textContent = 'Prefixed';
    });
    card.classList.add('active');
    card.querySelector('.vt-radio').checked = true;
    const badge = card.querySelector('[data-badge]');
    const code = card.dataset.code;
    badge.className = 'vt-badge vt-badge--default';
    badge.style.background = vtColors[code] || '#4f46e5';
    badge.textContent = 'Default';

    
    document.querySelectorAll('.vt-card').forEach(c => vtUpdatePreview(c.dataset.code));
}

function vtUpdatePreview(code) {
    const preview = document.querySelector('[data-preview="' + code + '"]');
    if (!preview) return;
    const slug = document.getElementById('vt_slug_' + code).value.trim() || code;
    const card = preview.closest('.vt-card');
    const isDefault = card.querySelector('.vt-radio').checked;

    preview.innerHTML = '<span class="vt-preview__base">' + vtEsc(vtSiteUrl) + '</span>' +
        (isDefault
            ? '<span class="vt-preview__default"> &nbsp;(no prefix)</span>'
            : '<span class="vt-preview__slug">/' + vtEsc(slug) + '</span>') +
        '<span class="vt-preview__base">/video/example-title</span>';
}

function vtUpdateHeader(input, code) {
    const card = input.closest('.vt-card');
    const h4 = card.querySelector('.vt-header h4');
    h4.textContent = input.value || code;
}

function vtEsc(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}
</script>
