<?php
/**
 * MindWebConcierge Conversations Admin Page
 *
 * @package MindWebConcierge
 */

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

add_action( 'admin_enqueue_scripts', 'mind_web_conversations_enqueue_scripts' );

function mind_web_conversations_enqueue_scripts( $hook_suffix ) {
	if ( 'mind-web_page_mind-web-conversations' !== $hook_suffix ) {
		return;
	}

	$plugin_url = plugin_dir_url( __DIR__ );
	$ver        = defined( 'MIND_WEB_VERSION' ) ? MIND_WEB_VERSION : '1.2.9';

	wp_enqueue_script( 'jquery-ui-datepicker' );

	wp_enqueue_style(
		'mindweco-jquery-ui-css',
		$plugin_url . 'assets/css/jquery-ui.min.css',
		array(),
		'1.13.2'
	);

	wp_enqueue_style(
		'mindweco-conversations-plugin-style',
		$plugin_url . 'assets/css/mindweco_conversations.css',
		array(),
		$ver
	);

	wp_enqueue_script(
		'mindweco-modal',
		$plugin_url . 'assets/js/components/Modal.js',
		array( 'jquery' ),
		$ver,
		true
	);

	wp_enqueue_script(
		'mindweco-toast',
		$plugin_url . 'assets/js/components/Toast.js',
		array( 'jquery' ),
		$ver,
		true
	);

	wp_enqueue_script(
		'mindweco-pagination',
		$plugin_url . 'assets/js/components/Pagination.js',
		array( 'jquery' ),
		$ver,
		true
	);

	wp_enqueue_style(
		'mindweco-pagination-style',
		$plugin_url . 'assets/css/mindweco-pagination.css',
		array(),
		$ver,
	);

	wp_enqueue_script(
		'mindweco-conversations-plugin-js',
		$plugin_url . 'assets/js/mindweco_conversations.js',
		array( 'jquery', 'jquery-ui-datepicker', 'mindweco-toast', 'mindweco-modal', 'mindweco-pagination' ),
		$ver,
		true
	);

	wp_localize_script(
		'mindweco-conversations-plugin-js',
		'mindwecoDataKnowledgeRepository',
		array(
			'ajax_url' => admin_url( 'admin-ajax.php' ),
			'nonce'    => wp_create_nonce( 'mindweco_admin_nonce' ),
		)
	);
}


function mindweco_conversations_page() {

	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You do not have permission to access this page.', 'mind-web-concierge' ) );
	}

	?>
	<div class="mindweco-conversations-wrap" id="mindweco-conversations-wrap">
		<div class="page-header">
			<div class="header-content">
				<div class="header-icon">
					<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
						<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
						<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
					</svg>
				</div>
				<div>
					<h1><?php esc_html_e( 'Mind Web Conversations', 'mind-web-concierge' ); ?></h1>
				</div>
			</div>
		</div>

		<div class="datepicker-wrapper">
			<div class="datepicker-all-row">
				<div class="filter-header">
					<div class="filter-icon">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
							<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
							<line x1="16" y1="2" x2="16" y2="6"></line>
							<line x1="8" y1="2" x2="8" y2="6"></line>
							<line x1="3" y1="10" x2="21" y2="10"></line>
						</svg>
					</div>
					<h2><?php esc_html_e( 'Filter by Date', 'mind-web-concierge' ); ?></h2>
				</div>

				<div class="row-divider"></div>

				<div class="date-inputs-row">
					<div class="date-input-group">
						<label for="start-date">
							<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
								<circle cx="12" cy="12" r="10"></circle>
								<polyline points="12 6 12 12 16 14"></polyline>
							</svg>
							<?php esc_html_e( 'Start', 'mind-web-concierge' ); ?>
						</label>
						<input type="text" id="start-date" class="datepicker" readonly placeholder="<?php esc_attr_e( 'Start date', 'mind-web-concierge' ); ?>" />
					</div>

					<div class="date-separator" aria-hidden="true">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
							<line x1="5" y1="12" x2="19" y2="12"></line>
							<polyline points="12 5 19 12 12 19"></polyline>
						</svg>
					</div>

					<div class="date-input-group">
						<label for="end-date">
							<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
								<circle cx="12" cy="12" r="10"></circle>
								<polyline points="12 6 12 12 16 14"></polyline>
							</svg>
							<?php esc_html_e( 'End', 'mind-web-concierge' ); ?>
						</label>
						<input type="text" id="end-date" class="datepicker" readonly placeholder="<?php esc_attr_e( 'End date', 'mind-web-concierge' ); ?>" />
					</div>
				</div>

				<div class="row-divider"></div>

				<div class="filter-actions">
					<button id="clear-filter" class="btn-secondary">
						<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
							<line x1="18" y1="6" x2="6" y2="18"></line>
							<line x1="6" y1="6" x2="18" y2="18"></line>
						</svg>
						<?php esc_html_e( 'Clear', 'mind-web-concierge' ); ?>
					</button>
					<button class="btn load-convs">
						<?php esc_html_e( "Today's Chats", 'mind-web-concierge' ); ?>
					</button>
					<span id="loading-spinner" aria-live="polite">
						<span class="spinner is-active"></span>
					</span>
				</div>
			</div>
		</div>

		<h2 class="nav-tab-wrapper mindweco-nav-tabs">
			<a href="#conversations" class="nav-tab nav-tab-active mindweco-nav-tab" data-tab="conversations">
				<?php esc_html_e( 'Conversations', 'mind-web-concierge' ); ?>
			</a>
			<a href="#unanswered_questions" class="nav-tab mindweco-nav-tab" data-tab="unanswered_questions">
				<?php esc_html_e( 'Unanswered Questions', 'mind-web-concierge' ); ?>
			</a>
		</h2>

		<div id="tab-conversations" class="tab-content" style="display:block;">
			<div id="conversations-results">
				<div class="empty-state">
					<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
						<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
						<line x1="16" y1="2" x2="16" y2="6"></line>
						<line x1="8" y1="2" x2="8" y2="6"></line>
						<line x1="3" y1="10" x2="21" y2="10"></line>
					</svg>
					<h3><?php esc_html_e( 'Select a Date Range', 'mind-web-concierge' ); ?></h3>
					<p><?php esc_html_e( 'Choose start and end dates above to view conversations', 'mind-web-concierge' ); ?></p>
				</div>
			</div>
		</div>

		<div id="tab-unanswered_questions" class="tab-content" style="display:none;">
			<div id="unanswered-results"></div>
		</div>

		<div id="session-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="session-modal-title">
			<div class="modal-container">
				<div class="modal-header-bar">
					<h2 class="modal-title" id="session-modal-title">
						<?php esc_html_e( 'Session Details', 'mind-web-concierge' ); ?>
					</h2>
					<button id="close-modal" class="modal-close" aria-label="<?php esc_attr_e( 'Close session details', 'mind-web-concierge' ); ?>">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
							<line x1="18" y1="6" x2="6" y2="18"></line>
							<line x1="6" y1="6" x2="18" y2="18"></line>
						</svg>
					</button>
				</div>
				<div id="modal-content" class="modal-body"></div>
			</div>
		</div>

		<div id="conversation-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="conversation-modal-title">
			<div class="modal-container">
				<div class="modal-header-bar">
					<h2 class="modal-title" id="conversation-modal-title">
						<?php esc_html_e( 'Conversation History', 'mind-web-concierge' ); ?>
					</h2>
					<button id="close-conversation-modal" class="modal-close" aria-label="<?php esc_attr_e( 'Close conversation history', 'mind-web-concierge' ); ?>">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
							<line x1="18" y1="6" x2="6" y2="18"></line>
							<line x1="6" y1="6" x2="18" y2="18"></line>
						</svg>
					</button>
				</div>
				<div id="conversation-modal-content" class="modal-body"></div>
			</div>
		</div>
		
	</div>
	<?php
}
