<?php

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

$img     = isset( $seo['og_default_image'] ) ? (string) $seo['og_default_image'] : '';
$twitter = isset( $seo['twitter_user'] ) ? (string) $seo['twitter_user'] : '';
$urls    = ( isset( $seo['social_urls'] ) && is_array( $seo['social_urls'] ) ) ? $seo['social_urls'] : array();
?>
<div class="aieo-dmm-section">
	<h2><?php esc_html_e( 'Social', 'ai-eshop-optimizer' ); ?></h2>
	<p class="description" style="max-width:880px;">
		<?php esc_html_e( 'Defaults for social sharing: the fallback share image (used when a product/post has no image), your Twitter/X handle, and your social-profile URLs (emitted as Organization sameAs so Google links your brand to its profiles).', 'ai-eshop-optimizer' ); ?>
	</p>

	<div class="aieo-dmm-card">
		<table class="form-table">
			<tr>
				<th><?php esc_html_e( 'Default share image', 'ai-eshop-optimizer' ); ?></th>
				<td>
					<input type="url" id="aieo-soc-img" class="regular-text" style="width:60%;" value="<?php echo esc_attr( $img ); ?>" placeholder="https://…">
					<button type="button" class="button" id="aieo-soc-img-pick"><?php esc_html_e( 'Select image', 'ai-eshop-optimizer' ); ?></button>
					<div id="aieo-soc-img-preview" style="margin-top:6px;"><?php if ( '' !== $img ) : ?><img src="<?php echo esc_url( $img ); ?>" style="max-height:70px;border:1px solid #e2e8f0;"><?php endif; ?></div>
				</td>
			</tr>
			<tr>
				<th><label for="aieo-soc-twitter"><?php esc_html_e( 'Twitter / X handle', 'ai-eshop-optimizer' ); ?></label></th>
				<td><input type="text" id="aieo-soc-twitter" class="regular-text" value="<?php echo esc_attr( $twitter ); ?>" placeholder="@yourbrand"></td>
			</tr>
			<tr>
				<th><label for="aieo-soc-urls"><?php esc_html_e( 'Social profile URLs', 'ai-eshop-optimizer' ); ?></label></th>
				<td>
					<textarea id="aieo-soc-urls" class="large-text" rows="5" placeholder="https://facebook.com/…&#10;https://instagram.com/…"><?php echo esc_textarea( implode( "\n", array_map( 'strval', $urls ) ) ); ?></textarea>
					<p class="description"><?php esc_html_e( 'One URL per line.', 'ai-eshop-optimizer' ); ?></p>
				</td>
			</tr>
		</table>
		<p>
			<button type="button" class="button button-primary" id="aieo-soc-save"><?php esc_html_e( 'Save', 'ai-eshop-optimizer' ); ?></button>
			<span id="aieo-soc-status" style="margin-left:8px;font-size:12px;"></span>
		</p>
	</div>
</div>
<script>
(function(){
	var nonce = <?php echo wp_json_encode( $nonce ); ?>, ajax = <?php echo wp_json_encode( $ajax ); ?>;
	var imgField = document.getElementById('aieo-soc-img'), pick = document.getElementById('aieo-soc-img-pick');
	if (pick) {
		var frame;
		pick.addEventListener('click', function(e){
			e.preventDefault();
			// wp.media is enqueued at render and loads in the FOOTER, so check it
			// at click time — at parse time (when this inline script first runs)
			// it isn't defined yet, which is why the picker never opened before.
			if (!window.wp || !wp.media) { return; }
			if (frame) { frame.open(); return; }
			frame = wp.media({ title: 'Image', multiple: false, library: { type: 'image' } });
			frame.on('select', function(){
				var a = frame.state().get('selection').first().toJSON();
				imgField.value = a.url;
				document.getElementById('aieo-soc-img-preview').innerHTML = '<img src="' + a.url + '" style="max-height:70px;border:1px solid #e2e8f0;">';
			});
			frame.open();
		});
	}
	var save = document.getElementById('aieo-soc-save'), st = document.getElementById('aieo-soc-status');
	if (save) save.addEventListener('click', function(){
		save.disabled = true; st.style.color = '#64748b'; st.textContent = <?php echo wp_json_encode( __( 'Saving…', 'ai-eshop-optimizer' ) ); ?>;
		var fd = new FormData();
		fd.set('action', 'aieo_seo_save_social'); fd.set('nonce', nonce);
		fd.set('og_default_image', imgField ? imgField.value : '');
		fd.set('twitter_user', document.getElementById('aieo-soc-twitter').value);
		fd.set('social_urls', document.getElementById('aieo-soc-urls').value);
		fetch(ajax, { method:'POST', credentials:'same-origin', body: fd })
			.then(function(r){ return r.json(); })
			.then(function(j){ save.disabled = false; st.style.color = (j&&j.success)?'#15803d':'#b91c1c'; st.textContent = (j&&j.data&&j.data.message)||'Saved.'; })
			.catch(function(){ save.disabled = false; st.style.color = '#b91c1c'; st.textContent = 'Network error.'; });
	});
})();
</script>
