<script setup lang="ts">
// الخادم: جلب البيانات أثناء SSR
// العميل: استخدام البيانات المُحضّرة مسبقًا، بدون طلب مكرر
const { data: products } = await useFetch('/api/products')
</script>

<!-- pages/products/index.vue -->
<template>
  <div>
    <h1>Products</h1>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Failed to load products</div>
    <div v-else>
      <ProductCard v-for="p in products" :key="p.id" :product="p" />
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: products, pending, error } = await useFetch('/api/products')
</script>

// Execution Successful

<script setup lang="ts">
const { data: stats } = await useAsyncData('product-stats', async () => {
  // منطق جلب بيانات مخصص
  const [total, featured, onSale] = await Promise.all([
    $fetch('/api/products/count'),
    $fetch('/api/products/featured'),
    $fetch('/api/products/on-sale')
  ])
  return { total, featured, onSale }
})
</script>

// Execution Successful

<script setup lang="ts">
// $fetch للطلبات أحادية (لا حاجة لـ SSR payload)
async function submitOrder() {
  const order = await $fetch('/api/orders', {
    method: 'POST',
    body: { items: cart.value, total: totalPrice.value }
  })
  navigateTo(`/orders/${order.id}`)
}
</script>

// Execution Successful

// server/api/products/index.get.ts
export default defineEventHandler(async (event) => {
  // $fetch هو الخيار الصحيح داخل معالجات الخادم
  const query = getQuery(event)
  const products = await $fetch('https://api.supplier.com/products', {
    params: { category: query.category }
  })
  return products
})

// Execution Successful

<template>
  <div>
    <h1>Product Recommendations</h1>
    <!-- lazy: البيانات تُحمل في الخلفية، الصفحة تُصيّر فورًا -->
    <div v-if="pending">Loading recommendations...</div>
    <div v-else>
      <ProductCard v-for="p in recommendations" :key="p.id" :product="p" />
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: recommendations, pending } = await useFetch('/api/recommendations', {
  lazy: true
})
</script>

// Execution Successful

<script setup lang="ts">
// Transform: معالجة البيانات قبل التخزين
const { data: products } = await useFetch('/api/products', {
  transform: (data: any[]) => {
    return data.map(p => ({
      ...p,
      formattedPrice: new Intl.NumberFormat('en-US', {
        style: 'currency', currency: 'USD'
      }).format(p.price)
    }))
  }
})

// Pick: استخراج حقول محددة فقط (تقليل حجم payload)
const { data: productNames } = await useFetch('/api/products', {
  pick: ['id', 'name', 'price']
})
</script>

// Execution Successful

<script setup lang="ts">
// تخطي جلب SSR - جلب من جانب العميل فقط
const { data: userWishlist } = await useFetch('/api/wishlist', {
  server: false,
  default: () => [] // القيمة الافتراضية قبل تحميل البيانات
})
</script>

// Execution Successful

<template>
  <div>
    <h1>Products</h1>
    <button @click="refresh()" :disabled="pending">
      {{ pending ? 'Refreshing...' : 'Refresh' }}
    </button>
    <ProductCard v-for="p in products" :key="p.id" :product="p" />
  </div>
</template>

<script setup lang="ts">
const { data: products, pending, refresh } = await useFetch('/api/products')
</script>

// Execution Successful

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="all">All</option>
      <option value="electronics">Electronics</option>
      <option value="clothing">Clothing</option>
    </select>
    <ProductCard v-for="p in products" :key="p.id" :product="p" />
  </div>
</template>

<script setup lang="ts">
const selectedCategory = ref('all')

// إعادة جلب تلقائية عند تغير selectedCategory
const { data: products } = await useFetch('/api/products', {
  query: { category: selectedCategory },
  watch: [selectedCategory]
})
</script>

// Execution Successful

<script setup lang="ts">
const { data: stock, refresh } = await useFetch('/api/stock/live', {
  server: false // استقصاء من جانب العميل فقط
})

// استقصاء كل 30 ثانية
const pollInterval = setInterval(() => {
  refresh()
}, 30000)

onUnmounted(() => clearInterval(pollInterval))
</script>

// Execution Successful

<!-- pages/products/index.vue -->
<template>
  <div class="product-list-page">
    <h1>MegaShop Products</h1>

    <!-- الفلاتر -->
    <div class="filters">
      <select v-model="filters.category" @change="applyFilters">
        <option value="">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
        <option value="home">Home & Garden</option>
      </select>
      <select v-model="filters.sort">
        <option value="popular">Most Popular</option>
        <option value="price-asc">Price: Low to High</option>
        <option value="price-desc">Price: High to Low</option>
      </select>
    </div>

    <!-- حالة التحميل -->
    <div v-if="pending" class="loading">Loading products...</div>

    <!-- حالة الخطأ -->
    <div v-else-if="error" class="error">
      Failed to load products. <button @click="refresh()">Retry</button>
    </div>

    <!-- شبكة المنتجات -->
    <div v-else class="product-grid">
      <ProductCard
        v-for="p in products"
        :key="p.id"
        :product="p"
        @add-to-cart="addToCart"
      />
    </div>

    <!-- التصفح -->
    <div class="pagination">
      <button :disabled="page <= 1" @click="page--">Previous</button>
      <span>Page {{ page }}</span>
      <button @click="page++">Next</button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number; name: string; price: number; image: string
}

const page = ref(1)
const filters = reactive({
  category: '',
  sort: 'popular'
})

// جلب مسبق لـ SSR مع استعلام تفاعلي
const { data: products, pending, error, refresh } = await useFetch<Product[]>('/api/products', {
  query: computed(() => ({
    page: page.value,
    category: filters.category || undefined,
    sort: filters.sort
  })),
  default: () => [],
  transform: (data: Product[]) => data.map(p => ({
    ...p,
    formattedPrice: `$${p.price.toLocaleString()} USD`
  }))
})

const cart = useState<Product[]>('cart', () => [])
function addToCart(product: Product) {
  cart.value.push(product)
}

function applyFilters() {
  page.value = 1
  refresh()
}

// مراقبة تغير الصفحة للتحديث التلقائي
watch(page, () => refresh())
</script>