<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ChevronDown, ChevronUp, Check, ArrowRight, Eye, PartyPopper } from 'lucide-vue-next'
import { useOnboardingStore } from '../stores/onboarding'
import { useTourStore } from '../stores/tour'
import { TOURS } from '../utils/tours'

const router = useRouter()
const onboardingStore = useOnboardingStore()
const tourStore = useTourStore()

const collapsed = ref(false)

const progressPct = computed(() =>
  onboardingStore.totalCount > 0
    ? (onboardingStore.completedCount / onboardingStore.totalCount) * 100
    : 0
)

function goThere(route: string) {
  router.push(route)
}

async function showMe(tourId: string, route: string) {
  await router.push(route)
  await nextTick()
  setTimeout(() => {
    const tour = TOURS[tourId]
    if (tour) {
      tourStore.start(tour)
    }
  }, 400)
}
</script>

<template>
  <div
    v-if="onboardingStore.isVisible"
    class="mb-8 bg-bg-surface border border-border-subtle rounded-lg overflow-hidden"
    role="region"
    aria-labelledby="checklist-heading"
  >
    <!-- Header -->
    <button
      @click="collapsed = !collapsed"
      :aria-expanded="!collapsed"
      aria-controls="checklist-body"
      class="w-full flex items-center justify-between px-4 py-3 hover:bg-bg-elevated transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent"
    >
      <div class="flex items-center gap-3">
        <h2 id="checklist-heading" class="text-[0.8125rem] font-medium text-text-primary">Getting Started</h2>
        <span class="text-[0.6875rem] text-text-tertiary" aria-label="Completed {{ onboardingStore.completedCount }} of {{ onboardingStore.totalCount }} steps">
          {{ onboardingStore.completedCount }} / {{ onboardingStore.totalCount }}
        </span>
      </div>
      <component
        :is="collapsed ? ChevronDown : ChevronUp"
        class="w-4 h-4 text-text-tertiary transition-transform duration-200"
        :stroke-width="2"
        aria-hidden="true"
      />
    </button>

    <!-- Progress bar -->
    <div class="px-4">
      <div class="w-full bg-bg-elevated rounded-full h-1">
        <div
          class="h-1 rounded-full bg-accent progress-bar"
          :style="{ width: progressPct + '%' }"
          role="progressbar"
          :aria-valuenow="onboardingStore.completedCount"
          :aria-valuemin="0"
          :aria-valuemax="onboardingStore.totalCount"
          aria-label="Getting started progress"
        />
      </div>
    </div>

    <!-- Checklist items -->
    <Transition name="expand">
      <div v-if="!collapsed" id="checklist-body" class="px-4 py-3">
        <!-- All complete message -->
        <div v-if="onboardingStore.allComplete" class="flex items-center gap-3 py-3" role="status">
          <PartyPopper class="w-5 h-5 text-accent" :stroke-width="1.5" aria-hidden="true" />
          <div>
            <p class="text-[0.8125rem] text-text-primary font-medium">All done!</p>
            <p class="text-[0.6875rem] text-text-tertiary">You have explored all the basics. Happy tracking!</p>
          </div>
        </div>

        <!-- Items -->
        <ul v-else class="space-y-1" aria-label="Onboarding steps">
          <li
            v-for="item in onboardingStore.items"
            :key="item.key"
            class="flex items-center gap-3 py-2 group"
          >
            <!-- Checkbox indicator -->
            <div
              class="w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors duration-200"
              :class="item.completed
                ? 'border-accent bg-accent'
                : 'border-border-visible'"
              role="img"
              :aria-label="item.completed ? 'Completed' : 'Not completed'"
            >
              <Check
                v-if="item.completed"
                class="w-3 h-3 text-bg-base"
                :stroke-width="3"
                aria-hidden="true"
              />
            </div>

            <!-- Label -->
            <div class="flex-1 min-w-0">
              <p
                class="text-[0.8125rem] transition-colors duration-200"
                :class="item.completed ? 'text-text-tertiary line-through' : 'text-text-primary'"
              >
                {{ item.label }}
              </p>
              <p class="text-[0.6875rem] text-text-tertiary">{{ item.description }}</p>
            </div>

            <!-- Action buttons (always focusable, visually hidden until hover/focus) -->
            <div
              v-if="!item.completed"
              class="flex items-center gap-1.5 shrink-0"
            >
              <button
                @click="goThere(item.route)"
                :aria-label="'Go to ' + item.label"
                class="flex items-center gap-1 px-2 py-1 text-[0.6875rem] text-text-secondary border border-border-subtle rounded-md hover:bg-bg-elevated hover:text-text-primary transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:opacity-100"
              >
                <ArrowRight class="w-3 h-3" :stroke-width="2" aria-hidden="true" />
                Go there
              </button>
              <button
                @click="showMe(item.tourId, item.route)"
                :aria-label="'Show me how to ' + item.label.toLowerCase()"
                class="flex items-center gap-1 px-2 py-1 text-[0.6875rem] text-accent-text border border-accent/30 rounded-md hover:bg-accent/10 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:opacity-100"
              >
                <Eye class="w-3 h-3" :stroke-width="2" aria-hidden="true" />
                Show me
              </button>
            </div>
          </li>
        </ul>

        <!-- Dismiss link -->
        <div class="mt-3 pt-2 border-t border-border-subtle">
          <button
            @click="onboardingStore.dismiss()"
            class="text-[0.6875rem] text-text-tertiary hover:text-text-secondary transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
          >
            Dismiss checklist
          </button>
        </div>
      </div>
    </Transition>
  </div>
</template>
