// Inside your existing themeSchema object:
routes: {
  PRODUCT: '/shop/:handle',
},

routes: {
  ALL_PRODUCTS: '/shop',
  COLLECTION: '/shop/:handle',
  COLLECTION_LIST: '/categories',
  BLOG: '/archive/:handle',
  ARTICLE: '/journal/:handle',
},

// app/routes.ts
import {
  index,
  prefix,
  route,
  type RouteConfig,
} from "@react-router/dev/routes";
import { hydrogenRoutes } from "@shopify/hydrogen";

export default hydrogenRoutes([
  // …
  ...prefix(":locale?", [
    index("routes/home.tsx"),
    // Custom URL → your own module. `:productHandle` is the dynamic segment
    // (e.g. `classic-varsity-jacket`), exposed to the loader as
    // `params.productHandle`.
    route("shop/:productHandle", "routes/items/item.tsx"),
    // …existing routes…
    route("*", "routes/catch-all.tsx"),
  ]),
]) satisfies RouteConfig;

// app/routes/items/item.tsx
import { getSeoMeta } from "@shopify/hydrogen";
import type { LoaderFunctionArgs, MetaFunction } from "react-router";
import { validateWeaverseData, WeaverseContent } from "~/weaverse";

// Import your product query (ensure it fetches necessary data)
import { PRODUCT_QUERY } from "~/graphql/queries"; // Example path
import { seoPayload } from "~/.server/seo"; // Example path

export async function loader({ params, context, request }: LoaderFunctionArgs) {
  const { language, country } = context.storefront.i18n;

  // 1. Extract the handle from the custom route's parameters
  const { productHandle } = params;

  if (!productHandle) {
    throw new Response("Missing product handle", { status: 400 });
  }

  const { storefront, weaverse } = context;

  // 2. Fetch Weaverse page data AND necessary Shopify data in parallel.
  //    `storefront.query` throws on transport/GraphQL errors; `loadPage`
  //    does not — it resolves to `null` instead (see step 3 below).
  const [weaverseData, shopifyProductData] = await Promise.all([
    // Call loadPage with EXPLICIT type 'PRODUCT' and the extracted handle
    weaverse.loadPage({
      type: "PRODUCT", // <- Explicitly state the content type
      handle: productHandle,
    }),
    // Fetch the actual product data needed for SEO, analytics, etc.
    storefront.query(PRODUCT_QUERY, {
      variables: {
        handle: productHandle,
        country,
        language,
        // Ensure selectedOptions are handled if your query uses them
      },
    }),
    // Add other parallel fetches if needed (e.g., reviews)
  ]);

  // 3. Handle product not found in Shopify
  if (!shopifyProductData?.product) {
    throw new Response("Product data not found", { status: 404 });
  }

  // 4. `loadPage()` returns `WeaverseLoaderData | null` — it resolves to `null`
  //    on failure rather than throwing, so check the result explicitly.
  //    Pilot's `validateWeaverseData` helper throws a 404 for a missing page
  //    (and for the fallback page outside design mode).
  validateWeaverseData(weaverseData);

  // 5. Prepare SEO data using the fetched Shopify product
  const seo = seoPayload.product({
    product: shopifyProductData.product,
    url: request.url, // Use the current request URL for SEO context
  });

  // 6. Return all data needed by the component (a plain object — no `json()`)
  return {
    weaverseData,
    product: shopifyProductData.product,
    seo,
  };
}

// Standard meta function for SEO using the prepared seo object
export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return getSeoMeta(data?.seo);
};

// app/routes/items/item.tsx (continued)

import { useLoaderData } from "react-router";
import { Analytics } from "@shopify/hydrogen"; // For analytics

export default function CustomProductRoute() {
  // Use optional chaining in case loader data is unexpectedly missing
  const { product, weaverseData } = useLoaderData<typeof loader>();

  // WeaverseContent will render the layout based on weaverseData
  // which corresponds to the PRODUCT type due to the loader config
  return (
    <>
      <WeaverseContent />
      {/* Optional: Add analytics specific to product view */}
      {product?.selectedVariant && (
        <Analytics.ProductView
          data={{
            products: [
              {
                id: product.id,
                title: product.title,
                price: product.selectedVariant?.price.amount || "0",
                vendor: product.vendor,
                variantId: product.selectedVariant?.id || "",
                variantTitle: product.selectedVariant?.title || "",
                quantity: 1,
              },
            ],
          }}
        />
      )}
    </>
  );
}

// app/routes/items/item.tsx
// Registered as: route("shop/:productHandle", "routes/items/item.tsx")
export async function loader({ params, context, request }: LoaderFunctionArgs) {
  let { weaverse } = context;
  let { productHandle } = params;

  // Extract locale from URL parameter or determine from request
  let locale = params.locale?.toLowerCase() || "en-us";

  let weaverseData = await weaverse.loadPage({
    type: "PRODUCT",
    handle: productHandle,
    locale, // Explicitly specify locale for custom route
  });

  // `loadPage()` resolves to `null` on failure — it does not throw.
  if (!weaverseData) {
    throw new Response("Product not found", { status: 404 });
  }

  return { weaverseData, locale };
}

// Swedish store: /vara/:productHandle (Swedish for "item")
// app/routes/items/item-sv.tsx
// Registered as: route("vara/:productHandle", "routes/items/item-sv.tsx")
export async function loader({ params, context }: LoaderFunctionArgs) {
  let { weaverse } = context;

  let weaverseData = await weaverse.loadPage({
    type: "PRODUCT",
    handle: params.productHandle,
    locale: "sv-se", // Swedish content
  });

  return { weaverseData };
}

// French store: /article/:productHandle (French for "item")
// app/routes/items/item-fr.tsx
// Registered as: route("article/:productHandle", "routes/items/item-fr.tsx")
export async function loader({ params, context }: LoaderFunctionArgs) {
  let { weaverse } = context;

  let weaverseData = await weaverse.loadPage({
    type: "PRODUCT",
    handle: params.productHandle,
    locale: "fr-ca", // French Canadian content
  });

  return { weaverseData };
}

// app/routes/promo/campaign.tsx
// Registered as: route("promo/:campaignHandle", "routes/promo/campaign.tsx")
export async function loader({ params, context, request }: LoaderFunctionArgs) {
  let { weaverse } = context;

  // Determine locale from subdomain, cookie, or header
  let locale = determineLocaleFromRequest(request);

  // Weaverse custom pages are loaded as CUSTOM and resolved from the request
  // URL. `PAGE` + `handle` is for Shopify Page resources served under
  // /pages/:pageHandle.
  let weaverseData = await weaverse.loadPage({
    type: "CUSTOM",
    locale, // Use dynamically determined locale
  });

  if (!weaverseData) {
    throw new Response("Page not found", { status: 404 });
  }

  return { weaverseData, locale };
}

function determineLocaleFromRequest(request: Request): string {
  let url = new URL(request.url);
  let subdomain = url.hostname.split(".")[0];

  let localeMap: Record<string, string> = {
    "se": "sv-se",
    "fr": "fr-ca",
    "de": "de-de",
  };

  return localeMap[subdomain] || "en-us";
}

// app/.server/context.ts
export async function createHydrogenRouterContext(
  request: Request,
  env: Env,
  executionContext: ExecutionContext,
) {
  // …cache/session setup…
  const hydrogenContext = createHydrogenContext({ /* … */ }, additionalContext);

  const weaverse = new WeaverseClient({
    ...hydrogenContext,
    request,
    cache,
    themeSchema,
    components,
    projectId: () => {
      let origin = new URL(request.url).origin;

      // Route to different projects based on domain
      if (origin === "https://mystore.se") {
        return "project-sweden-123";
      }
      if (origin === "https://mystore.fr") {
        return "project-france-456";
      }

      return env.WEAVERSE_PROJECT_ID;
    },
  });

  // Attach `weaverse` to the existing context instance. Do NOT build a new
  // object by spreading `hydrogenContext` — that would discard the
  // RouterContextProvider class instance React Router 7 expects.
  Object.assign(hydrogenContext, { weaverse });

  return hydrogenContext;
}

// app/routes/items/item-sv.tsx (Swedish custom route)
// Registered as: route("vara/:productHandle", "routes/items/item-sv.tsx")
export async function loader({ params, context }: LoaderFunctionArgs) {
  let { weaverse } = context;

  // Project already determined by WeaverseClient initialization
  // Optionally override at route level
  let weaverseData = await weaverse.loadPage({
    type: "PRODUCT",
    handle: params.productHandle,
    // projectId automatically set based on domain
  });

  return { weaverseData };
}