<?php
$wmEnabled = ($settings['watermark_enabled'] ?? '0') === '1';
$wmPosition = $settings['watermark_position'] ?? 'bottom-right';
$wmOpacity = (int)($settings['watermark_opacity'] ?? 80);
$wmMaxWidth = (int)($settings['watermark_max_width'] ?? 15);
$wmPadding = (int)($settings['watermark_padding'] ?? 10);
$wmImage = $settings['watermark_image'] ?? '';
$wmUrl = $wmImage !== '' ? '/uploads/watermark/' . htmlspecialchars($wmImage) : '';
$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';
$positions = ['top-left' => 'Top Left', 'top-right' => 'Top Right', 'bottom-left' => 'Bottom Left', 'bottom-right' => 'Bottom Right', 'center' => 'Center', 'random' => 'Random'];
?>

<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="watermark">

    <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="p-6 space-y-6">

                <div>
                    <label class="flex items-center gap-2.5 text-sm font-medium text-gray-700 cursor-pointer">
                        <input type="checkbox" name="watermark_enabled" <?= $wmEnabled ? 'checked' : '' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        Enable watermark
                    </label>
                    <p class="text-xs text-gray-400 mt-1 pl-7">Overlaid on every transcoded video.</p>
                </div>

                <div class="border-t border-gray-200 pt-5">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Watermark image</label>
                    <input type="file" name="watermark_file" accept=".png" id="wmFileInput" 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">PNG with transparency recommended.</p>
                </div>

                <div class="border-t border-gray-200 pt-5">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Position</label>
                    <div class="grid grid-cols-3 gap-2">
                        <?php foreach ($positions as $pk => $pl): ?>
                        <label class="cursor-pointer">
                            <input type="radio" name="watermark_position" value="<?= $pk ?>" class="sr-only peer wm-pos-radio" <?= $wmPosition === $pk ? 'checked' : '' ?>>
                            <div class="text-center px-3 py-2 border-2 rounded-lg text-xs font-medium transition-all 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"><?= $pl ?></div>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="border-t border-gray-200 pt-5 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Opacity</label>
                        <div class="flex items-center gap-3">
                            <input type="range" id="wmOpacity" name="watermark_opacity" min="10" max="100" step="5" value="<?= $wmOpacity ?>" class="flex-1">
                            <span id="wmOpVal" class="text-sm text-gray-600 w-10"><?= $wmOpacity ?>%</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Max width</label>
                        <div class="flex items-center gap-3">
                            <input type="range" id="wmMaxWidth" name="watermark_max_width" min="5" max="50" step="1" value="<?= $wmMaxWidth ?>" class="flex-1">
                            <span id="wmMwVal" class="text-sm text-gray-600 w-10"><?= $wmMaxWidth ?>%</span>
                        </div>
                        <p class="mt-1 text-xs text-gray-400">% of video width</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Padding</label>
                        <div class="flex items-center gap-3">
                            <input type="range" id="wmPadding" name="watermark_padding" min="0" max="15" step="1" value="<?= $wmPadding ?>" class="flex-1">
                            <span id="wmPdVal" class="text-sm text-gray-600 w-10"><?= $wmPadding ?>%</span>
                        </div>
                        <p class="mt-1 text-xs text-gray-400">% of video width from edges</p>
                    </div>
                </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">Live Preview</h3>
            </div>
            <div class="p-4">
                <div style="width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;">
                    <iframe id="wmIframe" src="/admin/settings/watermark-preview?pos=<?= urlencode($wmPosition) ?>&op=<?= $wmOpacity ?>&mw=<?= $wmMaxWidth ?>&pd=<?= $wmPadding ?>" style="width:100%;height:100%;border:none;display:block;"></iframe>
                </div>
                <p class="text-xs text-gray-400 mt-3 text-center">Live preview using your video player. Watermark is applied by FFmpeg during transcoding.</p>
            </div>
        </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>

<script>
(function(){
    var iframe=document.getElementById('wmIframe');
    function send(type,value){iframe.contentWindow.postMessage({type:type,value:value},'*');}

    document.querySelectorAll('.wm-pos-radio').forEach(function(r){
        r.addEventListener('change',function(){send('pos',this.value);});
    });

    document.getElementById('wmOpacity').addEventListener('input',function(){
        document.getElementById('wmOpVal').textContent=this.value+'%';
        send('opacity',parseInt(this.value));
    });

    document.getElementById('wmMaxWidth').addEventListener('input',function(){
        document.getElementById('wmMwVal').textContent=this.value+'%';
        send('maxWidth',parseInt(this.value));
    });

    document.getElementById('wmPadding').addEventListener('input',function(){
        document.getElementById('wmPdVal').textContent=this.value+'%';
        send('padding',parseInt(this.value));
    });

    document.getElementById('wmFileInput').addEventListener('change',function(){
        var file=this.files[0];if(!file)return;
        var reader=new FileReader();
        reader.onload=function(e){send('image',e.target.result);};
        reader.readAsDataURL(file);
    });
})();
</script>
