<?php
/**
 * Shared Preview Section
 *
 * Displays the live preview of social media buttons.
 * Used by both settings-page.php and appearance-page.php
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get saved buttons from database
$canvon_fb_selected_platforms_str = get_option('canvon_fb_selected_platforms', '');
$canvon_fb_selected_platforms = !empty($canvon_fb_selected_platforms_str) ? explode(',', $canvon_fb_selected_platforms_str) : array();

// Detect which page we're on
$canvon_fb_current_page = isset( $_GET['page'] ) ? sanitize_key( wp_unslash( $_GET['page'] ) ) : '';
$canvon_fb_is_settings_page = ( 'canvon-floating-buttons' === $canvon_fb_current_page );
$canvon_fb_is_appearance_page = ( 'canvon-floating-buttons-appearance' === $canvon_fb_current_page );

// For appearance page, use form POST values if available (current selection), otherwise use database
// For settings page, always use database (it has its own dynamic preview)
$canvon_fb_request_method = isset( $_SERVER['REQUEST_METHOD'] ) ? sanitize_text_field( wp_unslash( $_SERVER['REQUEST_METHOD'] ) ) : '';
$canvon_fb_has_settings_nonce = (
    current_user_can( 'manage_options' ) &&
    isset( $_POST['_wpnonce'] ) &&
    wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['_wpnonce'] ) ), 'canvon_fb_appearance_settings-options' )
);

if ( $canvon_fb_is_appearance_page && 'POST' === $canvon_fb_request_method && $canvon_fb_has_settings_nonce ) {
    // Use submitted values for live preview
    $canvon_fb_button_position = isset($_POST['canvon_fb_button_position']) ? sanitize_text_field( wp_unslash( $_POST['canvon_fb_button_position'] ) ) : get_option('canvon_fb_button_position', 'right');
    $canvon_fb_button_size = isset($_POST['canvon_fb_button_size']) ? sanitize_text_field( wp_unslash( $_POST['canvon_fb_button_size'] ) ) : get_option('canvon_fb_button_size', 'M');
    $canvon_fb_button_shape = isset($_POST['canvon_fb_button_shape']) ? sanitize_text_field( wp_unslash( $_POST['canvon_fb_button_shape'] ) ) : get_option('canvon_fb_button_shape', 'round');
    $canvon_fb_button_color = isset($_POST['canvon_fb_button_color']) ? sanitize_hex_color( wp_unslash( $_POST['canvon_fb_button_color'] ) ) : get_option('canvon_fb_button_color', '#0D99FF');
    $canvon_fb_widget_icon = isset($_POST['canvon_fb_widget_icon']) ? sanitize_text_field( wp_unslash( $_POST['canvon_fb_widget_icon'] ) ) : get_option('canvon_fb_widget_icon', 'info');
    $canvon_fb_widget_icon_text = isset($_POST['canvon_fb_widget_icon_text']) ? sanitize_text_field( wp_unslash( $_POST['canvon_fb_widget_icon_text'] ) ) : get_option('canvon_fb_widget_icon_text', '');
    $canvon_fb_widget_icon_text_show = isset($_POST['canvon_fb_widget_icon_text_show']) ? rest_sanitize_boolean( wp_unslash( $_POST['canvon_fb_widget_icon_text_show'] ) ) : get_option('canvon_fb_widget_icon_text_show', false);
    $canvon_fb_preview_v_offset = 30;
    $canvon_fb_preview_h_offset = 30;
} else {
    // Use saved database values
    $canvon_fb_button_position = get_option('canvon_fb_button_position', 'right');
    $canvon_fb_button_size = get_option('canvon_fb_button_size', 'M');
    $canvon_fb_button_shape = get_option('canvon_fb_button_shape', 'round');
    $canvon_fb_button_color = get_option('canvon_fb_button_color', '#0D99FF');
    $canvon_fb_widget_icon = get_option('canvon_fb_widget_icon', 'info');
    $canvon_fb_widget_icon_text = get_option('canvon_fb_widget_icon_text', '');
    $canvon_fb_widget_icon_text_show = get_option('canvon_fb_widget_icon_text_show', false);
    $canvon_fb_preview_v_offset = 30;
    $canvon_fb_preview_h_offset = 30;
}

    $canvon_fb_preview_offsets = apply_filters(
        'canvon_fb_preview_position_offsets',
        array(
            'vertical'   => $canvon_fb_preview_v_offset,
            'horizontal' => $canvon_fb_preview_h_offset,
        )
    );
    $canvon_fb_preview_v_offset = isset( $canvon_fb_preview_offsets['vertical'] ) ? absint( $canvon_fb_preview_offsets['vertical'] ) : 30;
    $canvon_fb_preview_h_offset = isset( $canvon_fb_preview_offsets['horizontal'] ) ? absint( $canvon_fb_preview_offsets['horizontal'] ) : 30;

// Build inline style for offsets on the preview container
// (Scaling is handled by JS on the appearance page; we only store the raw values as data-attrs)

// Define widget icons
$canvon_fb_icons_dir = CANVON_FB_PLUGIN_DIR . 'assets/images/';
$canvon_fb_widget_icons = array(
    'info'    => file_get_contents( $canvon_fb_icons_dir . 'widget-icon-1.svg' ),
    'chat'    => file_get_contents( $canvon_fb_icons_dir . 'widget-icon-2.svg' ),
    'message' => file_get_contents( $canvon_fb_icons_dir . 'widget-icon-3.svg' ),
    'contact' => file_get_contents( $canvon_fb_icons_dir . 'widget-icon-4.svg' ),
);
$canvon_fb_widget_icon_svg = isset($canvon_fb_widget_icons[$canvon_fb_widget_icon]) ? $canvon_fb_widget_icons[$canvon_fb_widget_icon] : $canvon_fb_widget_icons['info'];
$canvon_fb_widget_icon_svg = apply_filters( 'canvon_fb_preview_widget_icon_svg', $canvon_fb_widget_icon_svg, $canvon_fb_widget_icon, $canvon_fb_widget_icons );

// Define all platform icons
$canvon_fb_preview_icons = array(
    'phone' => array('label' => 'Phone', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>'),
    'whatsapp' => array('label' => 'WhatsApp', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>'),
    'line' => array('label' => 'Line', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"><path fill="currentColor" d="M266.66 144.92c0-47.74-47.86-86.58-106.69-86.58S53.28 97.18 53.28 144.92c0 42.8 38 78.65 89.22 85.42 3.48.75 8.21 2.29 9.4 5.26 1.08 2.7.71 6.93.35 9.65 0 0-1.25 7.53-1.52 9.13-.47 2.7-2.15 10.55 9.24 5.76s61.44-36.18 83.82-61.95C259.25 181.24 266.66 164 266.66 144.92z"/></svg>'),
    'wechat' => array('label' => 'WeChat', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"/></svg>'),
    'kakao' => array('label' => 'KakaoTalk', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256.5 48C141.1 48 48 126.5 48 224c0 72.5 56.2 135.2 139.1 164.3-.6 2.3-2.2 8.5-2.5 9.9-1.2 5.5-1.2 10.5.5 14.6 2.3 5.6 7.3 9.2 13.4 9.2 4.1 0 8.5-1.4 13.1-4.1 1.1-.7 26.6-17.3 38.1-24.8 3.4-.5 6.9-.7 10.3-.7 115.4 0 208.5-78.5 208.5-176S371.9 48 256.5 48z"/></svg>'),
    'discord' => array('label' => 'Discord', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>'),
    'email' => array('label' => 'Email', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>'),
    'tiktok' => array('label' => 'TikTok', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>'),
    'twitter' => array('label' => 'X (Twitter)', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>'),
    'linkedin' => array('label' => 'LinkedIn', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>'),
    'threads' => array('label' => 'Threads', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/></svg>'),
    'facebook' => array('label' => 'Facebook', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>'),
    'instagram' => array('label' => 'Instagram', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>'),
    'youtube' => array('label' => 'YouTube', 'svg' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>')
);

if ( function_exists( 'canvon_fb_get_platform_data' ) ) {
    $canvon_fb_shared_platform_icons = canvon_fb_get_platform_data();

    foreach ( $canvon_fb_shared_platform_icons as $canvon_fb_platform_key => $canvon_fb_platform_data ) {
        $canvon_fb_preview_icons[ $canvon_fb_platform_key ] = array(
            'label' => $canvon_fb_platform_data['name'],
            'svg'   => $canvon_fb_platform_data['svg'],
        );
    }
}
?>

<?php
// Only output CSS if NOT on settings page (settings page has its own preview CSS)
$canvon_fb_is_settings_page = ( 'canvon-floating-buttons' === $canvon_fb_current_page );
if (!$canvon_fb_is_settings_page):
?>

<?php endif; ?>

<div class="canvon-fb-preview-section">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
        <h2 style="margin:0;">Preview</h2>
        <div style="display:flex;align-items:center;gap:8px;">
        <button type="button" id="canvon-fb-live-preview-btn" style="
            display:inline-flex;align-items:center;gap:6px;
            padding:5px 12px;font-size:13px;border-radius:4px;
            border:1px solid #0D99FF;background:#fff;color:#0D99FF;
            cursor:pointer;font-weight:500;transition:background .15s,color .15s;
        ">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
            Live Preview
        </button>
        <span id="canvon-fb-live-preview-msg" style="font-size:12px;color:#666;display:none;">Opening…</span>
        </div>
    </div>
    <div class="canvon-fb-browser-mockup">
        <div class="canvon-fb-browser-header">
            <div class="canvon-fb-browser-dot"></div>
            <div class="canvon-fb-browser-dot"></div>
            <div class="canvon-fb-browser-dot"></div>
        </div>
        <div class="canvon-fb-browser-content">
            <div class="canvon-fb-preview-placeholder" id="canvon-fb-preview-placeholder" style="<?php echo !empty($canvon_fb_selected_platforms) ? 'display:none;' : ''; ?>">
                <p><?php echo empty($canvon_fb_selected_platforms) ? 'Go to settings to add buttons' : 'Select social media channels to see preview'; ?></p>
            </div>
            <div class="canvon-fb-preview-icons" id="canvon-fb-preview-icons"
                 data-position="<?php echo esc_attr($canvon_fb_button_position); ?>"
                 data-size="<?php echo esc_attr($canvon_fb_button_size); ?>"
                 data-shape="<?php echo esc_attr($canvon_fb_button_shape); ?>"
                 data-color="<?php echo esc_attr($canvon_fb_button_color); ?>"
                 data-widget-icon="<?php echo esc_attr($canvon_fb_widget_icon); ?>"
                 data-v-offset="<?php echo esc_attr($canvon_fb_preview_v_offset); ?>"
                 data-h-offset="<?php echo esc_attr($canvon_fb_preview_h_offset); ?>">
                <?php
                if (count($canvon_fb_selected_platforms) === 1) {
                    // Show single icon with platform-specific color
                    $canvon_fb_platform = $canvon_fb_selected_platforms[0];
                    if (isset($canvon_fb_preview_icons[$canvon_fb_platform])) {
                        echo '<div class="canvon-fb-preview-icon canvon-fb-' . esc_attr($canvon_fb_platform) . '">';
                        echo wp_kses( $canvon_fb_preview_icons[$canvon_fb_platform]['svg'], canvon_fb_get_icon_kses_allowed_html() );
                        echo '</div>';
                    }
                } elseif (count($canvon_fb_selected_platforms) > 1) {
                    // Show widget icon for 2+ buttons with optional text
                    if ($canvon_fb_widget_icon_text_show && !empty($canvon_fb_widget_icon_text)) {
                        echo '<div class="canvon-fb-widget-with-text">';
                        echo '<div class="canvon-fb-preview-info-icon" data-collapsed="true" style="background-color: ' . esc_attr($canvon_fb_button_color) . ';">';
                        echo wp_kses( $canvon_fb_widget_icon_svg, canvon_fb_get_icon_kses_allowed_html() );
                        echo '</div>';
                        echo '<div class="canvon-fb-widget-text">' . esc_html($canvon_fb_widget_icon_text) . '</div>';
                        echo '</div>';
                    } else {
                        echo '<div class="canvon-fb-preview-info-icon" data-collapsed="true" style="background-color: ' . esc_attr($canvon_fb_button_color) . ';">';
                        echo wp_kses( $canvon_fb_widget_icon_svg, canvon_fb_get_icon_kses_allowed_html() );
                        echo '</div>';
                    }
                }
                ?>
            </div>
        </div>
    </div>
    <!-- Desktop / Mobile toggle -->
    <div style="display:flex;align-items:center;justify-content:center;gap:0;margin-top:12px;">
        <button type="button" id="canvon-fb-preview-desktop-btn" class="canvon-fb-preview-device-btn canvon-fb-preview-device-active" title="Desktop">
            <svg width="35" height="35" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M63.4026 56.8235C64.0654 56.8243 64.7028 57.0769 65.1847 57.5297C65.6667 57.9826 65.9567 58.6015 65.9955 59.2601C66.0344 59.9186 65.8191 60.5671 65.3937 61.073C64.9683 61.5789 64.365 61.904 63.7068 61.9819L63.4026 62H16.5974C15.9346 61.9993 15.2972 61.7467 14.8153 61.2938C14.3333 60.8409 14.0433 60.222 14.0045 59.5635C13.9656 58.9049 14.1809 58.2564 14.6063 57.7506C15.0317 57.2447 15.6351 56.9196 16.2932 56.8416L16.5974 56.8235H63.4026ZM58.202 18C59.5141 17.9996 60.7778 18.4928 61.7398 19.3808C62.7019 20.2688 63.2912 21.486 63.3896 22.7882L63.4026 23.1765V49.0588C63.403 50.3648 62.9075 51.6226 62.0153 52.5802C61.1232 53.5378 59.9004 54.1244 58.5921 54.2224L58.202 54.2353H21.798C20.4859 54.2357 19.2222 53.7425 18.2602 52.8545C17.2981 51.9665 16.7088 50.7493 16.6104 49.4471L16.5974 49.0588V23.1765C16.597 21.8705 17.0925 20.6127 17.9847 19.6551C18.8768 18.6975 20.0996 18.1109 21.4079 18.0129L21.798 18H58.202ZM58.202 23.1765H21.798V49.0588H58.202V23.1765Z" fill="currentColor"/></svg>
        </button>
        <div style="width:1px;height:20px;background:#dcdcde;margin:0 2px;"></div>
        <button type="button" id="canvon-fb-preview-mobile-btn" class="canvon-fb-preview-device-btn" title="Mobile">
            <svg width="27" height="35" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51.5 12H29.5C28.0413 12 26.6424 12.5795 25.6109 13.6109C24.5795 14.6424 24 16.0413 24 17.5V61.5C24 62.9587 24.5795 64.3576 25.6109 65.3891C26.6424 66.4205 28.0413 67 29.5 67H51.5C52.9587 67 54.3576 66.4205 55.3891 65.3891C56.4205 64.3576 57 62.9587 57 61.5V17.5C57 16.0413 56.4205 14.6424 55.3891 13.6109C54.3576 12.5795 52.9587 12 51.5 12ZM43.25 64.25H37.75V61.5H43.25V64.25ZM51.5 58.75H29.5V20.25H51.5V58.75Z" fill="currentColor"/></svg>
        </button>
    </div>
</div>


<?php
ob_start();
?>
jQuery(document).ready(function($) {
    // Widget icon SVGs
    var widgetIcons = <?php echo wp_json_encode( $canvon_fb_widget_icons ); ?>;

    // Desktop / Mobile preview toggle
    var $canvon_fb_browserMockup  = $('.canvon-fb-browser-mockup');
    var $canvon_fb_browserContent = $('.canvon-fb-browser-content');
    var $canvon_fb_previewIcons   = $('#canvon-fb-preview-icons');
    var $canvon_fb_placeholder    = $('#canvon-fb-preview-placeholder');

    $('#canvon-fb-preview-desktop-btn').on('click', function() {
        $(this).addClass('canvon-fb-preview-device-active');
        $('#canvon-fb-preview-mobile-btn').removeClass('canvon-fb-preview-device-active');
        // Restore desktop layout
        $canvon_fb_browserMockup.removeClass('canvon-fb-mobile-mode');
        $canvon_fb_browserContent.removeClass('canvon-fb-mobile-view');
        var $canvon_fb_frame = $canvon_fb_browserContent.find('.canvon-fb-mobile-frame');
        $canvon_fb_previewIcons.appendTo($canvon_fb_browserContent);
        $canvon_fb_placeholder.appendTo($canvon_fb_browserContent);
        $canvon_fb_frame.remove();
    });

    $('#canvon-fb-preview-mobile-btn').on('click', function() {
        $(this).addClass('canvon-fb-preview-device-active');
        $('#canvon-fb-preview-desktop-btn').removeClass('canvon-fb-preview-device-active');
        // Hide browser chrome and show phone frame
        $canvon_fb_browserMockup.addClass('canvon-fb-mobile-mode');
        $canvon_fb_browserContent.addClass('canvon-fb-mobile-view');
        if ($canvon_fb_browserContent.find('.canvon-fb-mobile-frame').length === 0) {
            var $canvon_fb_frame = $('<div class="canvon-fb-mobile-frame"></div>');
            $canvon_fb_frame.append($canvon_fb_placeholder).append($canvon_fb_previewIcons);
            $canvon_fb_browserContent.append($canvon_fb_frame);
        }
    });


    // Widget text settings
    var widgetText = '<?php echo esc_js($canvon_fb_widget_icon_text); ?>';
    var widgetTextShow = <?php echo $canvon_fb_widget_icon_text_show ? 'true' : 'false'; ?>;

    // Function to update custom color CSS (only for appearance page)
    function updateCustomColor(color) {
        // Only apply the selected widget color on appearance page, not settings page
        if (typeof platforms === 'undefined' || $('#canvon-fb-channels-list').length === 0) {
            if (color) {
                // Only apply custom color to info icon, not to platform icons
                $('.canvon-fb-preview-info-icon[data-collapsed="true"], .canvon-fb-preview-close').css('background-color', color);
            }
        }
    }

    // Initialize color on page load (only for appearance page)
    var initialColor = $('#canvon-fb-preview-icons').attr('data-color');
    if (typeof platforms === 'undefined' || $('#canvon-fb-channels-list').length === 0) {
        updateCustomColor(initialColor);
    }

    // Handle position change in appearance page
    $('input[name="canvon_fb_button_position"]').on('change', function() {
        var position = $(this).val();
        $('#canvon-fb-preview-icons').attr('data-position', position);
        // offset re-apply is handled by applyOffsetToPreview() in appearance-page.php
    });

    // Handle size change in appearance page
    $('input[name="canvon_fb_button_size"]').on('change', function() {
        var size = $(this).val();
        $('#canvon-fb-preview-icons').attr('data-size', size);
        // When a preset size is selected, clear any custom size inline styles
        $('#canvon-fb-preview-icons').find('.canvon-fb-preview-icon, .canvon-fb-preview-info-icon, .canvon-fb-preview-close').css({ 'width': '', 'height': '' });
        $('#canvon-fb-preview-icons').find('.canvon-fb-preview-icon svg, .canvon-fb-preview-info-icon svg').css({ 'width': '', 'height': '' });
    });

    // Handle shape change in appearance page
    $('input[name="canvon_fb_button_shape"]').on('change', function() {
        var shape = $(this).val();
        $('#canvon-fb-preview-icons').attr('data-shape', shape);
    });

    // Handle color change in appearance page
    $('input[name="canvon_fb_button_color"]').on('change', function() {
        var color = $(this).val();
        $('#canvon-fb-preview-icons').attr('data-color', color);
        updateCustomColor(color);

        // Update info icon background if collapsed
        var $canvon_fb_infoIcon = $('.canvon-fb-preview-info-icon[data-collapsed="true"]');
        if ($canvon_fb_infoIcon.length > 0) {
            $canvon_fb_infoIcon.css('background-color', color);
        }
    });

    // Handle info icon click to expand (only if not on settings page with its own handler)
    if (typeof platforms === 'undefined' || $('#canvon-fb-channels-list').length === 0) {
        $(document).on('click', '.canvon-fb-preview-info-icon', function() {
            var $canvon_fb_previewIcons = $('#canvon-fb-preview-icons');

            // Use appearance page logic with PHP-generated icons with platform colors
            $canvon_fb_previewIcons.empty();
            $canvon_fb_previewIcons.addClass('expanded');

            var currentColor = $canvon_fb_previewIcons.attr('data-color') || '#0D99FF';

            <?php
            foreach ($canvon_fb_selected_platforms as $canvon_fb_platform) {
                if (isset($canvon_fb_preview_icons[$canvon_fb_platform])) {
                    $canvon_fb_icon_markup = '<div class="canvon-fb-preview-icon canvon-fb-' . esc_attr( $canvon_fb_platform ) . '">' . wp_kses( $canvon_fb_preview_icons[ $canvon_fb_platform ]['svg'], canvon_fb_get_icon_kses_allowed_html() ) . '</div>';
                    echo '$canvon_fb_previewIcons.append(' . wp_json_encode( $canvon_fb_icon_markup ) . ');' . "\n            ";
                }
            }
            ?>

            // Add close button with custom color
            var closeBtn = $('<div class="canvon-fb-preview-close"></div>');
            closeBtn.css('background-color', currentColor);
            closeBtn.html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
            $canvon_fb_previewIcons.append(closeBtn);
            if (typeof applyCustomSizeToPreview === 'function') applyCustomSizeToPreview();
            if (typeof applyCustomRadiusToPreview === 'function') applyCustomRadiusToPreview();
        });
    }
    // Handle close button click - collapse back to info icon (only for appearance page)
    if (typeof platforms === 'undefined' || $('#canvon-fb-channels-list').length === 0) {
        $(document).on('click', '.canvon-fb-preview-close', function() {
            var $canvon_fb_previewIcons = $('#canvon-fb-preview-icons');
            var currentColor = $canvon_fb_previewIcons.attr('data-color') || '#0D99FF';
            var currentWidgetIcon = $canvon_fb_previewIcons.attr('data-widget-icon') || 'info';

            // Clear and reset
            $canvon_fb_previewIcons.empty();
            $canvon_fb_previewIcons.removeClass('expanded');

            // Show widget icon again with current color and optional text
            if (widgetTextShow && widgetText) {
                var wrapper = $('<div class="canvon-fb-widget-with-text"></div>');
                var infoIcon = $('<div class="canvon-fb-preview-info-icon" data-collapsed="true"></div>');
                infoIcon.css('background-color', currentColor);
                infoIcon.html(widgetIcons[currentWidgetIcon]);
                var textDiv = $('<div class="canvon-fb-widget-text"></div>').text(widgetText);
                wrapper.append(infoIcon).append(textDiv);
                $canvon_fb_previewIcons.append(wrapper);
            } else {
                var infoIcon = $('<div class="canvon-fb-preview-info-icon" data-collapsed="true"></div>');
                infoIcon.css('background-color', currentColor);
                infoIcon.html(widgetIcons[currentWidgetIcon]);
                $canvon_fb_previewIcons.append(infoIcon);
            }
            if (typeof applyCustomSizeToPreview === 'function') applyCustomSizeToPreview();
            if (typeof applyCustomRadiusToPreview === 'function') applyCustomRadiusToPreview();
        });
    }

    // Handle widget icon text changes in appearance page
    $('.canvon-fb-widget-text-input').on('input', function() {
        widgetText = $(this).val();
        updateWidgetIconDisplay();
    });

    // Handle widget icon text show toggle in appearance page
    $('input[name="canvon_fb_widget_icon_text_show"]').on('change', function() {
        widgetTextShow = $(this).is(':checked');
        updateWidgetIconDisplay();
    });

    // Function to update widget icon display with text
    function updateWidgetIconDisplay() {
        var $canvon_fb_wrapper = $('.canvon-fb-widget-with-text');
        var $canvon_fb_infoIcon = $('.canvon-fb-preview-info-icon[data-collapsed="true"]');

        if ($canvon_fb_infoIcon.length > 0) {
            if (widgetTextShow && widgetText) {
                if ($canvon_fb_wrapper.length === 0) {
                    // Wrap existing icon and add text
                    $canvon_fb_infoIcon.wrap('<div class="canvon-fb-widget-with-text"></div>');
                    $canvon_fb_infoIcon.after('<div class="canvon-fb-widget-text">' + widgetText + '</div>');
                } else {
                    // Update existing text
                    $('.canvon-fb-widget-text').text(widgetText);
                }
            } else {
                // Remove wrapper if exists
                if ($canvon_fb_wrapper.length > 0) {
                    $('.canvon-fb-widget-text').remove();
                    $canvon_fb_infoIcon.unwrap();
                }
            }
        }
    }

    // Handle widget icon change in appearance page
    $('input[name="canvon_fb_widget_icon"]').on('change', function() {
        var widgetIcon = $(this).val();
        var $canvon_fb_previewIcons = $('#canvon-fb-preview-icons');
        $canvon_fb_previewIcons.attr('data-widget-icon', widgetIcon);

        // Update collapsed icon if visible
        var $canvon_fb_infoIcon = $('.canvon-fb-preview-info-icon[data-collapsed="true"]');
        if ($canvon_fb_infoIcon.length > 0) {
            $canvon_fb_infoIcon.html(widgetIcons[widgetIcon]);
        }
    });

    // Live Preview button — POST current form state, get transient URL, open in new tab
    $('#canvon-fb-live-preview-btn').on('click', function() {
        var $canvon_fb_btn = $(this);
        var $canvon_fb_msg = $('#canvon-fb-live-preview-msg');

        // Open blank tab NOW (synchronous, won't be blocked by popup blockers)
        var previewWin = window.open('', '_blank');

        var formData = {};
        var $canvon_fb_form = $('form[action="options.php"]').first();
        if ($canvon_fb_form.length) {
            $canvon_fb_form.serializeArray().forEach(function(f) { formData[f.name] = f.value; });
        }
        // On the settings page the form has no appearance fields — pull them from
        // the appearanceSettings JS object that the settings page populates.
        if (typeof appearanceSettings !== 'undefined') {
            formData.canvon_fb_button_position          = appearanceSettings.position;
            formData.canvon_fb_button_size              = appearanceSettings.size;
            formData.canvon_fb_button_shape             = appearanceSettings.shape;
            formData.canvon_fb_button_color             = appearanceSettings.color;
            formData.canvon_fb_widget_icon              = appearanceSettings.widgetIcon;
            formData.canvon_fb_widget_icon_text         = appearanceSettings.widgetText;
            formData.canvon_fb_widget_icon_text_show    = appearanceSettings.widgetTextShow ? '1' : '0';
            <?php do_action( 'canvon_fb_preview_form_data_js' ); ?>
        }
        formData.action = 'canvon_fb_save_preview';
        formData.nonce  = '<?php echo esc_js( wp_create_nonce( 'canvon_fb_live_preview' ) ); ?>';
        $canvon_fb_btn.prop('disabled', true);
        $canvon_fb_msg.hide();
        $.post(
            '<?php echo esc_js( admin_url( 'admin-ajax.php' ) ); ?>',
            formData,
            function(res) {
                $canvon_fb_btn.prop('disabled', false);
                if (res.success && res.data.url) {
                    if (previewWin) {
                        previewWin.location.href = res.data.url;
                    } else {
                        // Tab was blocked — show fallback link
                        $canvon_fb_msg.html('<a href="' + res.data.url + '" target="_blank" style="color:#0D99FF;">→ Open preview</a>').show();
                    }
                } else {
                    if (previewWin) { previewWin.close(); }
                    $canvon_fb_msg.text('Error — try again.').show();
                }
            }
        ).fail(function() {
            $canvon_fb_btn.prop('disabled', false);
            if (previewWin) { previewWin.close(); }
            $canvon_fb_msg.text('Error — try again.').show();
        });
    });
});

<?php
wp_add_inline_script( 'canvon-fb-admin-script', ob_get_clean() );
?>
