Profile Management

const DEFAULT_TOURIST_PROFILE = {
  // Basic Information
  name: "Sofía Ramírez",
  location: "Ciudad de México",
  memberSince: "Ene 2023",
  badge: "Viajera frecuente",
  bio: "Amante de la naturaleza y la comida callejera.",
  
  // Travel Preferences
  interests: ["Aventura", "Gastronomía", "Playa", "Fotografía"],
  travelStyle: "Exploración cultural con itinerarios flexibles.",
  tripType: "Escapadas de fin de semana y viajes urbanos.",
  languages: ["Español", "Inglés"],
  
  // Activity Preferences
  paceAndCompany: "Ritmo moderado en compañía de grupos pequeños.",
  activityLevel: "Moderado",
  groupPreference: "Pareja o grupos de 3 a 6 personas.",
  
  // Special Preferences
  dietaryPreferences: "Sin restricciones, con prioridad en comida local.",
  planningLevel: "Intermedio",
  amenities: "Hospedajes céntricos, conectividad y descanso.",
  transport: "Caminata y transporte público.",
  photoPreference: "Fotos espontáneas y retratos naturales.",
  accessibility: "Sin necesidades especiales actualmente.",
  additionalNotes: "Disponible para ajustar actividades según clima e intereses.",
  
  // Media
  avatar: "profile-image-url",
  cover: "cover-image-url"
};

<div class="profile-section">
  <h2>Acerca de mí</h2>
  <p id="profileBio">Amante de la naturaleza y la comida callejera.</p>
</div>

if (dom.interests) {
  dom.interests.innerHTML = '';
  state.profile.interests.forEach((tag) => {
    const item = document.createElement('span');
    item.textContent = `#${tag}`;
    dom.interests.appendChild(item);
  });
}

// Examples of travel styles
"Exploración cultural con itinerarios flexibles."
"Viajes estructurados con actividades planificadas."
"Aventuras espontáneas y descubrimiento libre."
"Experiencias inmersivas con comunidades locales."

function renderHistory() {
  if (!dom.history) return;
  dom.history.innerHTML = '';
  
  state.history.forEach((item) => {
    const row = document.createElement('article');
    row.className = 'trip-history__item';
    row.innerHTML = `
      <div class="trip-history__image" style="background-image:url('${item.image}');"></div>
      <div class="trip-history__body">
        <h4 class="trip-history__title">${item.title}</h4>
        <p class="trip-history__meta">
          <span class="material-symbols-outlined">calendar_month</span>
          ${item.dateLabel}
        </p>
      </div>
    `;
    dom.history.appendChild(row);
  });
}

dom.btnEditProfileNav?.addEventListener('click', () => {
  window.location.href = './profileTouristEdit.html';
});

dom.btnAvatarEdit?.addEventListener('click', () => openMediaModal('avatar'));

dom.btnCardEdit?.addEventListener('click', () => {
  openMediaModal('cover');
});

async function handleMediaSave() {
  if (!state.media.file) {
    dom.mediaStatus.textContent = 'Selecciona una imagen antes de guardar.';
    return;
  }
  
  dom.mediaSave.setAttribute('disabled', 'disabled');
  dom.mediaStatus.textContent = 'Guardando imagen...';
  
  try {
    const encodedImage = await fileToDataUrl(state.media.file);
    
    if (state.media.mode === 'cover') {
      state.profile.cover = encodedImage;
    } else {
      state.profile.avatar = encodedImage;
    }
    
    persistProfile(state.profile);
    renderProfile();
    
    // Sync with API
    await syncMediaWithApi(state.media.mode, state.media.file);
    
    closeMediaModal();
  } catch (error) {
    dom.mediaStatus.textContent = error.message;
  } finally {
    dom.mediaSave.removeAttribute('disabled');
  }
}

const TOURIST_PROFILE_STORAGE_KEY = 'kc_tourist_profile_v1';

function readProfileFromStorage() {
  try {
    const raw = window.localStorage.getItem(TOURIST_PROFILE_STORAGE_KEY);
    if (!raw) return cloneDefaultProfile();
    return normalizeProfile(JSON.parse(raw));
  } catch (error) {
    console.warn('No se pudo leer el perfil local de turista.', error);
    return cloneDefaultProfile();
  }
}

function persistProfile(profile) {
  try {
    window.localStorage.setItem(
      TOURIST_PROFILE_STORAGE_KEY,
      JSON.stringify(profile)
    );
  } catch (error) {
    console.warn('No se pudo guardar el perfil local de turista.', error);
  }
}

const profile = {
  getMe: () => api.get('/tourist/profile/me')
};

// Usage
const response = await window.KCTouristApi.profile.getMe();
const data = response?.data || {};

const profile = {
  updateMe: (payload) => api.put('/tourist/profile/me', payload)
};

// Example payload
const updates = {
  name: "Sofía Ramírez",
  bio: "Amante de la naturaleza y la comida callejera.",
  interests: ["Aventura", "Gastronomía", "Playa"],
  activityLevel: "Moderado"
};

await window.KCTouristApi.profile.updateMe(updates);

const profile = {
  updateSecurity: (payload) => api.put('/tourist/profile/me/security', payload)
};

// Example
await profile.updateSecurity({
  currentPassword: 'old-password',
  newPassword: 'new-password'
});

const profile = {
  uploadAvatar: (formData) => api.post('/tourist/profile/me/avatar', formData, {
    headers: {} // Let browser set Content-Type for FormData
  })
};

// Usage
const formData = new FormData();
formData.append('avatar', file);
await window.KCTouristApi.profile.uploadAvatar(formData);

const profile = {
  uploadCover: (formData) => api.post('/tourist/profile/me/cover', formData, {
    headers: {}
  })
};

// Usage
const formData = new FormData();
formData.append('cover', file);
await window.KCTouristApi.profile.uploadCover(formData);

function normalizeProfile(rawProfile) {
  const base = cloneDefaultProfile();
  if (!rawProfile || typeof rawProfile !== 'object') return base;
  
  base.name = normalizeText(rawProfile.name, base.name);
  base.location = normalizeText(rawProfile.location, base.location);
  base.bio = normalizeText(rawProfile.bio, base.bio);
  base.interests = normalizeList(rawProfile.interests, base.interests);
  base.languages = normalizeList(rawProfile.languages, base.languages);
  // ... normalize all fields
  
  return base;
}

function normalizeText(rawValue, fallbackValue) {
  const value = String(rawValue || '').trim();
  return value || fallbackValue;
}

function normalizeList(rawValue, fallbackList) {
  if (Array.isArray(rawValue)) {
    const list = rawValue
      .map(item => String(item || '').trim())
      .filter(Boolean);
    return list.length ? list : [...fallbackList];
  }
  
  if (typeof rawValue === 'string') {
    const list = rawValue
      .split(/[\n,]+/g)
      .map(item => item.trim())
      .filter(Boolean);
    return list.length ? list : [...fallbackList];
  }
  
  return [...fallbackList];
}

function mapApiProfile(raw) {
  return {
    name: raw.name || raw.fullName || '',
    location: raw.location || '',
    memberSince: raw.memberSince || '',
    badge: raw.badge || '',
    bio: raw.bio || raw.about || '',
    interests: raw.interests || [],
    travelStyle: raw.travelStyle || '',
    tripType: raw.tripType || '',
    languages: raw.languages || [],
    paceAndCompany: raw.paceAndCompany || '',
    activityLevel: raw.activityLevel || '',
    groupPreference: raw.groupPreference || '',
    dietaryPreferences: raw.dietaryPreferences || '',
    planningLevel: raw.planningLevel || '',
    amenities: raw.amenities || '',
    transport: raw.transport || '',
    photoPreference: raw.photoPreference || '',
    accessibility: raw.accessibility || '',
    additionalNotes: raw.additionalNotes || '',
    avatar: raw.avatarUrl || raw.avatarImage || '',
    cover: raw.coverUrl || raw.coverImage || ''
  };
}

async function init() {
  bind();
  setupActions();
  renderLoadingState();
  
  // 1. Load from localStorage first (fast)
  state.profile = readProfileFromStorage();
  
  // 2. Fetch from API (authoritative)
  await hydrateFromApi();
  
  // 3. Render final state
  renderProfile();
  renderHistory();
}

// Loading state announcements
<div class="guide-loading" role="status" aria-live="polite" aria-busy="true">
  <span class="guide-loading__spinner" aria-hidden="true"></span>
  <span>Cargando perfil...</span>
</div>

// Media modal labels
<button aria-label="Editar foto de perfil">
  <span class="material-symbols-outlined">photo_camera</span>
</button>