<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template-scope locals in included view files are not plugin globals.

?>
<div class="fotogenic-ai-studio-shell" data-fa-studio-content>
	<nav data-fa-stage-navigation aria-label="<?php esc_attr_e( 'Studio progress', 'fotogenic-ai' ); ?>">
		<ol data-fa-stage-steps>
			<li data-fa-step="select" aria-current="step">
				<button type="button" data-fa-stage-target="select" aria-label="<?php esc_attr_e( 'Open Select step', 'fotogenic-ai' ); ?>">
					<span class="fotogenic-ai-icon fotogenic-ai-icon--check fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" data-fa-stage-check aria-hidden="true" hidden></span>
					<strong><?php esc_html_e( 'Select', 'fotogenic-ai' ); ?></strong>
				</button>
			</li>
			<li data-fa-step="configure">
				<button type="button" data-fa-stage-target="configure" aria-label="<?php esc_attr_e( 'Open Configure step', 'fotogenic-ai' ); ?>" disabled>
					<span class="fotogenic-ai-icon fotogenic-ai-icon--check fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" data-fa-stage-check aria-hidden="true" hidden></span>
					<strong><?php esc_html_e( 'Configure', 'fotogenic-ai' ); ?></strong>
				</button>
			</li>
			<li data-fa-step="generate">
				<button type="button" data-fa-stage-target="review" aria-label="<?php esc_attr_e( 'Open Generate step', 'fotogenic-ai' ); ?>" disabled>
					<span class="fotogenic-ai-icon fotogenic-ai-icon--check fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" data-fa-stage-check aria-hidden="true" hidden></span>
					<strong><?php esc_html_e( 'Generate', 'fotogenic-ai' ); ?></strong>
				</button>
			</li>
			<li data-fa-step="summary">
				<button type="button" data-fa-stage-target="results" aria-label="<?php esc_attr_e( 'Open Summary step', 'fotogenic-ai' ); ?>" disabled>
					<span class="fotogenic-ai-icon fotogenic-ai-icon--check fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" data-fa-stage-check aria-hidden="true" hidden></span>
					<strong><?php esc_html_e( 'Summary', 'fotogenic-ai' ); ?></strong>
				</button>
			</li>
		</ol>
	</nav>

	<p class="fotogenic-ai-studio-sr-only" data-fa-live-region role="status" aria-live="polite" aria-atomic="true"></p>

	<section
		class="fotogenic-ai-studio-view fotogenic-ai-studio-view--select"
		data-fa-view="select"
		data-fa-select-layout
		aria-labelledby="fotogenic-ai-select-title"
	>
		<div class="fotogenic-ai-studio-workbench fotogenic-ai-studio-workbench--select" data-fa-select-workspace>
			<section class="fotogenic-ai-studio-pane fotogenic-ai-studio-pane--source" data-fa-select-pane aria-labelledby="fotogenic-ai-select-title">
				<h2 class="fotogenic-ai-studio-sr-only" id="fotogenic-ai-select-title" tabindex="-1"><?php esc_html_e( 'Select sources', 'fotogenic-ai' ); ?></h2>

				<div data-fa-mount="source-types">
					<label class="fotogenic-ai-source-types">
						<span class="fotogenic-ai-studio-sr-only"><?php esc_html_e( 'Source type', 'fotogenic-ai' ); ?></span>
						<select class="fotogenic-ai-studio-control" data-fa-control="source-type">
								<?php foreach ( $source_options as $source_type => $source_option ) : ?>
									<option value="<?php echo esc_attr( (string) $source_type ); ?>" <?php selected( $selected_source_type, (string) $source_type ); ?>>
										<?php /* translators: %s: source type label. */ ?>
										<?php echo esc_html( sprintf( __( '%s source', 'fotogenic-ai' ), (string) ( $source_option['label'] ?? $source_type ) ) ); ?>
								</option>
							<?php endforeach; ?>
						</select>
					</label>
				</div>

				<?php if ( ! $woocommerce_available ) : ?>
					<div class="fotogenic-ai-studio-availability">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--warning fotogenic-ai-icon--fill fotogenic-ai-icon--size-17" aria-hidden="true"></span>
						<span>
							<strong><?php esc_html_e( 'WooCommerce is unavailable.', 'fotogenic-ai' ); ?></strong>
							<?php esc_html_e( 'Product workflows are disabled; Media, Post, Page, and supported Media workflows remain available.', 'fotogenic-ai' ); ?>
						</span>
					</div>
				<?php endif; ?>

				<div class="fotogenic-ai-source-canvas">
					<div data-fa-mount="source"></div>
				</div>
			</section>
		</div>
		<footer class="fotogenic-ai-studio-stage-footer" data-fa-select-footer>
			<p data-fa-select-footer-copy data-fa-selection-summary><?php esc_html_e( 'Select at least one exact source to continue.', 'fotogenic-ai' ); ?></p>
			<button type="button" data-fa-action="configure" data-fa-select-continue disabled>
				<?php esc_html_e( 'Continue to Configure', 'fotogenic-ai' ); ?>
			</button>
		</footer>
	</section>

	<section
		class="fotogenic-ai-studio-view fotogenic-ai-studio-view--configure"
		data-fa-view="configure"
		aria-labelledby="fotogenic-ai-configure-title"
		hidden
		inert
	>
		<div class="fotogenic-ai-studio-workbench fotogenic-ai-studio-workbench--configure">
			<section class="fotogenic-ai-studio-pane fotogenic-ai-studio-pane--recipe" aria-labelledby="fotogenic-ai-recipe-title">
				<h2 class="fotogenic-ai-studio-sr-only" id="fotogenic-ai-configure-title" tabindex="-1"><?php esc_html_e( 'Configure generation', 'fotogenic-ai' ); ?></h2>
				<h3 class="fotogenic-ai-studio-sr-only" id="fotogenic-ai-recipe-title"><?php esc_html_e( 'Generation settings', 'fotogenic-ai' ); ?></h3>
				<div class="fotogenic-ai-recipe-workspace">
					<div class="fotogenic-ai-recipe-mount" data-fa-mount="recipe"></div>
					<p class="fotogenic-ai-studio-empty-copy fotogenic-ai-recipe-empty" data-fa-empty="recipe">
						<?php esc_html_e( 'Recipe controls will appear when the workflow definition is ready.', 'fotogenic-ai' ); ?>
					</p>
					<footer class="fotogenic-ai-recipe-workspace-actions" data-fa-configure-footer>
						<div
							class="fotogenic-ai-studio-validation fotogenic-ai-recipe-action-validation"
							id="fotogenic-ai-primary-action-reason"
							data-fa-validation
							role="status"
							aria-live="polite"
						>
							<?php esc_html_e( 'Complete the required configuration to continue.', 'fotogenic-ai' ); ?>
						</div>
						<div class="fotogenic-ai-recipe-back-actions">
							<button type="button" class="fotogenic-ai-recipe-secondary" data-fa-action="configure-back">
								<span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-left fotogenic-ai-icon--regular fotogenic-ai-icon--size-17" aria-hidden="true"></span>
								<span data-fa-configure-back-label><?php esc_html_e( 'Back', 'fotogenic-ai' ); ?></span>
							</button>
							<div class="fotogenic-ai-recipe-footer-actions-host" data-fa-mount="recipe-tools"></div>
						</div>
						<div class="fotogenic-ai-recipe-forward-actions">
							<div class="fotogenic-ai-recipe-run-settings-host" data-fa-mount="run-settings"></div>
							<button type="button" class="fotogenic-ai-recipe-primary" data-fa-action="configure-next" hidden>
								<?php esc_html_e( 'Continue', 'fotogenic-ai' ); ?>
								<span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-right fotogenic-ai-icon--bold fotogenic-ai-icon--size-17" aria-hidden="true"></span>
							</button>
							<button
								type="button"
								class="fotogenic-ai-recipe-primary"
								data-fa-action="review"
								aria-describedby="fotogenic-ai-primary-action-reason"
								disabled
							>
								<?php esc_html_e( 'Continue to generate', 'fotogenic-ai' ); ?>
								<span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-right fotogenic-ai-icon--bold fotogenic-ai-icon--size-17" aria-hidden="true"></span>
							</button>
						</div>
					</footer>
				</div>
			</section>

			<div class="fotogenic-ai-studio-sr-only" aria-hidden="true">
				<div data-fa-mount="summary"></div>
			</div>
		</div>
	</section>

	<section class="fotogenic-ai-studio-view" data-fa-view="review" data-fa-mount="review" aria-label="<?php esc_attr_e( 'Review', 'fotogenic-ai' ); ?>" hidden inert></section>
	<section class="fotogenic-ai-studio-view" data-fa-view="progress" data-fa-mount="progress" aria-label="<?php esc_attr_e( 'Progress', 'fotogenic-ai' ); ?>" hidden inert></section>
	<section class="fotogenic-ai-studio-view" data-fa-view="error" data-fa-mount="error" aria-label="<?php esc_attr_e( 'Error and recovery', 'fotogenic-ai' ); ?>" hidden inert></section>
	<section class="fotogenic-ai-studio-view" data-fa-view="results" data-fa-mount="results" aria-label="<?php esc_attr_e( 'Results', 'fotogenic-ai' ); ?>" hidden inert></section>
</div>
<?php // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
