<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$fotogenic_ai_header_settings_url = isset( $fotogenic_ai_header_settings_url ) ? (string) $fotogenic_ai_header_settings_url : \Fotogenic_AI\fotogenic_ai_get_settings_url();
$fotogenic_ai_header_history_url  = \Fotogenic_AI\fotogenic_ai_get_studio_url( [ 'view' => 'history' ] );
$fotogenic_ai_header_account_url  = \Fotogenic_AI\Settings_Page::get_account_url();
$fotogenic_ai_header_pricing_url  = \Fotogenic_AI\Settings_Page::get_pricing_url();
$fotogenic_ai_header_credits_url  = \Fotogenic_AI\Settings_Page::get_buy_credits_url();
$fotogenic_ai_header_connected    = ! empty( $auth_connected );
$fotogenic_ai_header_email        = $fotogenic_ai_header_connected ? (string) ( $auth_status['user']['email'] ?? '' ) : '';
$fotogenic_ai_header_balance      = null === $credits_balance
	? esc_html__( 'Balance unknown', 'fotogenic-ai' )
	: sprintf(
		/* translators: %s: current Fotogenic credits balance. */
		esc_html__( '%s credits', 'fotogenic-ai' ),
		number_format_i18n( (float) $credits_balance )
	);
$fotogenic_ai_header_account_label = $fotogenic_ai_header_connected
	? sprintf(
		/* translators: %s: current Fotogenic credits balance. */
		__( '%s, Account and credits', 'fotogenic-ai' ),
		$fotogenic_ai_header_balance
	)
	: __( 'Sign in, Account and credits', 'fotogenic-ai' );
?>
<div data-fa-header-actions data-fa-auth-connected="<?php echo $fotogenic_ai_header_connected ? '1' : '0'; ?>">
	<div id="fotogenic-ai-notifications-root"></div>
	<button
		type="button"
		data-fa-notification-toggle
		aria-label="<?php esc_attr_e( 'Notifications', 'fotogenic-ai' ); ?>"
	>
		<span class="fotogenic-ai-icon fotogenic-ai-icon--bell fotogenic-ai-icon--regular fotogenic-ai-icon--size-19" data-fa-notification-icon aria-hidden="true"></span>
	</button>
	<div data-fa-account-cluster aria-label="<?php esc_attr_e( 'Fotogenic account', 'fotogenic-ai' ); ?>">
		<span data-fa-account-connection-status<?php echo $fotogenic_ai_header_connected ? ' hidden' : ''; ?>>
			<span data-fa-account-connection-dot aria-hidden="true"></span>
			<span data-fa-account-connection-copy><?php esc_html_e( 'Not connected', 'fotogenic-ai' ); ?></span>
		</span>
		<span data-fa-account-divider aria-hidden="true"<?php echo $fotogenic_ai_header_connected ? ' hidden' : ''; ?>></span>
		<div data-fa-account-dropdown>
			<button
				type="button"
				data-fa-account-toggle
				aria-expanded="false"
				aria-haspopup="menu"
				aria-controls="fotogenic-ai-header-account-menu"
				aria-label="<?php echo esc_attr( $fotogenic_ai_header_account_label ); ?>"
			>
				<span class="fotogenic-ai-icon <?php echo $fotogenic_ai_header_connected ? 'fotogenic-ai-icon--coins fotogenic-ai-icon--size-19' : 'fotogenic-ai-icon--sign-in fotogenic-ai-icon--size-18'; ?> fotogenic-ai-icon--regular" data-fa-account-trigger-icon aria-hidden="true"></span>
				<strong>
					<span id="fotogenic-ai-credits-total" data-fa-credits<?php echo $fotogenic_ai_header_connected ? '' : ' hidden'; ?>>
						<?php echo null === $credits_balance ? esc_html( '—' ) : esc_html( number_format_i18n( (float) $credits_balance ) ); ?>
					</span>
					<span data-fa-credits-label<?php echo $fotogenic_ai_header_connected ? '' : ' hidden'; ?>> <?php esc_html_e( 'credits', 'fotogenic-ai' ); ?></span>
					<span data-fa-account-signin<?php echo $fotogenic_ai_header_connected ? ' hidden' : ''; ?>><?php esc_html_e( 'Sign in', 'fotogenic-ai' ); ?></span>
				</strong>
				<span class="fotogenic-ai-icon fotogenic-ai-icon--caret-down fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" data-fa-account-caret aria-hidden="true"></span>
			</button>
			<div id="fotogenic-ai-header-account-menu" data-fa-account-menu role="menu" aria-label="<?php esc_attr_e( 'Fotogenic account and credits', 'fotogenic-ai' ); ?>" hidden>
				<div data-fa-account-summary>
				<span data-fa-account-status role="status">
					<span data-fa-account-status-dot aria-hidden="true"></span>
					<span data-fa-account-status-copy><?php echo $fotogenic_ai_header_connected ? esc_html__( 'Connected account', 'fotogenic-ai' ) : esc_html__( 'Fotogenic account', 'fotogenic-ai' ); ?></span>
				</span>
				<small data-fa-account-email<?php echo '' === $fotogenic_ai_header_email ? ' hidden' : ''; ?>><?php echo esc_html( $fotogenic_ai_header_email ); ?></small>
				<strong data-fa-account-balance><?php echo $fotogenic_ai_header_connected ? esc_html( $fotogenic_ai_header_balance ) : esc_html__( 'Connect to continue', 'fotogenic-ai' ); ?></strong>
				<small data-fa-account-help <?php echo $fotogenic_ai_header_connected ? 'hidden' : ''; ?>><?php echo $fotogenic_ai_header_connected ? '' : esc_html__( 'Sign in to view credits and start generations.', 'fotogenic-ai' ); ?></small>
				</div>
				<div data-fa-account-connected-actions<?php echo $fotogenic_ai_header_connected ? '' : ' hidden'; ?>>
				<a href="<?php echo esc_url( $fotogenic_ai_header_credits_url ); ?>" data-fa-account-primary data-fa-account-topup target="_blank" rel="noopener noreferrer" role="menuitem">
					<span class="fotogenic-ai-icon fotogenic-ai-icon--credit-card fotogenic-ai-icon--bold fotogenic-ai-icon--size-18" aria-hidden="true"></span>
					<span><strong><?php esc_html_e( 'Top up credits', 'fotogenic-ai' ); ?></strong><small><?php esc_html_e( 'Add credits in your Fotogenic account.', 'fotogenic-ai' ); ?></small></span>
					<span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-right fotogenic-ai-icon--bold fotogenic-ai-icon--size-17" aria-hidden="true"></span>
				</a>
				<div data-fa-account-list>
					<a href="<?php echo esc_url( $fotogenic_ai_header_account_url ); ?>" target="_blank" rel="noopener noreferrer" role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--user-circle fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Manage account', 'fotogenic-ai' ); ?></span><span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-square-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-14" aria-hidden="true"></span>
					</a>
					<a href="<?php echo esc_url( $fotogenic_ai_header_pricing_url ); ?>" data-fa-account-pricing target="_blank" rel="noopener noreferrer" role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--coins fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Pricing & plans', 'fotogenic-ai' ); ?></span><span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-square-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-14" aria-hidden="true"></span>
					</a>
					<button type="button" data-fa-open-history data-fa-history-url="<?php echo esc_url( $fotogenic_ai_header_history_url ); ?>" role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--clock-counter-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Run history', 'fotogenic-ai' ); ?></span><span aria-hidden="true"></span>
					</button>
					<a href="<?php echo esc_url( $fotogenic_ai_header_settings_url ); ?>" data-fa-settings-route-link role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--gear-six fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Plugin settings', 'fotogenic-ai' ); ?></span><span aria-hidden="true"></span>
					</a>
					<button type="button" data-fa-credits-refresh role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--arrows-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Refresh balance', 'fotogenic-ai' ); ?></span><span aria-hidden="true"></span>
					</button>
				</div>
				<button type="button" data-fa-account-logout role="menuitem">
					<span class="fotogenic-ai-icon fotogenic-ai-icon--sign-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><strong><?php esc_html_e( 'Log out', 'fotogenic-ai' ); ?></strong><small><?php esc_html_e( 'Disconnect this WordPress site.', 'fotogenic-ai' ); ?></small></span>
				</button>
				</div>
				<div data-fa-account-disconnected-actions<?php echo $fotogenic_ai_header_connected ? ' hidden' : ''; ?>>
				<button type="button" data-fa-account-primary data-fa-account-login role="menuitem">
					<span class="fotogenic-ai-icon fotogenic-ai-icon--sign-in fotogenic-ai-icon--bold fotogenic-ai-icon--size-18" aria-hidden="true"></span>
					<span><strong data-fa-account-login-label><?php esc_html_e( 'Login to Fotogenic', 'fotogenic-ai' ); ?></strong><small><?php esc_html_e( 'Connect this WordPress site securely.', 'fotogenic-ai' ); ?></small></span>
					<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 data-fa-account-list>
					<a href="<?php echo esc_url( $fotogenic_ai_header_pricing_url ); ?>" data-fa-account-pricing target="_blank" rel="noopener noreferrer" role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--coins fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Pricing & plans', 'fotogenic-ai' ); ?></span><span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-square-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-14" aria-hidden="true"></span>
					</a>
					<button type="button" data-fa-open-history data-fa-history-url="<?php echo esc_url( $fotogenic_ai_header_history_url ); ?>" role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--clock-counter-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Run history', 'fotogenic-ai' ); ?></span><span aria-hidden="true"></span>
					</button>
					<a href="<?php echo esc_url( $fotogenic_ai_header_settings_url ); ?>" data-fa-settings-route-link role="menuitem">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--gear-six fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span><span><?php esc_html_e( 'Plugin settings', 'fotogenic-ai' ); ?></span><span aria-hidden="true"></span>
					</a>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
