<?php
// Allow WooCommerce REST API React frontend from specific origins
add_action( 'rest_api_init', function() {
    remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );

    add_filter( 'rest_pre_serve_request', function( $value ) {
        $allowed_origins = [
            'https://app.yourdomain.com',
            'http://localhost:3000',  // Development WooCommerce REST API React frontend
        ];

        $origin = $_SERVER['HTTP_ORIGIN'] ?? '';

        if ( in_array( $origin, $allowed_origins, true ) ) {
            header( 'Access-Control-Allow-Origin: ' . $origin );
            header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS' );
            header( 'Access-Control-Allow-Headers: Authorization, Content-Type, X-WP-Nonce' );
            header( 'Access-Control-Allow-Credentials: true' );
        }

        return $value;
    });
}, 15 );

// hooks/useWooProducts.ts — WooCommerce REST API React frontend hooks
import { useState, useEffect } from 'react';

const WC_URL   = import.meta.env.VITE_WC_URL;   // https://yourstore.com
const WC_KEY   = import.meta.env.VITE_WC_KEY;   // Consumer key (safe for SPA with HTTPS)
const WC_SECRET= import.meta.env.VITE_WC_SECRET;

function wcUrl(path: string, params?: Record<string, string>) {
  const creds = btoa(`${WC_KEY}:${WC_SECRET}`);
  const base  = `${WC_URL}/wp-json/wc/v3${path}`;
  const query = params ? '&' + new URLSearchParams(params).toString() : '';
  return { url: `${base}?consumer_key=${WC_KEY}&consumer_secret=${WC_SECRET}${query}` };
}

// WooCommerce REST API React frontend: products hook
export function useWooProducts(page = 1, perPage = 12) {
  const [products, setProducts] = useState<WooProduct[]>([]);
  const [loading,  setLoading]  = useState(true);
  const [error,    setError]    = useState<string | null>(null);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    setLoading(true);
    const { url } = wcUrl('/products', { page: String(page), per_page: String(perPage) });

    fetch(url)
      .then(res => {
        setTotalPages(Number(res.headers.get('X-WP-TotalPages') ?? 1));
        return res.json();
      })
      .then(data => { setProducts(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [page, perPage]);

  return { products, loading, error, totalPages };
}

// WooCommerce REST API React frontend: single product hook
export function useWooProduct(slug: string) {
  const [product, setProduct] = useState<WooProduct | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const { url } = wcUrl('/products', { slug });
    fetch(url)
      .then(r => r.json())
      .then(data => { setProduct(data[0] ?? null); setLoading(false); });
  }, [slug]);

  return { product, loading };
}