<?php
/**
 * 后台：SEO 单页编辑（admin/seo/edit/{key}）
 * 仅编辑一个页面的 标题/描述/关键词/Open Graph/规范链接/收录开关，带实时字数提示。
 */
$key  = $key ?? '';
$meta = $meta ?? [];
$v    = $v ?? [];
$ogTypes = ['website' => 'website（普通页）', 'article' => 'article（文章/资讯）', 'product' => 'product（商品）'];
$idp = preg_replace('/[^a-z0-9]/', '', $key);
?>
<div class="page-head">
    <div>
        <h1>SEO 设置 · <?= e($meta['label'] ?? $key) ?></h1>
        <p class="muted">
            页面标识 <code class="mono"><?= e($key) ?></code>
            <?php if (!empty($meta['note'])): ?>· <b style="color:#b45309"><?= e($meta['note']) ?></b><?php endif; ?>
        </p>
    </div>
    <div class="page-head-actions">
        <a class="btn btn-ghost" href="<?= e(site_url('admin/seo')) ?>">‹ 返回列表</a>
    </div>
</div>

<?= flash_html() ?>

<form method="POST" action="<?= e(site_url('admin/seo/edit/' . $key)) ?>" class="seo-edit-form">
    <?= csrf_field() ?>

    <div class="card">
        <div class="card-head"><h3>搜索结果展示（SERP）</h3></div>
        <div class="form-grid">
            <div class="form-group" style="grid-column:1 / -1;">
                <label class="label" for="t_<?= $idp ?>">页面标题（Title）</label>
                <input class="form-control" id="t_<?= $idp ?>" name="title"
                       value="<?= e($v['title'] ?? '') ?>" data-count data-min="<?= $meta['title_min'] ?? 0 ?>">
                <div class="field-hint">
                    建议 35–60 字符（含品牌名更好）；当前 <span class="counter" id="c_t_<?= $idp ?>"></span>
                </div>
            </div>

            <div class="form-group" style="grid-column:1 / -1;">
                <label class="label" for="d_<?= $idp ?>">页面描述（Description）</label>
                <textarea class="form-control" id="d_<?= $idp ?>" name="description" rows="3"
                          data-count data-min="<?= $meta['desc_min'] ?? 0 ?>"><?= e($v['description'] ?? '') ?></textarea>
                <div class="field-hint">
                    建议 120–160 字符；当前 <span class="counter" id="c_d_<?= $idp ?>"></span>
                </div>
            </div>

            <div class="form-group" style="grid-column:1 / -1;">
                <label class="label" for="k_<?= $idp ?>">关键词（Keywords，英文逗号分隔）</label>
                <input class="form-control" id="k_<?= $idp ?>" name="keywords"
                       value="<?= e($v['keywords'] ?? '') ?>" data-kw data-min="<?= $meta['kw_min'] ?? 0 ?>">
                <div class="field-hint">
                    建议 <?= $meta['kw_min'] ?? 0 ?>+ 个；当前 <span class="counter" id="c_k_<?= $idp ?>"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>社交分享（Open Graph / Twitter）</h3></div>
        <div class="form-grid">
            <div class="form-group">
                <label class="label" for="ot_<?= $idp ?>">分享标题（OG Title）</label>
                <input class="form-control" id="ot_<?= $idp ?>" name="og_title"
                       value="<?= e($v['og_title'] ?? '') ?>" placeholder="留空则用页面标题">
            </div>
            <div class="form-group">
                <label class="label" for="oty_<?= $idp ?>">分享类型（OG Type）</label>
                <select class="form-control" id="oty_<?= $idp ?>" name="og_type">
                    <?php foreach ($ogTypes as $tv => $tl): ?>
                        <option value="<?= e($tv) ?>" <?= ($v['og_type'] ?? 'website') === $tv ? 'selected' : '' ?>><?= e($tl) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group" style="grid-column:1 / -1;">
                <label class="label" for="od_<?= $idp ?>">分享描述（OG Description）</label>
                <textarea class="form-control" id="od_<?= $idp ?>" name="og_description" rows="2"
                          placeholder="留空则用页面描述"><?= e($v['og_description'] ?? '') ?></textarea>
            </div>
            <div class="form-group">
                <label class="label" for="oi_<?= $idp ?>">分享图（OG Image）</label>
                <input class="form-control" id="oi_<?= $idp ?>" name="og_image"
                       value="<?= e($v['og_image'] ?? '') ?>" placeholder="留空则用站点默认分享图">
            </div>
            <div class="form-group">
                <label class="label" for="ca_<?= $idp ?>">规范链接（Canonical）</label>
                <input class="form-control" id="ca_<?= $idp ?>" name="canonical"
                       value="<?= e($v['canonical'] ?? '') ?>" placeholder="留空则自动取当前 URL">
            </div>
            <div class="form-group" style="grid-column:1 / -1;">
                <label class="checkbox">
                    <input type="checkbox" name="noindex" value="1" <?= !empty($v['noindex']) ? 'checked' : '' ?>>
                    <span>禁止搜索引擎收录此页面（输出 noindex 标签）</span>
                </label>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button class="btn btn-primary" type="submit">保存「<?= e($meta['label'] ?? $key) ?>」SEO 设置</button>
        <a class="btn btn-ghost" href="<?= e(site_url('admin/seo')) ?>">返回列表</a>
    </div>
</form>

<script>
document.querySelectorAll('[data-count],[data-kw]').forEach(function (el) {
    var min = parseInt(el.dataset.min || '0', 10);
    var out = document.getElementById('c_' + el.id);
    if (!out) return;
    function upd() {
        var val = el.value;
        var n, unit;
        if (el.dataset.kw !== undefined) {
            var arr = val.split(',').map(function (s) { return s.trim(); }).filter(function (s) { return s.length > 0; });
            n = arr.length; unit = '个关键词';
        } else {
            n = Array.from(val).length; unit = '字符';
        }
        out.textContent = n + ' ' + unit + (min > 0 ? '（建议≥' + min + '）' : '');
        out.style.color = n === 0 ? '#dc2626' : (n >= min ? '#16a34a' : '#d97706');
    }
    el.addEventListener('input', upd);
    upd();
});
</script>
