<?php
/**
 * Notification item 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\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Helpers\IconHelper;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;

/**
 * Reusable notification item component for displaying notifications
 * in both the dashboard card and the header drawer.
 *
 * @since 1.0.0
 */
class NotificationItemComponentView extends AbstractView implements ViewInterface {

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

	/**
	 * Construct.
	 *
	 * @since 1.0.0
	 *
	 * @param IconHelper $icon_helper
	 */
	public function __construct( IconHelper $icon_helper ) {
		$this->icon_helper = $icon_helper;
	}

	/**
	 * Render a notification item.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args {
	 *     Notification configuration.
	 *
	 *     @type array  $notification   Notification data (title, message, date, btns, etc.)
	 *     @type string $mode           Display mode: 'compact' or 'full' (default: 'full')
	 *     @type bool   $show_divider   Whether to show bottom divider (default: true)
	 *     @type string $alpine_var     Alpine.js variable name for the notification (default: 'notification')
	 *     @type string $alpine_action  Alpine.js action for dismiss (default: 'notifications.dismissNotification')
	 * }
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'notification'      => [],
				'mode'              => 'full',
				'show_divider'      => true,
				'alpine_var'        => 'notification',
				'alpine_action'     => 'notifications.dismissNotification',
				'notification_type' => null, // Can be 'error', 'warning', 'success', 'info', or null for no icon
			]
		);

		$is_compact        = 'compact' === $args['mode'];
		$alpine_var        = esc_attr( $args['alpine_var'] );
		$alpine_action     = esc_attr( $args['alpine_action'] );
		$alpine_var_js     = esc_js( $args['alpine_var'] );
		$alpine_action_js  = esc_js( $args['alpine_action'] );
		$learn_more_text   = esc_js( __( 'Learn More', 'rewardswp' ) );
		$primary_btn_href  = sprintf( "%s.btns.main.url || '#'", $alpine_var_js );
		$primary_btn_text  = sprintf( "%s.btns.main.text || '%s'", $alpine_var_js, $learn_more_text );
		$fallback_btn_expr = sprintf( '!%s.btns || !%s.btns.main', $alpine_var_js, $alpine_var_js );
		$learn_more_href   = sprintf( "%s.learn_more_url || '#'", $alpine_var_js );
		$alt_btn_cond      = sprintf( '%s.btns && %s.btns.alt', $alpine_var_js, $alpine_var_js );
		$alt_btn_href      = sprintf( "%s.btns.alt.url || '#'", $alpine_var_js );
		$alt_btn_text      = sprintf( "%s.btns.alt.text || '%s'", $alpine_var_js, $learn_more_text );
		$dismiss_callback  = sprintf( '%s(%s.id)', $alpine_action_js, $alpine_var_js );
		// Note: notification_type comes from Alpine data, not PHP args

		// Determine button sizes based on mode
		$button_size_classes = $is_compact
			? 'px-3 py-1.5 text-xs'
			: 'px-4 py-2 text-sm';

		$dismiss_size_class = $is_compact ? 'text-xs' : 'text-sm';

		// Container classes
		$container_classes = $args['show_divider']
			? 'border-b border-gray-100 pb-4 last:border-0'
			: '';

		?>
		<div class="<?php echo esc_attr( $container_classes ); ?>">
			<div x-bind:class="<?php echo esc_attr( sprintf( "%s.notification_type ? 'flex gap-3' : ''", $alpine_var_js ) ); ?>">
				<!-- Icon based on Alpine data -->
				<div class="flex-shrink-0 pt-6" x-show="<?php echo esc_attr( sprintf( '%s.notification_type', $alpine_var_js ) ); ?>">
					<!-- Error icon -->
					<span
						x-show="<?php echo esc_attr( sprintf( "%s.notification_type === 'error'", $alpine_var_js ) ); ?>"
						class="flex items-center justify-center text-red-500"
					>
						<?php echo wp_kses( $this->icon_helper->get_icon( 'error', 'size-5' ), svg_kses() ); ?>
					</span>
					<!-- Warning icon -->
					<span
						x-show="<?php echo esc_attr( sprintf( "%s.notification_type === 'warning'", $alpine_var_js ) ); ?>"
						class="flex items-center justify-center text-amber-500"
					>
						<?php echo wp_kses( $this->icon_helper->get_icon( 'warning', 'size-5' ), svg_kses() ); ?>
					</span>
					<!-- Success icon -->
					<span
						x-show="<?php echo esc_attr( sprintf( "%s.notification_type === 'success'", $alpine_var_js ) ); ?>"
						class="flex items-center justify-center text-emerald-500"
					>
						<?php echo wp_kses( $this->icon_helper->get_icon( 'check-circle', 'size-5' ), svg_kses() ); ?>
					</span>
					<!-- Info icon -->
					<span
						x-show="<?php echo esc_attr( sprintf( "%s.notification_type === 'info'", $alpine_var_js ) ); ?>"
						class="flex items-center justify-center text-blue-500"
					>
						<?php echo wp_kses( $this->icon_helper->get_icon( 'info', 'size-5' ), svg_kses() ); ?>
					</span>
				</div>

				<!-- Content -->
				<div class="flex-1 min-w-0">
					<!-- Date at top -->
					<span
						class="text-xs text-gray-500"
						x-show="<?php echo esc_attr( sprintf( '%s.date || %s.relative_date', $alpine_var_js, $alpine_var_js ) ); ?>"
						x-text="<?php echo esc_attr( sprintf( '%s.relative_date || %s.date', $alpine_var_js, $alpine_var_js ) ); ?>"
					></span>

					<!-- Title -->
					<div class="mb-1">
						<h4 class="<?php echo $is_compact ? 'text-sm' : 'text-lg'; ?> font-semibold text-gray-900" x-text="<?php echo esc_attr( sprintf( '%s.title', $alpine_var_js ) ); ?>"></h4>
					</div>

					<!-- Message -->
					<div class="mb-5 prose prose-li:m-0" x-html="<?php echo esc_attr( sprintf( '%s.message', $alpine_var_js ) ); ?>">
					</div>

					<!-- Action buttons -->
					<div class="flex items-center gap-3 flex-wrap">
						<!-- Primary button -->
						<template x-if="<?php echo esc_attr( sprintf( '%s.btns && %s.btns.main', $alpine_var_js, $alpine_var_js ) ); ?>">
							<a
								x-bind:href="<?php echo esc_attr( $primary_btn_href ); ?>"
								x-bind:target="<?php echo esc_attr( sprintf( "%s.btns.main.external ? '_blank' : null", $alpine_var_js ) ); ?>"
								x-bind:rel="<?php echo esc_attr( sprintf( "%s.btns.main.external ? 'noopener noreferrer' : null", $alpine_var_js ) ); ?>"
								class="inline-flex items-center <?php echo esc_attr( $button_size_classes ); ?> border border-transparent font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 transition-colors"
								x-text="<?php echo esc_attr( $primary_btn_text ); ?>"
							></a>
						</template>
						<template x-if="<?php echo esc_attr( $fallback_btn_expr ); ?>">
							<a
								x-bind:href="<?php echo esc_attr( $learn_more_href ); ?>"
								class="inline-flex items-center <?php echo esc_attr( $button_size_classes ); ?> border border-transparent font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 transition-colors"
							>
								<?php esc_html_e( 'Learn More', 'rewardswp' ); ?>
							</a>
						</template>

						<!-- Secondary button if present -->
						<template x-if="<?php echo esc_attr( $alt_btn_cond ); ?>">
							<a
								x-bind:href="<?php echo esc_attr( $alt_btn_href ); ?>"
								x-bind:target="<?php echo esc_attr( sprintf( "%s.btns.alt.external ? '_blank' : null", $alpine_var_js ) ); ?>"
								x-bind:rel="<?php echo esc_attr( sprintf( "%s.btns.alt.external ? 'noopener noreferrer' : null", $alpine_var_js ) ); ?>"
								class="inline-flex items-center <?php echo esc_attr( $button_size_classes ); ?> border border-gray-200 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500 transition-colors"
								x-text="<?php echo esc_attr( $alt_btn_text ); ?>"
							></a>
						</template>

						<!-- Dismiss link (always present) -->
						<button
							type="button"
							class="<?php echo esc_attr( $dismiss_size_class ); ?> text-gray-500 hover:text-gray-700 underline transition-colors cursor-pointer"
							x-on:click.prevent="<?php echo esc_attr( $dismiss_callback ); ?>"
						>
							<?php esc_html_e( 'Dismiss', 'rewardswp' ); ?>
						</button>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
