<?php
/**
 * Provide a view for the admin inline button preview
 *
 * @since      1.0.0
 *
 * @package    Add_As_Preferred_Source
 * @subpackage Add_As_Preferred_Source/admin/partials
 */

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

// Which set of settings this preview mirrors: 'inline' (the automatic
// placement) or 'shortcode' (the shortcode, block, and template tag). Set by
// the calling tab; the shortcode set falls back to the inline values, exactly
// as ADASPRSO_Public::placement_value() does on the front end.
$adasprso_preview_prefix = isset($adasprso_preview_prefix) ? $adasprso_preview_prefix : 'inline';

if ( ! function_exists( 'adasprso_preview_value' ) ) {
    /**
     * Resolves one preview value through the same chain as the front end.
     *
     * @param array  $options  Saved plugin options.
     * @param string $prefix   'inline' or 'shortcode'.
     * @param string $key      Key without its prefix, e.g. 'text'.
     * @param mixed  $fallback Built-in default.
     * @return mixed
     */
    function adasprso_preview_value( $options, $prefix, $key, $fallback ) {
        $keys = ( 'inline' === $prefix ) ? array( 'inline_' . $key ) : array( $prefix . '_' . $key, 'inline_' . $key );

        foreach ( $keys as $option_key ) {
            if ( isset( $options[ $option_key ] ) ) {
                return $options[ $option_key ];
            }
        }

        return $fallback;
    }
}

// Initial default values for preview
$adasprso_inline_text        = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'text', 'Stay connected via Google News');
$adasprso_inline_subtitle    = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'subtitle', 'Follow us for the latest travel updates and guides.');
$adasprso_inline_link_prefix = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'link_prefix', 'Enjoyed this article? You can');
$adasprso_inline_link_suffix = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'link_suffix', 'to see more from us.');
$adasprso_inline_bg_color    = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'bg_color', '#ffffff');
$adasprso_inline_text_color  = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'text_color', '#1c1e21');
$adasprso_inline_alignment   = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'align', 'center');
$adasprso_inline_style       = adasprso_preview_value($adasprso_options, $adasprso_preview_prefix, 'style', 'default');

// Colors can be saved empty; fall back so the preview never renders a broken
// `background-color: ;` declaration.
$adasprso_inline_bg_color   = $adasprso_inline_bg_color ? $adasprso_inline_bg_color : '#ffffff';
$adasprso_inline_text_color = $adasprso_inline_text_color ? $adasprso_inline_text_color : '#1c1e21';
$adasprso_inline_alignment  = in_array( $adasprso_inline_alignment, array( 'left', 'center', 'right' ), true ) ? $adasprso_inline_alignment : 'center';
$adasprso_inline_is_simple  = ( $adasprso_inline_style === 'simple' );
$adasprso_inline_is_strip   = ( $adasprso_inline_style === 'strip' );
$adasprso_inline_is_pill    = ( $adasprso_inline_style === 'pill' );
$adasprso_inline_is_link    = ( $adasprso_inline_style === 'link' );
$adasprso_inline_is_boxed   = ( $adasprso_inline_style === 'boxed' );
$adasprso_inline_is_default = ! ( $adasprso_inline_is_simple || $adasprso_inline_is_strip || $adasprso_inline_is_pill || $adasprso_inline_is_link || $adasprso_inline_is_boxed );

$adasprso_inline_is_custom   = ( isset( $adasprso_options['badge_language'] ) && $adasprso_options['badge_language'] === 'custom' );
$adasprso_inline_custom_text = isset( $adasprso_options['badge_custom_text'] ) ? $adasprso_options['badge_custom_text'] : '';
$adasprso_inline_preview_url = $this->get_preview_badge_url( $adasprso_options );
$adasprso_inline_theme       = $this->get_badge_theme( is_array( $adasprso_options ) ? $adasprso_options : array() );
$adasprso_inline_theme_class = ( $adasprso_inline_theme === 'dark' ) ? ' adasprso-custom-badge--dark' : '';
?>

<div class="adasprso-inline-preview-box">
    <h3><?php esc_html_e('Live Preview', 'add-as-preferred-source'); ?></h3>
    <div class="adasprso-inline-preview-container">
        <div class="adasprso-inline-preview-wrapper" data-adasprso-preview="<?php echo esc_attr($adasprso_preview_prefix); ?>" style="text-align: <?php echo esc_attr($adasprso_inline_alignment); ?>;">

            <!-- Default style preview (card) -->
            <div class="adasprso-inline-layout-2" style="<?php echo $adasprso_inline_is_default ? '' : 'display:none;'; ?>background-color: <?php echo esc_attr($adasprso_inline_bg_color); ?>; border-color: <?php echo esc_attr($adasprso_inline_bg_color === '#ffffff' ? '#e5e7eb' : $adasprso_inline_bg_color); ?>;">
                <div class="adasprso-inline-text-wrapper">
                    <div class="adasprso-inline-title-mock" style="color: <?php echo esc_attr($adasprso_inline_text_color); ?>;"><?php echo esc_html($adasprso_inline_text); ?></div>
                    <div class="adasprso-inline-subtitle-mock" style="opacity: 0.8; color: <?php echo esc_attr($adasprso_inline_text_color); ?>;"><?php echo esc_html($adasprso_inline_subtitle); ?></div>
                </div>

                <div class="mock-google-btn-wrapper">
                    <img src="<?php echo esc_url( $adasprso_inline_preview_url ); ?>" alt="<?php esc_attr_e( 'Follow on Google News', 'add-as-preferred-source' ); ?>" style="<?php echo $adasprso_inline_is_custom ? 'display:none;' : ''; ?>" />
                    <div class="adasprso-custom-badge adasprso-custom-badge--mock-inline<?php echo esc_attr( $adasprso_inline_theme_class ); ?>" style="<?php echo $adasprso_inline_is_custom ? '' : 'display:none;'; ?>">
                        <span class="adasprso-google-g" aria-hidden="true">
                            <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                                <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                            </svg>
                        </span>
                        <span class="adasprso-custom-badge-text"><?php echo esc_html( $adasprso_inline_custom_text ); ?></span>
                    </div>
                </div>
            </div>

            <!-- Simple style preview (badge only) -->
            <div class="adasprso-inline-simple-preview" style="<?php echo $adasprso_inline_is_simple ? '' : 'display:none;'; ?>">
                <div class="mock-google-btn-wrapper">
                    <img src="<?php echo esc_url( $adasprso_inline_preview_url ); ?>" alt="<?php esc_attr_e( 'Follow on Google News', 'add-as-preferred-source' ); ?>" style="<?php echo $adasprso_inline_is_custom ? 'display:none;' : ''; ?>" />
                    <div class="adasprso-custom-badge adasprso-custom-badge--mock-inline<?php echo esc_attr( $adasprso_inline_theme_class ); ?>" style="<?php echo $adasprso_inline_is_custom ? '' : 'display:none;'; ?>">
                        <span class="adasprso-google-g" aria-hidden="true">
                            <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                                <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                            </svg>
                        </span>
                        <span class="adasprso-custom-badge-text"><?php echo esc_html( $adasprso_inline_custom_text ); ?></span>
                    </div>
                </div>
            </div>

            <!-- Strip style preview -->
            <div class="adasprso-inline-strip" style="<?php echo $adasprso_inline_is_strip ? '' : 'display:none;'; ?>background-color: <?php echo esc_attr($adasprso_inline_bg_color); ?>; color: <?php echo esc_attr($adasprso_inline_text_color); ?>; border-color: <?php echo esc_attr($adasprso_inline_bg_color === '#ffffff' ? '#e5e7eb' : $adasprso_inline_bg_color); ?>;">
                <span class="adasprso-inline-strip-badge">
                    <span class="adasprso-google-g" aria-hidden="true">
                        <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                            <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                        </svg>
                    </span>
                </span>
                <span class="adasprso-inline-strip-text"><?php echo esc_html($adasprso_inline_text); ?></span>
            </div>

            <!-- Pill style preview -->
            <div class="adasprso-inline-pill-wrap" style="<?php echo $adasprso_inline_is_pill ? '' : 'display:none;'; ?>">
                <div class="adasprso-inline-pill" style="background-color: <?php echo esc_attr($adasprso_inline_bg_color); ?>; color: <?php echo esc_attr($adasprso_inline_text_color); ?>; border-color: <?php echo esc_attr($adasprso_inline_bg_color === '#ffffff' ? '#e5e7eb' : $adasprso_inline_bg_color); ?>;">
                    <span class="adasprso-inline-pill-badge">
                        <span class="adasprso-google-g" aria-hidden="true">
                            <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                                <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                            </svg>
                        </span>
                    </span>
                    <span class="adasprso-inline-pill-text"><?php echo esc_html($adasprso_inline_text); ?></span>
                </div>
            </div>

            <!-- Link style preview -->
            <div class="adasprso-inline-link" style="<?php echo $adasprso_inline_is_link ? '' : 'display:none;'; ?>color: <?php echo esc_attr($adasprso_inline_text_color); ?>;">
                <span class="adasprso-inline-link-prefix-mock" style="<?php echo empty( $adasprso_inline_link_prefix ) ? 'display:none;' : ''; ?>"><?php echo esc_html($adasprso_inline_link_prefix); ?></span>
                <span class="adasprso-inline-link-cta">
                    <span class="adasprso-inline-link-badge" aria-hidden="true">
                        <span class="adasprso-google-g" aria-hidden="true">
                            <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                                <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                            </svg>
                        </span>
                    </span>
                    <span class="adasprso-inline-link-text"><?php echo esc_html($adasprso_inline_text); ?></span>
                </span>
                <span class="adasprso-inline-link-suffix-mock" style="<?php echo empty( $adasprso_inline_link_suffix ) ? 'display:none;' : ''; ?>"><?php echo esc_html($adasprso_inline_link_suffix); ?></span>
            </div>

            <!-- Boxed style preview -->
            <div class="adasprso-inline-boxed" style="<?php echo $adasprso_inline_is_boxed ? '' : 'display:none;'; ?>background-color: <?php echo esc_attr($adasprso_inline_bg_color); ?>; border-color: <?php echo esc_attr($adasprso_inline_bg_color === '#ffffff' ? '#e5e7eb' : $adasprso_inline_bg_color); ?>;">
                <span class="adasprso-inline-boxed-icon">
                    <span class="adasprso-google-g" aria-hidden="true">
                        <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                            <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                        </svg>
                    </span>
                </span>
                <span class="adasprso-inline-boxed-text">
                    <span class="adasprso-inline-boxed-title" style="color: <?php echo esc_attr($adasprso_inline_text_color); ?>;"><?php echo esc_html($adasprso_inline_text); ?></span>
                    <span class="adasprso-inline-boxed-subtitle" style="color: <?php echo esc_attr($adasprso_inline_text_color); ?>;"><?php echo esc_html($adasprso_inline_subtitle); ?></span>
                </span>
                <span class="adasprso-inline-boxed-action">
                    <span class="adasprso-google-g" aria-hidden="true">
                        <svg viewBox="0 0 48 48" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
                            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                            <path fill="#FBBC05" d="M10.53 28.59A14.54 14.54 0 0 1 9.75 24c0-1.59.28-3.13.78-4.59l-7.98-6.19A23.86 23.86 0 0 0 0 24c0 3.86.92 7.5 2.56 10.78l7.97-6.19z"></path>
                            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.8l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                        </svg>
                    </span>
                    <?php esc_html_e('Add source', 'add-as-preferred-source'); ?>
                </span>
            </div>

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