<?php
$ic = 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none';
$prerollEnabled = Setting::get('transcode_preroll_enabled', '0') === '1';
$postrollEnabled = Setting::get('transcode_postroll_enabled', '0') === '1';
$prerollFile = Setting::get('transcode_preroll_file', '');
$postrollFile = Setting::get('transcode_postroll_file', '');
?>

<form method="POST" action="/admin/settings" enctype="multipart/form-data">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="transcode">
    <input type="hidden" name="_sub" value="intros">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-5 py-3.5 border-b border-gray-200">
                <h3 class="text-sm font-semibold text-gray-900">Pre-roll (Intro)</h3>
                <p class="text-xs text-gray-500 mt-0.5">A short video clip inserted at the beginning of every transcoded video. Typically used for branding or advertising.</p>
            </div>
            <div class="p-5 space-y-4">
                <label class="flex items-center gap-2.5 text-sm font-medium text-gray-700 cursor-pointer">
                    <input type="checkbox" name="transcode_preroll_enabled" <?= $prerollEnabled ? 'checked' : '' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    Enable pre-roll
                </label>
                <?php if ($prerollFile !== ''): ?>
                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                    <i class="fa-solid fa-film text-primary-500"></i>
                    <div class="flex-1 min-w-0">
                        <span class="text-sm font-medium text-gray-700"><?= htmlspecialchars($prerollFile) ?></span>
                        <?php
                        $prPath = APP_ROOT . '/public/uploads/intros/' . $prerollFile;
                        if (file_exists($prPath)):
                            $prSize = round(filesize($prPath) / 1024 / 1024, 1);
                            $prInfo = TranscodeManager::getVideoInfo($prPath);
                        ?>
                        <span class="text-xs text-gray-400 ml-2"><?= $prSize ?>MB<?= $prInfo ? ' · ' . $prInfo['width'] . 'x' . $prInfo['height'] . ' · ' . $prInfo['duration'] . 's' : '' ?></span>
                        <?php endif; ?>
                    </div>
                    <label class="text-xs text-red-500 hover:text-red-700 cursor-pointer">
                        <input type="hidden" name="remove_preroll" value="0">
                        <input type="checkbox" name="remove_preroll" value="1" class="sr-only" onchange="if(this.checked&&confirm('Remove pre-roll?'))this.form.submit()">
                        <i class="fa-solid fa-trash-can"></i> Remove
                    </label>
                </div>
                <?php endif; ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1"><?= $prerollFile !== '' ? 'Replace' : 'Upload' ?> pre-roll video</label>
                    <input type="file" name="preroll_file" accept=".mp4" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 file:cursor-pointer">
                    <p class="mt-1 text-xs text-gray-400">MP4 only. Any resolution — it will be automatically resized to match each output format.</p>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-5 py-3.5 border-b border-gray-200">
                <h3 class="text-sm font-semibold text-gray-900">Post-roll (Outro)</h3>
                <p class="text-xs text-gray-500 mt-0.5">A short video clip appended at the end of every transcoded video. Used for branding, calls to action, or credits.</p>
            </div>
            <div class="p-5 space-y-4">
                <label class="flex items-center gap-2.5 text-sm font-medium text-gray-700 cursor-pointer">
                    <input type="checkbox" name="transcode_postroll_enabled" <?= $postrollEnabled ? 'checked' : '' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    Enable post-roll
                </label>
                <?php if ($postrollFile !== ''): ?>
                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                    <i class="fa-solid fa-film text-primary-500"></i>
                    <div class="flex-1 min-w-0">
                        <span class="text-sm font-medium text-gray-700"><?= htmlspecialchars($postrollFile) ?></span>
                        <?php
                        $poPath = APP_ROOT . '/public/uploads/intros/' . $postrollFile;
                        if (file_exists($poPath)):
                            $poSize = round(filesize($poPath) / 1024 / 1024, 1);
                            $poInfo = TranscodeManager::getVideoInfo($poPath);
                        ?>
                        <span class="text-xs text-gray-400 ml-2"><?= $poSize ?>MB<?= $poInfo ? ' · ' . $poInfo['width'] . 'x' . $poInfo['height'] . ' · ' . $poInfo['duration'] . 's' : '' ?></span>
                        <?php endif; ?>
                    </div>
                    <label class="text-xs text-red-500 hover:text-red-700 cursor-pointer">
                        <input type="hidden" name="remove_postroll" value="0">
                        <input type="checkbox" name="remove_postroll" value="1" class="sr-only" onchange="if(this.checked&&confirm('Remove post-roll?'))this.form.submit()">
                        <i class="fa-solid fa-trash-can"></i> Remove
                    </label>
                </div>
                <?php endif; ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1"><?= $postrollFile !== '' ? 'Replace' : 'Upload' ?> post-roll video</label>
                    <input type="file" name="postroll_file" accept=".mp4" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 file:cursor-pointer">
                    <p class="mt-1 text-xs text-gray-400">MP4 only. Any resolution — it will be automatically resized to match each output format.</p>
                </div>
            </div>
        </div>

        <div class="lg:col-span-2 flex items-start gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
            <i class="fa-solid fa-circle-info text-blue-400 mt-0.5" style="font-size:11px"></i>
            <p class="text-xs text-blue-700">Intro and outro clips are re-encoded during transcoding to match the exact resolution, codec, and bitrate of each output format, then concatenated seamlessly. Keep clips short (5-15 seconds) for best results.</p>
        </div>

    </div>

    <div class="mt-6">
        <button type="submit" class="inline-flex items-center gap-2 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="font-size:12px;"></i> Save
        </button>
    </div>
</form>
