<?php
declare(strict_types=1);

namespace AuraBuilder\Widgets\Basic;

use AuraBuilder\Document\Node;
use AuraBuilder\Widgets\WidgetBase;

final class ImageBoxWidget extends WidgetBase {
	public function get_type(): string {
		return 'image_box';
	}
	public function get_title(): string {
		return 'Caixa de imagem';
	}
	public function get_icon(): string {
		return 'image_box';
	}

	public function get_defaults(): array {
		return array(
			'url'            => '',
			'title'          => 'Título',
			'description'    => 'Descrição da caixa de imagem.',
			'link'           => '',
			'align'          => 'left',
			'image_position' => 'top', // top | bottom | left | right
			'image_height'   => '', // empty = auto; e.g. 220
			'object_fit'      => 'cover',
			'object_position' => '50% 50%',
			'radius'         => '12',
			'shadow'         => '0',
			'border'         => '0',
			'border_color'   => '#e2e8f0',
			'media_width'    => '40', // % when left/right
		);
	}

	public function sanitize_settings( array $settings ): array {
		$align = in_array( ( $settings['align'] ?? '' ), array( 'left', 'center', 'right' ), true )
			? (string) $settings['align']
			: 'left';
		$pos   = in_array( ( $settings['image_position'] ?? '' ), array( 'top', 'bottom', 'left', 'right' ), true )
			? (string) $settings['image_position']
			: 'top';
		$fit   = in_array( ( $settings['object_fit'] ?? '' ), array( 'cover', 'contain', 'fill', 'none' ), true )
			? (string) $settings['object_fit']
			: 'cover';
		$obj_pos = self::sanitize_object_position( $settings['object_position'] ?? '50% 50%' );
		$flag  = static function ( $v, string $d = '0' ): string {
			if ( $v === null || $v === '' ) {
				return $d;
			}
			return ( $v === true || $v === 1 || $v === '1' || $v === 'true' || $v === 'yes' ) ? '1' : '0';
		};
		$height = trim( (string) ( $settings['image_height'] ?? '' ) );
		if ( $height !== '' && ! preg_match( '/^\d+(\.\d+)?(px|%)?$/', $height ) ) {
			$height = ctype_digit( $height ) ? $height . 'px' : '';
		} elseif ( $height !== '' && ctype_digit( $height ) ) {
			$height .= 'px';
		}
		$radius = preg_replace( '/[^0-9.]/', '', (string) ( $settings['radius'] ?? '12' ) );
		if ( $radius === '' ) {
			$radius = '12';
		}
		$mw = (int) ( $settings['media_width'] ?? 40 );
		$mw = max( 20, min( 70, $mw > 0 ? $mw : 40 ) );
		$bc = sanitize_hex_color( (string) ( $settings['border_color'] ?? '#e2e8f0' ) );
		if ( ! $bc ) {
			$bc = '#e2e8f0';
		}

		return array(
			'url'            => esc_url_raw( (string) ( $settings['url'] ?? '' ) ),
			'title'          => sanitize_text_field( (string) ( $settings['title'] ?? '' ) ),
			'description'    => sanitize_textarea_field( (string) ( $settings['description'] ?? '' ) ),
			'link'           => esc_url_raw( (string) ( $settings['link'] ?? '' ) ),
			'align'          => $align,
			'image_position' => $pos,
			'image_height'   => $height,
			'object_fit'      => $fit,
			'object_position' => $obj_pos,
			'radius'         => $radius,
			'shadow'         => $flag( $settings['shadow'] ?? null, '0' ),
			'border'         => $flag( $settings['border'] ?? null, '0' ),
			'border_color'   => $bc,
			'media_width'    => (string) $mw,
		);
	}

	public function render( Node $node, array $context = array() ): string {
		$s     = $node->settings;
		$url   = (string) ( $s['url'] ?? '' );
		$title = (string) ( $s['title'] ?? '' );
		$desc  = (string) ( $s['description'] ?? '' );
		$align = esc_attr( (string) ( $s['align'] ?? 'left' ) );
		$pos   = esc_attr( (string) ( $s['image_position'] ?? 'top' ) );
		$fit   = esc_attr( (string) ( $s['object_fit'] ?? 'cover' ) );
		$obj_pos = esc_attr( self::sanitize_object_position( $s['object_position'] ?? '50% 50%' ) );
		$h     = (string) ( $s['image_height'] ?? '' );
		$rad   = (string) ( $s['radius'] ?? '12' );
		$mw    = (string) ( $s['media_width'] ?? '40' );
		$shadow = ( $s['shadow'] ?? '0' ) === '1';
		$border = ( $s['border'] ?? '0' ) === '1';
		$bc     = esc_attr( (string) ( $s['border_color'] ?? '#e2e8f0' ) );

		$classes = 'ab-image-box ab-image-box--' . $pos;
		if ( $shadow ) {
			$classes .= ' ab-image-box--shadow';
		}
		if ( $border ) {
			$classes .= ' ab-image-box--border';
		} else {
			$classes .= ' ab-image-box--no-border';
		}

		// Contorno desligado força border:none (não deixa borda cinza do tema/estilo).
		$root_style = 'text-align:' . $align
			. ';--ab-ib-radius:' . esc_attr( $rad ) . 'px'
			. ';--ab-ib-media-w:' . esc_attr( $mw ) . '%'
			. ';--ab-ib-fit:' . $fit
			. ';--ab-ib-pos:' . $obj_pos
			. ';--ab-ib-border:' . $bc . ';';
		if ( ! $border ) {
			$root_style .= 'border:none!important;outline:none;box-shadow:' . ( $shadow ? '0 10px 28px rgba(15,23,42,.12)' : 'none' ) . ';';
		}
		if ( $h !== '' ) {
			$root_style .= '--ab-ib-height:' . esc_attr( $h ) . ';';
		}

		$img = $url !== ''
			? '<img src="' . esc_url( $url ) . '" alt="' . esc_attr( $title ) . '" loading="lazy" style="object-fit:' . $fit . ';object-position:' . $obj_pos . '"/>'
			: ( ! empty( $context['editor'] ) ? '<div class="ab-img-ph">Imagem</div>' : '' );

		$body = '<div class="ab-image-box__media">' . $img . '</div>'
			. '<div class="ab-image-box__body">'
			. ( $title !== '' ? '<h3 class="ab-image-box__title">' . esc_html( $title ) . '</h3>' : '' )
			. ( $desc !== '' ? '<p class="ab-image-box__desc">' . esc_html( $desc ) . '</p>' : '' )
			. '</div>';

		$link = (string) ( $s['link'] ?? '' );
		if ( $link !== '' ) {
			$body = '<a class="ab-image-box__link" href="' . esc_url( $link ) . '">' . $body . '</a>';
		}

		return '<div class="' . esc_attr( $classes ) . '" style="' . $root_style . '">' . $body . '</div>';
	}
}
