<?php
/**
 * Upgrade modal view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Modals
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Modals;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use function Awesomemotive\Rewardswp\Helpers\get_view_component;

class UpgradeModalView extends AbstractView implements ViewInterface {
	public function render( array $args = [] ): void {
		// Inner content for the modal
		ob_start();
		?>
		<div
			x-on:show-upgrade-modal.window="upgradeModal = true; currentUpgradeModalContent = upgradeModalContent[$event.detail];"
		>
			<div class="text-left p-10 pb-0">
				<h3 class="text-xl leading-none font-semibold flex items-center gap-2 mb-3" id="modal-title" x-text="currentUpgradeModalContent.title"></h3>
				<p class="text-gray-600 text-base text-pretty" x-text="currentUpgradeModalContent.message"></p>
			</div>

			<div class="px-10 pb-10 pt-6 text-base">
				<!-- Features List -->
				<ul class="pl-0 space-y-3 list-none mb-6">
					<template x-for="feature in currentUpgradeModalContent.features" x-bind:key="feature">
						<li class="flex items-center gap-2 text-gray-700">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-green-500 h-5 w-5"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
							<span x-text="feature"></span>
						</li>
					</template>
				</ul>

				<!-- Required Plan Notice -->
				<p class="text-sm text-gray-500 mb-4" x-html="currentUpgradeModalContent.required_plan"></p>

				<!-- Upgrade Button -->
				<a
					x-bind:href="currentUpgradeModalContent.button_url"
					target="_blank"
					rel="noopener noreferrer"
					class="inline-flex justify-center w-full px-6 py-2.5 text-sm rounded-lg font-semibold shadow-sm cursor-pointer items-center transition-colors duration-150 text-white bg-blue-600 border border-transparent hover:bg-blue-700 focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
					x-text="currentUpgradeModalContent.button_text"
				></a>

				<!-- Compare Plans Link -->
				<div class="mt-3 text-center">
					<a
						x-bind:href="currentUpgradeModalContent.compare_url"
						target="_blank"
						rel="noopener noreferrer"
						class="text-sm text-gray-500 hover:text-gray-700 hover:underline hover:underline-offset-4"
					><?php esc_html_e( 'Compare plans', 'rewardswp' ); ?></a>
				</div>
			</div>
		</div>
		<?php
		$content = ob_get_clean();

		// Render using modal component
		/* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped by the function */
		echo get_view_component(
			'modal',
			[
				'show_var'           => 'upgradeModal',
				'content'            => $content,
				'width'              => 'md',
				'additional_classes' => 'min-w-[550px]',
			]
		);
	}
}
