<template>
  <AppLayout :user="user">
    <!-- Profile Card -->
    <div class="w-full max-w-sm bg-white shadow-xl overflow-hidden flex flex-col relative profile-card">
       <!-- Image Slider -->
       <!-- Image Slider -->
    <div class="w-full max-w-sm mx-auto relative z-10">
      <div class="swiper mySwiper relative h-48 overflow-hidden">
        <div class="swiper-wrapper">
           <div v-for="(image, index) in user.background_img" :key="index" class="swiper-slide">
             <img :src=" image.photo" class="w-full h-48 object-cover" />
           </div>
         </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
      <div class="relative mx-auto -mt-10 profile-image z-10">
        <div class="rounded-xl p-1 animate-avatar">
          <img :src="user.basic_info.profile_picture" alt="Profile" class="w-32 h-32 rounded-xl border-4" />
        </div>
      </div>

      <div class="mt-2 text-center px-4">
        <h2 class="text-2xl font-bold profile-name-gradient" style="font-family: var(--font-heading);">{{ user.basic_info.first_name + ' ' + user.basic_info.last_name }}</h2>
        <p class="text-sm text-gray-500 mt-1">{{ user.basic_info.profession }}</p>
        <!-- <p class="text-sm text-gray-600 mt-2" v-html="user.basic_info.about_me"></p> -->
      </div>

      <!-- Social Links -->
      <div class="flex gap-4 mt-4 flex-wrap justify-center px-4">
        <a
          v-for="(social, index) in socials"
          :key="social.platform"
          :href="social.url"
          class="btn-social w-12 h-12 flex-shrink-0 flex items-center justify-center rounded-full text-white shadow-md hover:shadow-lg transition-all transform hover:scale-110 social-link"
          :style="{ animationDelay: `${120 + index * 60}ms` }"
          @click="handleSocialClick"
        >
          <i :class="[social.icon, 'text-base']"></i>
        </a>
      </div>

      <!-- Contact Details -->
      <div class="mt-4 px-6 space-y-2 text-sm">
        <div class="flex items-center gap-2 p-2">
          <div class="w-7 h-7 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 text-xs">
            <i class="fas fa-location-dot"></i>
          </div>
          <span>{{ user.basic_info.address }}</span>
        </div>
        <div v-for="phone in [user.basic_info.mobile_no, user.basic_info.mobile_no1].filter(p => p)" :key="phone" class="flex items-center gap-2 p-2">
          <div class="w-7 h-7 flex items-center justify-center rounded-full bg-green-100 text-green-600 text-xs">
            <i class="fas fa-phone"></i>
          </div>
          <span>{{ phone }}</span>
        </div>
        <div v-for="email in [user.basic_info.personal_email, user.basic_info.official_email].filter(e => e)" :key="email" class="flex items-center gap-2 p-2">
          <div class="w-7 h-7 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-600 text-xs">
            <i class="fas fa-envelope"></i>
          </div>
          <span>{{ email }}</span>
        </div>

      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import AppLayout from '../Layouts/AppLayout.vue';
import Swiper from 'swiper';
import { Pagination, Autoplay } from 'swiper/modules';

const props = defineProps({
  user: Object,
  theme: Object,
  slug: String,
});

const socials = computed(() => {
  const links = props.user.social_link;
  return [

    { platform: 'github', icon: 'fab fa-github', url: links.github },
    { platform: 'gitlab', icon: 'fab fa-gitlab', url: links.gitlab },
    { platform: 'bitbucket', icon: 'fab fa-bitbucket', url: links.bitbucket },
    { platform: 'facebook', icon: 'fab fa-facebook-f', url: links.facebook },
    { platform: 'twitter', icon: 'fab fa-twitter', url: links.twitter },
    { platform: 'instagram', icon: 'fab fa-instagram', url: links.instagram },
    { platform: 'youtube', icon: 'fab fa-youtube', url: links.youtube },
    { platform: 'website', icon: 'fas fa-globe', url: links.website },
  ].filter(s => s.url && s.url !== '');
});


onMounted(() => {
    // Set theme colors dynamically
   if (props.theme) {
     const root = document.documentElement;
     root.style.setProperty('--primary-1', props.theme.primary_color_1 || '#9912fa');
     root.style.setProperty('--primary-2', props.theme.primary_color_2 || '#1c3f86');
     root.style.setProperty('--accent-1', props.theme.accent_color_1 || '#9912fa');
     root.style.setProperty('--accent-2', props.theme.accent_color_2 || '#1c3f86');
     root.style.setProperty('--bg-start', props.theme.bg_start || '#1c3f86');
     root.style.setProperty('--bg-end', props.theme.bg_end || '#1c3f86');
   }

   new Swiper('.mySwiper', {
     loop: true,
     autoplay: {
       delay: 2000,
       disableOnInteraction: false,
     },
     pagination: {
       el: '.swiper-pagination',
       clickable: true,
     },
     modules: [Pagination, Autoplay],
   });

   const socialLinks = document.querySelectorAll('.social-link');
   socialLinks.forEach((link) => {
     link.addEventListener('click', function (e) {
       const ripple = document.createElement('span');
       const rect = this.getBoundingClientRect();
       const size = Math.max(rect.width, rect.height);
       const x = e.clientX - rect.left - size / 2;
       const y = e.clientY - rect.top - size / 2;

       ripple.style.cssText = `
         position: absolute;
         width: ${size}px;
         height: ${size}px;
         background: rgba(255,255,255,0.3);
         border-radius: 50%;
         transform: scale(0);
         animation: ripple 0.6s ease-out;
         left: ${x}px;
         top: ${y}px;
         pointer-events: none;
       `;

       this.style.position = 'relative';
       this.style.overflow = 'hidden';
       this.appendChild(ripple);

       setTimeout(() => ripple.remove(), 600);
     });
   });
 });
</script>