<?php
require_once dirname(dirname(__DIR__)) . '/config/app.php';
App::boot();
Auth::requireAdmin();

$wmImage = Setting::get('watermark_image', '');
$wmUrl = $wmImage !== '' ? '/uploads/watermark/' . $wmImage : '';
$wmPosition = $_GET['pos'] ?? Setting::get('watermark_position', 'bottom-right');
$wmOpacity = (int)($_GET['op'] ?? Setting::get('watermark_opacity', '80'));
$wmMaxWidth = (int)($_GET['mw'] ?? Setting::get('watermark_max_width', '15'));
$wmPadding = (int)($_GET['pd'] ?? Setting::get('watermark_padding', '10'));
?>
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden}
.preview-wrap{position:relative;width:100%;height:100vh;background:#0f0f1a;display:flex;align-items:center;justify-content:center}
.video-area{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;max-height:100vh}
.video-area video{width:100%;height:100%;object-fit:contain}
.wm{position:absolute;pointer-events:none;z-index:10}
.fluid_video_wrapper{width:100%!important;height:100%!important;position:absolute!important;top:0;left:0}
.controls-sim{position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent,rgba(0,0,0,0.7));z-index:5;pointer-events:none}
</style>
<script src="/assets/vendor/fluidplayer/fluidplayer.min.js"></script>
</head>
<body>
<div class="preview-wrap">
    <div class="video-area" id="videoArea">
        <video id="previewVideo" poster="" muted>
            <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAA" type="video/mp4">
        </video>
        <?php if ($wmUrl !== ''): ?>
        <img class="wm" id="wmOverlay" src="<?= htmlspecialchars($wmUrl) ?>" alt="" style="max-width:<?= $wmMaxWidth ?>%;opacity:<?= $wmOpacity / 100 ?>;">
        <?php else: ?>
        <div class="wm" id="wmOverlay" style="padding:8px 16px;background:rgba(255,255,255,0.15);border-radius:4px;font-size:13px;color:rgba(255,255,255,0.5);font-family:sans-serif;">Your Logo</div>
        <?php endif; ?>
        <div class="controls-sim"></div>
    </div>
</div>
<script>
var _padding = <?= $wmPadding ?>;
var _currentPos = '<?= htmlspecialchars($wmPosition) ?>';

var el = document.getElementById('previewVideo');
if (el && typeof fluidPlayer === 'function') {
    var c = '#2563eb';
    try { c = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || c; } catch(e) {}
    fluidPlayer('previewVideo', {layoutControls:{fillToContainer:true,primaryColor:c,playButtonShowing:true,autoPlay:false,mute:true,allowTheatre:false,allowDownload:false,miniPlayer:{enabled:false}}});
}

function posWm(pos, pd) {
    var w = document.getElementById('wmOverlay'); if (!w) return;
    if (typeof pd !== 'undefined') _padding = pd;
    _currentPos = pos;
    var p = _padding + '%';
    w.style.top = 'auto'; w.style.right = 'auto'; w.style.bottom = 'auto'; w.style.left = 'auto'; w.style.transform = 'none';
    switch(pos) {
        case 'top-left':     w.style.top = p; w.style.left = p; break;
        case 'top-right':    w.style.top = p; w.style.right = p; break;
        case 'bottom-left':  w.style.bottom = p; w.style.left = p; break;
        case 'bottom-right': w.style.bottom = p; w.style.right = p; break;
        case 'center':       w.style.top = '50%'; w.style.left = '50%'; w.style.transform = 'translate(-50%,-50%)'; break;
        default:             w.style.bottom = p; w.style.right = p;
    }
}
posWm(_currentPos);

window.addEventListener('message', function(e) {
    var d = e.data; if (!d || !d.type) return;
    var w = document.getElementById('wmOverlay'); if (!w) return;
    if (d.type === 'pos') posWm(d.value);
    if (d.type === 'opacity') w.style.opacity = (d.value / 100);
    if (d.type === 'maxWidth') w.style.maxWidth = d.value + '%';
    if (d.type === 'padding') { _padding = d.value; posWm(_currentPos); }
    if (d.type === 'image') {
        if (w.tagName !== 'IMG') {
            var img = document.createElement('img');
            img.id = 'wmOverlay'; img.className = 'wm';
            img.style.cssText = w.style.cssText;
            img.style.padding = '0'; img.style.background = 'none';
            w.parentNode.replaceChild(img, w);
            w = img;
        }
        w.src = d.value;
    }
});
</script>
</body></html>
