<?php
/**
 * Admin user agents template for Ask Any plugin
 *
 * This template displays the user agents management interface with:
 * - List of all registered users
 * - Agent assignment/removal functionality
 * - Agent status management
 *
 * @package Askany
 * @since 1.0.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap">
	<h1><?php esc_html_e( 'User List & Agents Management', 'askany' ); ?></h1>
	
	<div class="askany-user-agents-container">
		<!-- Current Agents Section -->
		<div class="askany-section">
			<h2>
				<?php esc_html_e( 'Current Chat Agents', 'askany' ); ?>
				<?php
				$plugin = \Askany\Plugin::get_instance();
				$is_pro = $plugin->is_pro_active();
				$agent_count = count( $agents );
				$free_limit = 2;
				
				if ( ! $is_pro ) {
					echo '<span class="askany-agent-limit-badge">';
					echo esc_html( sprintf( __( '%d / %d agents', 'askany' ), $agent_count, $free_limit ) );
					echo '</span>';
				}
				?>
			</h2>
			<?php if ( empty( $agents ) ) : ?>
				<p><?php esc_html_e( 'No agents assigned yet.', 'askany' ); ?></p>
			<?php else : ?>
				<table class="wp-list-table widefat fixed striped">
					<thead>
						<tr>
							<th><?php esc_html_e( 'Agent Name', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Email', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Status', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Last Seen', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Actions', 'askany' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ( $agents as $agent ) { ?>
							<tr>
								<td><?php echo esc_html( $agent->display_name ); ?></td>
								<td><?php echo esc_html( $agent->user_email ); ?></td>
								<td>
									<span class="askany-status-badge <?php echo $agent->is_online ? 'online' : 'offline'; ?>">
										<?php echo $agent->is_online ? esc_html__( 'Online', 'askany' ) : esc_html__( 'Offline', 'askany' ); ?>
									</span>
								</td>
								<td>
									<?php
									if ( $agent->last_seen ) {
										echo esc_html( date_i18n( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $agent->last_seen ) ) );
									} else {
										esc_html_e( 'Never', 'askany' );
									}
									?>
								</td>
								<td>
									<button type="button" class="button button-secondary askany-remove-agent" data-user-id="<?php echo esc_attr( $agent->user_id ); ?>">
										<?php esc_html_e( 'Remove Agent', 'askany' ); ?>
									</button>
								</td>
							</tr>
						<?php } ?>
					</tbody>
				</table>
			<?php endif; ?>
		</div>

		<!-- All Users Section -->
		<div class="askany-section">
			<h2><?php esc_html_e( 'All Registered Users', 'askany' ); ?></h2>
			<p><?php esc_html_e( 'Select users to assign as chat agents. Agents can take over conversations from AI and provide live support.', 'askany' ); ?></p>
			
			<?php if ( empty( $users ) ) : ?>
				<p><?php esc_html_e( 'No users found.', 'askany' ); ?></p>
			<?php else : ?>
				<table class="wp-list-table widefat fixed striped">
					<thead>
						<tr>
							<th><?php esc_html_e( 'User Name', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Username', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Email', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Agent Status', 'askany' ); ?></th>
							<th><?php esc_html_e( 'Actions', 'askany' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ( $users as $user ) { ?>
							<tr>
								<td><?php echo esc_html( $user->display_name ); ?></td>
								<td><?php echo esc_html( $user->user_login ); ?></td>
								<td><?php echo esc_html( $user->user_email ); ?></td>
								<td>
									<?php if ( $user->is_agent ) : ?>
										<span class="askany-status-badge agent"><?php esc_html_e( 'Agent', 'askany' ); ?></span>
									<?php else : ?>
										<span class="askany-status-badge regular"><?php esc_html_e( 'Regular User', 'askany' ); ?></span>
									<?php endif; ?>
								</td>
								<td>
									<?php if ( $user->is_agent ) : ?>
										<button type="button" class="button button-secondary askany-remove-agent" data-user-id="<?php echo esc_attr( $user->ID ); ?>">
											<?php esc_html_e( 'Remove Agent', 'askany' ); ?>
										</button>
									<?php else : ?>
										<?php
										$is_limit_reached = ! $is_pro && $agent_count >= $free_limit;
										$button_class = $is_limit_reached ? 'button button-primary askany-add-agent-locked' : 'button button-primary askany-add-agent';
										?>
										<button type="button" class="<?php echo esc_attr( $button_class ); ?>" data-user-id="<?php echo esc_attr( $user->ID ); ?>">
											<?php esc_html_e( 'Make Agent', 'askany' ); ?>
											<?php if ( $is_limit_reached ) : ?>
												<span class="askany-pro-badge small inline" style="margin-left: 6px;">
													<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
														<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( 'PRO', 'askany' ); ?>
												</span>
											<?php endif; ?>
										</button>
									<?php endif; ?>
								</td>
							</tr>
						<?php } ?>
					</tbody>
				</table>
			<?php endif; ?>
		</div>
	</div>
</div>

<script>
jQuery(document).ready(function($) {
	// Pro status and limits
	var isPro = <?php echo $is_pro ? 'true' : 'false'; ?>;
	var agentCount = <?php echo (int) $agent_count; ?>;
	var freeLimit = 2;
	
	// Handle locked "Make Agent" buttons (Pro feature)
	$(document).on('click', '.askany-add-agent-locked', function(e) {
		e.preventDefault();
		// Open Pro upgrade modal
		if (typeof AskanyPro !== 'undefined') {
			AskanyPro.openModal({
				title: '<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>',
				description: '<?php esc_html_e( 'Unlock unlimited agents and premium features', 'askany' ); ?>',
				features: [
					'<?php esc_html_e( 'Unlimited chat agents', 'askany' ); ?>',
					'<?php esc_html_e( 'Unlimited chat sessions', 'askany' ); ?>',
					'<?php esc_html_e( 'Priority support', 'askany' ); ?>',
					'<?php esc_html_e( 'Advanced analytics', 'askany' ); ?>',
					'<?php esc_html_e( 'Custom branding', 'askany' ); ?>'
				]
			});
		}
	});
	
	// Add agent
	$(document).on('click', '.askany-add-agent', function() {
		var userId = $(this).data('user-id');
		var button = $(this);
		
		// Check if limit reached (shouldn't happen with UI, but double-check)
		if (!isPro && agentCount >= freeLimit) {
			if (typeof AskanyPro !== 'undefined') {
				AskanyPro.openModal();
			}
			return;
		}
		
		button.prop('disabled', true).text('<?php esc_html_e( 'Processing...', 'askany' ); ?>');
		
		$.ajax({
			url: askanyAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'askany_add_agent',
				user_id: userId,
				nonce: askanyAdmin.nonce
			},
			success: function(response) {
				if (response.success) {
					Toast.success('<?php esc_html_e( 'Agent added successfully!', 'askany' ); ?>');
					setTimeout(() => location.reload(), 1000);
				} else {
					Toast.error(response.data.message || '<?php esc_html_e( 'Error adding agent', 'askany' ); ?>');
					button.prop('disabled', false).text('<?php esc_html_e( 'Make Agent', 'askany' ); ?>');
				}
			},
			error: function() {
				Toast.error('<?php esc_html_e( 'Error adding agent', 'askany' ); ?>');
				button.prop('disabled', false).text('<?php esc_html_e( 'Make Agent', 'askany' ); ?>');
			}
		});
	});
	
	// Remove agent
	$('.askany-remove-agent').on('click', function() {
		var userId = $(this).data('user-id');
		var button = $(this);
		
		Toast.ask('Remove Agent', '<?php esc_html_e( 'Are you sure you want to remove this agent?', 'askany' ); ?>')
			.then(result => {
				if (!result.ok) return;
				
				button.prop('disabled', true).text('<?php esc_html_e( 'Processing...', 'askany' ); ?>');
				
				$.ajax({
					url: askanyAdmin.ajaxUrl,
					type: 'POST',
					data: {
						action: 'askany_remove_agent',
						user_id: userId,
						nonce: askanyAdmin.nonce
					},
					success: function(response) {
						if (response.success) {
							Toast.success('<?php esc_html_e( 'Agent removed successfully!', 'askany' ); ?>');
							setTimeout(() => location.reload(), 1000);
						} else {
							Toast.error(response.data.message || '<?php esc_html_e( 'Error removing agent', 'askany' ); ?>');
							button.prop('disabled', false).text('<?php esc_html_e( 'Remove Agent', 'askany' ); ?>');
						}
					},
					error: function() {
						Toast.error('<?php esc_html_e( 'Error removing agent', 'askany' ); ?>');
						button.prop('disabled', false).text('<?php esc_html_e( 'Remove Agent', 'askany' ); ?>');
					}
				});
			});
	});
});
</script>

<style>
/* Agent limit badge */
.askany-agent-limit-badge {
	display: inline-block;
	padding: 4px 12px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 500;
	color: #50575e;
	margin-left: 10px;
	vertical-align: middle;
}

/* Locked button styling */
.askany-add-agent-locked {
	position: relative;
	cursor: pointer !important;
}

.askany-add-agent-locked:hover {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	border-color: #667eea !important;
	color: white !important;
}

.askany-add-agent-locked .askany-pro-badge {
	vertical-align: middle;
}

/* Agent section styling */
.askany-user-agents-container {
	max-width: 1200px;
}

.askany-section {
	background: white;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.askany-section h2 {
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
}

.askany-status-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.askany-status-badge.online {
	background: #d4edda;
	color: #155724;
}

.askany-status-badge.offline {
	background: #f8d7da;
	color: #721c24;
}

.askany-status-badge.agent {
	background: #d1ecf1;
	color: #0c5460;
}

.askany-status-badge.regular {
	background: #e2e3e5;
	color: #383d41;
}
</style>
