<script lang="ts" setup>
import {ref} from "vue";
import {useProfile} from '@/composables/useProfile.ts'
import {useNavigation} from '@/composables/useNavigation.ts'
import {VuePreloader} from 'vue-preloader';
import '../node_modules/vue-preloader/dist/style.css'
import avatarBot from '@/assets/avatar-bot.png'

// Components
import AppNavigation from '@/components/layout/AppNavigation.vue'
import AppFooter from '@/components/layout/AppFooter.vue'
import HeroSection from '@/components/sections/HeroSection.vue'
import AboutSection from '@/components/sections/AboutSection.vue'
import ExperienceSection from '@/components/sections/ExperienceSection.vue'
import ProjectsSection from '@/components/sections/ProjectsSection.vue'
import SkillsSection from '@/components/sections/SkillsSection.vue'
import ContactSection from '@/components/sections/ContactSection.vue'
import ChatFloatingButton from '@/components/chat/ChatFloatingButton.vue'
import ChatPopup from '@/components/chat/ChatPopup.vue'
import EducationSection from "@/components/sections/EducationSection.vue";
import CertificationsSection from "@/components/sections/CertificationSection.vue";

import config from "@/config";

// Composables
const {profile, loading} = useProfile()
const {scrollToSection} = useNavigation()

// State
const isChatOpen = ref(false)

const navigationSections = [
  {id: 'hero', label: 'Inicio', enabled: config.sections.heroEnabled},
  {id: 'about', label: 'Sobre mí', enabled: config.sections.aboutEnabled},
  {id: 'experience', label: 'Experiencia', enabled: config.sections.experienceEnabled},
  {id: 'projects', label: 'Proyectos', enabled: config.sections.projectsEnabled},
  {id: 'skills', label: 'Habilidades', enabled: config.sections.skillsEnabled},
  {id: 'education', label: 'Educación', enabled: config.sections.educationEnabled},
  {id: 'certification', label: 'Certificaciones', enabled: config.sections.certificationsEnabled},
  {id: 'contact', label: 'Contacto', enabled: config.sections.contactEnabled}
]

function toggleChat() {
  isChatOpen.value = !isChatOpen.value
}

</script>
<template>

  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">

    <VuePreloader
        :loading-speed="25"
        :transition-speed="1400"
        background-color="#091a28"
        color="#ffffff"
        transition-type="fade-up"
        @loading-is-over="loading"
        @transition-is-over="loading"
    >
      <div class="preloader-content">
        <img :src="avatarBot" alt="Logo" class="logo rounded-full"/>
        <p>Preparando el Porfolio ... ✨</p>
      </div>
    </VuePreloader>

    <!-- Navigation -->
    <AppNavigation
      :sections="navigationSections"
      :profile="profile?.profile"
      @navigate="scrollToSection"
    />

    <!-- Main Content -->
    <main>
      <!-- Hero Section -->
      <HeroSection v-if="config.sections.heroEnabled"
        id="hero"
                   :profile="profile?.profile"
      />

      <!-- About Section -->
      <AboutSection v-if="config.sections.aboutEnabled"
        id="about"
                    :profile="profile?.profile"
      />

      <!-- Experience Section -->
      <ExperienceSection v-if="config.sections.experienceEnabled"
        id="experience"
                         :experience="profile?.experience"
      />

      <!-- Projects Section -->
      <ProjectsSection v-if="config.sections.projectsEnabled"
        id="projects"
                       :projects="profile?.projects"
      />

      <!-- Skills Section -->
      <SkillsSection v-if="config.sections.skillsEnabled"
        id="skills"
                     :skillGroups="profile?.skills"
      />

      <!-- Education Section -->
      <EducationSection v-if="config.sections.educationEnabled"
                        id="education"
                        :education="profile?.education"
      />

      <!-- Education Section -->
      <CertificationsSection v-if="config.sections.certificationsEnabled"
                             id="certification"
                             :certification="profile?.certifications"
      />

      <!-- Contact Section -->
      <ContactSection v-if="config.sections.contactEnabled"
        id="contact"
                      :profile="profile?.profile"
      />
    </main>

    <!-- Footer -->
    <AppFooter :profile="profile?.profile"/>

    <!-- Floating Chat Button -->
    <ChatFloatingButton v-if="config.sections.chatEnabled" @toggle-chat="toggleChat"/>

    <!-- Chat Popup -->
    <ChatPopup
      v-if="isChatOpen"
      :chatConfig="profile?.chatbot"
      @close="toggleChat"
    />
  </div>
</template>

<style scoped>
.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
</style>