<?php
/**
 * Admin integration template for Ask Any plugin
 *
 * This template displays the integration management interface with:
 * - WooCommerce integration toggle
 * - Slack integration setup
 * - Telegram integration (coming soon)
 * - WhatsApp integration (coming soon)
 *
 * @package Askany
 * @since 1.0.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap">
	<h1><?php esc_html_e( 'Integration', 'askany' ); ?></h1>
	<p class="description"><?php esc_html_e( 'Connect Askany with your favorite tools and platforms to enhance your chat experience.', 'askany' ); ?></p>
	
	<div class="askany-integration-container">
		<div class="askany-integration-grid">
			
			<!-- WooCommerce Integration -->
			<div class="askany-integration-card <?php echo ! empty( $settings['woocommerce_enabled'] ) ? 'active' : ''; ?>">
				<div class="askany-integration-header">
					<div class="askany-integration-icon woocommerce">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
							<path d="M23.5 9.5c0-.8-.7-1.5-1.5-1.5h-3.8L16.5 3c-.3-.6-1-.8-1.6-.5s-.8 1-.5 1.6l1.4 2.9H8.2L9.6 4c.3-.6.1-1.3-.5-1.6s-1.3-.1-1.6.5L5.8 8H2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h.8l1.6 8c.1.7.7 1.2 1.4 1.2h12.4c.7 0 1.3-.5 1.4-1.2l1.6-8h.8c.8 0 1.5-.7 1.5-1.5zM18.1 11l-1.4 7H7.3l-1.4-7h12.2z"/>
						</svg>
					</div>
					<div class="askany-integration-info">
						<h3><?php esc_html_e( 'WooCommerce', 'askany' ); ?></h3>
						<p><?php esc_html_e( 'AI assistance for WooCommerce product queries and order tracking.', 'askany' ); ?></p>
					</div>
					<div class="askany-integration-status">
						<label class="askany-switch">
							<input type="checkbox" id="woocommerce_enabled" name="woocommerce_enabled" value="1" 
								<?php checked( ! empty( $settings['woocommerce_enabled'] ) ); ?> />
							<span class="askany-slider"></span>
						</label>
					</div>
				</div>
				<div class="askany-integration-description">
					<p><?php esc_html_e( 'Enable AI-powered order tracking and product information. Customers can check their order status by providing email, order ID, or transaction ID.', 'askany' ); ?></p>
					
					<div class="askany-woocommerce-settings" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; <?php echo empty( $settings['woocommerce_enabled'] ) ? 'display: none;' : ''; ?>">
						<h4 style="margin: 0 0 10px 0; font-size: 14px;"><?php esc_html_e( 'Order Tracking Settings', 'askany' ); ?></h4>
						
						<div class="woo-tracker-parent">
							<label style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer;">
								<input type="checkbox" id="woocommerce_order_tracking" name="woocommerce_order_tracking" value="1" 
									style="margin: 0; flex-shrink: 0;"
									<?php checked( ! empty( $settings['woocommerce_order_tracking'] ) ); ?> />
								<span style="font-size: 13px; line-height: 1;"><?php esc_html_e( 'Enable Order Status Tracking', 'askany' ); ?></span>
							</label>
						</div>
						
						<p class="description" style="margin: 5px 0 10px 0; font-size: 12px;">
							<?php esc_html_e( 'Allow customers to check their order status through the chat by providing their email, order ID, or transaction ID.', 'askany' ); ?>
						</p>
						
						<button type="button" class="button button-primary" id="save-woocommerce-settings">
							<?php esc_html_e( 'Save Settings', 'askany' ); ?>
						</button>
					</div>
				</div>
			</div>

			<!-- Slack Integration -->
			<div class="askany-integration-card">
				<div class="askany-integration-header">
					<div class="askany-integration-icon slack">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
							<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
						</svg>
					</div>
					<div class="askany-integration-info">
						<h3><?php esc_html_e( 'Slack', 'askany' ); ?></h3>
						<p><?php esc_html_e( 'Get real-time chat notifications and send messages to your Slack workspace.', 'askany' ); ?></p>
					</div>
					<div class="askany-integration-actions">
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=askany-integration&integration=slack' ) ); ?>" class="button button-primary">
							<?php esc_html_e( 'Configure', 'askany' ); ?>
						</a>
					</div>
				</div>
				<div class="askany-integration-description">
					<p><?php esc_html_e( 'Receive notifications when users send messages and optionally forward agent and AI responses to Slack.', 'askany' ); ?></p>
				</div>
			</div>

			<!-- Telegram Integration (Coming Soon) -->
			<div class="askany-integration-card coming-soon">
				<div class="askany-integration-header">
					<div class="askany-integration-icon telegram">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
							<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
						</svg>
					</div>
					<div class="askany-integration-info">
						<h3><?php esc_html_e( 'Telegram', 'askany' ); ?></h3>
						<p><?php esc_html_e( 'Connect your chat to Telegram for seamless notifications.', 'askany' ); ?></p>
						<!-- <p><?php esc_html_e( 'Connect your chat to Telegram for seamless communication.', 'askany' ); ?></p> -->
					</div>
					<div class="askany-integration-actions">
						<span class="askany-coming-soon-badge"><?php esc_html_e( 'Coming Soon', 'askany' ); ?></span>
					</div>
				</div>
				<div class="askany-integration-description">
					<!-- <p><?php esc_html_e( 'Send and receive messages through Telegram bot integration. Perfect for mobile-first customer support.', 'askany' ); ?></p> -->
					<p><?php esc_html_e( 'Receive notifications when users send messages and optionally forward agent and AI responses to Telegram.', 'askany' ); ?></p>
				</div>
			</div>

			<!-- WhatsApp Integration (Coming Soon) -->
			<div class="askany-integration-card coming-soon">
				<div class="askany-integration-header">
					<div class="askany-integration-icon whatsapp">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
							<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/>
						</svg>
					</div>
					<div class="askany-integration-info">
						<h3><?php esc_html_e( 'WhatsApp', 'askany' ); ?></h3>
						<!-- <p><?php esc_html_e( 'Integrate with WhatsApp Business API for customer support.', 'askany' ); ?></p> -->
						 <p><?php esc_html_e( 'Integrate with WhatsApp.', 'askany' ); ?></p>
					</div>
					<div class="askany-integration-actions">
						<span class="askany-coming-soon-badge"><?php esc_html_e( 'Coming Soon', 'askany' ); ?></span>
					</div>
				</div>
				<div class="askany-integration-description">
					<p><?php esc_html_e( 'Connect with customers on WhatsApp, the world\'s most popular messaging platform.', 'askany' ); ?></p>
				</div>
			</div>

			<!-- Request Integration Card -->
			<div class="askany-integration-card" style="border: 2px dashed #c3c4c7; background: linear-gradient(135deg, #f9f9f9 0%, #f0f6fc 100%); position: relative; overflow: hidden;">
				<div style="position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(34,113,177,0.08) 0%, transparent 70%); pointer-events: none;"></div>
				<div style="position: absolute; bottom: -15px; left: -15px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(34,113,177,0.06) 0%, transparent 70%); pointer-events: none;"></div>
				
				<div class="askany-integration-header">
					<div class="askany-integration-icon" style="background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%); border: 2px dashed #93c5fd; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;">
						<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2271b1" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
							<circle cx="12" cy="12" r="10"/>
							<line x1="12" y1="8" x2="12" y2="16"/>
							<line x1="8" y1="12" x2="16" y2="12"/>
						</svg>
					</div>
					<div class="askany-integration-info">
						<h3 style="margin: 0 0 4px; font-size: 15px; color: #1d2327;"><?php esc_html_e( 'Need Another Integration?', 'askany' ); ?></h3>
						<p style="margin: 0; font-size: 12.5px; color: #646970;"><?php esc_html_e( 'Don\'t see what you\'re looking for? We\'d love to hear from you. ', 'askany' ); ?></p>
					</div>
				</div>

				<div class="askany-integration-description" style="padding-top: 12px;">
					<p style="margin: 0 0 16px; font-size: 13px; color: #50575e; line-height: 1.6;">
						<?php esc_html_e( 'We\'re constantly adding new integrations. Request the tool or platform you need and we\'ll work on making it available. Feel free to contact our support team and fill out the request form, or simply reach out to us directly through the chat panel.', 'askany' ); ?>
					</p>

					<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
						<a href="https://wpazleen.com/support/" target="_blank" rel="noopener noreferrer"
							style="display: inline-flex; align-items: center; gap: 7px; background: #2271b1; color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; transition: background .2s;"
							onmouseover="this.style.background='#135e96'" onmouseout="this.style.background='#2271b1'">
							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
								<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
							</svg>
							<?php esc_html_e( 'Request an Integration', 'askany' ); ?>
						</a>

						<span style="display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #8c8f94;">
							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"/>
								<polyline points="15 3 21 3 21 9"/>
								<line x1="10" y1="14" x2="21" y2="3"/>
							</svg>
							<?php esc_html_e( 'Opens in a new tab', 'askany' ); ?>
						</span>
					</div>
				</div>
			</div>


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