<?php
/**
 * API Key Gate — shown when no LLM provider has an API key configured.
 *
 * @package SlideMind
 * @since 3.3.0
 */

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

$settings_url = admin_url( 'admin.php?page=slidemind-settings' );
$docs_url     = 'https://docs.slidemind.app/wordpress/getting-started/#get-your-api-key';
?>
<div class="sm-wrap">
	<div class="sm-header">
		<h1><?php esc_html_e( 'New Slide', 'slidemind' ); ?></h1>
	</div>

	<div class="sm-teaser">
		<div class="sm-teaser__overlay">
			<div class="sm-teaser__card">
				<span class="dashicons dashicons-admin-network sm-teaser__lock-icon"></span>
				<h2 class="sm-teaser__title">
					<?php esc_html_e( 'API key required', 'slidemind' ); ?>
				</h2>
				<p class="sm-teaser__desc">
					<?php esc_html_e( 'To create a slide, you first need to configure an API key for at least one LLM provider (OpenRouter, Anthropic, OpenAI, Mistral, or Google). This key allows SlideMind to communicate with the AI model.', 'slidemind' ); ?>
				</p>
				<a href="<?php echo esc_url( $settings_url ); ?>" class="sm-btn sm-btn-primary sm-teaser__cta-btn">
					<?php esc_html_e( 'I understand', 'slidemind' ); ?>
					<span class="dashicons dashicons-arrow-right-alt2"></span>
				</a>
				<p class="sm-teaser__sub">
					<a href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener noreferrer">
						<?php esc_html_e( 'How to get an API key', 'slidemind' ); ?>
						<span class="dashicons dashicons-external" style="font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom;"></span>
					</a>
				</p>
			</div>
		</div>

		<!-- Blurred preview (wizard skeleton) -->
		<div class="sm-teaser__preview" aria-hidden="true">
			<div class="sm-card" style="padding: 24px;">
				<!-- Fake wizard step indicators -->
				<div style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: center;">
					<div style="width: 32px; height: 32px; background: var(--sm-primary-light); border-radius: 50%;"></div>
					<div style="width: 60px; height: 4px; background: var(--sm-gray-200); border-radius: 2px; align-self: center;"></div>
					<div style="width: 32px; height: 32px; background: var(--sm-gray-200); border-radius: 50%;"></div>
					<div style="width: 60px; height: 4px; background: var(--sm-gray-200); border-radius: 2px; align-self: center;"></div>
					<div style="width: 32px; height: 32px; background: var(--sm-gray-200); border-radius: 50%;"></div>
					<div style="width: 60px; height: 4px; background: var(--sm-gray-200); border-radius: 2px; align-self: center;"></div>
					<div style="width: 32px; height: 32px; background: var(--sm-gray-200); border-radius: 50%;"></div>
				</div>
				<!-- Fake form fields -->
				<div style="margin-bottom: 16px;">
					<div style="width: 120px; height: 14px; background: var(--sm-gray-200); border-radius: 3px; margin-bottom: 8px;"></div>
					<div style="height: 40px; background: var(--sm-gray-100); border-radius: 6px;"></div>
				</div>
				<div style="margin-bottom: 16px;">
					<div style="width: 80px; height: 14px; background: var(--sm-gray-200); border-radius: 3px; margin-bottom: 8px;"></div>
					<div style="height: 40px; background: var(--sm-gray-100); border-radius: 6px;"></div>
				</div>
				<div style="margin-bottom: 16px;">
					<div style="width: 150px; height: 14px; background: var(--sm-gray-200); border-radius: 3px; margin-bottom: 8px;"></div>
					<div style="display: flex; gap: 12px;">
						<div style="flex: 1; height: 60px; background: var(--sm-gray-100); border-radius: 6px;"></div>
						<div style="flex: 1; height: 60px; background: var(--sm-gray-100); border-radius: 6px;"></div>
						<div style="flex: 1; height: 60px; background: var(--sm-gray-100); border-radius: 6px;"></div>
					</div>
				</div>
				<div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px;">
					<div style="width: 100px; height: 38px; background: var(--sm-gray-200); border-radius: 6px;"></div>
					<div style="width: 100px; height: 38px; background: var(--sm-primary-light); border-radius: 6px;"></div>
				</div>
			</div>
		</div>
	</div>
</div>
