<?php
/**
 * Drawer requirement component view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Helpers\IconHelper;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;

/**
 * Drawer Requirement Component View
 *
 * Displays a centered overlay in drawers when requirements aren't met
 * (e.g., plugins not installed/active, features disabled, etc.)
 *
 * @since 1.1.0
 */
class DrawerRequirementComponentView extends AbstractView implements ViewInterface {

	/**
	 * Icon helper instance.
	 *
	 * @since 1.1.0
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Constructor.
	 *
	 * @since 1.1.0
	 * @param IconHelper $icon_helper Icon helper instance.
	 */
	public function __construct( IconHelper $icon_helper ) {
		$this->icon_helper = $icon_helper;
	}

	/**
	 * Render the component.
	 *
	 * @since 1.1.0
	 * @param array $args Component arguments.
	 * @return void
	 */
	public function render( array $args = [] ): void {
		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output is escaped in get_contents method
		echo $this->get_contents( $args );
	}

	/**
	 * Get the component contents.
	 *
	 * @since 1.1.0
	 * @param array $args {
	 *     Component arguments.
	 *
	 *     @type string $icon_name        Icon identifier to display (e.g., 'earn-review', 'reward-points').
	 *     @type string $x_show           Alpine condition for when to show the entire overlay.
	 *     @type array  $messages         Array of conditional messages. Each message has:
	 *                                    - condition: Alpine x-if condition
	 *                                    - title: Heading text
	 *                                    - description: Explanatory text
	 *                                    - button_text: CTA button label
	 *                                    - button_url: Button link (optional, for <a> tag)
	 *                                    - button_click: Alpine click handler (optional, for <button> tag)
	 *                                    - button_target: Link target (optional, default '_self')
	 *                                    - button_external: Show external link icon (optional, default false)
	 * }
	 * @return string The component HTML.
	 */
	public function get_contents( array $args = [] ): string {
		$icon_name = $args['icon_name'] ?? 'info';
		$x_show    = $args['x_show'] ?? 'false';
		$messages  = $args['messages'] ?? [];

		ob_start();
		?>
		<template x-if="<?php echo esc_attr( $x_show ); ?>">
			<div class="absolute inset-0 flex items-center justify-center p-6 z-10">
				<div class="bg-white rounded-lg shadow-2xl p-8 max-w-md w-full ring-1 ring-gray-300/50">
					<div class="text-center text-base">
						<!-- Icon -->
						<div class="mx-auto flex items-center justify-center mb-4 text-gray-700">
							<?php echo wp_kses( $this->icon_helper->get_icon( $icon_name, 'size-12' ), svg_kses() ); ?>
						</div>

						<?php foreach ( $messages as $message ) : ?>
							<?php
							$condition       = $message['condition'] ?? 'true';
							$title           = $message['title'] ?? '';
							$description     = $message['description'] ?? '';
							$button_text     = $message['button_text'] ?? '';
							$button_url      = $message['button_url'] ?? '';
							$button_click    = $message['button_click'] ?? '';
							$button_target   = $message['button_target'] ?? '_self';
							$button_external = $message['button_external'] ?? false;
							?>
							<template x-if="<?php echo esc_attr( $condition ); ?>">
								<div>
									<!-- Title -->
									<h3 class="text-xl font-semibold text-gray-900 mb-3">
										<?php echo esc_html( $title ); ?>
									</h3>

									<!-- Description -->
									<p class="text-gray-600 mb-6">
										<?php echo esc_html( $description ); ?>
									</p>

									<?php if ( ! empty( $button_url ) ) : ?>
										<!-- Render as link -->
										<a href="<?php echo esc_url( $button_url ); ?>"
											<?php if ( '_blank' === $button_target ) : ?>
												target="_blank"
												rel="noopener noreferrer"
											<?php endif; ?>
											class="inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors w-full">
											<?php echo esc_html( $button_text ); ?>
											<?php if ( $button_external ) : ?>
												<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
												</svg>
											<?php endif; ?>
										</a>
									<?php elseif ( ! empty( $button_click ) ) : ?>
										<!-- Render as button -->
										<button type="button"
												x-on:click="<?php echo esc_attr( $button_click ); ?>"
												class="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors w-full">
											<?php echo esc_html( $button_text ); ?>
										</button>
									<?php endif; ?>
								</div>
							</template>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</template>
		<?php
		return ob_get_clean();
	}
}
