<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import AppSkeleton from '@/components/AppSkeleton.vue'
import { API_BASE_URL } from '@/lib/api'
import { ref, onMounted } from 'vue'

const store = useCounterStore()
const isLoading = ref(true)
const apiBaseUrl = API_BASE_URL

onMounted(() => {
  // Simulate loading to show skeleton
  setTimeout(() => {
    isLoading.value = false
  }, 1000)
})
</script>

<template>
  <div class="space-y-8">
    <div
      class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 p-8"
    >
      <h2 class="text-2xl font-bold mb-4">Welcome to <<project_name>></h2>
      <p class="text-gray-600 dark:text-gray-400 mb-6">
        This is a Vue 3 template scaffolded with Vite, Tailwind CSS, Pinia, and Vue Router. Get
        started by editing
        <code class="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm"
          >src/views/HomeView.vue</code
        >.
      </p>

      <div class="flex items-center gap-4">
        <button
          @click="store.increment()"
          class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors"
        >
          Count is: {{ store.count }}
        </button>
        <span class="text-sm text-gray-500 dark:text-gray-400">
          Double is: {{ store.doubleCount }}
        </span>
      </div>

      <p class="mt-6 text-sm text-gray-500 dark:text-gray-400">
        API base URL (from
        <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">.env</code>):
        <code class="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{{ apiBaseUrl }}</code>
      </p>
    </div>

    <div>
      <h3 class="text-lg font-semibold mb-4">Skeleton Example</h3>
      <div v-if="isLoading" class="space-y-4">
        <AppSkeleton height="2rem" width="40%" rounded="md" />
        <AppSkeleton height="6rem" rounded="md" />
        <div class="flex gap-4">
          <AppSkeleton height="8rem" width="50%" rounded="md" />
          <AppSkeleton height="8rem" width="50%" rounded="md" />
        </div>
      </div>
      <div v-else class="space-y-4 animate-in fade-in duration-500">
        <h4 class="text-xl">Content loaded successfully</h4>
        <div class="p-6 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-md">
          The skeleton loader gives users visual feedback while data is fetching.
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="p-8 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
            Card 1
          </div>
          <div class="p-8 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
            Card 2
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
