<?php
/*
Template Name: Profile
*/

// Redirect if user is not logged in
if (!is_user_logged_in()) {
    wp_redirect(wp_login_url(get_permalink()));
    exit;
}

// Get current user information
$current_user = wp_get_current_user();
$user_id = $current_user->ID;

// Get user meta data
$first_name = get_user_meta($user_id, 'first_name', true);
$last_name = get_user_meta($user_id, 'last_name', true);
$email = $current_user->user_email;
$membership_number = get_user_meta($user_id, 'membership_number', true);
$mobile = get_user_meta($user_id, 'mobile_number', true);
$address = get_user_meta($user_id, 'address', true);

// Get member post ID linked to this user
$member_post_id = get_user_meta($user_id, 'member_post_id', true);

// If there's a linked member post, get additional data from ACF fields
if ($member_post_id) {
    // These will override the user meta if they exist in the ACF fields
    $acf_first_name = get_field('first_name', $member_post_id);
    $acf_last_name = get_field('last_name', $member_post_id);
    $acf_email = get_field('email', $member_post_id);
    $acf_phone = get_field('phone', $member_post_id);
    $acf_address = get_field('address', $member_post_id);
    $acf_membership_number = get_field('membership_number', $member_post_id);
    $acf_membership_type = get_field('membership_type', $member_post_id);
    $acf_member_status = get_field('member_status', $member_post_id);
    $profile_image = get_field('profile_image', $member_post_id);

    // Use ACF fields if available, otherwise fallback to user meta
    $first_name = $acf_first_name ?: $first_name;
    $last_name = $acf_last_name ?: $last_name;
    $email = $acf_email ?: $email;
    $mobile = $acf_phone ?: $mobile;
    $address = $acf_address ?: $address;
    $membership_number = $acf_membership_number ?: $membership_number;

    // Format membership type for display
    $membership_types = [
      'Life Members' => 'Life Members',
      'Members' => 'Members',
      'Associate Members' => 'Associate Members',
      'Corporate Members' => 'Corporate Members',
      'Honorary Member' => 'Honorary Member',
      'Student Member' => 'Student Member',
      'Senior Associate Member' => 'Senior Associate Member',
      'Spouse Member' => 'Spouse Member',
      'Morning Member' => 'Morning Member',
      'Family Member' => 'Family Member'
    ];

    $membership_type_display = isset($membership_types[$acf_membership_type]) ? $membership_types[$acf_membership_type] : $acf_membership_type;

    // Format member status for display
    $member_statuses = [
        'inactive' => 'Inactive',
        'active' => 'Active',
        'suspended' => 'Suspended',
        'expired' => 'Expired'
    ];

    $member_status_display = isset($member_statuses[$acf_member_status]) ? $member_statuses[$acf_member_status] : $acf_member_status;
}

// Check if profile update form was submitted
$profile_updated = false;
$update_errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_profile'])) {
    if (isset($_POST['profile_nonce']) && wp_verify_nonce($_POST['profile_nonce'], 'update_profile_nonce')) {
        // Get form data
        $new_first_name = sanitize_text_field($_POST['first_name']);
        $new_last_name = sanitize_text_field($_POST['last_name']);
        $new_mobile = sanitize_text_field($_POST['mobile']);
        $new_address = sanitize_textarea_field($_POST['address']);

        // Update user meta
        update_user_meta($user_id, 'first_name', $new_first_name);
        update_user_meta($user_id, 'last_name', $new_last_name);
        update_user_meta($user_id, 'mobile_number', $new_mobile);
        update_user_meta($user_id, 'address', $new_address);

        // Update ACF fields if member post exists
        if ($member_post_id) {
            update_field('first_name', $new_first_name, $member_post_id);
            update_field('last_name', $new_last_name, $member_post_id);
            update_field('phone', $new_mobile, $member_post_id);
            update_field('address', $new_address, $member_post_id);

            // Update profile image if uploaded
            if (!empty($_FILES['profile_image']['name'])) {
                // WordPress image upload handling
                require_once(ABSPATH . 'wp-admin/includes/image.php');
                require_once(ABSPATH . 'wp-admin/includes/file.php');
                require_once(ABSPATH . 'wp-admin/includes/media.php');

                $attachment_id = media_handle_upload('profile_image', 0);

                if (is_wp_error($attachment_id)) {
                    $update_errors[] = 'Error uploading profile image: ' . $attachment_id->get_error_message();
                } else {
                    // Format image data for ACF
                    $image_data = [
                        'ID' => $attachment_id,
                        'id' => $attachment_id,
                        'url' => wp_get_attachment_url($attachment_id),
                        'alt' => '',
                        'title' => basename(get_attached_file($attachment_id))
                    ];

                    update_field('profile_image', $image_data, $member_post_id);
                }
            }
        }

        // Update WP user display name
        wp_update_user([
            'ID' => $user_id,
            'display_name' => $new_first_name . ' ' . $new_last_name
        ]);

        // Set profile updated flag
        $profile_updated = true;

        // Refresh page data
        $first_name = $new_first_name;
        $last_name = $new_last_name;
        $mobile = $new_mobile;
        $address = $new_address;

        // Refresh profile image
        if ($member_post_id) {
            $profile_image = get_field('profile_image', $member_post_id);
        }
    } else {
        $update_errors[] = 'Security verification failed.';
    }
}

get_header();

if (have_posts()) : the_post();
?>

<div class="py-20">
  <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-4">
    <div class="lg:col-span-3 mt-6 lg:mt-0">
      <?php
     // Include the member menu template part
     get_template_part('parts/member-menu');
     ?>
    </div>

    <div class="lg:col-span-9">
      <?php if ($profile_updated): ?>
      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
        <p>Your profile has been updated successfully!</p>
      </div>
      <?php endif; ?>

      <?php if (!empty($update_errors)): ?>
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
        <?php foreach ($update_errors as $error): ?>
          <p><?php echo esc_html($error); ?></p>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>

      <!-- View Profile Section -->
      <div id="view-profile" class="p-5 bg-white border border-gray-300 rounded-lg">
        <div class="lg:grid lg:grid-cols-12 gap-4">
          <div class="lg:col-span-12 flex justify-end">
            <button id="edit-profile-btn" class="lg:float-right mt-3 lg:mt-0 text-white green-bg rounded-xl flex justify-center radious-sm px-8 py-4 uppercase hover:bg-white hover:text-black hover:border-gray-700 hover:border">Edit Profile</button>
          </div>
          <div class="lg:col-span-4 my-6">
            <div class="profile-otr">
              <div class="rounded-full profile-round-box overflow-hidden relative inline-block">
                <?php if (!empty($profile_image)): ?>
                  <img src="<?php echo esc_url($profile_image['url']); ?>" alt="<?php echo esc_attr($first_name . ' ' . $last_name); ?>" />
                <?php else: ?>
                  <img src="<?php echo esc_url(get_template_directory_uri() . '/images/default-profile.png'); ?>" alt="Default Profile" />
                <?php endif; ?>
              </div>
              <h4 class="text-xl font-medium mt-4"><?php echo esc_html($first_name . ' ' . $last_name); ?></h4>
              <p><?php echo !empty($address) ? esc_html(strtok($address, "\n")) : ''; ?></p>
              <?php if (!empty($acf_member_status)): ?>
                <p class="mt-2">
                  <span class="inline-block px-3 py-1 rounded-full text-sm
                    <?php echo ($acf_member_status === 'active') ? 'bg-green-500 text-white' :
                          (($acf_member_status === 'inactive') ? 'bg-red-500 text-white' :
                          (($acf_member_status === 'suspended') ? 'bg-orange-500 text-white' : 'bg-gray-500 text-white')); ?>">
                    <?php echo esc_html($member_status_display); ?>
                  </span>
                </p>
              <?php endif; ?>
            </div>
          </div>
          <div class="lg:col-span-8 my-6">
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">First Name:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($first_name); ?></div>
            </div>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Last Name:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($last_name); ?></div>
            </div>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Email:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($email); ?></div>
            </div>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Membership Number:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($membership_number); ?></div>
            </div>
            <?php if (!empty($acf_membership_type)): ?>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Membership Type:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($membership_type_display); ?></div>
            </div>
            <?php endif; ?>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Mobile:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo esc_html($mobile); ?></div>
            </div>
            <?php if (!empty($address)): ?>
            <div class="lg:grid lg:grid-cols-12 gap-4">
              <div class="lg:col-span-6 my-3 font-semibold">Address:</div>
              <div class="lg:col-span-6 my-3 text-base"><?php echo nl2br(esc_html($address)); ?></div>
            </div>
            <?php endif; ?>
          </div>
        </div>
      </div>

      <!-- Edit Profile Form - Hidden by Default -->
      <div id="edit-profile" class="p-5 bg-white border border-gray-300 rounded-lg" style="display: none;">
        <h3 class="text-xl font-bold mb-5">Edit Your Profile</h3>

        <form method="post" action="" enctype="multipart/form-data">
          <?php wp_nonce_field('update_profile_nonce', 'profile_nonce'); ?>

          <div class="mb-5">
            <div class="mb-4 text-center">
              <div class="profile-image-preview mx-auto rounded-full overflow-hidden relative" style="width: 150px; height: 150px;">
                <?php if (!empty($profile_image)): ?>
                  <img id="profile-preview" src="<?php echo esc_url($profile_image['url']); ?>" alt="Profile Image" style="width: 100%; height: 100%; object-fit: cover;">
                <?php else: ?>
                  <img id="profile-preview" src="<?php echo esc_url(get_template_directory_uri() . '/images/default-profile.png'); ?>" alt="Default Profile" style="width: 100%; height: 100%; object-fit: cover;">
                <?php endif; ?>
              </div>
              <div class="mt-3">
                <label for="profile_image" class="cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
                  Change Profile Picture
                </label>
                <input type="file" id="profile_image" name="profile_image" class="hidden" accept="image/*">
              </div>
            </div>
          </div>

          <div class="lg:grid lg:grid-cols-2 gap-x-4 gap-y-4">
            <div class="mb-4">
              <label for="first_name" class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
              <input type="text"
                    id="first_name"
                    name="first_name"
                    value="<?php echo esc_attr($first_name); ?>"
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4"
                    required>
            </div>

            <div class="mb-4">
              <label for="last_name" class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
              <input type="text"
                    id="last_name"
                    name="last_name"
                    value="<?php echo esc_attr($last_name); ?>"
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4"
                    required>
            </div>

            <div class="mb-4">
              <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email (cannot be changed)</label>
              <input type="email"
                    id="email"
                    value="<?php echo esc_attr($email); ?>"
                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg block w-full p-4"
                    readonly>
            </div>

            <div class="mb-4">
              <label for="mobile" class="block text-sm font-medium text-gray-700 mb-2">Mobile</label>
              <input type="tel"
                    id="mobile"
                    name="mobile"
                    value="<?php echo esc_attr($mobile); ?>"
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4"
                    required>
            </div>

            <div class="mb-4 lg:col-span-2">
              <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Address</label>
              <textarea
                    id="address"
                    name="address"
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4"
                    rows="4"><?php echo esc_textarea($address); ?></textarea>
            </div>

            <div class="mb-4">
              <label for="membership_number" class="block text-sm font-medium text-gray-700 mb-2">Membership Number (cannot be changed)</label>
              <input type="text"
                    id="membership_number"
                    value="<?php echo esc_attr($membership_number); ?>"
                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg block w-full p-4"
                    readonly>
            </div>

            <?php if (!empty($acf_membership_type)): ?>
            <div class="mb-4">
              <label for="membership_type" class="block text-sm font-medium text-gray-700 mb-2">Membership Type (cannot be changed)</label>
              <input type="text"
                    id="membership_type"
                    value="<?php echo esc_attr($membership_type_display); ?>"
                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg block w-full p-4"
                    readonly>
            </div>
            <?php endif; ?>
          </div>

          <div class="flex justify-between mt-6">
            <button type="button"
                    id="cancel-edit-btn"
                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg">
              Cancel
            </button>

            <button type="submit"
                    name="update_profile"
                    class="green-bg hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg">
              Save Changes
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle between view and edit modes
    const viewProfile = document.getElementById('view-profile');
    const editProfile = document.getElementById('edit-profile');
    const editProfileBtn = document.getElementById('edit-profile-btn');
    const cancelEditBtn = document.getElementById('cancel-edit-btn');

    editProfileBtn.addEventListener('click', function() {
        viewProfile.style.display = 'none';
        editProfile.style.display = 'block';
    });

    cancelEditBtn.addEventListener('click', function() {
        editProfile.style.display = 'none';
        viewProfile.style.display = 'block';
    });

    // Profile image preview
    const profileImageInput = document.getElementById('profile_image');
    const profilePreview = document.getElementById('profile-preview');

    profileImageInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                profilePreview.src = e.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
});
</script>

<?php
endif;
get_footer();
?>