<?php
/**
 * Oauth Callback Modal
 */
if (!defined('ABSPATH')) die('No direct access allowed.');
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
	<head>
		<meta charset="<?php bloginfo('charset'); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title><?php echo esc_html($label).' '.esc_html__('Authentication', 'updraftplus'); ?></title>
		<style>
		body {
			font-family: sans-serif;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
		}
		.modal {
			padding: 2rem 2.5rem;
			border-radius: 1rem;
			text-align: center;
			max-width: 440px;
			width: 100%;
		}
		.modal img {
			width: 64px;
			height: 64px;
			object-fit: contain;
			margin-bottom: 1.5rem;
		}
		.modal h2 {
			margin: 0 0 .5rem 0;
			font-size: 1.4rem;
			color: #111827;
		}
		.modal p {
			color: #4b5563;
			line-height: 1.5;
		}
		a {
			color: #1d4ed8;
			text-decoration: underline;
		}
		.alert {
			margin-top: 1.5rem;
			padding: 1rem;
			border-radius: .5rem;
			text-align: left;
			font-size: .95rem;
		}
		.alert.success {
			background: #ecfdf5;
			border: 1px solid #a7f3d0;
			color: #065f46;
		}
		.alert.error {
			background: #fef2f2;
			border: 1px solid #fecaca;
			color: #991b1b;
		}
		button {
			background: #b45309;
			color: #fff;
			border: none;
			padding: .8rem 1.5rem;
			border-radius: .5rem;
			cursor: pointer;
			font-size: 1rem;
		}
		button:hover {
			background: #92400e;
		}
		.btn-primary {
			background: #b45309;
			color: #fff;
		}
		.btn-secondary {
			background: #f3f4f6;
			color: #374151;
			margin-left: .5rem;
		}
		.btn-secondary:hover {
			background: #e5e7eb;
		}
		.lead {
			color: #374151;
			margin-top: 1.2rem;
		}
		.hint {
			margin-top: 1rem;
			color: #6b7280;
			font-size: .9rem;
		}
		.actions {
			margin-top: 1rem;
		}
		.countdown {
			font-weight: bold;
		}
		</style>
	</head>
	<body>
		<div class="modal">
			<img src="<?php echo esc_url($logo); ?>" alt="<?php echo esc_attr($label); ?>">
			<h2 id="title">
				<?php
				/* translators: %s: storage label (e.g., Google Drive) */
				printf(esc_html__('%s authentication required', 'updraftplus'), esc_html($label));
				?>
			</h2>
			<p>
				<?php
				echo esc_html__('Your backup data is never sent to us.', 'updraftplus').' ';
				?>
				<br>
				<a href="https://teamupdraft.com/privacy/" target="_blank"><?php esc_html_e('View privacy policy.', 'updraftplus'); ?></a>
			</p>

			<?php if ('success' === $status) { ?>
				<div class="alert success">
					<strong>
						<?php
						/* translators: %s: storage label (e.g., Google Drive) */
						printf(esc_html__('%s connected successfully', 'updraftplus'), esc_html($label));
						?>
					</strong><br>
					<?php
					echo esc_html__('Follow the link below to return to UpdraftPlus and finish setup on your site.', 'updraftplus').' ';
					/* translators: %s: storage label (e.g., Google Drive) */
					printf(
						esc_html__('Once complete, backups will be sent securely to your %s.', 'updraftplus'),
						esc_html($label)
					);
					?>
				</div>

				<p id="desc" class="lead">
					<?php
					printf(
						wp_kses(
							__(
								/* translators: %s: countdown seconds number */
								'This window will close automatically in %s seconds.',
								'updraftplus'
							),
							$kses_allow_tags
						),
						'<span class="countdown" id="seconds">5</span>'
					);
					?>
				</p>

				<div class="actions" id="actions">
					<button class="btn-primary" id="close_now"><?php esc_html_e('Close now', 'updraftplus'); ?></button>
					<button class="btn-secondary" id="stay_open"><?php esc_html_e('Stay here', 'updraftplus'); ?></button>
				</div>

				<div class="hint" id="hint" aria-live="polite" style="display:none;">
					<?php esc_html_e('If the window doesn\'t close automatically, please close this window manually.', 'updraftplus'); ?>
				</div>
			<?php } else { ?>
				<div class="alert error">
					<strong><?php esc_html_e('Something went wrong', 'updraftplus'); ?></strong><br>
					<?php
					printf(
						/* translators: %s: storage label (e.g., Google Drive) */
						esc_html__('Your %s connection wasn\'t completed.', 'updraftplus'),
						esc_html($label)
					);
					echo esc_html__('This can happen if the authorization expired or the browser blocked the redirect.', 'updraftplus');
					?>
				</div>

				<p id="desc" class="lead">
					<?php
					printf(
						wp_kses(
							__(
								/* translators: %s: countdown seconds number */
								'This window will close automatically in %s seconds.',
								'updraftplus'
							),
							$kses_allow_tags
						),
						'<span class="countdown" id="seconds">5</span>'
					);
					?>
				</p>

				<div class="actions" id="actions">
					<button class="btn-primary" id="close_now"><?php esc_html_e('Close now', 'updraftplus'); ?></button>
					<button class="btn-secondary" id="stay_open"><?php esc_html_e('Stay here', 'updraftplus'); ?></button>
				</div>

				<div class="hint" id="hint" aria-live="polite" style="display:none;">
					<?php esc_html_e('If the window doesn\'t close automatically, please close this window manually.', 'updraftplus'); ?>
				</div>
			<?php } ?>
		</div>

		<script>
			(function(){
				let countdown_seconds = 5;
				const seconds_el = document.getElementById('seconds');
				const hint_el = document.getElementById('hint');
				const close_now_btn = document.getElementById('close_now');
				const stay_open_btn = document.getElementById('stay_open');

				function render_seconds(s){ seconds_el.textContent = String(s); }
				render_seconds(countdown_seconds);

				function notify_opener() {
					try {
						if (window.opener && !window.opener.closed) {
							window.opener.postMessage && window.opener.postMessage({ type: 'auth_success' }, '*');
							try { window.opener.focus && window.opener.focus(); } catch (e){}
						}
					} catch (err) {}
				}

				function attempt_close() {
					<?php if ('error' !== $status) { ?>
					notify_opener();
					<?php } ?>
					try { window.close(); } catch (err) {}
					setTimeout(function(){
						if (!window.closed) {
							hint_el.style.display = 'block';
						}
					}, 250);
				}

				let remaining = countdown_seconds;
				const timer = setInterval(function(){
					remaining--;
					if (remaining <= 0) {
						clearInterval(timer);
						render_seconds(0);
						attempt_close();
						return;
					}
					render_seconds(remaining);
				}, 1000);

				close_now_btn.addEventListener('click', function(){
					clearInterval(timer);
					render_seconds(0);
					attempt_close();
				});

				stay_open_btn.addEventListener('click', function(){
					clearInterval(timer);
					hint_el.style.display = 'none';
					document.getElementById('title').textContent = '<?php
					/* translators: %s: storage label (e.g., Google Drive) */
					echo esc_js(sprintf(__('You are authenticated with %s', 'updraftplus'), $label));
					?>';
					document.getElementById('desc').textContent = '<?php echo esc_js(__('You chose to keep this window open.', 'updraftplus')); ?>';
				});

				window.addEventListener('message', function(ev){
					try {
						if (ev && ev.data && ev.data.type === 'close_popup') {
							attempt_close();
						}
					} catch(e){}
				});
			})();
		</script>
	</body>
</html>