<?php
/**
 * Section 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 function Awesomemotive\Rewardswp\Helpers\get_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;
use function Awesomemotive\Rewardswp\Helpers\tag_attr;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;

class SectionComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render a collapsible section.
	 *
	 * @param array $args {
	 *     Optional. An array of arguments.
	 *
	 *     @type string $title                 The title of the section.
	 *     @type string $content               The content of the section.
	 *     @type string $id                    The ID of the section.
	 *     @type bool   $default_open          Whether the section is open by default.
	 *     @type string $additional_attributes Additional HTML attributes for the section.
	 *     @type string $icon                  HTML markup for the icon.
	 *     @type string $tooltip               Tooltip text.
	 *     @type string $badge                 Badge style to display (e.g., 'pro', 'active', 'inactive').
	 *     @type bool   $collapsible           Whether the section is collapsible. Default true.
	 * }
	 *
	 * @return void
	 */
	public function render( array $args = array() ): void {
		$args = wp_parse_args(
			$args,
			[
				'title'                 => '',
				'content'               => '',
				'id'                    => '',
				'default_open'          => true,
				'additional_attributes' => '',
				'icon'                  => '',
				'tooltip'               => '',
				'badge'                 => '',
				'overflow-hidden'       => true,
				'collapsible'           => false,
			]
		);

		$persist_data     = wp_json_encode( $args['default_open'] );
		$is_dynamic_title = strpos( $args['title'], 'x-text=' ) !== false;

		?>

		<div
			<?php if ( ! empty( $args['id'] ) ) : ?>
			id="<?php echo esc_attr( str_replace( '_', '-', $args['id'] ) ); ?>"
			<?php endif; ?>
			<?php if ( $args['collapsible'] ) : ?>
			x-data="{ open: $persist(<?php echo esc_js( $persist_data ); ?>).as('rewardswp_section_<?php echo esc_js( $args['id'] ); ?>') }"
			<?php endif; ?>
			class="mb-6 bg-white border border-gray-900/8 rounded-xl<?php echo $args['overflow-hidden'] ? ' overflow-hidden' : ''; ?>"
			<?php echo wp_kses( $args['additional_attributes'], kses() ); ?>
		>
			<div <?php echo $args['collapsible'] ? 'x-on:click="open = !open"' : ''; ?> class="flex items-center justify-between p-4 px-6<?php echo $args['collapsible'] ? ' cursor-pointer' : ''; ?><?php echo ! $args['collapsible'] ? ' border-b border-gray-900/8' : ''; ?>" <?php echo $args['collapsible'] ? "x-bind:class=\"{'border-b border-gray-900/8': open}\"" : ''; ?>>
				<div class="flex items-center">
					<?php if ( $args['icon'] ) : ?>
						<div class="flex items-center justify-center mr-3">
							<?php echo wp_kses( $args['icon'], svg_kses() ); ?>
						</div>
					<?php endif; ?>
					<h2 class="mt-0 mb-0 mr-2 text-lg font-semibold">
						<?php if ( $is_dynamic_title ) : ?>
							<span <?php echo wp_kses( $args['title'], kses() ); ?>></span>
						<?php else : ?>
							<?php echo esc_html( $args['title'] ); ?>
						<?php endif; ?>
					</h2>
					<?php if ( $args['badge'] ) : ?>
						<?php
						echo wp_kses(
							get_view_component(
								'badge',
								[
									'style' => $args['badge'],
								]
							),
							kses()
						);
						?>
					<?php endif; ?>
					<?php if ( $args['tooltip'] ) : ?>
						<span
							class="flex items-center justify-center w-5 h-5 !text-sm font-bold bg-gray-200 rounded-full rewardswp-tooltip"
							title="<?php echo esc_attr( $args['tooltip'] ); ?>"
						>?</span>
					<?php endif; ?>
				</div>

				<?php if ( $args['collapsible'] ) : ?>
				<svg x-bind:class="{'rotate-180': open}" class="w-6 h-6 text-gray-600 transition-transform duration-200 transform" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path d="M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z" fill="currentColor"/>
				</svg>
				<?php endif; ?>
			</div>
			<div
				<?php if ( $args['collapsible'] ) : ?>
				x-show="open"
				x-collapse
				<?php endif; ?>
				<?php tag_attr( 'class', $args['overflow-hidden'] ? 'overflow-hidden' : '' ); ?>
			>
				<div class="p-4 px-6">
					<?php
					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped by the function
					echo $args['content'];
					?>
				</div>
			</div>
		</div>

		<?php
	}
}
