<?php
/**
 * Metabox Form View for Affiliate Cards (SaaS-Grade 2-Column Application Workspace).
 *
 * @package AffiStyle
 */

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

$affistyle_template_style = get_post_meta( $post->ID, '_affistyle_template_style', true );
if ( empty( $affistyle_template_style ) ) {
	$affistyle_template_style = get_post_meta( $post->ID, '_affistyle_style', true );
}
$affistyle_template_style = ! empty( $affistyle_template_style ) ? (string) $affistyle_template_style : '';

$affistyle_title_1     = get_post_meta( $post->ID, '_affistyle_title_1', true );
$affistyle_description = get_post_meta( $post->ID, '_affistyle_description', true );
$affistyle_destination = get_post_meta( $post->ID, '_affistyle_destination', true );
if ( empty( $affistyle_destination ) ) {
	$affistyle_destination = get_post_meta( $post->ID, '_affistyle_url_default', true );
}
$affistyle_button_text = get_post_meta( $post->ID, '_affistyle_button_text', true );
$affistyle_badge_text  = get_post_meta( $post->ID, '_affistyle_badge_text', true );
$affistyle_image_url   = get_post_meta( $post->ID, '_affistyle_image_1', true );
if ( empty( $affistyle_image_url ) ) {
	$affistyle_image_url = get_post_meta( $post->ID, '_affistyle_image_url', true );
}
$affistyle_pros    = get_post_meta( $post->ID, '_affistyle_pros', true );
$affistyle_cons    = get_post_meta( $post->ID, '_affistyle_cons', true );
$affistyle_price_1 = get_post_meta( $post->ID, '_affistyle_price_1', true );
if ( empty( $affistyle_price_1 ) ) {
	$affistyle_price_1 = get_post_meta( $post->ID, '_affistyle_price', true );
}
$affistyle_amazon_asin      = get_post_meta( $post->ID, '_affistyle_amazon_asin', true );
$affistyle_rating_score     = get_post_meta( $post->ID, '_affistyle_rating_score', true );
$affistyle_review_count     = get_post_meta( $post->ID, '_affistyle_review_count', true );
$affistyle_show_rating_meta = get_post_meta( $post->ID, '_affistyle_show_rating', true );
$affistyle_show_rating      = ( '' === $affistyle_show_rating_meta ) ? true : ( '1' === (string) $affistyle_show_rating_meta );

// Urgency & Compliance Meta.
$affistyle_original_price    = get_post_meta( $post->ID, '_affistyle_original_price', true );
$affistyle_deal_expiry       = get_post_meta( $post->ID, '_affistyle_deal_expiry', true );
$affistyle_amazon_compliance = get_post_meta( $post->ID, '_affistyle_amazon_compliance', true );

// Link attributes toggles.
$affistyle_new_tab_meta   = get_post_meta( $post->ID, '_affistyle_new_tab', true );
$affistyle_new_tab        = ( '' === $affistyle_new_tab_meta ) ? true : ( '1' === (string) $affistyle_new_tab_meta );
$affistyle_nofollow_meta  = get_post_meta( $post->ID, '_affistyle_nofollow', true );
$affistyle_nofollow       = ( '' === $affistyle_nofollow_meta ) ? true : ( '1' === (string) $affistyle_nofollow_meta );
$affistyle_sponsored_meta = get_post_meta( $post->ID, '_affistyle_sponsored', true );
$affistyle_sponsored      = ( '' === $affistyle_sponsored_meta ) ? true : ( '1' === (string) $affistyle_sponsored_meta );

// Secondary URL.
$affistyle_url_secondary    = get_post_meta( $post->ID, '_affistyle_url_secondary', true );
$affistyle_button_secondary = get_post_meta( $post->ID, '_affistyle_button_secondary', true );

// Presentation toggles.
$affistyle_show_price_meta = get_post_meta( $post->ID, '_affistyle_show_price', true );
$affistyle_show_price      = ( '' === $affistyle_show_price_meta ) ? true : ( '1' === (string) $affistyle_show_price_meta );

$affistyle_disclosure_text = get_post_meta( $post->ID, '_affistyle_disclosure_text', true );
if ( empty( $affistyle_disclosure_text ) && class_exists( 'AffiStyle_Compliance' ) ) {
	$affistyle_disclosure_text = AffiStyle_Compliance::get_default_disclosure_text();
}
$affistyle_show_disclosure_meta = get_post_meta( $post->ID, '_affistyle_show_disclosure', true );
$affistyle_show_disclosure      = ( '' === $affistyle_show_disclosure_meta ) ? true : ( '1' === (string) $affistyle_show_disclosure_meta );

// Financial intelligence.
$affistyle_earning_type    = get_post_meta( $post->ID, '_affistyle_earning_type', true );
$affistyle_commission_rate = get_post_meta( $post->ID, '_affistyle_commission_rate', true );
$affistyle_conversion_rate = get_post_meta( $post->ID, '_affistyle_conversion_rate', true );
$affistyle_estimated_epc   = get_post_meta( $post->ID, '_affistyle_estimated_epc', true );

if ( empty( $affistyle_earning_type ) ) {
	if ( '' !== $affistyle_estimated_epc && floatval( $affistyle_estimated_epc ) > 0 ) {
		$affistyle_earning_type = 'epc';
	} elseif ( '' !== $affistyle_commission_rate && floatval( $affistyle_commission_rate ) > 0 ) {
		$affistyle_earning_type = 'commission';
	} else {
		$affistyle_earning_type = 'none';
	}
}

if ( '' === $affistyle_conversion_rate ) {
	$affistyle_conversion_rate = '2.0';
}

$affistyle_raw_keywords = get_post_meta( $post->ID, '_affistyle_keywords', true );
if ( ! is_array( $affistyle_raw_keywords ) ) {
	$affistyle_raw_keywords = ! empty( $affistyle_raw_keywords ) ? explode( ',', (string) $affistyle_raw_keywords ) : array();
}
$affistyle_kw_0 = isset( $affistyle_raw_keywords[0] ) ? $affistyle_raw_keywords[0] : '';
$affistyle_kw_1 = isset( $affistyle_raw_keywords[1] ) ? $affistyle_raw_keywords[1] : '';
$affistyle_kw_2 = isset( $affistyle_raw_keywords[2] ) ? $affistyle_raw_keywords[2] : '';

$affistyle_bg_color  = get_post_meta( $post->ID, '_affistyle_bg_color', true );
$affistyle_btn_color = get_post_meta( $post->ID, '_affistyle_btn_color', true );

$affistyle_bg_color  = ! empty( $affistyle_bg_color ) ? $affistyle_bg_color : '#ffffff';
$affistyle_btn_color = ! empty( $affistyle_btn_color ) ? $affistyle_btn_color : '#2563eb';

$affistyle_ab_enabled = get_post_meta( $post->ID, '_affistyle_ab_enabled', true );

// Card headline display.
$affistyle_card_title_display = ! empty( $affistyle_title_1 ) ? $affistyle_title_1 : ( ! empty( $post->post_title ) ? $post->post_title : __( 'Add New Affiliate Card', 'affistyle' ) );

$affistyle_available_styles = function_exists( 'affistyle_get_available_styles' ) ? affistyle_get_available_styles() : array(
	'style-1' => __( 'Style 1 - Horizontal Showcase', 'affistyle' ),
	'style-2' => __( 'Style 2 - Vertical Minimalist', 'affistyle' ),
);
?>

<div class="affistyle-app-workspace" id="affistyle_builder_root">

	<!-- ================= 1. BRANDED APPLICATION TOP BAR ================= -->
	<?php
	$affistyle_active_tab  = 'builder';
	$affistyle_box_id      = $post->ID;
	$affistyle_header_view = AFFISTYLE_PATH . 'admin/views/app-header.php';
	if ( file_exists( $affistyle_header_view ) ) {
		include $affistyle_header_view;
	}
	?>

	<!-- ================= 2. CONTEXTUAL WORKSPACE SUB-HEADER ================= -->
	<div class="affistyle-sub-header">
		<div class="affistyle-sub-header-left">
			<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=affistyle_box' ) ); ?>" class="affistyle-back-link">
				<span class="dashicons dashicons-arrow-left-alt" aria-hidden="true"></span>
				<span><?php esc_html_e( 'Back to cards', 'affistyle' ); ?></span>
			</a>
			<div class="affistyle-title-crumb">
				<div role="heading" aria-level="1" class="affistyle-card-display-title" id="affistyle_display_title_heading">
					<?php echo esc_html( $affistyle_card_title_display ); ?>
				</div>
				<?php if ( ! empty( $affistyle_destination ) ) : ?>
					<div class="affistyle-dest-url-chip" id="affistyle_dest_chip" title="<?php echo esc_attr( $affistyle_destination ); ?>">
						<span class="dashicons dashicons-admin-links" aria-hidden="true"></span>
						<span class="affistyle-chip-text"><?php echo esc_html( $affistyle_destination ); ?></span>
						<button type="button" class="affistyle-chip-copy-btn" id="affistyle_chip_copy_btn" title="<?php esc_attr_e( 'Copy URL', 'affistyle' ); ?>">
							<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
						</button>
					</div>
				<?php endif; ?>
			</div>
		</div>
		<div class="affistyle-sub-header-right">
			<button type="button" class="affistyle-btn affistyle-btn-outline" id="affistyle_toggle_grabber_btn">
				<span class="dashicons dashicons-superhero-alt" aria-hidden="true"></span>
				<span><?php esc_html_e( 'Auto-Fill from Amazon', 'affistyle' ); ?></span>
			</button>
			<button type="button" class="affistyle-btn affistyle-btn-primary affistyle-save-changes-btn">
				<span class="dashicons dashicons-saved" aria-hidden="true"></span>
				<span><?php esc_html_e( 'Save Changes', 'affistyle' ); ?></span>
			</button>
		</div>
	</div>

	<!-- ================= 3. QUICK-FILL AMAZON PRODUCT DRAWER ================= -->
	<div class="affistyle-quick-fill-drawer" id="affistyle_quick_fill_drawer">
		<div class="affistyle-quick-fill-content">
			<div class="affistyle-quick-fill-badge">
				<span class="dashicons dashicons-superhero-alt"></span>
				<strong><?php esc_html_e( 'Amazon 1-Click Auto-Fill', 'affistyle' ); ?></strong>
			</div>
			<p class="description" style="margin: 0 0 10px;">
				<?php esc_html_e( 'Paste any Amazon product or deal URL to automatically extract and populate the product title, image, price, and affiliate destination link.', 'affistyle' ); ?>
			</p>
			<div class="affistyle-quick-fill-row">
				<input type="url" id="affistyle_quick_amazon_url" class="affistyle-input"
					placeholder="<?php esc_attr_e( 'https://www.amazon.com/dp/B08N5WRWNW or https://amzn.to/...', 'affistyle' ); ?>" />
				<button type="button" class="affistyle-btn affistyle-btn-primary" id="affistyle_fetch_amazon_btn">
					<span class="dashicons dashicons-download" aria-hidden="true"></span>
					<span><?php esc_html_e( 'Auto-Fill Details', 'affistyle' ); ?></span>
				</button>
			</div>
			<div id="affistyle_quick_fill_status" class="affistyle-quick-fill-status" style="display: none;"></div>
			<input type="hidden" id="affistyle_amazon_asin" name="affistyle_amazon_asin" value="<?php echo esc_attr( $affistyle_amazon_asin ); ?>" />
		</div>
	</div>

	<!-- ================= 4. MAIN 2-COLUMN WORKSPACE GRID ================= -->
	<div class="affistyle-workspace-grid">

		<!-- ================= LEFT COLUMN: OFFER & LINK CONTROLS ================= -->
		<div class="affistyle-col-left">

			<!-- Panel Card 1: Core Link Details -->
			<section class="affistyle-panel-card" aria-labelledby="affistyle_section_link_title">
				<div class="affistyle-panel-card-header">
					<div class="affistyle-panel-title-wrap">
						<div class="affistyle-panel-icon-wrap">
							<span class="dashicons dashicons-admin-links" aria-hidden="true"></span>
						</div>
						<div>
							<h3 id="affistyle_section_link_title" class="affistyle-panel-title">
								<?php esc_html_e( 'Offer & Destination Details', 'affistyle' ); ?>
							</h3>
							<p class="affistyle-panel-desc">
								<?php esc_html_e( 'Configure the core affiliate product title, destination redirect, and CTA button.', 'affistyle' ); ?>
							</p>
						</div>
					</div>
				</div>

				<div class="affistyle-panel-card-body">

					<!-- Card Name / Title -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_title_1" class="affistyle-label">
								<?php esc_html_e( 'Product Name / Headline', 'affistyle' ); ?>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'The prominent name displayed across your affiliate cards and sitewide hover popovers.', 'affistyle' ); ?>">ℹ</span>
						</div>
						<input type="text" id="affistyle_title_1" name="affistyle_title_1" class="affistyle-input"
							value="<?php echo esc_attr( $affistyle_title_1 ); ?>"
							placeholder="<?php esc_attr_e( 'e.g. Sony WH-1000XM5 Wireless Headphones', 'affistyle' ); ?>" />
					</div>

					<!-- Primary Destination URL -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_destination" class="affistyle-label">
								<?php esc_html_e( 'Primary Destination URL', 'affistyle' ); ?> <span class="affistyle-req">*</span>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Your direct affiliate tracking link or merchant product URL. AffiStyle automatically cloaks and tracks clicks on this URL.', 'affistyle' ); ?>">ℹ</span>
						</div>
						<div class="affistyle-input-affix-wrap">
							<input type="url" id="affistyle_destination" name="affistyle_destination" class="affistyle-input"
								value="<?php echo esc_url( $affistyle_destination ); ?>"
								placeholder="https://www.amazon.com/dp/... or https://partner.com/deal"
								required />
						</div>
					</div>

					<!-- Primary Button Text -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_button_text" class="affistyle-label">
								<?php esc_html_e( 'Primary Button Text', 'affistyle' ); ?>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Call-to-action text displayed on the main purchase button (e.g. Check Price on Amazon, Buy Now, Claim Deal).', 'affistyle' ); ?>">ℹ</span>
						</div>
						<input type="text" id="affistyle_button_text" name="affistyle_button_text" class="affistyle-input"
							value="<?php echo esc_attr( $affistyle_button_text ); ?>"
							placeholder="<?php esc_attr_e( 'Claim Deal', 'affistyle' ); ?>" />
					</div>

					<!-- Link Attributes Toggles (iOS Pill Switches) -->
					<div class="affistyle-switches-block">
						<div class="affistyle-switch-row">
							<div class="affistyle-switch-meta">
								<span class="affistyle-switch-label"><?php esc_html_e( 'Open in New Window / Tab', 'affistyle' ); ?></span>
								<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Appends target="_blank" so visitors stay on your website when clicking through.', 'affistyle' ); ?>">ℹ</span>
							</div>
							<label class="affistyle-switch">
								<input type="checkbox" id="affistyle_new_tab" name="affistyle_new_tab" value="1" <?php checked( $affistyle_new_tab, true ); ?> />
								<span class="affistyle-slider"></span>
							</label>
						</div>

						<div class="affistyle-switch-row">
							<div class="affistyle-switch-meta">
								<span class="affistyle-switch-label"><?php esc_html_e( 'Add NoFollow Attribute', 'affistyle' ); ?></span>
								<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Appends rel="nofollow" to safeguard your search rankings and pass Google SEO guidelines.', 'affistyle' ); ?>">ℹ</span>
							</div>
							<label class="affistyle-switch">
								<input type="checkbox" id="affistyle_nofollow" name="affistyle_nofollow" value="1" <?php checked( $affistyle_nofollow, true ); ?> />
								<span class="affistyle-slider"></span>
							</label>
						</div>

						<div class="affistyle-switch-row">
							<div class="affistyle-switch-meta">
								<span class="affistyle-switch-label"><?php esc_html_e( 'Add Sponsored / NoIndex', 'affistyle' ); ?></span>
								<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Appends rel="sponsored" to outbound affiliate links and displays the visible SPONSORED compliance tag on the card.', 'affistyle' ); ?>">ℹ</span>
							</div>
							<label class="affistyle-switch">
								<input type="checkbox" id="affistyle_sponsored" name="affistyle_sponsored" value="1" <?php checked( $affistyle_sponsored, true ); ?> />
								<span class="affistyle-slider"></span>
							</label>
						</div>
					</div>


				</div>
			</section>

			<!-- Panel Card 2: Appearance & Presentation Settings -->
			<section class="affistyle-panel-card" aria-labelledby="affistyle_section_display_title">
				<div class="affistyle-panel-card-header">
					<div class="affistyle-panel-title-wrap">
						<div class="affistyle-panel-icon-wrap" style="background: #fdf2f8; color: #db2777;">
							<span class="dashicons dashicons-art" aria-hidden="true"></span>
						</div>
						<div>
							<h3 id="affistyle_section_display_title" class="affistyle-panel-title">
								<?php esc_html_e( 'Appearance & Presentation Settings', 'affistyle' ); ?>
							</h3>
							<p class="affistyle-panel-desc">
								<?php esc_html_e( 'Customize card template styles, thumbnail media, pricing display, badge text, and FTC compliance.', 'affistyle' ); ?>
							</p>
						</div>
					</div>
				</div>

				<div class="affistyle-panel-card-body">

					<!-- Template Style Dropdown -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_template_style" class="affistyle-label">
								<?php esc_html_e( 'Display Template Style', 'affistyle' ); ?>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Choose between Horizontal Showcase, Vertical Minimalist, or Pro styles.', 'affistyle' ); ?>">ℹ</span>
						</div>
						<select id="affistyle_template_style" name="affistyle_template_style" class="affistyle-select">
							<option value="" <?php selected( empty( $affistyle_template_style ), true ); ?>>
								<?php esc_html_e( '— Select Template Style —', 'affistyle' ); ?>
							</option>
							<?php foreach ( $affistyle_available_styles as $affistyle_s_key => $affistyle_s_data ) : ?>
								<?php
								$affistyle_s_label = is_array( $affistyle_s_data ) && isset( $affistyle_s_data['label'] ) ? $affistyle_s_data['label'] : (string) $affistyle_s_data;
								?>
								<option value="<?php echo esc_attr( $affistyle_s_key ); ?>" <?php selected( $affistyle_template_style, $affistyle_s_key ); ?>>
									<?php echo esc_html( $affistyle_s_label ); ?>
								</option>
							<?php endforeach; ?>
							<?php if ( ! empty( $affistyle_template_style ) && ! isset( $affistyle_available_styles[ $affistyle_template_style ] ) ) : ?>
								<option value="<?php echo esc_attr( $affistyle_template_style ); ?>" selected="selected">
									<?php echo esc_html( ucfirst( str_replace( '-', ' ', $affistyle_template_style ) ) ); ?>
								</option>
							<?php endif; ?>
							<?php do_action( 'affistyle_style_options', $affistyle_template_style ); ?>
						</select>
					</div>

					<!-- Product Image Media Uploader -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_image_url" class="affistyle-label">
								<?php esc_html_e( 'Product Image URL', 'affistyle' ); ?>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Direct image URL or selected from WordPress Media Library.', 'affistyle' ); ?>">ℹ</span>
						</div>
						<div class="affistyle-image-input-wrap">
							<input type="url" id="affistyle_image_url" name="affistyle_image_1" class="affistyle-input"
								value="<?php echo esc_url( $affistyle_image_url ); ?>"
								placeholder="<?php esc_attr_e( 'https://... or choose media', 'affistyle' ); ?>" />
							<button type="button" class="affistyle-btn affistyle-btn-outline" id="affistyle_upload_image_btn">
								<span class="dashicons dashicons-format-image" aria-hidden="true"></span>
								<span><?php esc_html_e( 'Choose Media', 'affistyle' ); ?></span>
							</button>
							<button type="button" class="affistyle-btn affistyle-btn-outline" id="affistyle_refresh_image_btn" title="<?php esc_attr_e( 'Refresh preview', 'affistyle' ); ?>">
								<span class="dashicons dashicons-update" aria-hidden="true"></span>
							</button>
						</div>
						<div id="affistyle_image_preview_container" class="affistyle-thumb-preview-box">
							<?php if ( ! empty( $affistyle_image_url ) ) : ?>
								<img src="<?php echo esc_url( $affistyle_image_url ); ?>" alt="<?php esc_attr_e( 'Product Thumbnail', 'affistyle' ); ?>" />
							<?php else : ?>
								<span class="dashicons dashicons-format-image affistyle-thumb-placeholder"></span>
							<?php endif; ?>
						</div>
						<button type="button" class="affistyle-btn-link-danger" id="affistyle_remove_image_btn" style="<?php echo empty( $affistyle_image_url ) ? 'display: none;' : ''; ?>">
							<?php esc_html_e( 'Remove Image', 'affistyle' ); ?>
						</button>
					</div>

					<!-- Badge Text & Price in a Row -->
					<div class="affistyle-form-row">
						<div class="affistyle-form-group affistyle-col-half">
							<div class="affistyle-label-row">
								<label for="affistyle_badge_text" class="affistyle-label">
									<?php esc_html_e( 'Badge Text', 'affistyle' ); ?>
								</label>
								<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'High-contrast tag placed on the card (e.g. Best Value, Top Pick, Editor\'s Choice).', 'affistyle' ); ?>">ℹ</span>
							</div>
							<input type="text" id="affistyle_badge_text" name="affistyle_badge_text" class="affistyle-input"
								value="<?php echo esc_attr( $affistyle_badge_text ); ?>"
								placeholder="<?php esc_attr_e( 'Top Pick', 'affistyle' ); ?>" />
						</div>

						<div class="affistyle-form-group affistyle-col-half">
							<div class="affistyle-label-row">
								<label for="affistyle_price_1" class="affistyle-label">
									<?php esc_html_e( 'Product Price', 'affistyle' ); ?>
								</label>
								<div class="affistyle-inline-toggle">
									<label class="affistyle-switch affistyle-switch-sm" title="<?php esc_attr_e( 'Toggle price display', 'affistyle' ); ?>">
										<input type="checkbox" id="affistyle_show_price" name="affistyle_show_price" value="1" <?php checked( $affistyle_show_price, true ); ?> />
										<span class="affistyle-slider"></span>
									</label>
								</div>
							</div>
							<input type="text" id="affistyle_price_1" name="affistyle_price_1" class="affistyle-input"
								value="<?php echo esc_attr( $affistyle_price_1 ); ?>"
								placeholder="<?php esc_attr_e( '$398.00', 'affistyle' ); ?>" />
						</div>
					</div>

					<?php do_action( 'affistyle_after_price_fields', $post ); ?>

					<!-- Star Rating & Review Count -->
					<div class="affistyle-form-row">
						<div class="affistyle-form-group affistyle-col-half">
							<div class="affistyle-label-row">
								<label for="affistyle_rating_score" class="affistyle-label">
									<?php esc_html_e( 'Rating Score (0 - 5)', 'affistyle' ); ?>
								</label>
								<div class="affistyle-inline-toggle">
									<label class="affistyle-switch affistyle-switch-sm" title="<?php esc_attr_e( 'Toggle star rating display', 'affistyle' ); ?>">
										<input type="checkbox" id="affistyle_show_rating" name="affistyle_show_rating" value="1" <?php checked( $affistyle_show_rating, true ); ?> />
										<span class="affistyle-slider"></span>
									</label>
								</div>
							</div>
							<input type="number" step="0.1" min="0" max="5" id="affistyle_rating_score" name="affistyle_rating_score" class="affistyle-input"
								value="<?php echo esc_attr( $affistyle_rating_score ); ?>"
								placeholder="4.8" />
						</div>

						<div class="affistyle-form-group affistyle-col-half">
							<div class="affistyle-label-row">
								<label for="affistyle_review_count" class="affistyle-label">
									<?php esc_html_e( 'Review Count Text', 'affistyle' ); ?>
								</label>
							</div>
							<input type="text" id="affistyle_review_count" name="affistyle_review_count" class="affistyle-input"
								value="<?php echo esc_attr( $affistyle_review_count ); ?>"
								placeholder="<?php esc_attr_e( '1,240 reviews', 'affistyle' ); ?>" />
						</div>
					</div>

					<!-- Description / Product Summary -->
					<div class="affistyle-form-group">
						<div class="affistyle-label-row">
							<label for="affistyle_description" class="affistyle-label">
								<?php esc_html_e( 'Product Description / Summary', 'affistyle' ); ?>
							</label>
							<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'A concise review snippet or product highlight text rendered inside the card.', 'affistyle' ); ?>">ℹ</span>
						</div>
						<textarea id="affistyle_description" name="affistyle_description" rows="3" class="affistyle-textarea"
							placeholder="<?php esc_attr_e( 'Enter a short review or key product highlights...', 'affistyle' ); ?>"><?php echo esc_textarea( $affistyle_description ); ?></textarea>
					</div>

					<!-- Pros and Cons -->
					<details class="affistyle-details-card">
						<summary class="affistyle-details-summary">
							<span class="affistyle-details-icon-wrap" style="background: #ecfdf5; color: #059669;">
								<span class="dashicons dashicons-thumbs-up" aria-hidden="true"></span>
							</span>
							<span><?php esc_html_e( 'Pros & Cons Bullet Points (Optional)', 'affistyle' ); ?></span>
						</summary>
						<div class="affistyle-details-content">
							<div class="affistyle-form-group">
								<label for="affistyle_pros" class="affistyle-label"><?php esc_html_e( 'Pros (One per line)', 'affistyle' ); ?></label>
								<textarea id="affistyle_pros" name="affistyle_pros" rows="3" class="affistyle-textarea"
									placeholder="<?php esc_attr_e( "Superior active noise cancellation\nUltra-comfortable fit\n30-hour battery life", 'affistyle' ); ?>"><?php echo esc_textarea( $affistyle_pros ); ?></textarea>
							</div>
							<div class="affistyle-form-group">
								<label for="affistyle_cons" class="affistyle-label"><?php esc_html_e( 'Cons (One per line)', 'affistyle' ); ?></label>
								<textarea id="affistyle_cons" name="affistyle_cons" rows="3" class="affistyle-textarea"
									placeholder="<?php esc_attr_e( "Does not fold into compact ball\nPremium price point", 'affistyle' ); ?>"><?php echo esc_textarea( $affistyle_cons ); ?></textarea>
							</div>
						</div>
					</details>

					<!-- Color Styling Overrides -->
					<div class="affistyle-form-row">
						<div class="affistyle-form-group affistyle-col-half">
							<label for="affistyle_bg_color" class="affistyle-label"><?php esc_html_e( 'Card Background', 'affistyle' ); ?></label>
							<input type="color" id="affistyle_bg_color" name="affistyle_bg_color" class="affistyle-color-input"
								value="<?php echo esc_attr( $affistyle_bg_color ); ?>" />
						</div>
						<div class="affistyle-form-group affistyle-col-half">
							<label for="affistyle_btn_color" class="affistyle-label"><?php esc_html_e( 'Button Color', 'affistyle' ); ?></label>
							<input type="color" id="affistyle_btn_color" name="affistyle_btn_color" class="affistyle-color-input"
								value="<?php echo esc_attr( $affistyle_btn_color ); ?>" />
						</div>
					</div>

				</div>
			</section>

			<!-- Panel Card 3: Auto-Monetization & Intelligence -->
			<section class="affistyle-panel-card" aria-labelledby="affistyle_section_intel_title">
				<div class="affistyle-panel-card-header">
					<div class="affistyle-panel-title-wrap">
						<div class="affistyle-panel-icon-wrap" style="background: #eef2ff; color: #4f46e5;">
							<span class="dashicons dashicons-lightbulb" aria-hidden="true"></span>
						</div>
						<div>
							<h3 id="affistyle_section_intel_title" class="affistyle-panel-title">
								<?php esc_html_e( 'Sitewide Auto-Monetization Keywords', 'affistyle' ); ?>
							</h3>
							<p class="affistyle-panel-desc">
								<?php esc_html_e( 'Define high-intent keywords that automatically turn into monetized links and hover cards across your blog posts.', 'affistyle' ); ?>
							</p>
						</div>
					</div>
				</div>

				<div class="affistyle-panel-card-body">
					<?php if ( has_action( 'affistyle_metabox_keywords_field' ) ) : ?>
						<?php do_action( 'affistyle_metabox_keywords_field', $post, $affistyle_raw_keywords ); ?>
					<?php else : ?>
						<div class="affistyle-form-group">
							<div class="affistyle-label-row">
								<label for="affistyle_keywords_input" class="affistyle-label">
									<?php esc_html_e( 'Target Keywords (One per line or comma-separated)', 'affistyle' ); ?>
								</label>
								<span class="affistyle-info-tooltip" title="<?php esc_attr_e( 'Enter high-intent keywords that will automatically link to this card across your blog posts. You can add as many keywords as you want.', 'affistyle' ); ?>">ℹ</span>
							</div>
							<textarea id="affistyle_keywords_input" name="affistyle_keywords" class="affistyle-textarea" rows="4" placeholder="<?php esc_attr_e( "Sony WH-1000XM5\nSony noise cancelling headphones\nbest wireless ANC headphones", 'affistyle' ); ?>"><?php echo esc_textarea( implode( "\n", $affistyle_raw_keywords ) ); ?></textarea>
							<p class="description" style="margin-top: 6px; font-size: 12px; color: #64748b;">
								<?php esc_html_e( 'Add unlimited keywords. When any of these keywords appear in your articles, they are automatically converted into cloaked affiliate links pointing to this offer.', 'affistyle' ); ?>
							</p>
						</div>
					<?php endif; ?>

					<!-- Financial Intelligence / EPC Controls -->
					<details class="affistyle-details-card">
						<summary class="affistyle-details-summary">
							<span class="affistyle-details-icon-wrap" style="background: #eef2ff; color: #4f46e5;">
								<span class="dashicons dashicons-chart-line" aria-hidden="true"></span>
							</span>
							<span><?php esc_html_e( 'Financial Intelligence & EPC Projections (Optional)', 'affistyle' ); ?></span>
						</summary>
						<div class="affistyle-details-content">
							<p class="description" style="margin: 0 0 12px;">
								<?php esc_html_e( 'Configure your estimated commission or per-click earnings to unlock revenue velocity metrics and top card ROI analysis in your Analytics hub.', 'affistyle' ); ?>
							</p>
							<div class="affistyle-form-group">
								<label for="affistyle_earning_type" class="affistyle-label"><?php esc_html_e( 'Earning Model', 'affistyle' ); ?></label>
								<select id="affistyle_earning_type" name="affistyle_earning_type" class="affistyle-select">
									<option value="none" <?php selected( $affistyle_earning_type, 'none' ); ?>><?php esc_html_e( 'None (Track Clicks Only)', 'affistyle' ); ?></option>
									<option value="commission" <?php selected( $affistyle_earning_type, 'commission' ); ?>><?php esc_html_e( 'Commission Rate (%) from Product Price', 'affistyle' ); ?></option>
									<option value="epc" <?php selected( $affistyle_earning_type, 'epc' ); ?>><?php esc_html_e( 'Direct Fixed Earnings Per Click (EPC)', 'affistyle' ); ?></option>
								</select>
							</div>

							<div class="affistyle-earnings-fields" id="affistyle_earnings_fields_wrap">
								<div class="affistyle-form-row">
									<div class="affistyle-form-group affistyle-col-half">
										<label for="affistyle_commission_rate" class="affistyle-label"><?php esc_html_e( 'Commission Rate (%)', 'affistyle' ); ?></label>
										<input type="number" step="0.1" min="0" max="100" id="affistyle_commission_rate" name="affistyle_commission_rate" class="affistyle-input"
											value="<?php echo esc_attr( $affistyle_commission_rate ); ?>" placeholder="4.0" />
									</div>
									<div class="affistyle-form-group affistyle-col-half">
										<label for="affistyle_conversion_rate" class="affistyle-label"><?php esc_html_e( 'Conversion Rate (%)', 'affistyle' ); ?></label>
										<input type="number" step="0.1" min="0" max="100" id="affistyle_conversion_rate" name="affistyle_conversion_rate" class="affistyle-input"
											value="<?php echo esc_attr( $affistyle_conversion_rate ); ?>" placeholder="2.0" />
									</div>
								</div>
								<div class="affistyle-form-group">
									<label for="affistyle_estimated_epc" class="affistyle-label"><?php esc_html_e( 'Direct Estimated EPC ($)', 'affistyle' ); ?></label>
									<input type="number" step="0.01" min="0" id="affistyle_estimated_epc" name="affistyle_estimated_epc" class="affistyle-input"
										value="<?php echo esc_attr( $affistyle_estimated_epc ); ?>" placeholder="0.25" />
								</div>
								<div class="affistyle-epc-preview-pill" id="affistyle_epc_preview_pill" style="display: none;">
									<span class="dashicons dashicons-chart-line" style="font-size: 14px; width: 14px; height: 14px;"></span>
									<span id="affistyle_epc_preview_text"><?php esc_html_e( 'Derived Effective EPC: $0.00', 'affistyle' ); ?></span>
								</div>
							</div>
						</div>
					</details>

				</div>
			</section>

			<!-- Pro Peer Sections -->
			<?php do_action( 'affistyle_metabox_geo_fields', $post ); ?>
			<?php do_action( 'affistyle_after_metabox_fields', $post ); ?>

		</div><!-- /.affistyle-col-left -->

		<!-- ================= RIGHT COLUMN: LIVE PREVIEW & PRESENTATION ================= -->
		<div class="affistyle-col-right">

			<!-- Persistent Live Preview Stage -->
			<div class="affistyle-preview-dock-card">
				<div class="affistyle-preview-dock-header">
					<div class="affistyle-preview-meta">
						<span class="affistyle-live-pulse-dot" title="<?php esc_attr_e( 'Live preview synced', 'affistyle' ); ?>"></span>
						<strong class="affistyle-preview-title"><?php esc_html_e( 'Live Preview', 'affistyle' ); ?></strong>
						<span id="affistyle_live_style_badge" class="affistyle-style-badge">
							<?php
							if ( ! empty( $affistyle_template_style ) ) {
								$affistyle_initial_label = isset( $affistyle_available_styles[ $affistyle_template_style ] )
									? ( is_array( $affistyle_available_styles[ $affistyle_template_style ] ) && isset( $affistyle_available_styles[ $affistyle_template_style ]['label'] ) ? $affistyle_available_styles[ $affistyle_template_style ]['label'] : $affistyle_available_styles[ $affistyle_template_style ] )
									: strtoupper( str_replace( '-', ' ', $affistyle_template_style ) );
							} else {
								$affistyle_initial_label = __( 'Select Style', 'affistyle' );
							}
							echo esc_html( $affistyle_initial_label );
							?>
						</span>
					</div>
					<!-- Variant A / Variant B Switcher Tabs for Live Preview -->
					<div class="affistyle-ab-preview-tabs" id="affistyle_ab_preview_tabs" style="display: <?php echo ( '1' === (string) $affistyle_ab_enabled ) ? 'inline-flex' : 'none'; ?>;">
						<button type="button" class="affistyle-ab-tab-btn active" data-variant="A" title="<?php esc_attr_e( 'Preview Variant A (Default)', 'affistyle' ); ?>">
							<?php esc_html_e( 'Variant A', 'affistyle' ); ?>
						</button>
						<button type="button" class="affistyle-ab-tab-btn" data-variant="B" title="<?php esc_attr_e( 'Preview Variant B (Challenger)', 'affistyle' ); ?>">
							<?php esc_html_e( 'Variant B ⚔️', 'affistyle' ); ?>
						</button>
					</div>
					<div class="affistyle-viewport-toggles" role="radiogroup" aria-label="<?php esc_attr_e( 'Device Viewport', 'affistyle' ); ?>">
						<button type="button" class="affistyle-vp-btn active" data-vp="desktop" title="<?php esc_attr_e( 'Desktop View', 'affistyle' ); ?>">
							<span class="dashicons dashicons-desktop"></span>
						</button>
						<button type="button" class="affistyle-vp-btn" data-vp="tablet" title="<?php esc_attr_e( 'Tablet View (580px)', 'affistyle' ); ?>">
							<span class="dashicons dashicons-tablet"></span>
						</button>
						<button type="button" class="affistyle-vp-btn" data-vp="mobile" title="<?php esc_attr_e( 'Mobile View (360px)', 'affistyle' ); ?>">
							<span class="dashicons dashicons-smartphone"></span>
						</button>
					</div>
				</div>

				<div class="affistyle-preview-canvas-stage" id="affistyle_live_preview_stage">
					<div id="affistyle_live_viewport_wrapper" class="affistyle-viewport-wrapper vp-desktop">
						<div id="affistyle_live_preview_canvas" class="affistyle-preview-canvas">
							<div class="affistyle-preview-placeholder">
								<span class="dashicons dashicons-update affistyle-spin"></span>
								<p><?php esc_html_e( 'Rendering affiliate card live preview...', 'affistyle' ); ?></p>
							</div>
						</div>
					</div>
					<div id="affistyle_live_preview_loader" class="affistyle-preview-loader" style="display: none;">
						<span class="dashicons dashicons-update affistyle-spin"></span>
					</div>
				</div>

				<div class="affistyle-preview-dock-footer">
					<span class="affistyle-preview-hint">
						<span class="dashicons dashicons-info-outline"></span>
						<?php esc_html_e( 'Updates in real time as you adjust offer and display settings.', 'affistyle' ); ?>
					</span>
					<span class="affistyle-scale-pill" id="affistyle_preview_scale_pill" style="display: none;">
						<?php esc_html_e( 'Auto-Fit', 'affistyle' ); ?>
					</span>
			</div><!-- /.affistyle-preview-dock-card -->

		</div><!-- /.affistyle-col-right -->

	</div><!-- /.affistyle-workspace-grid -->

	<!-- ================= 5. STICKY BOTTOM ACTION BAR ================= -->
	<footer class="affistyle-bottom-action-bar" role="contentinfo">
		<div class="affistyle-bar-left">
			<a href="<?php echo esc_url( get_delete_post_link( $post->ID ) ); ?>" class="affistyle-delete-card-link" id="affistyle_delete_card_btn">
				<span class="dashicons dashicons-trash" aria-hidden="true"></span>
				<span><?php esc_html_e( 'Delete This Card', 'affistyle' ); ?></span>
			</a>
		</div>
		<div class="affistyle-bar-center">
			<div class="affistyle-shortcode-pill-row">
				<span class="affistyle-shortcode-label"><?php esc_html_e( 'Shortcode:', 'affistyle' ); ?></span>
				<code class="affistyle-shortcode-snippet">[affistyle id="<?php echo esc_attr( $post->ID ); ?>"]</code>
				<button type="button" class="affistyle-btn affistyle-btn-outline-sm affistyle-copy-shortcode-btn" data-target="affistyle_bottom_shortcode_field">
					<span class="dashicons dashicons-admin-page" aria-hidden="true"></span>
					<span><?php esc_html_e( 'Copy', 'affistyle' ); ?></span>
				</button>
				<input type="hidden" id="affistyle_bottom_shortcode_field" value="<?php echo esc_attr( '[affistyle id="' . $post->ID . '"]' ); ?>" />
			</div>
		</div>
		<div class="affistyle-bar-right">
			<button type="button" class="affistyle-btn affistyle-btn-primary affistyle-save-changes-btn" id="affistyle_main_save_btn">
				<span class="dashicons dashicons-saved" aria-hidden="true"></span>
				<span><?php esc_html_e( 'Save Changes', 'affistyle' ); ?></span>
			</button>
		</div>
	</footer>

	<!-- Hidden WordPress Post Submission Controls -->
	<input type="hidden" name="post_status" value="<?php echo esc_attr( ( 'publish' === $post->post_status || empty( $post->post_status ) || 'auto-draft' === $post->post_status ) ? 'publish' : $post->post_status ); ?>" id="affistyle_post_status" />
	<input type="submit" name="publish" id="affistyle_hidden_publish_btn" value="<?php esc_attr_e( 'Save Changes', 'affistyle' ); ?>" style="display: none;" />

</div><!-- /.affistyle-app-workspace -->