<template>
  <AppLayout :user="user">
    <div class="w-full max-w-sm bg-white shadow-xl overflow-hidden flex flex-col relative profile-card mt-0">
      <div class="p-6">
        <h2 class="text-2xl font-bold profile-name-gradient" style="font-family: var(--font-heading);">Experience</h2>
        <div class="mt-6 space-y-4">
          <div v-for="(exp, index) in experience" :key="exp.id" class="bg-white rounded-lg p-4 border border-gray-200 shadow-sm reveal-init" :style="{ transitionDelay: `${index * 100}ms` }">
            <div class="flex justify-between items-start mb-2">
              <h3 class="text-lg font-semibold text-gray-800">{{ exp.role }}</h3>
              <span class="text-sm text-gray-500">{{ formatDate(exp.from_date) }} - {{ exp.to_date ? formatDate(exp.to_date) : 'Present' }}</span>
            </div>
            <p class="text-md font-medium text-gray-700 mb-1">{{ exp.company_name }}</p>
            <p class="text-sm text-gray-500" v-if="exp.description">{{ exp.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { onMounted } from 'vue';
import AppLayout from '../Layouts/AppLayout.vue';

const props = defineProps({
  user: Object,
  experience: Array,
  theme: Object,
});

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
};

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');
  }

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  const expList = document.getElementById('experienceList');
  if (expList) {
    const items = Array.from(expList.querySelectorAll('li'));
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal');
            entry.target.classList.remove('reveal-init');
            observer.unobserve(entry.target);
          }
        });
      },
      { root: null, threshold: 0.12 }
    );

    items.forEach((li) => observer.observe(li));
  }
});
</script>