<template>
  <div
    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-8 transition-opacity duration-300"
    :class="{ 'opacity-0 pointer-events-none': !show }"
  >
    <RouterLink
      v-for="(goal, idx) in goals"
      :key="goal.id"
      :to="`/dashboard/goals/${goal.id}`"
      class="goal-card glass-card p-6 block"
      :class="{ 'home-card-animate': animate }"
      :style="{ '--card-stagger': idx }"
    >
      <div class="flex items-start justify-between mb-4">
        <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
          <span class="text-xl">{{ goalIcon(goal.icon) }}</span>
        </div>
        <span class="goal-status-badge" :class="statusBadgeClass(goal.id)">
          <span v-if="goalStatuses[goal.id] === 'completed'" class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
          <span v-else-if="goalStatuses[goal.id] === 'in-progress'" class="w-1.5 h-1.5 rounded-full bg-orange-400"></span>
          {{ statusLabel(goal.id) }}
        </span>
      </div>

      <h3 class="text-lg font-semibold text-white mb-1">{{ goal.title }}</h3>
      <p class="text-sm text-white/55 mb-4 leading-relaxed">{{ goal.subtitle }}</p>

      <div class="flex items-center justify-between">
        <span class="text-xs text-white/40">{{ goal.estimatedTime }}</span>
        <span class="text-xs text-white/50 flex items-center gap-1">
          {{ goal.difficulty === 'beginner' ? 'Beginner' : 'Intermediate' }}
        </span>
      </div>
    </RouterLink>
  </div>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { GOALS } from '@/data/goals'
import { useGoalStore } from '@/stores/goals'

defineProps<{
  show: boolean
  animate: boolean
}>()

const goalStore = useGoalStore()
const goals = GOALS
const goalStatuses = goalStore.goalStatuses

function goalIcon(icon: string): string {
  const icons: Record<string, string> = {
    shop: '🏪',
    payments: '⚡',
    photos: '📸',
    files: '📁',
    lightning: '⚡',
    identity: '🔑',
    backup: '💾',
  }
  return icons[icon] || '📦'
}

function statusLabel(goalId: string): string {
  const status = goalStatuses[goalId]
  if (status === 'completed') return 'Done'
  if (status === 'in-progress') return 'In Progress'
  return 'Start'
}

function statusBadgeClass(goalId: string): string {
  const status = goalStatuses[goalId]
  if (status === 'completed') return 'goal-status-badge-completed'
  if (status === 'in-progress') return 'goal-status-badge-in-progress'
  return 'goal-status-badge-not-started'
}
</script>
