<?php
/**
 * Admin Slack integration template for Ask Any plugin
 *
 * This template displays the Slack integration setup interface with:
 * - Webhook URL configuration
 * - Test webhook functionality
 * - Message forwarding settings
 * - Notification preferences
 *
 * @package Askany
 * @since 1.0.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Get current Slack settings
$webhook_url = isset($slack_settings['webhook_url']) ? (string) $slack_settings['webhook_url'] : '';
$enabled = isset($slack_settings['enabled']) ? (bool) $slack_settings['enabled'] : false;
$notify_user_messages = isset($slack_settings['notify_user_messages']) ? (bool) $slack_settings['notify_user_messages'] : true;
$forward_agent_messages = isset($slack_settings['forward_agent_messages']) ? (bool) $slack_settings['forward_agent_messages'] : false;
$forward_ai_messages = isset($slack_settings['forward_ai_messages']) ? (bool) $slack_settings['forward_ai_messages'] : false;
$channel = isset($slack_settings['channel']) ? (string) $slack_settings['channel'] : '#general';
?>
<div class="wrap">
	<div class="askany-header">
		<h1>
			<span class="askany-slack-icon">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
			</span>
			<?php esc_html_e( 'Slack Integration', 'askany' ); ?>
		</h1>
		<a href="<?php echo esc_url( admin_url( 'admin.php?page=askany-integration' ) ); ?>" class="button">
			← <?php esc_html_e( 'Back to Integrations', 'askany' ); ?>
		</a>
	</div>
	
	<p class="description"><?php esc_html_e( 'Connect Askany with your Slack workspace to receive real-time notifications and forward chat messages.', 'askany' ); ?></p>

	<div class="askany-slack-container">
		
		<!-- Setup Instructions -->
		<div class="askany-admin-section">
			<h2><?php esc_html_e( 'Setup Instructions', 'askany' ); ?></h2>
			<div class="askany-setup-steps">
				<div class="askany-step">
					<div class="askany-step-number">1</div>
					<div class="askany-step-content">
						<h4><?php esc_html_e( 'Create Slack App', 'askany' ); ?></h4>
						<p><?php esc_html_e( 'Go to', 'askany' ); ?> <a href="https://api.slack.com/apps" target="_blank">api.slack.com/apps</a> <?php esc_html_e( 'and create a new app for your workspace.', 'askany' ); ?></p>
					</div>
				</div>
				<div class="askany-step">
					<div class="askany-step-number">2</div>
					<div class="askany-step-content">
						<h4><?php esc_html_e( 'Enable Incoming Webhooks', 'askany' ); ?></h4>
						<p><?php esc_html_e( 'In your app settings, go to "Incoming Webhooks" and activate them. Then add a new webhook to your workspace.', 'askany' ); ?></p>
					</div>
				</div>
				<div class="askany-step">
					<div class="askany-step-number">3</div>
					<div class="askany-step-content">
						<h4><?php esc_html_e( 'Copy Webhook URL', 'askany' ); ?></h4>
						<p><?php esc_html_e( 'Copy the webhook URL and paste it in the field below.', 'askany' ); ?></p>
					</div>
				</div>
			</div>
		</div>

		<!-- Webhook Configuration -->
		<div class="askany-admin-section">
			<h2><?php esc_html_e( 'Webhook Configuration', 'askany' ); ?></h2>
			<form id="askany-slack-webhook-form" method="post">
				<?php wp_nonce_field( 'askany_save_slack_settings', 'askany_slack_nonce' ); ?>
				
				<table class="form-table">
					<tr>
						<th scope="row">
							<label for="slack_enabled"><?php esc_html_e( 'Enable Slack Integration', 'askany' ); ?></label>
						</th>
						<td>
							<label class="askany-switch">
								<input type="checkbox" id="slack_enabled" name="slack_enabled" value="1" 
									<?php checked( $enabled ); ?> />
								<span class="askany-slider"></span>
							</label>
							<p class="description">
								<?php esc_html_e( 'Enable or disable Slack notifications.', 'askany' ); ?>
							</p>
						</td>
					</tr>
					
					<tr>
						<th scope="row">
							<label for="slack_webhook_url"><?php esc_html_e( 'Webhook URL', 'askany' ); ?></label>
						</th>
						<td>
							<input type="url" id="slack_webhook_url" name="slack_webhook_url" 
								value="<?php echo esc_attr( $webhook_url ); ?>" 
								class="regular-text" 
								placeholder="https://hooks.slack.com/services/..." />
							<p class="description">
								<?php esc_html_e( 'Enter your Slack incoming webhook URL.', 'askany' ); ?>
							</p>
						</td>
					</tr>
					
					<tr>
						<th scope="row">
							<label for="slack_channel"><?php esc_html_e( 'Default Channel', 'askany' ); ?></label>
						</th>
						<td>
							<input type="text" id="slack_channel" name="slack_channel" 
								value="<?php echo esc_attr( $channel ); ?>" 
								class="regular-text" 
								placeholder="#general" />
							<!-- <p class="description">
								<?php esc_html_e( 'Channel or user to send messages to (e.g., #general or @username).', 'askany' ); ?>
							</p> -->
							<p class="description">
								<?php esc_html_e( 'Channel name to send messages to (e.g., #general).', 'askany' ); ?>
							</p>
						</td>
					</tr>
				</table>
				
				<p class="submit">
					<button type="submit" class="button button-primary">
						<?php esc_html_e( 'Save Webhook Settings', 'askany' ); ?>
					</button>
					<button type="button" class="button button-secondary" id="askany-test-webhook">
						<?php esc_html_e( 'Test Webhook', 'askany' ); ?>
					</button>
				</p>
			</form>
		</div>

		<!-- Message Forwarding Settings -->
		<div class="askany-admin-section <?php echo ! $is_pro ? 'askany-pro-locked-section' : ''; ?>">
			<h2><?php esc_html_e( 'Message Forwarding', 'askany' ); ?></h2>
			<form id="askany-slack-forwarding-form" method="post" <?php echo ! $is_pro ? 'class="askany-pro-locked-form"' : ''; ?>>
				<?php wp_nonce_field( 'askany_save_slack_settings', 'askany_slack_nonce' ); ?>
				
				<table class="form-table">
					<tr>
						<th scope="row">
							<label for="notify_user_messages"><?php esc_html_e( 'User Message Notifications', 'askany' ); ?></label>
						</th>
						<td>
							<label class="askany-switch">
								<input type="checkbox" id="notify_user_messages" name="notify_user_messages" value="1" 
									<?php checked( $notify_user_messages ); ?> />
								<span class="askany-slider"></span>
							</label>
							<p class="description">
								<?php esc_html_e( 'Send notifications to Slack when users send new messages.', 'askany' ); ?>
							</p>
						</td>
					</tr>
					
					<tr>
						<th scope="row">
							<label for="forward_agent_messages"><?php esc_html_e( 'Forward Agent Messages', 'askany' ); ?></label>
						</th>
						<td>
							<label class="askany-switch">
								<input type="checkbox" id="forward_agent_messages" name="forward_agent_messages" value="1" 
									<?php checked( $forward_agent_messages ); ?> />
								<span class="askany-slider"></span>
							</label>
							<p class="description">
								<?php esc_html_e( 'Forward agent responses to Slack.', 'askany' ); ?>
							</p>
						</td>
					</tr>
					
					<tr>
						<th scope="row">
							<label for="forward_ai_messages"><?php esc_html_e( 'Forward AI Messages', 'askany' ); ?></label>
						</th>
						<td>
							<label class="askany-switch">
								<input type="checkbox" id="forward_ai_messages" name="forward_ai_messages" value="1" 
									<?php checked( $forward_ai_messages ); ?> />
								<span class="askany-slider"></span>
							</label>
							<p class="description">
								<?php esc_html_e( 'Forward AI responses to Slack.', 'askany' ); ?>
							</p>
						</td>
					</tr>
				</table>
				
				<p class="submit">
					<button type="submit" class="button button-primary">
						<?php esc_html_e( 'Save Forwarding Settings', 'askany' ); ?>
					</button>
				</p>
			</form>
			
			<?php if ( ! $is_pro ) : ?>
				<div class="askany-pro-overlay-wrapper">
					<div class="askany-pro-overlay-content">
						<div class="askany-pro-lock-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
								<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
								<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
							</svg>
						</div>
						<h3><?php esc_html_e( 'Message Forwarding is a Pro Feature', 'askany' ); ?></h3>
						<p><?php esc_html_e( 'Forward user messages, agent responses, and AI messages to your Slack workspace.', 'askany' ); ?></p>
						<button type="button" class="button button-primary askany-open-pro-modal">
							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 6px;">
								<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
							</svg>
							<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>
						</button>
					</div>
				</div>
			<?php endif; ?>
		</div>

		<!-- Connection Status -->
		<div class="askany-admin-section">
			<h2><?php esc_html_e( 'Connection Status', 'askany' ); ?></h2>
			<div class="askany-status-card" id="askany-slack-status">
				<div class="askany-status-icon">
					<span class="dashicons dashicons-admin-plugins"></span>
				</div>
				<div class="askany-status-content">
					<h4><?php esc_html_e( 'Connection Status', 'askany' ); ?></h4>
					<p id="askany-status-text">
						<?php if ( $enabled && $webhook_url ) : ?>
							<span class="askany-status-connected"><?php esc_html_e( 'Connected', 'askany' ); ?></span>
						<?php else : ?>
							<span class="askany-status-disconnected"><?php esc_html_e( 'Not Connected', 'askany' ); ?></span>
						<?php endif; ?>
					</p>
				</div>
			</div>
		</div>

	</div>
</div>

<script>
jQuery(document).ready(function($) {
	// Handle webhook form submission
	$('#askany-slack-webhook-form').on('submit', function(e) {
		e.preventDefault();
		saveSlackSettings($(this), 'webhook');
	});
	
	// Handle forwarding form submission
	$('#askany-slack-forwarding-form').on('submit', function(e) {
		e.preventDefault();
		saveSlackSettings($(this), 'forwarding');
	});
	
	// Handle test webhook button
	$('#askany-test-webhook').on('click', function() {
		testSlackWebhook();
	});
	
	function saveSlackSettings(form, type) {
		var formData = form.serialize();
		formData += '&action=askany_save_slack_settings&type=' + type;
		
		$.ajax({
			url: askanyAdmin.ajaxUrl,
			type: 'POST',
			data: formData,
			success: function(response) {
				if (response.success) {
					Toast.success(response.data.message || '<?php esc_html_e( 'Settings saved successfully!', 'askany' ); ?>');
					updateConnectionStatus();
				} else {
					Toast.error(response.data.message || '<?php esc_html_e( 'Error saving settings', 'askany' ); ?>');
				}
			},
			error: function() {
				Toast.error('<?php esc_html_e( 'Error saving settings', 'askany' ); ?>');
			}
		});
	}
	
	function testSlackWebhook() {
		var webhookUrl = $('#slack_webhook_url').val();
		var channel = $('#slack_channel').val();
		
		if (!webhookUrl) {
			Toast.error('<?php esc_html_e( 'Please enter a webhook URL first', 'askany' ); ?>');
			return;
		}
		
		$('#askany-test-webhook').prop('disabled', true).text('<?php esc_html_e( 'Testing...', 'askany' ); ?>');
		
		$.ajax({
			url: askanyAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'askany_test_slack_webhook',
				webhook_url: webhookUrl,
				channel: channel,
				nonce: askanyAdmin.nonce
			},
			success: function(response) {
				if (response.success) {
					Toast.success('<?php esc_html_e( 'Test message sent successfully!', 'askany' ); ?>');
					updateConnectionStatus();
				} else {
					Toast.error(response.data.message || '<?php esc_html_e( 'Test failed', 'askany' ); ?>');
				}
			},
			error: function() {
				Toast.error('<?php esc_html_e( 'Test failed', 'askany' ); ?>');
			},
			complete: function() {
				$('#askany-test-webhook').prop('disabled', false).text('<?php esc_html_e( 'Test Webhook', 'askany' ); ?>');
			}
		});
	}
	
	function updateConnectionStatus() {
		var enabled = $('#slack_enabled').is(':checked');
		var webhookUrl = $('#slack_webhook_url').val();
		
		if (enabled && webhookUrl) {
			$('#askany-status-text').html('<span class="askany-status-connected"><?php esc_html_e( 'Connected', 'askany' ); ?></span>');
		} else {
			$('#askany-status-text').html('<span class="askany-status-disconnected"><?php esc_html_e( 'Not Connected', 'askany' ); ?></span>');
		}
	}
	
	// Update status when settings change
	$('#slack_enabled, #slack_webhook_url').on('change', function() {
		updateConnectionStatus();
	});
	
	// Handle clicks on locked sections
	$(document).on('click', '.askany-pro-locked-section', function(e) {
		if ($(e.target).closest('.askany-pro-overlay-wrapper, .askany-open-pro-modal').length) {
			return; // Let the button handler take care of it
		}
		e.preventDefault();
		e.stopPropagation();
		
		// Trigger Pro modal
		if (typeof AskanyPro !== 'undefined' && typeof AskanyPro.openModal === 'function') {
			AskanyPro.openModal({
				title: '<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>',
				description: '<?php esc_html_e( 'Unlock Slack Integration and premium features', 'askany' ); ?>',
				features: [
					'<?php esc_html_e( 'Slack webhook configuration', 'askany' ); ?>',
					'<?php esc_html_e( 'Message forwarding to Slack', 'askany' ); ?>',
					'<?php esc_html_e( 'Real-time notifications', 'askany' ); ?>',
					'<?php esc_html_e( 'Advanced integration settings', 'askany' ); ?>',
					'<?php esc_html_e( 'Priority support', 'askany' ); ?>'
				]
			});
		}
	});
	
	// Handle Pro modal button clicks
	$(document).on('click', '.askany-open-pro-modal', function(e) {
		e.preventDefault();
		e.stopPropagation();
		
		if (typeof AskanyPro !== 'undefined' && typeof AskanyPro.openModal === 'function') {
			AskanyPro.openModal({
				title: '<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>',
				description: '<?php esc_html_e( 'Unlock Slack Integration and premium features', 'askany' ); ?>',
				features: [
					'<?php esc_html_e( 'Slack webhook configuration', 'askany' ); ?>',
					'<?php esc_html_e( 'Message forwarding to Slack', 'askany' ); ?>',
					'<?php esc_html_e( 'Real-time notifications', 'askany' ); ?>',
					'<?php esc_html_e( 'Advanced integration settings', 'askany' ); ?>',
					'<?php esc_html_e( 'Priority support', 'askany' ); ?>'
				]
			});
		}
	});
});
</script>

<style>
.askany-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.askany-header h1 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.askany-slack-icon {
	color: #4A154B;
}

.askany-slack-container {
	margin-top: 20px;
}

.askany-admin-section {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.askany-admin-section h2 {
	margin-top: 0;
	margin-bottom: 15px;
	color: #333;
	border-bottom: 2px solid #4A154B;
	padding-bottom: 10px;
}

.askany-setup-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.askany-step {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.askany-step-number {
	width: 30px;
	height: 30px;
	background: #4A154B;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	flex-shrink: 0;
}

.askany-step-content h4 {
	margin: 0 0 5px 0;
	color: #333;
}

.askany-step-content p {
	margin: 0;
	color: #666;
}

.askany-step-content a {
	color: #4A154B;
	text-decoration: none;
}

.askany-step-content a:hover {
	text-decoration: underline;
}

.askany-status-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 6px;
	border: 1px solid #eee;
}

.askany-status-icon {
	font-size: 24px;
	color: #666;
}

.askany-status-content h4 {
	margin: 0 0 5px 0;
	color: #333;
}

.askany-status-content p {
	margin: 0;
}

.askany-status-connected {
	color: #46b450;
	font-weight: 600;
}

.askany-status-disconnected {
	color: #dc3232;
	font-weight: 600;
}

/* Switch styles */
.askany-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

.askany-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.askany-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 24px;
}

.askany-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .askany-slider {
	background-color: #4A154B;
}

input:checked + .askany-slider:before {
	transform: translateX(26px);
}

/* Pro overlay styles */
.askany-pro-locked-section {
	position: relative;
	cursor: pointer;
}

.askany-pro-locked-form {
	opacity: 0.4;
	pointer-events: none;
}

.askany-pro-overlay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.30);
	backdrop-filter: blur(1px);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	cursor: pointer;
}

.askany-pro-overlay-content {
	text-align: center;
	padding: 40px;
	max-width: 500px;
}

.askany-pro-overlay-content .askany-pro-lock-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.askany-pro-overlay-content h3 {
	margin: 0 0 12px 0;
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.askany-pro-overlay-content p {
	margin: 0 0 24px 0;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.askany-pro-overlay-content .button-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.askany-pro-overlay-content .button-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Make sections with Pro overlay relative positioned */
.askany-admin-section {
	position: relative;
}
</style>