<?php
/**
 * Admin settings page template
 *
 * @package BubblaV_Chat
 */

// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Get connection status.
$bubblav_is_connected   = get_option( 'bubblav_connection_status' ) === 'connected';
$bubblav_website_id     = get_option( 'bubblav_website_id', '' );
$bubblav_site_url       = home_url();
$bubblav_site_name      = get_bloginfo( 'name' );
$bubblav_is_woocommerce = class_exists( 'WooCommerce' );
$bubblav_logo_url       = BUBBLAV_PLUGIN_URL . 'assets/icon-256x256.png';

?>

<div class="wrap bubblav-settings-wrap">
	<?php if ( $bubblav_is_connected ) : ?>
		<div class="bubblav-connected">
			<div class="bubblav-hero">
				<img src="<?php echo esc_url( $bubblav_logo_url ); ?>" alt="BubblaV Logo" class="bubblav-hero-logo">
				<h2><?php esc_html_e( 'BubblaV Chat Widget', 'bubblav-chat' ); ?></h2>
				<p class="bubblav-hero-description">
					<?php esc_html_e( 'Your AI-powered chat widget is active and ready to assist your visitors.', 'bubblav-chat' ); ?>
				</p>
			</div>

			<div class="bubblav-card bubblav-card-success">
				<div class="bubblav-status-icon bubblav-status-icon-success">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</div>
				<div class="bubblav-status-content">
					<h2><?php esc_html_e( 'Connected Successfully', 'bubblav-chat' ); ?></h2>
					<p><?php esc_html_e( 'Your chat widget is now active on your website.', 'bubblav-chat' ); ?></p>
				</div>
			</div>

			<div class="bubblav-card bubblav-card-info">
				<h3><?php esc_html_e( 'Site Information', 'bubblav-chat' ); ?></h3>
				<table class="bubblav-info-table">
					<tr>
						<th><?php esc_html_e( 'Site URL', 'bubblav-chat' ); ?></th>
						<td><?php echo esc_html( $bubblav_site_url ); ?></td>
					</tr>
					<tr>
						<th><?php esc_html_e( 'Site Name', 'bubblav-chat' ); ?></th>
						<td><?php echo esc_html( $bubblav_site_name ); ?></td>
					</tr>
					<tr>
						<th><?php esc_html_e( 'WooCommerce', 'bubblav-chat' ); ?></th>
						<td>
							<?php if ( $bubblav_is_woocommerce ) : ?>
								<span class="bubblav-badge bubblav-badge-success">
									<?php esc_html_e( 'Yes', 'bubblav-chat' ); ?>
								</span>
								<span class="bubblav-badge-desc"><?php esc_html_e( 'E-commerce features enabled', 'bubblav-chat' ); ?></span>
							<?php else : ?>
								<span class="bubblav-badge bubblav-badge-neutral">
									<?php esc_html_e( 'Not detected', 'bubblav-chat' ); ?>
								</span>
							<?php endif; ?>
						</td>
					</tr>
				</table>
			</div>

			<div class="bubblav-actions">
				<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
					<?php wp_nonce_field( 'bubblav_disconnect', 'bubblav_nonce' ); ?>
					<input type="hidden" name="action" value="bubblav_disconnect">
					<button type="submit" class="bubblav-btn bubblav-btn-secondary bubblav-disconnect-btn">
						<?php esc_html_e( 'Disconnect', 'bubblav-chat' ); ?>
					</button>
				</form>
				<a href="<?php echo esc_url( 'https://www.bubblav.com/dashboard/websites/' . $bubblav_website_id . '?utm_source=wordpress-plugin&utm_medium=plugin&utm_campaign=settings' ); ?>" class="bubblav-btn bubblav-btn-primary" target="_blank">
					<?php esc_html_e( 'Manage in Dashboard', 'bubblav-chat' ); ?>
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						<path d="M15 3H21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						<path d="M10 14L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</a>
			</div>
		</div>
	<?php else : ?>
		<div class="bubblav-disconnected">
			<div class="bubblav-hero">
				<img src="<?php echo esc_url( $bubblav_logo_url ); ?>" alt="BubblaV Logo" class="bubblav-hero-logo">
				<h2><?php esc_html_e( 'Connect Your Site to BubblaV', 'bubblav-chat' ); ?></h2>
				<p class="bubblav-hero-description">
					<?php
					printf(
						/* translators: %s: BubblaV */
						esc_html__( 'Add an AI-powered chat widget to your WordPress site. Provide instant customer support with a chatbot that learns from your content.', 'bubblav-chat' ),
						'BubblaV'
					);
					?>
				</p>
			</div>

			<div class="bubblav-card bubblav-card-connect">
				<p><?php esc_html_e( 'Click the button below to sign in or create your free BubblaV account.', 'bubblav-chat' ); ?></p>

				<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
					<?php wp_nonce_field( 'bubblav_start_oauth', 'bubblav_nonce' ); ?>
					<input type="hidden" name="action" value="bubblav_start_oauth">
					<button type="submit" class="bubblav-btn bubblav-btn-primary bubblav-btn-large">
						<?php esc_html_e( 'Connect to BubblaV', 'bubblav-chat' ); ?>
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</button>
				</form>

				<p class="bubblav-terms">
					<?php
					printf(
						/* translators: %1$s: Terms link start, %2$s: Terms link end, %3$s: Privacy link start, %4$s: Privacy link end */
						esc_html__( 'By connecting, you agree to our %1$sTerms of Service%2$s and %3$sPrivacy Policy%4$s.', 'bubblav-chat' ),
						'<a href="https://www.bubblav.com/terms" target="_blank">',
						'</a>',
						'<a href="https://www.bubblav.com/privacy" target="_blank">',
						'</a>'
					);
					?>
				</p>
			</div>
		</div>
	<?php endif; ?>

	<div class="bubblav-footer">
		<p>
			<?php
			printf(
				/* translators: %1$s: Plugin version, %2$s: Documentation link start, %3$s: Documentation link end */
				esc_html__( 'BubblaV Chat Widget %1$s | Need help? Visit our %2$sdocumentation%3$s', 'bubblav-chat' ),
				esc_html( BUBBLAV_VERSION ),
				'<a href="' . esc_url( $bubblav_is_woocommerce ? 'https://docs.bubblav.com/user-guide/integrations/woocommerce' : 'https://docs.bubblav.com/user-guide/integrations/wordpress' ) . '" target="_blank">',
				'</a>'
			);
			?>
		</p>
	</div>
</div>
