<?php
declare(strict_types=1);

require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../security/auth_guard.php';

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

include __DIR__ . '/../partials/main.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>

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

<style>
.faq-featured-thumb{
    max-height:260px;
    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 FAQ'
]); ?>

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

<div class="row">

<!-- IMAGE -->
<div class="col-xl-4">
<div class="card">
<div class="card-body text-center" id="imageBlock">
    <div class="text-muted">Loading image…</div>
</div>
</div>
</div>

<!-- SUMMARY -->
<div class="col-xl-8">
<div class="card">
<div class="card-body">

<h3 id="faqQuestion"></h3>
<p class="text-muted mb-2">
    <?= APP_ROOT ?>/faq/<span id="faqSlug"></span>
</p>

<div class="row mt-3">
    <div class="col-md-6">
        <strong>Status:</strong>
        <span id="faqStatus"></span>
    </div>

    <div class="col-md-6">
        <strong>Approval:</strong>
        <span id="faqApproval"></span>
    </div>

    <div class="col-md-6 mt-2">
        <strong>Published At:</strong>
        <span id="publishedAt"></span>
    </div>

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

    <div class="col-md-6 mt-2">
        <strong>Updated At:</strong>
        <span id="updatedAt"></span>
    </div>
</div>

<hr>

<p>
    <strong>Categories:</strong>
    <span id="faqCategories"></span>
</p>

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

</div>

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

<h6 class="mb-3">Answer</h6>
<div id="faqAnswer"></div>

</div>
</div>

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

<h6 class="mb-3">SEO Details</h6>

<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 class="mb-1"><strong>SEO Schema:</strong></p>
<pre class="bg-light p-2 small" id="seoSchema"></pre>

<p class="mb-1"><strong>AI SEO Content:</strong></p>
<pre class="bg-light p-2 small" id="aiSeoContent"></pre>

</div>
</div>

</div>
</main>

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

<?php include __DIR__ . '/../partials/vendor-scripts.php'; ?>

<script>
const API_URL =
    "<?= APP_ROOT ?>/admin/api/faqs/view.php?id=<?= $faqId ?>";
const APPROOT = "<?= APP_ROOT ?>/";

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

    const f = data.faq;

    /* CORE */
    faqQuestion.textContent = f.question;
    faqSlug.textContent = f.slug;

    faqStatus.textContent = f.status || '-';
    faqApproval.textContent = f.approval_status || '-';

    publishedAt.textContent = f.published_at || '-';
    createdAt.textContent = f.created_at || '-';
    updatedAt.textContent = f.updated_at || '-';

    faqCategories.textContent =
        data.categories?.map(c => c.name).join(', ') || '-';

    faqAnswer.innerHTML =
        f.answer || '<em>No answer provided</em>';

    /* IMAGE */
    if (f.featured_image) {
        imageBlock.innerHTML = `
            <img src="${APPROOT}${f.featured_image.replace(/^\/+/,'')}"
                 class="img-fluid faq-featured-thumb mb-2">
            <div class="small text-muted">
                ${f.featured_image_alt || ''}
            </div>
            <div class="small">
                ${f.featured_image_caption || ''}
            </div>
        `;
    } else {
        imageBlock.innerHTML =
            `<div class="text-muted p-5">No image uploaded</div>`;
    }

    /* SEO */
    metaTitle.textContent = data.seo?.meta_title || '-';
    metaKeywords.textContent = data.seo?.meta_keywords || '-';
    metaDescription.textContent = data.seo?.meta_description || '-';
    seoSchema.textContent = data.seo?.seo_schema || '-';
    aiSeoContent.textContent = data.seo?.ai_seo_content || '-';
});
</script>

</body>
</html>
