<?php
/**
 * Step: connect the account.
 *
 * @package TextTango
 *
 * @var array<string, mixed> $args           View data.
 * @var array<string, mixed> $texttango_step This step's state.
 */

declare( strict_types=1 );

defined( 'ABSPATH' ) || exit;

$texttango_done = ! empty( $texttango_step['done'] );
?>
<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
	<input type="hidden" name="action" value="<?php echo esc_attr( (string) $args['action'] ); ?>" />
	<input type="hidden" name="step" value="token" />
	<?php wp_nonce_field( (string) $args['action'] ); ?>

	<p class="tt-mb-5 tt-text-sm tt-text-slate-500">
		<?php
		printf(
			/* translators: %s: link to the TextTango dashboard token page. */
			esc_html__( 'Tokens cannot be created from WordPress. Make one in the dashboard and paste it here: %s', 'texttango' ),
			'<a class="tt-font-medium tt-text-brand-600" target="_blank" rel="noopener noreferrer" href="' . esc_url( (string) $args['token_page'] ) . '">' . esc_html__( 'Profile → API Tokens', 'texttango' ) . '</a>'
		);
		?>
	</p>

	<label class="tt-label" for="texttango-wizard-token"><?php esc_html_e( 'API token', 'texttango' ); ?></label>
	<input
		class="tt-input"
		id="texttango-wizard-token"
		name="api_key"
		type="password"
		autocomplete="off"
		spellcheck="false"
		placeholder="<?php echo esc_attr( $texttango_done ? __( 'Saved — leave blank to keep it', 'texttango' ) : __( 'Paste your API token', 'texttango' ) ); ?>" />
	<p class="tt-hint">
		<?php esc_html_e( 'Stored encrypted. It is never shown again, sent to JavaScript, or returned by any REST route.', 'texttango' ); ?>
		<?php esc_html_e( 'Abilities needed:', 'texttango' ); ?>
		<code class="tt-rounded tt-bg-slate-100 tt-px-1 tt-py-0.5 tt-text-xs"><?php echo esc_html( implode( ', ', (array) $args['abilities'] ) ); ?></code>
	</p>

	<div class="tt-stage-actions">
		<button type="submit" class="tt-btn tt-btn-primary">
			<?php echo esc_html( $texttango_done ? __( 'Save and continue', 'texttango' ) : __( 'Save token', 'texttango' ) ); ?>
		</button>

		<?php if ( $texttango_done ) : ?>
			<button type="button" class="tt-btn tt-btn-secondary" data-texttango-action="test-connection">
				<?php esc_html_e( 'Test connection', 'texttango' ); ?>
			</button>
		<?php endif; ?>

		<span class="tt-text-sm" data-texttango-result aria-live="polite"></span>
	</div>
</form>
