<?php

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$settings = isset( $settings ) && is_array( $settings ) ? $settings : get_option( 'ugcify_review_form_settings', array() );

$media_option_settings = get_option( 'ugcify_review_form_media_settings', array() );
if ( is_array( $media_option_settings ) && ! empty( $media_option_settings ) ) {
	$settings = array_merge( $settings, $media_option_settings );
}

$show_media_title = ! isset( $settings['showMediaTitle'] ) || (bool) $settings['showMediaTitle'];
$media_title_text = ! empty( $settings['mediaTitleText'] ) ? $settings['mediaTitleText'] : __( 'Upload your image or video', 'ugcify' );

$media_title_size_map = array(
	'small'  => 14,
	'medium' => 18,
	'large'  => 24,
);
$media_title_weight_map = array(
	'regular'  => 400,
	'semibold' => 600,
	'bold'     => 700,
);

$media_title_size_key   = $settings['mediaTitleSize'] ?? 'medium';
$media_title_weight_key = $settings['mediaTitleWeight'] ?? 'semibold';

$media_title_size   = isset( $media_title_size_map[ $media_title_size_key ] ) ? $media_title_size_map[ $media_title_size_key ] : $media_title_size_map['medium'];
$media_title_weight = isset( $media_title_weight_map[ $media_title_weight_key ] ) ? $media_title_weight_map[ $media_title_weight_key ] : $media_title_weight_map['semibold'];

$media_title_color = sanitize_hex_color( $settings['mediaTitleColor'] ?? '' );
$media_title_color = $media_title_color ? $media_title_color : '#000000';

$media_next_text = ! empty( $settings['mediaNextButtonText'] ) ? $settings['mediaNextButtonText'] : __( 'Next', 'ugcify' );
$media_back_text = ! empty( $settings['mediaBackButtonText'] ) ? $settings['mediaBackButtonText'] : __( 'Back', 'ugcify' );
$media_skip_text = ! empty( $settings['mediaSkipButtonText'] ) ? $settings['mediaSkipButtonText'] : __( 'Skip', 'ugcify' );

$media_next_fill_color   = sanitize_hex_color( $settings['mediaNextButtonFillColor'] ?? '' );
$media_next_stroke_color = sanitize_hex_color( $settings['mediaNextButtonStrokeColor'] ?? '' );
$media_next_font_color   = sanitize_hex_color( $settings['mediaNextButtonFontColor'] ?? '' );
$media_back_fill_color   = sanitize_hex_color( $settings['mediaBackButtonFillColor'] ?? '' );
$media_back_stroke_color = sanitize_hex_color( $settings['mediaBackButtonStrokeColor'] ?? '' );
$media_back_font_color   = sanitize_hex_color( $settings['mediaBackButtonFontColor'] ?? '' );
$media_skip_font_color   = sanitize_hex_color( $settings['mediaSkipButtonFontColor'] ?? '' );

$media_next_fill_color   = $media_next_fill_color ? $media_next_fill_color : '#201CFE';
$media_next_stroke_color = $media_next_stroke_color ? $media_next_stroke_color : '#201CFE';
$media_next_font_color   = $media_next_font_color ? $media_next_font_color : '#FFFFFF';
$media_back_fill_color   = $media_back_fill_color ? $media_back_fill_color : '#FFFFFF';
$media_back_stroke_color = $media_back_stroke_color ? $media_back_stroke_color : '#201CFE';
$media_back_font_color   = $media_back_font_color ? $media_back_font_color : '#000000';
$media_skip_font_color   = $media_skip_font_color ? $media_skip_font_color : '#7D7D7D';

$media_size_limit_mb = isset( $settings['mediaMaxSizeMb'] ) ? absint( $settings['mediaMaxSizeMb'] ) : 0;
if ( $media_size_limit_mb < 1 ) {
	$legacy_image_limit = isset( $settings['maxImageSizeMb'] ) ? absint( $settings['maxImageSizeMb'] ) : 0;
	$legacy_video_limit = isset( $settings['maxVideoSizeMb'] ) ? absint( $settings['maxVideoSizeMb'] ) : 0;
	$media_size_limit_mb = $legacy_image_limit > 0 ? $legacy_image_limit : $legacy_video_limit;
}
if ( $media_size_limit_mb < 1 ) {
	$media_size_limit_mb = 10;
}

$enable_attachment_limit = ! empty( $settings['enableAttachmentLimit'] );
$max_attachments_per_review = isset( $settings['maxAttachmentsPerReview'] ) ? absint( $settings['maxAttachmentsPerReview'] ) : 0;
if ( $max_attachments_per_review < 1 ) {
	$max_attachments_per_review = 5;
}
?>

<!-- Step 2: Upload -->
<div class="ugcify-form-step ugcify-step-upload" data-step="2" style="display: none;">
	<?php if ( $show_media_title ) : ?>
		<h2
			class="ugcify-step-title"
			style="color: <?php echo esc_attr( $media_title_color ); ?>; font-size: <?php echo esc_attr( $media_title_size ); ?>px; font-weight: <?php echo esc_attr( $media_title_weight ); ?>;"
		>
			<?php echo esc_html( $media_title_text ); ?>
		</h2>
	<?php endif; ?>

	<div class="ugcify-step-upload-wrapper">
		<div class="ugcify-step-subtitle">
			<?php echo esc_html( $media_title_text ); ?>
		</div>

		<div class="ugcify-upload-area">
			<input type="file" id="ugcify-file-upload" multiple accept="image/*,video/*" class="ugcify-file-input" />
			
			<!-- Initial upload box (hidden when files are uploaded) -->
			<label for="ugcify-file-upload" class="ugcify-upload-label" id="ugcify-initial-upload">
				<svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none">
					<rect x="0.5" y="0.5" width="85" height="85" rx="14.5" fill="white" stroke="#201CFE"/>
					<path d="M40.621 33.5355L40.6507 52.5015H44.5269L44.4971 33.5587L48.0684 37.1261L50.8088 34.3843L45.7453 29.3247C45.3253 28.9047 44.8268 28.5716 44.2781 28.3443C43.7294 28.117 43.1413 28 42.5474 28C41.9535 28 41.3655 28.117 40.8168 28.3443C40.2681 28.5716 39.7695 28.9047 39.3496 29.3247L34.2861 34.3882L37.0265 37.1261L40.621 33.5355Z" fill="#201CFE"/>
					<path d="M54.133 48.6236V55.0839H30.8761V48.6236H27V55.0839C27 56.1119 27.4084 57.0978 28.1353 57.8247C28.8622 58.5516 29.8481 58.96 30.8761 58.96H54.133C55.1611 58.96 56.147 58.5516 56.8739 57.8247C57.6008 57.0978 58.0092 56.1119 58.0092 55.0839V48.6236H54.133Z" fill="#201CFE"/>
				</svg>
				<span class="ugcify-upload-text"><?php esc_html_e( 'Click to upload', 'ugcify' ); ?></span>
				<span class="ugcify-upload-hint">
					<?php
					/* translators: %s: Maximum file size in megabytes. */
					echo esc_html( sprintf( __( 'File must be less than %sMB', 'ugcify' ), $media_size_limit_mb ) );
					?><br/>
					<?php if ( $enable_attachment_limit ) : ?>
						<?php
						/* translators: %s: Maximum number of attachments allowed. */
						echo esc_html( sprintf( __( 'Maximum %s attachment(s) per review', 'ugcify' ), $max_attachments_per_review ) );
						?><br/>
					<?php endif; ?>
					<?php esc_html_e( 'Supported files: JPEG, PNG, GIF, WebP, MP4, MOV, MKV', 'ugcify' ); ?>
				</span>
			</label>

			<!-- Thumbnail view (shown when files are uploaded) -->
			<div class="ugcify-uploaded-files" id="ugcify-uploaded-files" style="display: none;">
				<!-- Uploaded file thumbnails will be inserted here -->
				<label for="ugcify-file-upload" class="ugcify-upload-button">
					<svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none">
						<rect x="0.5" y="0.5" width="85" height="85" rx="14.5" fill="white" stroke="#201CFE"/>
						<path d="M40.6211 33.5355L40.6508 52.5015H44.5269L44.4972 33.5587L48.0684 37.1261L50.8089 34.3843L45.7453 29.3247C45.3254 28.9047 44.8269 28.5716 44.2782 28.3443C43.7295 28.117 43.1414 28 42.5475 28C41.9536 28 41.3655 28.117 40.8168 28.3443C40.2681 28.5716 39.7696 28.9047 39.3497 29.3247L34.2861 34.3882L37.0266 37.1261L40.6211 33.5355Z" fill="#201CFE"/>
						<path d="M54.133 48.6236V55.0839H30.8761V48.6236H27V55.0839C27 56.1119 27.4084 57.0978 28.1353 57.8247C28.8622 58.5516 29.8481 58.96 30.8761 58.96H54.133C55.1611 58.96 56.147 58.5516 56.8739 57.8247C57.6008 57.0978 58.0092 56.1119 58.0092 55.0839V48.6236H54.133Z" fill="#201CFE"/>
					</svg>
				</label>
			</div>
		</div>
		<div class="ugcify-upload-alert" id="ugcify-upload-alert" style="display: none;" role="alert"></div>

		<!-- Terms checkbox (shown only when files are uploaded) -->
		<div class="ugcify-upload-terms" id="ugcify-upload-terms" style="display: none;">
			<label class="ugcify-terms-checkbox ugcify-checkbox-group">
				<label class="ugcify-checkbox">
					<input type="checkbox" id="ugcify-terms-consent" />
					<span class="ugcify-checkbox-ui"></span>
				</label>

				<span>
					<?php esc_html_e( 'By submitting, I acknowledge the Terms of Service and Privacy Policy and that my review will be publicly posted and shared online', 'ugcify' ); ?>
				</span>
			</label>
		</div>

		<div class="ugcify-step-actions">
			<button
				type="button"
				class="ugcify-button ugcify-button-outline ugcify-step-back"
				style="background: <?php echo esc_attr( $media_back_fill_color ); ?>; border-color: <?php echo esc_attr( $media_back_stroke_color ); ?>; color: <?php echo esc_attr( $media_back_font_color ); ?>;"
			>
				<?php echo esc_html( $media_back_text ); ?>
			</button>

			<svg fill="none" width="131" height="27"  viewBox="0 0 131 27"><circle cx="13.5" cy="13.5" r="12.5" stroke="#201CFE" stroke-width="2"/><path stroke="#201CFE" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M8.133 14.75l3.043 3.043 8.127-8.126"/><circle cx="81.5" cy="13.5" r="12.5" stroke="#E0DFFF" stroke-width="2"/><circle cx="81.5" cy="13.5" r="12.5" stroke="#E0DFFF" stroke-width="2"/><circle cx="47.5" cy="13.5" r="12.5" stroke="#E0DFFF" stroke-width="2"/><circle cx="117.5" cy="13.5" r="12.5" stroke="#E0DFFF" stroke-width="2"/></svg>

			<button
				type="button"
				class="ugcify-button ugcify-button-primary ugcify-step-next"
				data-next-label="<?php echo esc_attr( $media_next_text ); ?>"
				data-skip-label="<?php echo esc_attr( $media_skip_text ); ?>"
				data-next-fill-color="<?php echo esc_attr( $media_next_fill_color ); ?>"
				data-next-stroke-color="<?php echo esc_attr( $media_next_stroke_color ); ?>"
				data-next-font-color="<?php echo esc_attr( $media_next_font_color ); ?>"
				data-skip-font-color="<?php echo esc_attr( $media_skip_font_color ); ?>"
				style="background: transparent; border-color: transparent; color: <?php echo esc_attr( $media_skip_font_color ); ?>;"
			>
				<?php echo esc_html( $media_skip_text ); ?>
			</button>
		</div>
	</div>
</div>
