<?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
<?php
$profile_avatar = ! empty( $creator_profile['avatar_url'] ) ? (string) $creator_profile['avatar_url'] : '';
$profile_joined = $joined_at ? wp_date( get_option( 'date_format', 'F j, Y' ), $joined_at ) : __( 'Recently', 'ugcify' );
$profile_rights = (int) ( $creator_rights['accepted_version'] ?? 0 );
$profile_initial = strtoupper( substr( (string) $creator_name, 0, 1 ) );
?>
<div class="ugcify-portal-profile" data-ugcify-portal-profile>
	<div class="ugcify-portal-grid ugcify-portal-grid--two ugcify-portal-grid--profile">
		<article class="ugcify-portal-card ugcify-portal-card--stacked">
			<div class="ugcify-portal-profile__summary">
				<div class="ugcify-portal-profile__avatar" data-ugcify-portal-profile-avatar>
					<?php if ( '' !== $profile_avatar ) : ?>
						<img src="<?php echo esc_url( $profile_avatar ); ?>" alt="<?php echo esc_attr( $creator_name ); ?>">
					<?php else : ?>
						<span><?php echo esc_html( '' !== $profile_initial ? $profile_initial : 'C' ); ?></span>
					<?php endif; ?>
				</div>

				<div>
					<h4 class="ugcify-portal-section__title" data-ugcify-portal-profile-field="display_name"><?php echo esc_html( $creator_name ); ?></h4>
					<p class="ugcify-portal-section__description" data-ugcify-portal-profile-field="bio"><?php echo esc_html( ! empty( $creator_profile['bio'] ) ? (string) $creator_profile['bio'] : __( 'Add a short bio so reviewers and future public attribution stay consistent.', 'ugcify' ) ); ?></p>
				</div>
			</div>

			<dl class="ugcify-portal-definition-list" data-ugcify-portal-profile-summary>
				<div>
					<dt><?php esc_html_e( 'Email', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="email"><?php echo esc_html( (string) ( $creator['email'] ?? '' ) ); ?></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'Joined', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="joined_at"><?php echo esc_html( $profile_joined ); ?></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'Rights accepted', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="rights_version"><?php echo esc_html( sprintf( __( 'Version %d', 'ugcify' ), $profile_rights ) ); ?></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'Instagram', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="instagram"><?php echo esc_html( ! empty( $creator_profile['instagram'] ) ? (string) $creator_profile['instagram'] : __( 'Not provided', 'ugcify' ) ); ?></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'TikTok', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="tiktok"><?php echo esc_html( ! empty( $creator_profile['tiktok'] ) ? (string) $creator_profile['tiktok'] : __( 'Not provided', 'ugcify' ) ); ?></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'YouTube', 'ugcify' ); ?></dt>
					<dd data-ugcify-portal-profile-field="youtube"><?php echo esc_html( ! empty( $creator_profile['youtube'] ) ? (string) $creator_profile['youtube'] : __( 'Not provided', 'ugcify' ) ); ?></dd>
				</div>
			</dl>
		</article>

		<article class="ugcify-portal-card ugcify-portal-card--stacked">
			<div class="ugcify-portal-section__header">
				<div>
					<h4 class="ugcify-portal-section__title"><?php esc_html_e( 'Edit profile', 'ugcify' ); ?></h4>
					<p class="ugcify-portal-section__description"><?php esc_html_e( 'These fields are saved to your creator profile and can also be updated without leaving the page when JavaScript is available.', 'ugcify' ); ?></p>
				</div>
			</div>

			<?php if ( ! $can_edit_profile ) : ?>
				<div class="ugcify-portal-empty-state is-inline">
					<p><?php esc_html_e( 'This account is currently in admin preview mode and cannot edit creator profile data until creator access is linked.', 'ugcify' ); ?></p>
				</div>
			<?php else : ?>
				<form method="post" enctype="multipart/form-data" class="ugcify-portal-profile-form" data-ugcify-portal-profile-form>
					<?php wp_nonce_field( 'ugcify_influencer_portal_form', 'ugcify_influencer_nonce' ); ?>
					<input type="hidden" name="ugcify_influencer_action" value="update_profile">
					<div class="ugcify-form-alert" data-ugcify-portal-profile-notice hidden></div>

					<div class="ugcify-portal-grid ugcify-portal-grid--two is-compact">
						<div class="ugcify-form-field">
							<label for="ugcify-portal-first-name"><?php esc_html_e( 'First name', 'ugcify' ); ?></label>
							<input id="ugcify-portal-first-name" class="ugcify-form-input" type="text" name="first_name" value="<?php echo esc_attr( (string) ( $creator_profile['first_name'] ?? '' ) ); ?>">
						</div>

						<div class="ugcify-form-field">
							<label for="ugcify-portal-last-name"><?php esc_html_e( 'Last name', 'ugcify' ); ?></label>
							<input id="ugcify-portal-last-name" class="ugcify-form-input" type="text" name="last_name" value="<?php echo esc_attr( (string) ( $creator_profile['last_name'] ?? '' ) ); ?>">
						</div>
					</div>

					<div class="ugcify-form-field">
						<label for="ugcify-portal-display-name"><?php esc_html_e( 'Display name', 'ugcify' ); ?></label>
						<input id="ugcify-portal-display-name" class="ugcify-form-input" type="text" name="display_name" value="<?php echo esc_attr( (string) ( $creator_profile['display_name'] ?? $creator_name ) ); ?>">
					</div>

					<div class="ugcify-form-field">
						<label for="ugcify-portal-website"><?php esc_html_e( 'Website', 'ugcify' ); ?></label>
						<input id="ugcify-portal-website" class="ugcify-form-input" type="url" name="website" value="<?php echo esc_attr( (string) ( $creator_profile['website'] ?? '' ) ); ?>" placeholder="https://">
					</div>

					<div class="ugcify-form-field">
						<label for="ugcify-portal-bio"><?php esc_html_e( 'Short bio', 'ugcify' ); ?></label>
						<textarea id="ugcify-portal-bio" class="ugcify-form-textarea" name="bio" rows="4"><?php echo esc_textarea( (string) ( $creator_profile['bio'] ?? '' ) ); ?></textarea>
					</div>

					<div class="ugcify-portal-grid ugcify-portal-grid--two is-compact">
						<div class="ugcify-form-field">
							<label for="ugcify-portal-instagram"><?php esc_html_e( 'Instagram', 'ugcify' ); ?></label>
							<input id="ugcify-portal-instagram" class="ugcify-form-input" type="text" name="instagram" value="<?php echo esc_attr( (string) ( $creator_profile['instagram'] ?? '' ) ); ?>" placeholder="@handle">
						</div>

						<div class="ugcify-form-field">
							<label for="ugcify-portal-tiktok"><?php esc_html_e( 'TikTok', 'ugcify' ); ?></label>
							<input id="ugcify-portal-tiktok" class="ugcify-form-input" type="text" name="tiktok" value="<?php echo esc_attr( (string) ( $creator_profile['tiktok'] ?? '' ) ); ?>" placeholder="@handle">
						</div>
					</div>

					<div class="ugcify-form-field">
						<label for="ugcify-portal-youtube"><?php esc_html_e( 'YouTube', 'ugcify' ); ?></label>
						<input id="ugcify-portal-youtube" class="ugcify-form-input" type="text" name="youtube" value="<?php echo esc_attr( (string) ( $creator_profile['youtube'] ?? '' ) ); ?>" placeholder="Channel or handle">
					</div>

					<div class="ugcify-form-field">
						<label for="ugcify-portal-avatar"><?php esc_html_e( 'Profile photo', 'ugcify' ); ?></label>
						<input id="ugcify-portal-avatar" class="ugcify-form-input" type="file" name="avatar_file" accept="image/*">
						<div class="ugcify-form-hint"><?php esc_html_e( 'Choose a square image for the clearest public attribution later on.', 'ugcify' ); ?></div>
					</div>

					<div class="ugcify-portal-grid ugcify-portal-grid--two is-compact">
						<div class="ugcify-form-field">
							<label for="ugcify-portal-password"><?php esc_html_e( 'New password', 'ugcify' ); ?></label>
							<input id="ugcify-portal-password" class="ugcify-form-input" type="password" name="new_password">
							<div class="ugcify-form-hint"><?php esc_html_e( 'Leave blank to keep your current password.', 'ugcify' ); ?></div>
						</div>

						<div class="ugcify-form-field">
							<label for="ugcify-portal-confirm-password"><?php esc_html_e( 'Confirm new password', 'ugcify' ); ?></label>
							<input id="ugcify-portal-confirm-password" class="ugcify-form-input" type="password" name="confirm_password">
						</div>
					</div>

					<div class="ugcify-step-buttons">
						<button type="submit" class="ugcify-portal-button is-primary"><?php esc_html_e( 'Save Profile', 'ugcify' ); ?></button>
					</div>
				</form>
			<?php endif; ?>
		</article>
	</div>
</div>