<template>
  <div class="page-container">
    <!-- Navbar -->
    <nav class="navbar">
      <div class="navbar-left">
        <img :src="logo" alt="EventAI Logo" class="logo" @click="$router.push('/mainPageVendor')" />
      </div>
      <div class="navbar-center">
        <h1>Perfil de {{ user.username ? '@' + user.username : '' }}</h1>
      </div>
      <div class="navbar-right">
        <button class="nav-button back" @click="$router.back()">
          <i class="bi bi-arrow-left"></i>
          Volver
        </button>
      </div>
    </nav>

    <div class="page-background">
      <div class="profile-container">
        <!-- Cabecera solo visual -->
        <div class="profile-header">
          <div class="profile-photo-block">
            <img :src="user.photo || defaultAvatar" alt="Foto de perfil" class="profile-photo" />
          </div>
          <div class="profile-info-block">
            <div class="profile-username-row">
              <span class="profile-username">@{{ user.username }}</span>
            </div>
            <div class="profile-fullname">{{ user.fullname }}</div>
            <div class="profile-bio">{{ user.bio }}</div>
          </div>
        </div>

        <!-- Navegación tipo pestañas/Instagram -->
        <div class="profile-tabs">
          <button
            v-for="tab in visibleTabs"
            :key="tab.key"
            :class="['profile-tab', { active: currentTab === tab.key }]"
            @click="currentTab = tab.key"
          >
            <i :class="tab.icon"></i> {{ tab.label }}
          </button>
        </div>

        <!-- Contenido de la pestaña seleccionada -->
        <div class="profile-tab-content">
          <component
            v-if="user.id"
            :is="currentTabComponent"
            :userId="user.id"
            :readonly="isOtherUser"
          />
          <div v-else class="loading">
            <i class="bi bi-arrow-repeat"></i>
            <p>Cargando perfil...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/LogoEventAiTransGran.png'
import defaultAvatar from '@/assets/account_icon.png'
import AccountServices from '@/services/AccountServices'
import UserServices from '@/services/UserServices'
import UserEvents from './userEvents.vue'
import UserServicesComponent from './userServices.vue'

export default {
  name: 'Profile',
  components: {
    UserEvents,
    UserServices: UserServicesComponent
  },
  props: {
    userId: {
      type: String,
      required: false
    }
  },
  data () {
    return {
      logo,
      user: {
        photo: '',
        username: '',
        fullname: '',
        bio: '',
        id: '',
        role: 'client'
      },
      defaultAvatar,
      currentTab: 'myEvents',
      loading: false,
      error: null
    }
  },
  computed: {
    visibleTabs () {
      console.log('user', this.user)
      if (this.user.role.includes('vendor')) {
        return [
          { key: 'myEvents', label: 'Eventos', icon: 'bi bi-calendar-event' },
          { key: 'myServices', label: 'Servicios', icon: 'bi bi-briefcase' }
        ]
      } else {
        return [
          { key: 'myEvents', label: 'Eventos', icon: 'bi bi-calendar-event' }
        ]
      }
    },
    currentTabComponent () {
      switch (this.currentTab) {
        case 'myEvents': return 'UserEvents'
        case 'myServices': return 'UserServices'
        default: return 'div'
      }
    },
    isOtherUser () {
      const loggedId = JSON.parse(localStorage.getItem('user'))?.account?.id
      return this.user.id !== loggedId
    }
  },
  async created () {
    this.loading = true
    try {
      let id = this.userId
      if (!id && this.$route && this.$route.params && this.$route.params.id) {
        id = this.$route.params.id
      }
      if (!id) {
        this.error = 'No se ha especificado el usuario.'
        return
      }
      const userData = await UserServices.getUserById(id)
      const accountData = await AccountServices.getAccountById(id)
      this.user = {
        photo: accountData.photo || defaultAvatar,
        username: accountData.username || '',
        fullname: userData.full_name || '',
        bio: accountData.bio || '',
        id: id || '',
        role: userData.role || 'client'
      }
      console.log('userData', userData)
      console.log('accountData', accountData)
      console.log('user', this.user)
    } catch (e) {
      this.error = 'No se pudo cargar el perfil.'
    } finally {
      this.loading = false
    }
  }
}
</script>

<style scoped>
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');
/* Copia los estilos principales de myProfile.vue para mantener la coherencia visual */
.page-container {
  padding-top: 140px;
  min-height: 100vh;
  background: #f8f9fa;
  background-image:  linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.65)), url('../assets/fondoPage3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.profile-container {
  max-width: 1150px;
  margin: 2.5rem auto;
  margin-top: 120px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(128,0,32,0.08);
  padding: 2.5rem 2rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: 100%;
  margin-bottom: 2.2rem;
}
.profile-photo-block {
  position: relative;
  width: 110px;
  height: 110px;
}
.profile-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #800020;
  background: #f3f3f3;
  box-shadow: 0 2px 8px rgba(128,0,32,0.08);
}
.profile-info-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-username-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.profile-username {
  font-size: 1.25rem;
  font-weight: 700;
  color: #800020;
}
.profile-fullname {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}
.profile-bio {
  font-size: 1rem;
  color: #555;
  margin-top: 0.2rem;
  font-style: italic;
  min-height: 1.5rem;
}
.profile-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  border-bottom: 2px solid #f0f0f0;
}
.profile-tab {
  background: none;
  border: none;
  color: #800020;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem 0.5rem 1.2rem;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: border-bottom 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-tab.active {
  color: #fff;
  background: #800020;
  border-radius: 16px 16px 0 0;
  border-bottom: 3px solid #800020;
}
.profile-tab-content {
  width: 100%;
  min-height: 200px;
  background: #f8f9fa;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 8px rgba(128,0,32,0.04);
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: auto;
  margin-bottom: 2rem;
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease-in-out;
}
.navbar-left .logo {
  height: 80px;
  width: auto;
  cursor: pointer;
}
.navbar-center h1 {
  color: #800020;
  font-size: 2rem;
  margin: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.back {
  background-color: #2C3E50;
  color: white;
}
.back:hover {
  background-color: #1a252f;
  transform: translateY(-2px);
}
</style>
