<template>
  <div 
    v-motion
    :initial="{ opacity: 0, scale: 0.95 }"
    :enter="{ 
      opacity: 1, 
      scale: 1,
      transition: {
        duration: 600,
        type: 'spring',
        stiffness: 200
      }
    }"
    class="profile-card"
  >
    <!-- Background Gradient -->
    <div class="profile-background">
      <div class="profile-gradient"></div>
      <div class="profile-pattern"></div>
    </div>

    <!-- Content -->
    <div class="profile-content">
      <!-- Header Section -->
      <div class="profile-header">
        <div class="profile-avatar-wrapper">
          <div 
            v-motion
            :initial="{ scale: 0 }"
            :enter="{ 
              scale: 1,
              transition: {
                delay: 200,
                type: 'spring',
                stiffness: 200
              }
            }"
            class="profile-avatar"
          >
            <ProfileAvatar
              v-if="member"
              :member-id="member.member_id"
              :first-name="member.first_name"
              :last-name="member.last_name"
              size="x-large"
              :show-badge="false"
            />
          </div>
          <div class="profile-level-badge">
            <v-icon size="16" color="white">mdi-star</v-icon>
            <span>{{ memberLevel }}</span>
          </div>
        </div>

        <div class="profile-info">
          <h2 
            v-motion
            :initial="{ opacity: 0, y: 10 }"
            :enter="{ 
              opacity: 1, 
              y: 0,
              transition: {
                delay: 300,
                duration: 500
              }
            }"
            class="profile-name"
          >
            {{ fullName }}
          </h2>
          <p class="profile-email">{{ email }}</p>
          <div class="profile-badges">
            <v-chip
              color="error"
              variant="tonal"
              size="small"
              class="profile-badge"
            >
              <v-icon start size="14">mdi-crown</v-icon>
              {{ membershipType }}
            </v-chip>
            <v-chip
              variant="outlined"
              color="error"
              size="small"
              class="profile-badge"
            >
              <v-icon start size="14">mdi-calendar</v-icon>
              Since {{ memberSince }}
            </v-chip>
          </div>
        </div>
      </div>

      <!-- Stats Section -->
      <div class="profile-stats">
        <div 
          v-for="(stat, index) in stats"
          :key="stat.label"
          v-motion
          :initial="{ opacity: 0, y: 20 }"
          :enter="{ 
            opacity: 1, 
            y: 0,
            transition: {
              delay: 400 + (index * 100),
              duration: 500
            }
          }"
          class="stat-item"
        >
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>

      <!-- Progress Section -->
      <div 
        v-motion
        :initial="{ opacity: 0 }"
        :enter="{ 
          opacity: 1,
          transition: {
            delay: 700,
            duration: 500
          }
        }"
        class="profile-progress"
      >
        <div class="progress-header">
          <span class="progress-title">Level Progress</span>
          <span class="progress-percentage">{{ levelProgress }}%</span>
        </div>
        <div class="progress-bar">
          <div 
            class="progress-fill"
            :style="{ width: `${levelProgress}%` }"
          ></div>
        </div>
        <p class="progress-subtitle">
          {{ pointsToNext }} points to {{ nextLevel }}
        </p>
      </div>

      <!-- Action Button -->
      <v-btn
        color="error"
        variant="flat"
        block
        class="profile-action mt-4"
        prepend-icon="mdi-account-edit"
        @click="$emit('edit-profile')"
      >
        Edit Profile
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Member } from '~/utils/types';

interface Props {
  member: Member | null;
  memberPoints?: number;
  eventsAttended?: number;
  connections?: number;
}

const props = withDefaults(defineProps<Props>(), {
  memberPoints: 2450,
  eventsAttended: 12,
  connections: 48
});

const emit = defineEmits<{
  'edit-profile': [];
}>();

// Computed properties
const fullName = computed(() => {
  if (props.member) {
    return `${props.member.first_name} ${props.member.last_name}`;
  }
  return 'Member';
});

const email = computed(() => props.member?.email || '');

const membershipType = computed(() => 'Premium');
const memberLevel = computed(() => 'Gold');

const memberSince = computed(() => {
  if (props.member?.join_date) {
    return new Date(props.member.join_date).getFullYear();
  }
  return new Date().getFullYear();
});

// Stats data
const stats = computed(() => [
  { label: 'Points', value: props.memberPoints.toLocaleString() },
  { label: 'Events', value: props.eventsAttended },
  { label: 'Connections', value: props.connections }
]);

// Level progress calculation
const levelProgress = computed(() => {
  // Calculate progress to next level (mock calculation)
  const currentLevelMin = 2000;
  const nextLevelMin = 3000;
  const progress = ((props.memberPoints - currentLevelMin) / (nextLevelMin - currentLevelMin)) * 100;
  return Math.min(Math.max(progress, 0), 100).toFixed(0);
});

const pointsToNext = computed(() => {
  const nextLevelMin = 3000;
  return nextLevelMin - props.memberPoints;
});

const nextLevel = computed(() => 'Platinum');
</script>

<style scoped lang="scss">
.profile-card {
  position: relative;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.85)
  );
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.profile-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  overflow: hidden;
}

.profile-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(220, 38, 38, 0.9),
    rgba(185, 28, 28, 0.9)
  );
}

.profile-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
}

.profile-content {
  position: relative;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.profile-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.profile-level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.profile-info {
  flex: 1;
  padding-top: 0.5rem;
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(31, 41, 55);
  margin: 0 0 0.25rem 0;
}

.profile-email {
  font-size: 0.875rem;
  color: rgb(107, 114, 128);
  margin: 0 0 0.75rem 0;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-badge {
  font-weight: 500;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, 
    rgba(220, 38, 38, 0.03),
    rgba(220, 38, 38, 0.01)
  );
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-progress {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(31, 41, 55);
}

.progress-percentage {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(220, 38, 38);
}

.progress-bar {
  height: 8px;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  border-radius: 9999px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.progress-subtitle {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
  margin: 0;
}

.profile-action {
  margin-top: auto;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-badges {
    justify-content: center;
  }
}
</style>