<?php
// =============================================================================
// /api/webview/frameview.php — multi-slot iframe composite. Reads the active
// layout from webview_settings.frameview_layout (1..5) and the slot URLs from
// webview_frames. Each slot is sized to its grid cell; the iframe inside is
// scaled with `transform: scale(...)` from 1920x1080 to fit.
// =============================================================================
require_once __DIR__ . '/_wv_common.php';

// Live preview mode: ?preview=1&layout=N&slot0=...&slot1=...&slot2=...&slot3=...
// Used by frameview_settings.php so the editor can show unsaved changes.
$is_preview = !empty($_GET['preview']);
$layout = (int)(db_one('SELECT value FROM webview_settings WHERE key=?', ['frameview_layout'])['value'] ?? 0);
if ($is_preview && isset($_GET['layout'])) {
    $l = (int)$_GET['layout'];
    if ($l >= 0 && $l <= 5) $layout = $l;
}
if ($layout < 0 || $layout > 5) $layout = 0;

$urls = [];
if ($is_preview) {
    foreach ([0, 1, 2, 3] as $i) {
        $u = trim((string)($_GET['slot' . $i] ?? ''));
        // Same scheme guard as the save endpoint: no javascript:/data: etc.
        if ($u !== '' && !preg_match('#^(javascript|data|vbscript|file|jar|blob)\s*:#i', $u)
            && strlen($u) <= 1024) {
            $urls[$i] = $u;
        }
    }
} else {
    $slots = db_all('SELECT slot_index, embedded_url FROM webview_frames WHERE layout=? ORDER BY slot_index ASC', [$layout]);
    foreach ($slots as $s) $urls[(int)$s['slot_index']] = (string)$s['embedded_url'];
}

wv_html_head('Framed View', '<style>
html,body{overflow:hidden;background:#000}
.grid{display:grid;width:100vw;height:100vh;gap:4px;padding:4px;background:#000;}
.cell{position:relative;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:6px;overflow:hidden;}
.cell .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#444;font-size:13px;}
.cell iframe{position:absolute;inset:0;width:1920px;height:1080px;transform-origin:0 0;border:0;}
.l0{grid-template-columns:1fr;grid-template-rows:1fr;padding:0;gap:0;}
.l0 .cell{border-radius:0;border:0;}
.l1{grid-template-columns:1fr 1fr;grid-template-rows:1fr 35%;}
.l1 .c0{grid-column:1}.l1 .c1{grid-column:2}.l1 .c2{grid-column:span 2}
.l2{grid-template-columns:1fr 1fr}
.l3{grid-template-columns:1fr 1fr;grid-template-rows:30% 1fr}
.l3 .c0{grid-column:span 2}.l3 .c1{}.l3 .c2{}
.l4{grid-template-columns:1fr 1fr;grid-template-rows:35% 1fr}
.l4 .c0{grid-column:span 2}.l4 .c1{}.l4 .c2{}
.l5{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
</style>');

$slot_count = $layout === 0 ? 1
    : ($layout === 1 ? 3 : ($layout === 2 ? 2 : ($layout === 3 ? 3 : ($layout === 4 ? 3 : 4))));
?>
<div class="grid l<?php echo $layout; ?>">
    <?php for ($i = 0; $i < $slot_count; $i++): ?>
        <div class="cell c<?php echo $i; ?>" data-slot="<?php echo $i; ?>">
            <?php if (!empty($urls[$i])): ?>
                <iframe src="<?php echo htmlspecialchars($urls[$i], ENT_QUOTES, 'UTF-8'); ?>"></iframe>
            <?php else: ?>
                <div class="empty">No WebView Selected</div>
            <?php endif; ?>
        </div>
    <?php endfor; ?>
</div>
<script>
function fit() {
    document.querySelectorAll('.cell').forEach(function (cell) {
        var iframe = cell.querySelector('iframe');
        if (!iframe) return;
        var w = cell.clientWidth, h = cell.clientHeight;
        var scale = Math.max(w / 1920, h / 1080);
        iframe.style.transform = 'scale(' + scale + ')';
        iframe.style.width  = (w / scale) + 'px';
        iframe.style.height = (h / scale) + 'px';
    });
}
window.addEventListener('resize', fit);
window.addEventListener('load', fit);
fit();
</script>
<?php wv_html_foot();
