<?php
/**
 * Order Linking Verification standalone page view.
 *
 * Renders the success/error page for order linking verification.
 *
 * @package Awesomemotive\Rewardswp\Views
 * @since 1.2.0
 */

namespace Awesomemotive\Rewardswp\Views;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Controllers\OrderLinkingVerificationController;

use function Awesomemotive\Rewardswp\Helpers\frontend_ajax_url;

/**
 * Class OrderLinkingVerificationView
 *
 * @since 1.2.0
 */
class OrderLinkingVerificationView extends AbstractView {

	/**
	 * Render the verification result page.
	 *
	 * @since 1.2.0
	 *
	 * @param array $args {
	 *     Arguments for rendering the page.
	 *
	 *     @type string $title        Page title.
	 *     @type string $message      Main message to display.
	 *     @type string $button_url   URL for the main button.
	 *     @type string $button_text  Text for the main button.
	 *     @type string $type         Page type: 'success' or 'error'.
	 *     @type bool   $show_resend  Whether to show the resend verification button.
	 * }
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$defaults = [
			'title'       => '',
			'message'     => '',
			'button_url'  => home_url(),
			'button_text' => __( 'Return to Homepage', 'rewardswp' ),
			'type'        => 'success',
			'show_resend' => false,
		];

		$args = wp_parse_args( $args, $defaults );

		$icon_color = 'success' === $args['type'] ? '#22c55e' : '#ef4444';
		$icon_bg    = 'success' === $args['type'] ? '#dcfce7' : '#fee2e2';
		$icon_svg   = 'success' === $args['type']
			? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />'
			: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />';

		$site_name = get_bloginfo( 'name' );
		?>
		<!DOCTYPE html>
		<html <?php language_attributes(); ?>>
		<head>
			<meta charset="<?php bloginfo( 'charset' ); ?>">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title><?php echo esc_html( $args['title'] . ' - ' . $site_name ); ?></title>
			<?php $this->render_styles(); ?>
		</head>
		<body>
			<div class="container">
				<div class="icon" style="background-color: <?php echo esc_attr( $icon_bg ); ?>;">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="<?php echo esc_attr( $icon_color ); ?>">
						<?php echo $icon_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					</svg>
				</div>
				<h1><?php echo esc_html( $args['title'] ); ?></h1>
				<p class="message"><?php echo esc_html( $args['message'] ); ?></p>
				<a href="<?php echo esc_url( $args['button_url'] ); ?>" class="button">
					<?php echo esc_html( $args['button_text'] ); ?>
				</a>

				<?php if ( $args['show_resend'] && is_user_logged_in() ) : ?>
					<?php $this->render_resend_section(); ?>
				<?php endif; ?>

				<p class="site-name"><?php echo esc_html( $site_name ); ?></p>
			</div>
		</body>
		</html>
		<?php
	}

	/**
	 * Render the page styles.
	 *
	 * @since 1.2.0
	 *
	 * @return void
	 */
	private function render_styles(): void {
		?>
		<style>
			* { margin: 0; padding: 0; box-sizing: border-box; }
			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
				background-color: #f3f4f6;
				min-height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
			}
			.container {
				background: white;
				border-radius: 16px;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
				padding: 48px;
				max-width: 480px;
				width: 100%;
				text-align: center;
			}
			.icon {
				width: 64px;
				height: 64px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 24px;
			}
			.icon svg {
				width: 32px;
				height: 32px;
			}
			h1 {
				font-size: 24px;
				font-weight: 700;
				color: #111827;
				margin-bottom: 12px;
			}
			.message {
				font-size: 16px;
				color: #6b7280;
				line-height: 1.6;
				margin-bottom: 32px;
			}
			.button {
				display: inline-block;
				background-color: #2563eb;
				color: white;
				text-decoration: none;
				padding: 12px 24px;
				border-radius: 8px;
				font-weight: 600;
				font-size: 14px;
				transition: background-color 0.2s;
			}
			.button:hover {
				background-color: #1d4ed8;
			}
			.resend-section {
				margin-top: 24px;
				padding-top: 24px;
				border-top: 1px solid #e5e7eb;
			}
			.resend-text {
				font-size: 14px;
				color: #6b7280;
				margin-bottom: 12px;
			}
			.resend-button {
				background: none;
				border: 1px solid #d1d5db;
				color: #374151;
				padding: 8px 16px;
				border-radius: 6px;
				font-size: 14px;
				cursor: pointer;
				transition: all 0.2s;
			}
			.resend-button:hover {
				background-color: #f9fafb;
				border-color: #9ca3af;
			}
			.resend-button:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
			.resend-message {
				font-size: 14px;
				margin-top: 12px;
				display: none;
			}
			.resend-message.success { color: #22c55e; }
			.resend-message.error { color: #ef4444; }
			.site-name {
				font-size: 14px;
				color: #9ca3af;
				margin-top: 32px;
			}
		</style>
		<?php
	}

	/**
	 * Render the resend verification section.
	 *
	 * @since 1.2.0
	 *
	 * @return void
	 */
	private function render_resend_section(): void {
		$nonce         = wp_create_nonce( OrderLinkingVerificationController::AJAX_NONCE );
		$ajax_url      = frontend_ajax_url();
		$sending_text  = __( 'Sending...', 'rewardswp' );
		$button_text   = __( 'Resend Verification Email', 'rewardswp' );
		$error_message = __( 'An error occurred. Please try again.', 'rewardswp' );
		?>
		<div class="resend-section">
			<p class="resend-text"><?php esc_html_e( 'Need a new verification link?', 'rewardswp' ); ?></p>
			<button type="button" class="resend-button" id="resend-btn">
				<?php echo esc_html( $button_text ); ?>
			</button>
			<p class="resend-message" id="resend-message"></p>
		</div>
		<script>
			document.getElementById('resend-btn').addEventListener('click', function() {
				var btn = this;
				var msg = document.getElementById('resend-message');
				btn.disabled = true;
				btn.textContent = '<?php echo esc_js( $sending_text ); ?>';
				msg.style.display = 'none';

				var formData = new FormData();
				formData.append('action', 'rewardswp_resend_order_verification');
				formData.append('_ajax_nonce', '<?php echo esc_js( $nonce ); ?>');

				fetch('<?php echo esc_js( $ajax_url ); ?>', {
					method: 'POST',
					credentials: 'same-origin',
					body: formData
				})
				.then(function(response) { return response.json(); })
				.then(function(data) {
					msg.textContent = data.data.message;
					msg.className = 'resend-message ' + (data.success ? 'success' : 'error');
					msg.style.display = 'block';
					btn.disabled = false;
					btn.textContent = '<?php echo esc_js( $button_text ); ?>';
				})
				.catch(function() {
					msg.textContent = '<?php echo esc_js( $error_message ); ?>';
					msg.className = 'resend-message error';
					msg.style.display = 'block';
					btn.disabled = false;
					btn.textContent = '<?php echo esc_js( $button_text ); ?>';
				});
			});
		</script>
		<?php
	}
}

