<?php
/**
 * AI MCP page template — WPForms → Tools → AI MCP.
 *
 * Two-block layout from the Figma design (file 0zyEC40sf4SsSgL4KUOI3B, node 3:343):
 *   1. Dark hero block — eyebrow / title / lede / CTA row (install button + toggle)
 *      with an AI-clients column on the right.
 *   2. White cards-panel — section header + three capability cards (Forms, Fields,
 *      Entries) with bullet lists.
 *
 * @since 1.10.2
 *
 * @var string $state               WPVibe state — 'not_installed' | 'installed_inactive' | 'active'.
 * @var bool   $is_write_enabled    Current value of the ai-mcp-write-enabled setting.
 * @var bool   $is_pro              True when WPForms Pro is active; drives Pro-badge hiding.
 * @var string $wpvibe_download_url WPVibe wp.org ZIP URL.
 * @var string $wpvibe_basename     WPVibe plugin basename (e.g. vibe-ai/vibe-ai.php).
 * @var string $wpvibe_setup_url    WPVibe admin page URL — anchor for the active-state CTA.
 * @var bool   $has_visited_wpvibe  True if the user has been on the WPVibe admin page before.
 * @var string $docs_url            URL for the "View Abilities API Documentation" link.
 * @var string $docs_utm_medium     utm_medium for the docs link, per surface (Tools - AI MCP / Builder - AI MCP).
 * @var string $docs_utm_content    utm_content for the docs link, per surface.
 * @var string $context_class       Optional extra root class to adapt the layout per surface (e.g. the builder variant).
 */

defined( 'ABSPATH' ) || exit;

$can_install  = wpforms_can_install( 'plugin' );
$can_activate = wpforms_can_activate( 'plugin' );

$cards = [
	[
		'slug'    => 'forms',
		'icon'    => 'file-lines',
		'title'   => __( 'Forms', 'wpforms-lite' ),
		'bullets' => [
			__( 'Create a brand new form using plain English', 'wpforms-lite' ),
			__( 'Update form settings and submit button text', 'wpforms-lite' ),
			__( "Get a form's full configuration, including every field", 'wpforms-lite' ),
		],
		'pro'     => false,
	],
	[
		'slug'    => 'fields',
		'icon'    => 'list-alt',
		'title'   => __( 'Fields', 'wpforms-lite' ),
		'bullets' => [
			__( 'Add a field to an existing form', 'wpforms-lite' ),
			__( 'Update an existing field (label, required, options…)', 'wpforms-lite' ),
			__( 'Discover which field types are available', 'wpforms-lite' ),
		],
		'pro'     => false,
	],
	[
		'slug'    => 'entries',
		'icon'    => 'envelope-open-text',
		'title'   => __( 'Entries', 'wpforms-lite' ),
		'bullets' => [
			__( 'Browse entries for any form, with pagination', 'wpforms-lite' ),
			__( 'Search entries by date range, field value & status', 'wpforms-lite' ),
			__( "Get a single entry's full details", 'wpforms-lite' ),
		],
		'pro'     => true,
	],
];

$ai_clients = [
	[
		'asset' => 'ai-claude.svg',
		'label' => __( 'Claude', 'wpforms-lite' ),
	],
	[
		'asset' => 'ai-chatgpt.svg',
		'label' => __( 'ChatGPT', 'wpforms-lite' ),
	],
	[
		'asset' => 'ai-cursor.svg',
		'label' => __( 'Cursor', 'wpforms-lite' ),
	],
];

// In the builder every WPVibe button state is blue; the Tools page keeps orange for install/activate.
$wpvibe_button_color = $context_class !== '' ? 'wpforms-btn-blue' : 'wpforms-btn-orange';
?>

<div class="wpforms-ai-mcp-page <?php echo esc_attr( $context_class ); ?>">

	<section class="wpforms-ai-mcp-hero">

		<div class="wpforms-ai-mcp-hero-copy">

			<p class="wpforms-ai-mcp-eyebrow"><?php esc_html_e( 'WordPress Abilities API + WPForms', 'wpforms-lite' ); ?></p>
			<h1 class="wpforms-ai-mcp-title"><?php esc_html_e( 'Use WPForms With Your Favorite AI', 'wpforms-lite' ); ?></h1>
			<p class="wpforms-ai-mcp-lede">
				<?php
				echo wp_kses(
					sprintf(
						/* translators: %s: WPVibe.ai inline link. */
						__( 'Connect your WordPress site and WPForms to AI assistants like Claude, ChatGPT, Cursor, and more. Ask them to find submissions, build forms, or edit fields in plain English. No copy-pasting, no exports. Connect them with the free %s plugin.', 'wpforms-lite' ),
						sprintf(
							'<a href="%s" target="_blank" rel="noopener noreferrer"><strong>WPVibe.ai</strong></a>',
							esc_url( 'https://wpvibe.ai/?utm_source=wpformsplugin&utm_medium=link&utm_campaign=ai-mcp-page' )
						)
					),
					[
						'a'      => [
							'href'   => [],
							'target' => [],
							'rel'    => [],
						],
						'strong' => [],
					]
				);
				?>
			</p>

			<div class="wpforms-ai-mcp-cta-row">

				<?php if ( $state === 'not_installed' ) : ?>
					<?php if ( $can_install ) : ?>
						<button
							type="button"
							class="wpforms-btn <?php echo esc_attr( $wpvibe_button_color ); ?> wpforms-ai-mcp-wpvibe-button"
							data-action="install"
							data-plugin="<?php echo esc_attr( $wpvibe_download_url ); ?>"
						><?php esc_html_e( 'Install & Activate WPVibe', 'wpforms-lite' ); ?></button>
					<?php else : ?>
						<a
							href="https://wordpress.org/plugins/vibe-ai/"
							class="wpforms-btn <?php echo esc_attr( $wpvibe_button_color ); ?> wpforms-ai-mcp-wpvibe-button"
							target="_blank"
							rel="noopener noreferrer"
						><?php esc_html_e( 'Install from WordPress.org →', 'wpforms-lite' ); ?></a>
					<?php endif; ?>
				<?php elseif ( $state === 'installed_inactive' && $can_activate ) : ?>
					<button
						type="button"
						class="wpforms-btn <?php echo esc_attr( $wpvibe_button_color ); ?> wpforms-ai-mcp-wpvibe-button"
						data-action="activate"
						data-plugin="<?php echo esc_attr( $wpvibe_basename ); ?>"
					><?php esc_html_e( 'Activate WPVibe', 'wpforms-lite' ); ?></button>
				<?php elseif ( $state === 'active' ) : ?>
					<a
						class="wpforms-btn wpforms-btn-blue wpforms-ai-mcp-wpvibe-button wpforms-ai-mcp-wpvibe-go"
						href="<?php echo esc_url( $wpvibe_setup_url ); ?>"
					>
						<?php
						echo esc_html(
							$has_visited_wpvibe
								? __( 'Go To WPVibe', 'wpforms-lite' )
								: __( 'Set Up WPVibe', 'wpforms-lite' )
						);
						?>
					</a>
				<?php endif; ?>
				<?php /* installed_inactive without activate cap → no button, only the toggle is rendered below. */ ?>

				<span class="wpforms-toggle-control wpforms-ai-mcp-toggle">
					<input
						type="checkbox"
						id="wpforms-ai-mcp-write-toggle"
						value="1"
						<?php checked( $is_write_enabled, true ); ?>
					>
					<label class="wpforms-toggle-control-icon" for="wpforms-ai-mcp-write-toggle" aria-hidden="true"></label>
					<label class="wpforms-ai-mcp-toggle-label" for="wpforms-ai-mcp-write-toggle">
						<?php esc_html_e( 'Enable MCP Write Access', 'wpforms-lite' ); ?>
					</label>
					<?php if ( $context_class !== '' ) : ?>
						<i
							class="fa fa-question-circle-o wpforms-help-tooltip wpforms-ai-mcp-toggle-help"
							title="<?php esc_attr_e( 'In order for the AI MCP to be able to make changes to your form, Write Access must be enabled.', 'wpforms-lite' ); ?>"
							aria-hidden="true"
						></i>
					<?php endif; ?>
				</span>

			</div>

			<?php if ( $state === 'not_installed' && ! $can_install ) : ?>
				<p class="wpforms-ai-mcp-install-note">
					<?php esc_html_e( 'Your site is configured to disallow plugin installation from the dashboard.', 'wpforms-lite' ); ?>
				</p>
			<?php endif; ?>

		</div>

		<aside class="wpforms-ai-mcp-clients" aria-label="<?php esc_attr_e( 'Supported AI clients', 'wpforms-lite' ); ?>">
			<?php foreach ( $ai_clients as $client ) : ?>
				<div class="wpforms-ai-mcp-client-pill">
					<span class="wpforms-ai-mcp-client-icon">
						<img
							src="<?php echo esc_url( WPFORMS_PLUGIN_URL . 'assets/images/admin/tools/ai-mcp/' . $client['asset'] ); ?>"
							alt=""
							role="presentation"
						>
					</span>
					<span class="wpforms-ai-mcp-client-label"><?php echo esc_html( $client['label'] ); ?></span>
				</div>
			<?php endforeach; ?>
			<p class="wpforms-ai-mcp-clients-note"><?php esc_html_e( '+ Any MCP Client', 'wpforms-lite' ); ?></p>
		</aside>

	</section>

	<section class="wpforms-ai-mcp-capabilities">

		<header class="wpforms-ai-mcp-capabilities-head">
			<h2 class="wpforms-ai-mcp-capabilities-title"><?php esc_html_e( 'Everything WPForms Can Do With AI', 'wpforms-lite' ); ?></h2>
			<a
				class="wpforms-ai-mcp-docs-link"
				href="<?php echo esc_url( wpforms_utm_link( $docs_url, $docs_utm_medium, $docs_utm_content ) ); ?>"
				target="_blank"
				rel="noopener noreferrer"
			>
				<span class="wpforms-ai-mcp-docs-text"><?php esc_html_e( 'View Abilities API Documentation', 'wpforms-lite' ); ?></span>
				<span class="wpforms-ai-mcp-docs-arrow fa-solid fa-arrow-right" aria-hidden="true"></span>
			</a>
		</header>

		<div class="wpforms-ai-mcp-cards">
			<?php foreach ( $cards as $card ) : ?>
				<article class="wpforms-ai-mcp-card wpforms-ai-mcp-card-<?php echo esc_attr( $card['slug'] ); ?>">

					<header class="wpforms-ai-mcp-card-head">
						<span class="wpforms-ai-mcp-card-icon fa-solid fa-<?php echo esc_attr( $card['icon'] ); ?>" aria-hidden="true"></span>
						<span class="wpforms-ai-mcp-card-title-group">
							<h3 class="wpforms-ai-mcp-card-title"><?php echo esc_html( $card['title'] ); ?></h3>
							<?php if ( $card['pro'] && ! $is_pro ) : ?>
								<?php
								// In the builder the badge uses the shared .wpforms-badge system; the Tools page keeps its own styling.
								$pro_badge_class = 'wpforms-ai-mcp-pro-badge education-modal';

								if ( $context_class !== '' ) {
									$pro_badge_class = 'wpforms-badge wpforms-badge-sm wpforms-badge-inline wpforms-badge-rounded wpforms-badge-silver ' . $pro_badge_class;
								}
								?>
								<span
									class="<?php echo esc_attr( $pro_badge_class ); ?>"
									data-name="<?php echo esc_attr( $card['title'] ); ?>"
									data-plural="1"
									data-action="upgrade"
									role="button"
									tabindex="0"
								><?php esc_html_e( 'Pro', 'wpforms-lite' ); ?></span>
							<?php endif; ?>
						</span>
					</header>

					<ul class="wpforms-ai-mcp-card-bullets">
						<?php foreach ( $card['bullets'] as $bullet ) : ?>
							<li>
								<span class="wpforms-ai-mcp-card-dot" aria-hidden="true"></span>
								<span class="wpforms-ai-mcp-card-bullet-text"><?php echo esc_html( $bullet ); ?></span>
							</li>
						<?php endforeach; ?>
					</ul>

				</article>
			<?php endforeach; ?>
		</div>

	</section>

</div>
