// app/routes/app.jsx
//
// FIX (19.09.2026): NavMenu-Links nutzen jetzt reloadDocument, um echte
// Browser-Navigationen statt Remix-Client-Fetches auszuloesen.
// Grund: Debug-Logging zeigte, dass der allererste Aufruf von /app (mit
// id_token/hmac in der URL, von Shopify selbst generiert) erfolgreich
// authentifiziert wird - aber jede weitere client-seitige Navigation (via
// normalem <Link>) komplett OHNE Authorization-Header und OHNE Cookie
// ankommt, weil App Bridges automatisches Fetch-Patching bei diesem Setup
// nicht greift. Mit reloadDocument erzwingt jeder Klick einen vollen
// Seiten-Reload, wodurch Shopify erneut einen gueltigen id_token in die URL
// einbettet - analog zum ersten, nachweislich funktionierenden Aufruf.
import { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { NavMenu } from "@shopify/app-bridge-react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

export async function loader({ request }) {
  await authenticate.admin(request);
  return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
}

export default function AppLayout() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home" reloadDocument>
          Dashboard
        </Link>
        <Link to="/app/wishlists" reloadDocument>Wishlists</Link>
        <Link to="/app/bis/subscriptions" reloadDocument>Back-in-Stock</Link>
        <Link to="/app/bis/stats" reloadDocument>Statistik</Link>
        <Link to="/app/settings/sharing" reloadDocument>Sharing</Link>
        <Link to="/app/settings/bis-email" reloadDocument>Back-in-Stock E-Mail</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>
  );
}

export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};