<?php
/**
 * User Profile Layout 3 - Centered Profile with Blue Theme
 *
 * @since 4.2.0
 *
 * Available variables:
 * @var array $template_data Complete data including user info and settings
 * @var array $user User data array
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get centralized profile data
$profile_data = wpuf_ud_get_profile_data( $template_data['user'], $template_data, 'layout-3' );
$user = $profile_data['user'];
$config = $profile_data['template_config'];
$user_meta = $profile_data['user_meta'];
$contact_info = $profile_data['contact_info'];
$social_media = $profile_data['social_media'];
$navigation = $profile_data['navigation'];
$tab_config = $profile_data['tab_config'];
$cover_photo = $profile_data['cover_photo'];

// Legacy variables for backward compatibility
$show_avatar = $config['show_avatar'];
$enable_tabs = $config['enable_tabs'];
$default_tabs = $config['default_tabs'];
$default_active_tab = $config['default_active_tab'];
$avatar_size = $config['avatar_size'];
$custom_tab_labels = $config['custom_tab_labels'];

?>

<div class="wpuf-profile-layout-3">
    <!-- Back Button -->
    <div class="!wpuf-max-w-6xl !wpuf-mx-auto !wpuf-px-4 !wpuf-mb-8">
        <button onclick="wpuf_ud_goBack()" class="wpuf-back-button !wpuf-inline-flex !wpuf-items-center !wpuf-px-4 !wpuf-py-2 !wpuf-text-sm !wpuf-font-medium !wpuf-text-gray-600 !wpuf-bg-white !wpuf-border !wpuf-border-gray-300 !wpuf-rounded-lg hover:!wpuf-bg-gray-50 hover:!wpuf-text-blue-600 !wpuf-transition-colors !wpuf-shadow-sm">
            <svg class="!wpuf-w-4 !wpuf-h-4 !wpuf-mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            <?php esc_html_e( 'Back to Directory', 'wpuf-pro' ); ?>
        </button>
    </div>

    <!-- Cover Photo Section -->
    <?php
    // Check if current user can edit this profile
    $can_edit = wpuf_ud_can_user_edit_profile( $user );
    ?>
    <div class="!wpuf-max-w-6xl !wpuf-mx-auto !wpuf-px-4 !wpuf-mb-8">
        <div class="wpuf-group !wpuf-relative !wpuf-w-full !wpuf-h-[200px] !wpuf-rounded-lg !wpuf-overflow-hidden <?php echo $can_edit ? 'wpuf-cover-photo__container--editable' : ''; ?>">
            <?php if ( ! empty( $cover_photo['url'] ) ) : ?>
                <img
                    src="<?php echo esc_url( $cover_photo['url'] ); ?>"
                    alt="<?php echo esc_attr( sprintf( __( '%s cover photo', 'wpuf-pro' ), $user_meta['display_name'] ) ); ?>"
                    class="wpuf-cover-photo__image !wpuf-w-full !wpuf-h-full !wpuf-object-cover"
                />
            <?php else : ?>
                <div class="wpuf-cover-photo__image !wpuf-w-full !wpuf-h-full !wpuf-bg-gray-200 !wpuf-border !wpuf-border-gray-300"></div>
            <?php endif; ?>

            <?php if ( $can_edit ) : ?>
                <button type="button"
                        class="wpuf-cover-photo-upload-btn !wpuf-absolute !wpuf-inset-0 !wpuf-flex !wpuf-items-center !wpuf-justify-center !wpuf-bg-black !wpuf-bg-opacity-50 !wpuf-text-white !wpuf-text-sm !wpuf-font-medium !wpuf-opacity-0 group-hover:!wpuf-opacity-100 !wpuf-transition-opacity !wpuf-duration-200 !wpuf-cursor-pointer hover:!wpuf-bg-opacity-70 focus:!wpuf-outline-none focus:!wpuf-ring-2 focus:!wpuf-ring-blue-500 focus:!wpuf-ring-opacity-50"
                        onclick="wpufOpenCoverPhotoUpload(<?php echo esc_attr( $user->ID ); ?>)"
                        title="<?php esc_attr_e( 'Upload Cover Photo', 'wpuf-pro' ); ?>"
                        aria-label="<?php esc_attr_e( 'Upload Cover Photo', 'wpuf-pro' ); ?>">
                    <span class="wpuf-cover-photo-upload-text"><?php esc_html_e( 'Upload', 'wpuf-pro' ); ?></span>
                </button>
            <?php endif; ?>
        </div>
    </div>

    <!-- Main Content Container -->
    <div class="!wpuf-max-w-6xl !wpuf-mx-auto !wpuf-px-4">
        <!-- Profile Header Card -->
        <div class="!wpuf-bg-transparent !wpuf-rounded-lg !wpuf-mb-12">
            <div class="!wpuf-flex !wpuf-items-start !wpuf-justify-between">
                <!-- Left Side: Avatar and Info -->
                <div class="!wpuf-flex !wpuf-flex-col !wpuf-text-left">
                    <!-- Avatar -->
                    <?php if ( $show_avatar ) : ?>
                    <div class="!wpuf-flex-shrink-0 !wpuf-mb-4 wpuf-profile-avatar-overlap">
                        <div class="!wpuf-w-32 !wpuf-h-32 !wpuf-rounded-full !wpuf-border-4 !wpuf-border-white !wpuf-overflow-hidden !wpuf-bg-white">
                            <?php
                            $size = 128;
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/user-avatar.php';
                            ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- User Info -->
                    <div class="!wpuf-flex !wpuf-flex-col !wpuf-text-left">
                        <h1 class="!wpuf-text-3xl !wpuf-font-bold !wpuf-text-gray-900 !wpuf-mb-2">
                            <?php echo esc_html( $user_meta['display_name'] ); ?>
                        </h1>

                        <!-- Contact Info -->
                        <div class="!wpuf-flex !wpuf-flex-wrap !wpuf-gap-4 !wpuf-text-sm !wpuf-text-gray-600 !wpuf-mb-4">
                            <?php foreach ( $contact_info as $contact_key => $contact_item ) : ?>
                                <?php if ( $contact_key === 'website' ) : ?>
                                    <span>
                                        <a href="<?php echo esc_url( $contact_item['value'] ); ?>" target="_blank"><?php echo esc_html( $contact_item['display_value'] ); ?></a>
                                    </span>
                                <?php elseif ( $contact_key === 'email' ) : ?>
                                    <span>
                                        <a href="mailto:<?php echo esc_html( $contact_item['value'] ); ?>"><?php echo esc_html( $contact_item['display_value'] ); ?></a>
                                    </span>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </div>

                    </div>
                </div>

                <!-- Right Side: Message Button and Social Icons -->
                <div class="!wpuf-flex !wpuf-flex-col !wpuf-items-end !wpuf-gap-4">
                    <!-- Message and Edit Profile Buttons -->
                    <div class="!wpuf-flex !wpuf-items-center !wpuf-gap-2.5">
                        <?php if ( $navigation['can_message'] && $navigation['message_link'] ) : ?>
                        <!-- Message Button -->
                        <a href="<?php echo esc_url( $navigation['message_link'] ); ?>" target="_blank" class="!wpuf-h-11 !wpuf-px-6 !wpuf-py-2.5 !wpuf-bg-blue-500 !wpuf-text-white !wpuf-rounded-lg hover:!wpuf-bg-blue-600 !wpuf-transition-colors !wpuf-flex !wpuf-items-center !wpuf-gap-2.5 !wpuf-text-sm !wpuf-font-medium !wpuf-no-underline">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.625 9.75C8.625 9.95711 8.45711 10.125 8.25 10.125C8.04289 10.125 7.875 9.95711 7.875 9.75C7.875 9.54289 8.04289 9.375 8.25 9.375C8.45711 9.375 8.625 9.54289 8.625 9.75ZM8.625 9.75H8.25M12.375 9.75C12.375 9.95711 12.2071 10.125 12 10.125C11.7929 10.125 11.625 9.95711 11.625 9.75C11.625 9.54289 11.7929 9.375 12 9.375C12.2071 9.375 12.375 9.54289 12.375 9.75ZM12.375 9.75H12M16.125 9.75C16.125 9.95711 15.9571 10.125 15.75 10.125C15.5429 10.125 15.375 9.95711 15.375 9.75C15.375 9.54289 15.5429 9.375 15.75 9.375C15.9571 9.375 16.125 9.54289 16.125 9.75ZM16.125 9.75H15.75M2.25 12.7593C2.25 14.3604 3.37341 15.754 4.95746 15.987C6.04357 16.1467 7.14151 16.27 8.25 16.3556V21L12.4335 16.8165C12.6402 16.6098 12.9193 16.4923 13.2116 16.485C15.1872 16.4361 17.1331 16.2678 19.0425 15.9871C20.6266 15.7542 21.75 14.3606 21.75 12.7595V6.74056C21.75 5.13946 20.6266 3.74583 19.0425 3.51293C16.744 3.17501 14.3926 3 12.0003 3C9.60776 3 7.25612 3.17504 4.95747 3.51302C3.37342 3.74593 2.25 5.13956 2.25 6.74064V12.7593Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <?php esc_html_e( 'Message', 'wpuf-pro' ); ?>
                        </a>
                        <?php endif; ?>

                        <!-- Edit Profile Button (shows only for own profile) -->
                        <?php if ( $navigation['is_own_profile'] && $navigation['edit_profile_link'] ) : ?>
                        <a href="<?php echo esc_url( $navigation['edit_profile_link'] ); ?>" class="!wpuf-inline-block !wpuf-h-11 !wpuf-px-6 !wpuf-py-2.5 !wpuf-bg-blue-500 !wpuf-text-white !wpuf-rounded-lg hover:!wpuf-bg-blue-600 !wpuf-transition-colors !wpuf-text-sm !wpuf-font-medium !wpuf-no-underline !wpuf-leading-[21px]">
                            <?php esc_html_e( 'Edit Profile', 'wpuf-pro' ); ?>
                        </a>
                        <?php endif; ?>
                    </div>

                    <!-- Social Icons -->
                    <?php if ( $social_media['has_social'] ) : ?>
                    <div class="!wpuf-flex !wpuf-items-center !wpuf-gap-3">
                        <?php foreach ( $social_media['user_social'] as $field => $social_item ) : ?>
                            <a href="<?php echo esc_url( $social_item['url'] ); ?>" target="_blank"
                               class="!wpuf-text-blue-500 hover:!wpuf-text-blue-600 !wpuf-transition-colors">
                                <?php echo $social_item['icon_html']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Bio Section - Full Width -->
            <?php if ( $user_meta['bio'] ) : ?>
            <div class="!wpuf-mt-1 !wpuf-text-left">
                <?php
                $full_bio = $user_meta['bio'];
                $word_count = str_word_count( $full_bio );
                $needs_toggle = $word_count > 150;
                $bio_id = 'bio-' . $user->ID . '-' . uniqid();
                ?>

                <?php if ( $needs_toggle ) : ?>
                    <p class="!wpuf-text-sm !wpuf-text-gray-400 !wpuf-leading-relaxed">
                        <span class="wpuf-bio-excerpt" id="<?php echo esc_attr( $bio_id . '-excerpt' ); ?>">
                            <?php
                            $trimmed_text = wp_trim_words( $full_bio, 150, '' );
                            echo esc_html( $trimmed_text );
                            ?>...
                        </span>
                        <span class="wpuf-bio-full" id="<?php echo esc_attr( $bio_id . '-full' ); ?>" style="display: none;">
                            <?php echo esc_html( $full_bio ); ?>
                        </span>
                        <button type="button"
                                onclick="wpuf_toggleBio('<?php echo esc_js( $bio_id ); ?>')"
                                id="<?php echo esc_attr( $bio_id . '-btn' ); ?>"
                                class="!wpuf-text-sm !wpuf-font-medium !wpuf-text-blue-500 hover:!wpuf-text-blue-600 !wpuf-transition-colors !wpuf-bg-transparent !wpuf-border-0 !wpuf-p-0 !wpuf-cursor-pointer !wpuf-ml-1">
                            <?php esc_html_e( 'Show More', 'wpuf-pro' ); ?>
                        </button>
                        <button type="button"
                                onclick="wpuf_toggleBio('<?php echo esc_js( $bio_id ); ?>')"
                                id="<?php echo esc_attr( $bio_id . '-btn-less' ); ?>"
                                style="display: none;"
                                class="!wpuf-text-sm !wpuf-font-medium !wpuf-text-blue-500 hover:!wpuf-text-blue-600 !wpuf-transition-colors !wpuf-bg-transparent !wpuf-border-0 !wpuf-p-0 !wpuf-cursor-pointer !wpuf-ml-1">
                            <?php esc_html_e( 'Show Less', 'wpuf-pro' ); ?>
                        </button>
                    </p>
                <?php else : ?>
                    <p class="!wpuf-text-sm !wpuf-text-gray-400 !wpuf-leading-relaxed">
                        <?php echo esc_html( $full_bio ); ?>
                    </p>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        </div>

        <!-- Tab Navigation -->
        <?php if ( $enable_tabs && ! empty( $default_tabs ) ) : ?>
        <div class="!wpuf-bg-transparent !wpuf-rounded-lg !wpuf-mb-12">
            <div class="!wpuf-border-t !wpuf-border-gray-200"></div>
            <nav class="!wpuf-flex !wpuf-justify-left !wpuf-border-b !wpuf-border-gray-200">
                <?php foreach ( $default_tabs as $tab ) : ?>
                    <?php
                    // Skip activity tab if User Activity module is not active
                    if ( $tab === 'activity' && ! class_exists( 'WPUF_User_Activity' ) ) {
                        continue;
                    }

                    if ( in_array( $tab, [ 'comments', 'posts', 'file', 'message', 'about', 'activity' ] ) ) :
                    ?>
                        <button class="wpuf-tab-button-3 <?php echo $tab === $default_active_tab ? 'active' : ''; ?> !wpuf-px-8 !wpuf-py-4 !wpuf-text-sm !wpuf-font-medium !wpuf-text-gray-500 hover:!wpuf-text-blue-500 !wpuf-transition-colors !wpuf-relative hover:!wpuf-bg-transparent active:!wpuf-bg-transparent !wpuf-bg-transparent"
                                data-tab="<?php echo esc_attr( $tab ); ?>">
                            <?php
echo esc_html( wpuf_ud_get_tab_label( $tab, $profile_data ) );
                            ?>
                        </button>
                    <?php endif; ?>
                <?php endforeach; ?>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="!wpuf-bg-transparent !wpuf-rounded-lg">
            <div class="wpuf-tab-content-3">
                <!-- Comments Tab -->
                <?php if ( in_array( 'comments', $default_tabs ) ) : ?>
                    <div class="wpuf-tab-content-comments" style="<?php echo $default_active_tab !== 'comments' ? 'display: none;' : ''; ?>">
                        <?php
                        if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/comments-3.php' ) ) {
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/comments-3.php';
                        } else {
                            // Fallback to comments-2
                            if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/comments-2.php' ) ) {
                                include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/comments-2.php';
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>

                <!-- Posts Tab -->
                <?php if ( in_array( 'posts', $default_tabs ) ) : ?>
                    <div class="wpuf-tab-content-posts" style="<?php echo $default_active_tab !== 'posts' ? 'display: none;' : ''; ?>">
                        <?php
                        if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/posts-3.php' ) ) {
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/posts-3.php';
                        } else {
                            // Fallback to posts-2
                            if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/posts-2.php' ) ) {
                                include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/posts-2.php';
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>

                <!-- File Tab -->
                <?php if ( in_array( 'file', $default_tabs ) ) : ?>
                    <div class="wpuf-tab-content-file" style="<?php echo $default_active_tab !== 'file' ? 'display: none;' : ''; ?>">
                        <?php
                        $tab_title = __( 'Files', 'wpuf-pro' );
                        if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-3.php' ) ) {
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-3.php';
                        } elseif ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-2.php' ) ) {
                            // Fallback to file-2
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-2.php';
                        } elseif ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-1.php' ) ) {
                            // Fallback to file-1
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file-1.php';
                        } elseif ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file.php' ) ) {
                            // Fallback to old template
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/file.php';
                        }
                        ?>
                    </div>
                <?php endif; ?>

                <!-- About Tab -->
                <?php if ( in_array( 'about', $default_tabs ) ) : ?>
                    <div class="wpuf-tab-content-about" style="<?php echo $default_active_tab !== 'about' ? 'display: none;' : ''; ?>">
                        <?php
                        if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/about-3.php' ) ) {
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/about-3.php';
                        } else {
                            // Fallback to about-2
                            if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/about-2.php' ) ) {
                                include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/about-2.php';
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>

                <!-- Message Tab -->
                <?php if ( in_array( 'message', $default_tabs ) ) : ?>
                    <div class="wpuf-tab-content-message" style="<?php echo $default_active_tab !== 'message' ? 'display: none;' : ''; ?>">
                        <div class="!wpuf-text-center !wpuf-py-8">
                            <p class="!wpuf-text-gray-500"><?php esc_html_e( 'Message functionality coming soon.', 'wpuf-pro' ); ?></p>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Activity Tab -->
                <?php if ( in_array( 'activity', $default_tabs ) && class_exists( 'WPUF_User_Activity' ) ) : ?>
                    <div class="wpuf-tab-content-activity" style="<?php echo $default_active_tab !== 'activity' ? 'display: none;' : ''; ?>">
                        <?php
                        if ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/activity-3.php' ) ) {
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/activity-3.php';
                        } elseif ( file_exists( WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/activity.php' ) ) {
                            // Fallback to general activity template
                            include WPUF_UD_TEMPLATES . '/shortcodes/profile/template-parts/activity.php';
                        }
                        ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<style>
.wpuf-tab-button-3 {
    position: relative;
}
.wpuf-tab-button-3:focus {
    outline: none;
}
.wpuf-tab-button-3::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.2s;
}
.wpuf-tab-button-3.active {
    color: #3B82F6; /* Blue-500 */
}
.wpuf-tab-button-3.active::after {
    background-color: #3B82F6; /* Blue-500 */
}

.wpuf-profile-avatar-overlap {
    margin-top: -80px !important;
}
</style>
