<?php
/**
 * RankForge — SERP / Social preview views.
 *
 * F14 continued (2026-04-21). Split from class-analyzer.php so the three
 * preview blocks (Google SERP, Open Graph / Twitter fields, Social
 * preview card) live in their own file. `class-analyzer.php::render_meta_box`
 * becomes a thin dispatcher over these + the already-extracted Schema
 * Builder view.
 *
 * Lesson (from DECOMPOSITION_PLAN.md "Pre-extraction checklist"):
 * the methods here accept their inputs as an array. Every variable the
 * parent method computed is listed as an expected key, so a future
 * editor can see exactly what has to travel through.
 *
 * @package RankForge
 */

if (!defined('ABSPATH')) exit;

if (!class_exists('RANKFORGE_Preview_View')) {

class RANKFORGE_Preview_View {

    /**
 * Google SERP preview — the small box that renders the <title> /
 * URL / snippet the way Google's search results page will.
 *
 * Expected $fields keys:
 * post WP_Post
 * meta_title string (falls back to post_title)
 * meta_desc string (falls back to trimmed post_content)
 */
    public static function render_serp(array $fields) {
        $post       = $fields['post']       ?? null;
        $meta_title = (string) ($fields['meta_title'] ?? '');
        $meta_desc  = (string) ($fields['meta_desc']  ?? '');
        if (!$post || !is_object($post) || !isset($post->ID)) return;
        ?>
        <!-- Google preview -->
        <div class="sf-field-group" style="margin-top:18px;">
            <div class="sf-field-header"><strong><?php esc_html_e('Google preview', 'rankforge'); ?><?php if (class_exists('Forge_Docs_Link')) Forge_Docs_Link::render('rankforge', 'serp-preview-how-your-page-looks-in-google', __('SERP preview', 'rankforge'), __('What Google will render. Live-updates as you type the title/description.', 'rankforge')); ?></strong></div>
            <div class="rankforge-serp-preview" style="overflow:hidden;word-break:break-word;">
                <div class="rankforge-serp-title" id="sf-serp-title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><?php echo esc_html($meta_title ?: $post->post_title); ?></div>
                <div class="rankforge-serp-url" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><?php echo esc_url(get_permalink($post->ID)); ?></div>
                <div class="rankforge-serp-desc" id="sf-serp-desc"><?php echo esc_html($meta_desc ?: wp_trim_words($post->post_content, 25)); ?></div>
            </div>
        </div>
        <?php
    }

    /**
 * Social tab body — OG / Twitter field overrides + social preview card.
 * / per-post OG image + text overrides fall back to SEO
 * title/description when empty.
 *
 * Expected $fields keys:
 * post WP_Post
 * meta_title string
 * meta_desc string
 * og_title string
 * og_description string
 * og_image_id int
 * og_image_url string
 * twitter_title string
 * twitter_desc string
 * thumb_url string (best-effort image: og_image_url OR featured OR site default)
 */
    public static function render_social(array $fields) {
        $post           = $fields['post']           ?? null;
        $meta_title     = (string) ($fields['meta_title']     ?? '');
        $meta_desc      = (string) ($fields['meta_desc']      ?? '');
        $og_title       = (string) ($fields['og_title']       ?? '');
        $og_description = (string) ($fields['og_description'] ?? '');
        $og_image_id    = (int)    ($fields['og_image_id']    ?? 0);
        $og_image_url   = (string) ($fields['og_image_url']   ?? '');
        $twitter_title  = (string) ($fields['twitter_title']  ?? '');
        $twitter_desc   = (string) ($fields['twitter_desc']   ?? '');
        $thumb_url      = (string) ($fields['thumb_url']      ?? '');
        if (!$post || !is_object($post) || !isset($post->ID)) return;
        ?>
        <!-- Per-post Open Graph (Facebook) overrides.
 Leave empty to fall back to the SEO tab's meta title/
 description. Use these when the social share needs a
 different angle than the SERP listing. -->
        <div class="sf-field-group">
            <div class="sf-field-header">
                <strong><?php esc_html_e('Facebook / Open Graph', 'rankforge'); ?><?php if (class_exists('Forge_Docs_Link')) Forge_Docs_Link::render('rankforge', 'writing-seo-titles-and-descriptions', __('Open Graph overrides', 'rankforge'), __('How the post looks when shared on Facebook or LinkedIn. Empty = reuse SEO title/description.', 'rankforge')); ?></strong>
                <span style="font-size:14px;color:#94a3b8;font-weight:400;margin-left:6px;"><?php esc_html_e('Leave empty to reuse SEO title/description', 'rankforge'); ?></span>
            </div>
            <label style="display:block;font-size:14px;color:#64748b;margin:8px 0 4px;"><?php esc_html_e('og:title override', 'rankforge'); ?></label>
            <input type="text"
                   name="rankforge_og_title"
                   id="sf-og-title"
                   class="sf-input"
                   maxlength="90"
                   placeholder="<?php echo esc_attr($meta_title ?: $post->post_title); ?>"
                   value="<?php echo esc_attr($og_title); ?>">
            <label style="display:block;font-size:14px;color:#64748b;margin:10px 0 4px;"><?php esc_html_e('og:description override', 'rankforge'); ?></label>
            <textarea name="rankforge_og_description"
                      id="sf-og-desc"
                      class="sf-textarea"
                      rows="2"
                      maxlength="200"
                      placeholder="<?php echo esc_attr($meta_desc); ?>"><?php echo esc_textarea($og_description); ?></textarea>
        </div>

        <div class="sf-field-group" style="margin-top:18px;">
            <div class="sf-field-header">
                <strong><?php esc_html_e('X (Twitter) Card', 'rankforge'); ?><?php if (class_exists('Forge_Docs_Link')) Forge_Docs_Link::render('rankforge', 'writing-seo-titles-and-descriptions', __('Twitter Card overrides', 'rankforge'), __('Title/description shown on X. Empty = reuse OG values, then SEO values.', 'rankforge')); ?></strong>
                <span style="font-size:14px;color:#94a3b8;font-weight:400;margin-left:6px;"><?php esc_html_e('Leave empty to reuse OG or SEO values', 'rankforge'); ?></span>
            </div>
            <label style="display:block;font-size:14px;color:#64748b;margin:8px 0 4px;"><?php esc_html_e('twitter:title override', 'rankforge'); ?></label>
            <input type="text"
                   name="rankforge_twitter_title"
                   id="sf-twitter-title"
                   class="sf-input"
                   maxlength="70"
                   placeholder="<?php echo esc_attr($og_title ?: ($meta_title ?: $post->post_title)); ?>"
                   value="<?php echo esc_attr($twitter_title); ?>">
            <label style="display:block;font-size:14px;color:#64748b;margin:10px 0 4px;"><?php esc_html_e('twitter:description override', 'rankforge'); ?></label>
            <textarea name="rankforge_twitter_description"
                      id="sf-twitter-desc"
                      class="sf-textarea"
                      rows="2"
                      maxlength="200"
                      placeholder="<?php echo esc_attr($og_description ?: $meta_desc); ?>"><?php echo esc_textarea($twitter_desc); ?></textarea>
        </div>

        <!-- Social Media Image override (per post og:image) -->
        <div class="sf-field-group">
            <div class="sf-field-header">
                <strong><?php esc_html_e('Social Media Image', 'rankforge'); ?><?php if (class_exists('Forge_Docs_Link')) Forge_Docs_Link::render('rankforge', 'writing-seo-titles-and-descriptions', __('Social image', 'rankforge'), __('Image used on Facebook/X/LinkedIn. Overrides featured image and site default.', 'rankforge')); ?></strong>
                <span style="font-size:14px;color:#94a3b8;font-weight:400;margin-left:6px;"><?php esc_html_e('Overrides featured image and site default', 'rankforge'); ?></span>
            </div>
            <input type="hidden" name="rankforge_og_image_id" id="sf-og-image-id" value="<?php echo esc_attr($og_image_id); ?>">
            <input type="hidden" name="rankforge_og_image" id="sf-og-image-url" value="<?php echo esc_attr($og_image_url); ?>">
            <div id="sf-og-image-preview" style="<?php echo $og_image_url ? '' : 'display:none;'; ?>margin-bottom:8px;max-width:600px;">
                <?php if ($og_image_url): ?>
                    <div style="width:100%;aspect-ratio:1200/630;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;background:#f8fafc url(<?php echo esc_url($og_image_url); ?>) center/contain no-repeat;"></div>
                    <div style="font-size:13px;color:#94a3b8;margin-top:4px;"><?php esc_html_e('Recommended size: 1200×630 px', 'rankforge'); ?></div>
                <?php endif; ?>
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
                <button type="button" class="sf-og-image-btn" id="sf-og-image-pick">
                    <span class="dashicons dashicons-format-image"></span>
                    <?php echo $og_image_url ? esc_html__('Change image', 'rankforge') : esc_html__('Select image', 'rankforge'); ?>
                </button>
                <button type="button" class="sf-og-image-remove" id="sf-og-image-remove" style="<?php echo $og_image_url ? '' : 'display:none;'; ?>">
                    <?php esc_html_e('Remove', 'rankforge'); ?>
                </button>
            </div>
        </div>

        <div class="sf-field-group" style="margin-top:18px;">
            <div class="sf-field-header"><strong><?php esc_html_e('Social Preview (OG / Twitter)', 'rankforge'); ?></strong></div>
            <div style="max-width:600px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;font-family:Arial,sans-serif;background:#fff;">
                <?php if ($thumb_url): ?>
                <div style="width:100%;aspect-ratio:1200/630;background:url(<?php echo esc_url($thumb_url); ?>) center/cover;"></div>
                <?php else: ?>
                <div style="width:100%;aspect-ratio:1200/630;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;"><?php esc_html_e('No social image — pick one above or set a featured image', 'rankforge'); ?></div>
                <?php endif; ?>
                <div style="padding:12px;">
                    <div style="font-size:14px;color:#94a3b8;text-transform:uppercase;"><?php echo esc_html(wp_parse_url(home_url(), PHP_URL_HOST)); ?></div>
                    <div style="font-size:15px;font-weight:700;color:#1e293b;margin:3px 0;"><?php echo esc_html($meta_title ?: $post->post_title); ?></div>
                    <div style="font-size:14px;color:#64748b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"><?php echo esc_html($meta_desc ?: wp_trim_words($post->post_content, 20)); ?></div>
                </div>
            </div>
        </div>
        <?php
    }
}

} // end: if (!class_exists('RANKFORGE_Preview_View'))
