<?php
declare(strict_types=1);

/* ================= BOOTSTRAP ================= */
require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../security/auth_guard_web.php';
require_once __DIR__ . '/../partials/main.php';

$pageId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($pageId <= 0) {
    header('Location: ' . ADMIN_BASE_URL . 'pages/list.php');
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>

<?php includeFileWithVariables(
    __DIR__ . '/../partials/title-meta.php',
    ['title' => 'View Page']
); ?>

<?php include __DIR__ . '/../partials/head-css.php'; ?>
<link rel="stylesheet" href="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.css">

<style>
.page-content-scroll{
    max-height:300px;
    overflow-y:auto;
}
.page-image{
    height:220px;
    object-fit:contain;
    background:#f8f9fa;
}
</style>

</head>
<body>

<div id="layout-wrapper">

<?php
include __DIR__ . '/../partials/header.php';
include __DIR__ . '/../partials/sidebar.php';
include __DIR__ . '/../partials/horizontal.php';
?>

<main class="app-wrapper">
<div class="container-fluid">

<?php includeFileWithVariables(__DIR__ . '/../partials/page-title.php', [
    'title_sub' => 'CMS',
    'title'     => 'View Page'
]); ?>

<!-- ACTIONS -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="<?= ADMIN_BASE_URL ?>pages/list.php" class="btn btn-light">
        ← Back to List
    </a>
    <a href="<?= ADMIN_BASE_URL ?>pages/edit.php?id=<?= $pageId ?>" class="btn btn-primary">
        Edit Page
    </a>
</div>

<!-- IMAGES + SUMMARY -->
<div class="row">
    <div class="col-xl-5">
        <div class="card">
            <div class="card-body">
                <div class="swiper pageSwiper">
                    <div class="swiper-wrapper" id="pageImages"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        <div class="card">
            <div class="card-body">
                <h3 id="pageTitle"></h3>
                <p class="text-muted mb-2"><?= APP_ROOT ?>/<span id="pageSlug"></span></p>

                <div class="row mt-3">
                    <div class="col-md-6"><strong>Type:</strong> <span id="pageType"></span></div>
                    <div class="col-md-6"><strong>Template:</strong> <span id="pageTemplate"></span></div>

                    <div class="col-md-6 mt-2"><strong>Status:</strong> <span id="pageStatus"></span></div>
                    <div class="col-md-6 mt-2"><strong>Approval:</strong> <span id="pageApproval"></span></div>

                    <div class="col-md-6 mt-2"><strong>Show in Menu:</strong> <span id="showInMenu"></span></div>
                    <div class="col-md-6 mt-2"><strong>Created At:</strong> <span id="createdAt"></span></div>
                </div>

                <hr>

                <h6>Short Description</h6>
                <p id="shortDescription" class="text-muted"></p>
            </div>
        </div>
    </div>
</div>

<!-- TABS -->
<div class="card mt-4">
<div class="card-body">

<ul class="nav nav-tabs nav-tabs-custom nav-primary">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#tab-content">Content</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-seo">SEO</a>
    </li>
</ul>

<div class="tab-content mt-4">

<!-- CONTENT -->
<div class="tab-pane fade show active" id="tab-content">
    <div class="page-content-scroll border rounded p-3" id="pageContent"></div>
</div>

<!-- SEO -->
<div class="tab-pane fade" id="tab-seo">
    <p><strong>Meta Title:</strong> <span id="metaTitle"></span></p>
    <p><strong>Meta Keywords:</strong> <span id="metaKeywords"></span></p>
    <p><strong>Meta Description:</strong> <span id="metaDescription"></span></p>
    <p><strong>Canonical URL:</strong> <span id="canonicalUrl"></span></p>
    <p><strong>SEO Schema:</strong></p>
    <pre class="bg-light p-2 small" id="seoSchema"></pre>
    <p><strong>AI SEO Content:</strong></p>
    <pre class="bg-light p-2 small" id="aiSeoContent"></pre>
</div>

</div>
</div>
</div>

</div>
</main>

<?php include __DIR__ . '/../partials/footer.php'; ?>
</div>

<?php include __DIR__ . '/../partials/vendor-scripts.php'; ?>
<script src="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.js"></script>

<script>
const API_URL = "<?= ADMIN_BASE_URL ?>api/pages/view.php?id=<?= $pageId ?>&context=backend";
const APP_ROOT = "<?= APP_ROOT ?>";

fetch(API_URL, { credentials:'include' })
.then(r => r.json())
.then(({ data }) => {

    const p = data.page;

    document.getElementById('pageTitle').textContent = p.title;
    document.getElementById('pageSlug').textContent = p.slug;
    document.getElementById('pageType').textContent = p.page_type;
    document.getElementById('pageTemplate').textContent = p.template;
    document.getElementById('pageStatus').textContent = p.status;
    document.getElementById('pageApproval').textContent = p.approval_status;
    document.getElementById('showInMenu').textContent = p.show_in_menu ? 'Yes' : 'No';
    document.getElementById('createdAt').textContent = p.created_at;

    document.getElementById('shortDescription').textContent =
        p.short_description || '—';

    document.getElementById('pageContent').innerHTML =
        p.content || '<em>No content available</em>';

    /* SEO */
    document.getElementById('metaTitle').textContent = p.meta_title || '—';
    document.getElementById('metaKeywords').textContent = p.meta_keywords || '—';
    document.getElementById('metaDescription').textContent = p.meta_description || '—';
    document.getElementById('canonicalUrl').textContent = p.canonical_url || '—';
    document.getElementById('seoSchema').textContent = p.seo_schema || '—';
    document.getElementById('aiSeoContent').textContent = p.ai_seo_content || '—';

    /* IMAGES */
    const imgWrap = document.getElementById('pageImages');

    if (data.images.featured) {
        imgWrap.innerHTML += `
            <div class="swiper-slide">
                <img class="img-fluid page-image"
                     src="${APP_ROOT}${data.images.featured}">
            </div>`;
    }

    if (Array.isArray(data.images.inline) && data.images.inline.length) {
        data.images.inline.forEach(img => {
            imgWrap.innerHTML += `
                <div class="swiper-slide">
                    <img class="img-fluid page-image"
                         src="${APP_ROOT}${img.image_path}"
                         alt="${img.alt_text || ''}">
                </div>`;
        });
    }

    if (!imgWrap.innerHTML) {
        imgWrap.innerHTML = `
            <div class="text-muted text-center p-5">
                No images uploaded
            </div>`;
    }

    new Swiper('.pageSwiper', { navigation: true });
});
</script>

</body>
</html>
