import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";

export async function loader({ request }: LoaderFunctionArgs) {
  try {
    await authenticate.admin(request);
  } catch {
    // Local mock development can still render this status page before app auth is configured.
  }

  return json({
    appName: "dreame-action",
    mode: process.env.THIRD_PARTY_MODE || "mock",
  });
}

export default function Index() {
  const data = useLoaderData<typeof loader>();

  return (
    <main style={{ fontFamily: "system-ui, sans-serif", padding: 32, maxWidth: 760 }}>
      <h1>{data.appName}</h1>
      <p>Shopify Thank You Page activity app scaffold.</p>
      <p>
        Third party mode: <strong>{data.mode}</strong>
      </p>
      <p>
        Configure Metaobject <code>$app:dreame_activity</code>, install the Checkout UI Extension, and use mock mode for
        local validation before live integration.
      </p>
    </main>
  );
}