
<?php
 
 
 
$_mediaStorageId    = MediaStorage::activeDefaultId();
$_mediaStorage      = $_mediaStorageId > 0 ? MediaStorage::get($_mediaStorageId) : null;
$_mediaDriver       = $_mediaStorage['driver'] ?? 'local';
$_mediaName         = $_mediaStorage['name'] ?? 'Local Server';
$_mediaUrl          = $_mediaStorage['media_url'] ?? '';
$_mediaDriverLabels = ['local' => 'Local Server', 'ftp' => 'FTP / FTPS', 's3' => 'S3 Compatible', 'webdav' => 'WebDAV'];
?>
<div id="catConfigOverlay" class="hidden fixed inset-0 bg-black/30 z-50 transition-opacity"></div>
<div id="catConfigDrawer" class="fixed top-0 right-0 h-full w-[420px] max-w-[90vw] bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out flex flex-col">

    <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between shrink-0">
        <h3 class="text-base font-bold text-gray-900">Settings</h3>
        <button type="button" onclick="CAT.closeConfigDrawer()" class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>

    <div class="border-b border-gray-200 shrink-0">
        <nav class="flex -mb-px px-5">
            <button type="button" onclick="switchSettingsTab('connection')" id="stConnection" class="px-3 py-2.5 text-sm font-medium border-b-2 border-primary-600 text-primary-600 transition-colors">Connection</button>
            <button type="button" onclick="switchSettingsTab('storage')" id="stStorage" class="px-3 py-2.5 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors">Storage</button>
            <button type="button" onclick="switchSettingsTab('transcoding')" id="stTranscoding" class="px-3 py-2.5 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors">Transcoding</button>
        </nav>
    </div>

    <div class="flex-1 overflow-y-auto">

        <div id="spConnection" class="p-5 space-y-4">
            <p class="text-xs text-gray-500">Connect to the TubePress marketplace to browse and import videos from the catalogue.</p>
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">API Key</label>
                <input type="text" id="catApiKey" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" placeholder="tp_..." value="<?= htmlspecialchars(Setting::get('catalogue_api_key', '')) ?>">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">API Secret</label>
                <input type="password" id="catApiSecret" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" placeholder="Your API secret" value="<?= htmlspecialchars(Setting::get('catalogue_api_secret', '')) ?>">
            </div>
            <div class="border-t border-gray-100 pt-3 mt-1 space-y-3">
                <label class="flex items-center gap-2.5 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" id="catAutoPublish" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" <?= Setting::get('catalogue_auto_publish', '1') === '1' ? 'checked' : '' ?>>
                    Auto-publish imported videos
                </label>
                <input type="hidden" id="catDownloadThumbs" value="1">
            </div>
            <div class="flex items-center gap-3 pt-2">
                <button type="button" onclick="CAT.saveConfig()" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors">Save & Connect</button>
                <span id="catConfigStatus" class="text-sm text-gray-500"></span>
            </div>
        </div>

        <div id="spStorage" class="p-5 space-y-4 hidden">
            <p class="text-xs text-gray-500">Thumbnails and videos are uploaded to the configured storage during import.</p>

            <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                <div class="flex items-center gap-2 mb-1">
                    <i class="fa-solid <?= ['local' => 'fa-server', 'ftp' => 'fa-folder-open', 's3' => 'fa-cloud', 'webdav' => 'fa-network-wired'][$_mediaDriver] ?? 'fa-server' ?> text-sm text-gray-400"></i>
                    <span class="text-sm font-medium text-gray-900"><?= htmlspecialchars($_mediaName) ?></span>
                    <span class="text-[10px] text-gray-400 font-medium"><?= $_mediaDriverLabels[$_mediaDriver] ?? 'Local' ?></span>
                    <span class="ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-green-50 text-green-700 border border-green-200">Active</span>
                </div>
                <?php if ($_mediaUrl !== ''): ?>
                <p class="text-xs text-gray-500 mt-0.5">Media URL: <code class="bg-white px-1 py-0.5 rounded border border-gray-200 text-xs"><?= htmlspecialchars($_mediaUrl) ?></code></p>
                <?php else: ?>
                <p class="text-xs text-gray-400 mt-0.5">Files stored in <code class="bg-white px-1 py-0.5 rounded border border-gray-200 text-xs">public/uploads/videos/</code></p>
                <?php endif; ?>
            </div>

            <a href="/admin/settings?tab=storage" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Configure Storage
            </a>
        </div>

        <div id="spTranscoding" class="p-5 space-y-4 hidden">
            <p class="text-xs text-gray-500">Imported videos are transcoded into multiple streaming qualities. Qualities above the source resolution are never offered &mdash; no upscaling.</p>

            <?php $_tcOn = Setting::get('transcode_enabled', '1') === '1'; ?>
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                <div class="flex items-center gap-2 mb-1">
                    <i class="fa-solid fa-film text-sm text-gray-400"></i>
                    <span class="text-sm font-medium text-gray-900">FFmpeg transcoding</span>
                    <span class="ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold <?= $_tcOn ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-gray-100 text-gray-500 border border-gray-200' ?>"><?= $_tcOn ? 'Enabled' : 'Disabled' ?></span>
                </div>
                <p class="text-xs text-gray-500 mt-0.5">Quality ladder: <code class="bg-white px-1 py-0.5 rounded border border-gray-200 text-xs"><?= implode(' &middot; ', array_map('strtoupper', array_keys(TranscodeManager::getFormats()))) ?: '720p &middot; 480p &middot; 360p' ?></code>, capped at the source resolution.</p>
            </div>

            <a href="/admin/settings?tab=transcode" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"/></svg>
                Configure Transcoding
            </a>
        </div>

    </div>
</div>
<script>
function switchSettingsTab(tab) {
    ['connection','storage','transcoding'].forEach(function(k) {
        document.getElementById('sp' + k.charAt(0).toUpperCase() + k.slice(1)).classList.toggle('hidden', k !== tab);
        var btn = document.getElementById('st' + k.charAt(0).toUpperCase() + k.slice(1));
        if (k === tab) { btn.classList.add('border-primary-600','text-primary-600'); btn.classList.remove('border-transparent','text-gray-500'); }
        else { btn.classList.remove('border-primary-600','text-primary-600'); btn.classList.add('border-transparent','text-gray-500'); }
    });
}
</script>


<?php $skipMpBanner = true; $isConnected = false; include __DIR__ . '/../_mp_modal.php'; ?>


