<?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
<?php
// Prepare initial data for JavaScript
$review_repository = new \Ugcify\Database\ReviewRepository();
$review_meta_handler = new \Ugcify\Review\ReviewMeta();
$current_user_id = get_current_user_id();

$initial_reviews = array();
$initial_counts = array( 'all' => 0, 'pending' => 0, 'approved' => 0, 'rejected' => 0 );
$needs_migration = false;
$unmigrated_count = 0;

if ( $can_view_uploads && $current_user_id > 0 ) {
	// Check if user is a creator
	$user_repository = new \Ugcify\Database\UserRepository();
	
	if ( $user_repository->is_creator( $current_user_id ) ) {
		// Fetch creator reviews
		$creator_reviews = $review_repository->query_creator_submissions( $current_user_id, array(
			'per_page' => 100,
			'page'     => 1,
			'order_by' => 'created_at',
			'order'    => 'DESC',
		) );
		
		// Format reviews
		foreach ( $creator_reviews as $review ) {
			$meta = $review_meta_handler->get_meta( $review->id );
			$images = isset( $meta['images'][0] ) ? maybe_unserialize( $meta['images'][0] ) : array();
			$videos = isset( $meta['videos'][0] ) ? maybe_unserialize( $meta['videos'][0] ) : array();
			
			// Get product details
			$product_name = '';
			$product_image = '';
			if ( function_exists( 'wc_get_product' ) && $review->product_id ) {
				$product = wc_get_product( $review->product_id );
				if ( $product ) {
					$product_name = $product->get_name();
					$product_image = wp_get_attachment_url( $product->get_image_id() );
				}
			}
			
			$initial_reviews[] = array(
				'id'            => (int) $review->id,
				'product_id'    => (int) $review->product_id,
				'product_name'  => $product_name,
				'product_image' => $product_image,
				'rating'        => (int) $review->rating,
				'content'       => $review->content ? wp_kses_post( $review->content ) : '',
				'status'        => sanitize_key( $review->status ),
				'created_at'    => date_i18n( get_option( 'date_format' ), strtotime( $review->created_at ) ),
				'updated_at'    => date_i18n( get_option( 'date_format' ), strtotime( $review->updated_at ) ),
				'images_count'  => count( $images ),
				'videos_count'  => count( $videos ),
			);
			
			$initial_counts['all']++;
			if ( isset( $initial_counts[ $review->status ] ) ) {
				$initial_counts[ $review->status ]++;
			}
		}
		
		// Check for unmigrated reviews
		global $wpdb;
		$reviews_table = $wpdb->prefix . 'ugcify_reviews';
		$meta_table = $wpdb->prefix . 'ugcify_review_meta';
		
		$unmigrated_count = $wpdb->get_var(
			$wpdb->prepare(
				"SELECT COUNT(r.id) FROM {$reviews_table} AS r 
				LEFT JOIN {$meta_table} AS rm ON r.id = rm.review_id AND rm.meta_key = '_ugcify_contributor_type'
				WHERE r.user_id = %d AND rm.review_id IS NULL",
				$current_user_id
			)
		);
		
		$needs_migration = $unmigrated_count > 0;
	}
}

$history_message = ! empty( $creator['access']['is_admin_preview'] ) && empty( $can_view_uploads )
	? __( 'Admin preview mode cannot read creator submission history until the current account is linked to a creator profile.', 'ugcify' )
	: __( 'Your creator history is not available in the current access state.', 'ugcify' );

// Enqueue the script properly to avoid WordPress filters
$script_data = array(
	'restUrl' => rest_url( 'ugcify/v1' ),
	'nonce' => wp_create_nonce( 'wp_rest' ),
	'reviews' => $initial_reviews,
	'counts' => $initial_counts,
	'needsMigration' => $needs_migration,
	'unmigratedCount' => $unmigrated_count,
	'canViewUploads' => $can_view_uploads,
	'userId' => $current_user_id,
);
?>
<div class="ugcify-portal-history" data-ugcify-portal-history>
	<div class="ugcify-form-alert" data-ugcify-portal-history-notice hidden></div>

	<?php if ( ! $can_view_uploads ) : ?>
		<div class="ugcify-portal-card">
			<div class="ugcify-portal-empty-state is-inline">
				<p><?php echo esc_html( $history_message ); ?></p>
			</div>
		</div>
	<?php else : ?>
		<article class="ugcify-portal-card ugcify-portal-card--stacked ugcify-portal-history-card">
			<div class="ugcify-portal-section__header is-stacked-on-mobile">
				<div>
					<h4 class="ugcify-portal-section__title"><?php esc_html_e( 'Review History', 'ugcify' ); ?></h4>
					<p class="ugcify-portal-section__description"><?php esc_html_e( 'View and manage all your submitted reviews.', 'ugcify' ); ?></p>
				</div>

				<div class="ugcify-portal-filter-group ugcify-portal-filter-group--compact" data-ugcify-history-filters>
					<button type="button" class="ugcify-filter-btn is-active" data-filter="all">
						<?php esc_html_e( 'All', 'ugcify' ); ?> <span class="ugcify-filter-count" data-count="all">0</span>
					</button>
					<button type="button" class="ugcify-filter-btn" data-filter="pending">
						<?php esc_html_e( 'Pending', 'ugcify' ); ?> <span class="ugcify-filter-count" data-count="pending">0</span>
					</button>
					<button type="button" class="ugcify-filter-btn" data-filter="approved">
						<?php esc_html_e( 'Approved', 'ugcify' ); ?> <span class="ugcify-filter-count" data-count="approved">0</span>
					</button>
					<button type="button" class="ugcify-filter-btn" data-filter="rejected">
						<?php esc_html_e( 'Rejected', 'ugcify' ); ?> <span class="ugcify-filter-count" data-count="rejected">0</span>
					</button>
				</div>
			</div>

			<div class="ugcify-history-loading" data-history-loading style="display: none;">
				<div class="ugcify-spinner"></div>
				<p><?php esc_html_e( 'Loading reviews...', 'ugcify' ); ?></p>
			</div>

			<div class="ugcify-portal-empty-state" data-history-empty style="display: none;">
				<p><?php esc_html_e( 'No reviews found. Start by adding your first review!', 'ugcify' ); ?></p>
				<div id="ugcify-migration-notice" style="display: none; margin-top: 1em; padding: 1em; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 0.375em; font-size: 0.9em;">
					<strong><?php esc_html_e( 'Found existing reviews!', 'ugcify' ); ?></strong><br>
					<span id="ugcify-migration-count"></span><br>
					<button 
						type="button" 
						class="ugcify-portal-button is-primary" 
						onclick="ugcMarkExistingReviews()"
						style="margin-top: 0.5em;"
					>
						<?php esc_html_e( 'Mark My Existing Reviews', 'ugcify' ); ?>
					</button>
					<div id="ugcify-migration-result" style="margin-top: 0.5em;"></div>
				</div>
			</div>

			<div class="ugcify-history-table-wrapper" data-history-table-wrapper style="display: none;">
				<table class="ugcify-history-table">
					<thead>
						<tr>
							<th><?php esc_html_e( 'Product', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Rating', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Review', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Media', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Status', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Date', 'ugcify' ); ?></th>
							<th><?php esc_html_e( 'Actions', 'ugcify' ); ?></th>
						</tr>
					</thead>
					<tbody data-history-tbody>
						<!-- Reviews will be inserted here via JavaScript -->
					</tbody>
				</table>
			</div>

			<div class="ugcify-portal-history__footer" data-history-footer style="display: none;">
				<div class="ugcify-portal-history__summary" data-history-summary">
					<?php esc_html_e( '0 reviews in history', 'ugcify' ); ?>
				</div>
			</div>
		</article>
	<?php endif; ?>
</div>

<?php
// Enqueue the history script properly
wp_enqueue_script(
	'ugcify-history',
	UGCIFY_URL . 'assets/frontend/history.js',
	array(),
	UGCIFY_VERSION,
	true
);

// Pass data to JavaScript
wp_localize_script( 'ugcify-history', 'ugcHistoryData', $script_data );
?>


<!-- Edit Review Modal -->
<div id="ugcify-edit-review-modal" class="ugcify-edit-modal-overlay" style="display: none;">
	<div class="ugcify-edit-modal-backdrop" onclick="ugcCloseEditModal()"></div>
	<div class="ugcify-edit-modal">
		<div class="ugcify-edit-modal__header">
			<div class="ugcify-edit-modal__title-group">
				<h3 class="ugcify-edit-modal__title"><?php esc_html_e( 'Edit Review', 'ugcify' ); ?></h3>
				<p class="ugcify-edit-modal__subtitle" id="edit-product-name"><?php esc_html_e( 'Update your review details', 'ugcify' ); ?></p>
			</div>
			<button class="ugcify-edit-modal__close" type="button" onclick="ugcCloseEditModal()" aria-label="<?php esc_attr_e( 'Close', 'ugcify' ); ?>">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			</button>
		</div>
		
		<form id="ugcify-edit-review-form" class="ugcify-edit-modal__body">
			<input type="hidden" id="edit-review-id" name="review_id">
			
			<div class="ugcify-edit-form-section">
				<label class="ugcify-edit-form-label">
					<?php esc_html_e( 'Your Rating', 'ugcify' ); ?>
					<span class="ugcify-edit-form-required">*</span>
				</label>
				<div class="ugcify-edit-rating-wrapper">
					<div class="ugcify-edit-rating-stars" id="edit-rating-input">
						<button type="button" class="ugcify-edit-rating-star" data-rating="1">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</button>
						<button type="button" class="ugcify-edit-rating-star" data-rating="2">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</button>
						<button type="button" class="ugcify-edit-rating-star" data-rating="3">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</button>
						<button type="button" class="ugcify-edit-rating-star" data-rating="4">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</button>
						<button type="button" class="ugcify-edit-rating-star" data-rating="5">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</button>
					</div>
					<span class="ugcify-edit-rating-text" id="edit-rating-text"><?php esc_html_e( 'Select a rating', 'ugcify' ); ?></span>
				</div>
				<input type="hidden" id="edit-rating-value" name="rating" value="0">
			</div>
			
			<div class="ugcify-edit-form-section">
				<label for="edit-review-content" class="ugcify-edit-form-label">
					<?php esc_html_e( 'Your Review', 'ugcify' ); ?>
					<span class="ugcify-edit-form-required">*</span>
				</label>
				<div class="ugcify-edit-textarea-wrapper">
					<textarea 
						id="edit-review-content" 
						name="content" 
						class="ugcify-edit-textarea"
						rows="6" 
						placeholder="<?php esc_attr_e( 'Share your thoughts about this product...', 'ugcify' ); ?>"
						maxlength="1000"
					></textarea>
					<div class="ugcify-edit-textarea-footer">
						<span class="ugcify-edit-char-count">
							<span id="edit-char-current">0</span> / 1000
						</span>
					</div>
				</div>
			</div>
			
			<div class="ugcify-edit-form-section">
				<label class="ugcify-edit-form-label">
					<?php esc_html_e( 'Attachments', 'ugcify' ); ?>
				</label>
				
				<!-- Existing Attachments -->
				<div id="edit-existing-attachments" class="ugcify-edit-attachments-grid"></div>
				
				<!-- Upload New Attachments -->
				<div class="ugcify-edit-upload-area">
					<input 
						type="file" 
						id="edit-attachment-input" 
						accept="image/*,video/*" 
						multiple 
						style="display: none;"
					>
					<button 
						type="button" 
						class="ugcify-edit-upload-btn" 
						onclick="document.getElementById('edit-attachment-input').click()"
					>
						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						<?php esc_html_e( 'Add Photos/Videos', 'ugcify' ); ?>
					</button>
					<p class="ugcify-edit-upload-hint"><?php esc_html_e( 'Upload images or videos to enhance your review', 'ugcify' ); ?></p>
				</div>
				
				<!-- New Attachments Preview -->
				<div id="edit-new-attachments" class="ugcify-edit-attachments-grid"></div>
			</div>
		</form>
		
		<div class="ugcify-edit-modal__footer">
			<button type="button" class="ugcify-edit-btn ugcify-edit-btn--secondary" onclick="ugcCloseEditModal()">
				<?php esc_html_e( 'Cancel', 'ugcify' ); ?>
			</button>
			<button type="submit" form="ugcify-edit-review-form" class="ugcify-edit-btn ugcify-edit-btn--primary" id="edit-submit-btn">
				<span class="ugcify-edit-btn__text"><?php esc_html_e( 'Save Changes', 'ugcify' ); ?></span>
				<span class="ugcify-edit-btn__loader" style="display: none;">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="30" stroke-dashoffset="30">
							<animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite"/>
						</circle>
					</svg>
				</span>
			</button>
		</div>
	</div>
</div>

<style>
.ugcify-portal-filter-group--compact {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.ugcify-filter-btn {
	padding: 0.5em 0.875em;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25em;
	font-size: 0.8em;
	font-weight: 500;
	color: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
}

.ugcify-filter-btn:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.25);
}

.ugcify-filter-btn.is-active {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.3);
	font-weight: 600;
}

.ugcify-filter-count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0.125em 0.375em;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 0.875em;
	font-size: 0.9em;
	text-align: center;
}

.ugcify-filter-btn.is-active .ugcify-filter-count {
	background: rgba(0, 0, 0, 0.15);
}

.ugcify-history-loading {
	padding: 3em;
	text-align: center;
}

.ugcify-spinner {
	width: 2.5em;
	height: 2.5em;
	border: 0.25em solid rgba(0, 0, 0, 0.1);
	border-top-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	animation: ugcSpin 0.8s linear infinite;
	margin: 0 auto 1em;
}

@keyframes ugcSpin {
	to { transform: rotate(360deg); }
}

.ugcify-history-table-wrapper {
	overflow-x: auto;
	margin-top: 1.5em;
}

.ugcify-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.ugcify-history-table thead {
	background: rgba(0, 0, 0, 0.03);
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.ugcify-history-table th {
	padding: 0.875em 1em;
	text-align: left;
	font-weight: 600;
	font-size: 0.85em;
	color: rgba(0, 0, 0, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.ugcify-history-table td {
	padding: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: middle;
}

.ugcify-history-table tbody tr {
	transition: background 0.2s ease;
}

.ugcify-history-table tbody tr:hover {
	background: rgba(0, 0, 0, 0.02);
}

.ugcify-product-cell {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-width: 12em;
}

.ugcify-product-thumb {
	width: 3em;
	height: 3em;
	object-fit: cover;
	border-radius: 0.25em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.ugcify-product-name {
	font-weight: 500;
	font-size: 0.95em;
	line-height: 1.3;
}

.ugcify-rating-stars {
	display: flex;
	gap: 0.125em;
	color: #FFA800;
	font-size: 1.1em;
}

.ugcify-review-text {
	max-width: 20em;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.8);
}

.ugcify-media-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	padding: 0.375em 0.625em;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 0.25em;
	font-size: 0.85em;
	color: rgba(0, 0, 0, 0.7);
}

.ugcify-status-pill {
	display: inline-block;
	padding: 0.375em 0.75em;
	border-radius: 0.25em;
	font-size: 0.85em;
	font-weight: 600;
	text-transform: capitalize;
}

.ugcify-status-pill.is-pending {
	background: rgba(255, 193, 7, 0.15);
	color: #F57C00;
	border: 1px solid rgba(255, 193, 7, 0.3);
}

.ugcify-status-pill.is-approved {
	background: rgba(76, 175, 80, 0.15);
	color: #2E7D32;
	border: 1px solid rgba(76, 175, 80, 0.3);
}

.ugcify-status-pill.is-rejected {
	background: rgba(244, 67, 54, 0.15);
	color: #C62828;
	border: 1px solid rgba(244, 67, 54, 0.3);
}

.ugcify-date-cell {
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.6);
	white-space: nowrap;
}

.ugcify-action-btn {
	padding: 0.5em 0.875em;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.25em;
	font-size: 0.85em;
	font-weight: 500;
	color: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ugcify-action-btn:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.3);
}

/* Edit Modal Styles */
.ugcify-edit-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	animation: ugcFadeIn 0.2s ease;
}

@keyframes ugcFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ugcify-edit-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.ugcify-edit-modal {
	position: relative;
	width: 100%;
	max-width: 36em;
	background: #fff;
	border-radius: 0.75em;
	box-shadow: 0 1.25em 3.75em rgba(0, 0, 0, 0.15), 0 0.5em 1.5em rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 3em);
	animation: ugcSlideUp 0.3s ease;
}

@keyframes ugcSlideUp {
	from {
		opacity: 0;
		transform: translateY(2em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ugcify-edit-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5em;
	padding: 1.75em 2em 1.25em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ugcify-edit-modal__title-group {
	flex: 1;
}

.ugcify-edit-modal__title {
	margin: 0 0 0.375em 0;
	font-size: 1.375em;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.9);
	line-height: 1.2;
}

.ugcify-edit-modal__subtitle {
	margin: 0;
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.5);
	font-weight: 400;
}

.ugcify-edit-modal__close {
	flex-shrink: 0;
	width: 2.25em;
	height: 2.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 0.375em;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.ugcify-edit-modal__close:hover {
	background: rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, 0.8);
}

.ugcify-edit-modal__close:active {
	transform: scale(0.95);
}

.ugcify-edit-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 2em;
}

.ugcify-edit-form-section {
	margin-bottom: 1.75em;
}

.ugcify-edit-form-section:last-child {
	margin-bottom: 0;
}

.ugcify-edit-form-label {
	display: block;
	margin-bottom: 0.625em;
	font-size: 0.9em;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.8);
}

.ugcify-edit-form-required {
	color: #E53935;
	margin-left: 0.25em;
}

.ugcify-edit-rating-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.ugcify-edit-rating-stars {
	display: flex;
	gap: 0.5em;
}

.ugcify-edit-rating-star {
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	position: relative;
}

.ugcify-edit-rating-star svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ugcify-edit-rating-star path {
	fill: currentColor;
	stroke: none;
}

.ugcify-edit-rating-star:hover,
.ugcify-edit-rating-star.active {
	color: #FFA800;
	transform: scale(1.1);
}

.ugcify-edit-rating-star:active {
	transform: scale(1.05);
}

.ugcify-edit-rating-text {
	font-size: 0.875em;
	color: rgba(0, 0, 0, 0.6);
	font-weight: 500;
}

.ugcify-edit-textarea-wrapper {
	position: relative;
}

.ugcify-edit-textarea {
	width: 100%;
	padding: 0.875em 1em;
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5em;
	font-family: inherit;
	font-size: 0.95em;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.9);
	resize: vertical;
	min-height: 8em;
	transition: all 0.2s ease;
	background: rgba(0, 0, 0, 0.01);
}

.ugcify-edit-textarea:focus {
	outline: none;
	border-color: rgba(0, 0, 0, 0.3);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.ugcify-edit-textarea::placeholder {
	color: rgba(0, 0, 0, 0.35);
}

.ugcify-edit-textarea-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5em;
}

.ugcify-edit-char-count {
	font-size: 0.8em;
	color: rgba(0, 0, 0, 0.5);
	font-weight: 500;
}

.ugcify-edit-attachments-grid {
	margin-top: 1em;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
	gap: 0.75em;
	margin-bottom: 1em;
	max-width: 100%;
	box-sizing: border-box;
}

.ugcify-edit-attachments-grid:empty {
	display: none;
}

.ugcify-edit-attachment-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 0.5em;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.03);
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	max-width: 100%;
}

.ugcify-edit-attachment-item img,
.ugcify-edit-attachment-item video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

.ugcify-edit-attachment-remove {
	position: absolute;
	top: 0.375em;
	right: 0.375em;
	width: 1.75em;
	height: 1.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.ugcify-edit-attachment-remove:hover {
	background: rgba(220, 53, 69, 0.9);
	transform: scale(1.1);
}

.ugcify-edit-attachment-remove svg {
	width: 1em;
	height: 1em;
}

.ugcify-edit-upload-area {
	text-align: center;
	padding: 1.5em;
	border: 2px dashed rgba(0, 0, 0, 0.15);
	border-radius: 0.5em;
	background: rgba(0, 0, 0, 0.01);
	transition: all 0.2s ease;
}

.ugcify-edit-upload-area:hover {
	border-color: rgba(0, 0, 0, 0.25);
	background: rgba(0, 0, 0, 0.02);
}

.ugcify-edit-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.25em;
	background: transparent;
	border: 1.5px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5em;
	font-size: 0.9em;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.ugcify-edit-upload-btn:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.3);
}

.ugcify-edit-upload-hint {
	margin: 0.75em 0 0 0;
	font-size: 0.8em;
	color: rgba(0, 0, 0, 0.5);
}

.ugcify-edit-attachment-uploading {
	position: relative;
}

.ugcify-edit-attachment-uploading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ugcify-edit-attachment-uploading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1.5em;
	height: 1.5em;
	border: 0.2em solid rgba(0, 0, 0, 0.1);
	border-top-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	animation: ugcSpin 0.8s linear infinite;
	z-index: 1;
}

.ugcify-edit-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75em;
	padding: 1.25em 2em 1.75em;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(0, 0, 0, 0.01);
}

.ugcify-edit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6em;
	border: none;
	border-radius: 0.5em;
	font-size: 0.7em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.ugcify-edit-btn--secondary {
	background: transparent;
	color: rgba(0, 0, 0, 0.7);
	border: 1.5px solid rgba(0, 0, 0, 0.2);
}

.ugcify-edit-btn--secondary:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.3);
	color: rgba(0, 0, 0, 0.9);
}

.ugcify-edit-btn--primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	box-shadow: 0 0.25em 0.75em rgba(102, 126, 234, 0.3);
}

.ugcify-edit-btn--primary:hover {
	transform: translateY(-0.125em);
	box-shadow: 0 0.375em 1em rgba(102, 126, 234, 0.4);
}

.ugcify-edit-btn--primary:active {
	transform: translateY(0);
}

.ugcify-edit-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.ugcify-edit-btn__loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.ugcify-history-table {
		font-size: 0.85em;
	}
	
	.ugcify-history-table th,
	.ugcify-history-table td {
		padding: 0.75em 0.625em;
	}
}

@media (max-width: 768px) {
	.ugcify-history-table-wrapper {
		overflow-x: scroll;
	}
	
	.ugcify-history-table {
		min-width: 50em;
	}
}

@media (max-width: 640px) {
	.ugcify-edit-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}
	
	.ugcify-edit-modal {
		max-width: 100%;
		border-radius: 1em 1em 0 0;
		max-height: 90vh;
	}
	
	.ugcify-edit-modal__header {
		padding: 1.25em 1.5em 1em;
	}
	
	.ugcify-edit-modal__body {
		padding: 1.5em;
	}
	
	.ugcify-edit-modal__footer {
		padding: 1em 1.5em 1.25em;
		flex-direction: column-reverse;
	}
	
	.ugcify-edit-btn {
		width: 100%;
	}
	
	.ugcify-edit-rating-star {
		width: 2.25em;
		height: 2.25em;
	}
}
</style>
