import type { LoaderFunctionArgs } from "react-router";
import { redirect, useLoaderData } from "react-router";

import styles from "./styles.module.css";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const allowedShop = process.env.ALLOWED_SHOP?.trim();
  const shop = url.searchParams.get("shop");

  // If a shop param is present and it's the allow-listed merchant, send them
  // straight into the embedded app. Any other shop is rejected so this URL
  // can't be used to install the app on arbitrary stores.
  if (shop) {
    if (!allowedShop || shop.toLowerCase() === allowedShop.toLowerCase()) {
      throw redirect(`/app?${url.searchParams.toString()}`);
    }
    throw new Response("This app is private and not available for installation.", { status: 403 });
  }

  return { allowedShop: allowedShop ?? null };
};

export default function App() {
  const { allowedShop } = useLoaderData<typeof loader>();

  return (
    <div className={styles.index}>
      <div className={styles.content}>
        <h1 className={styles.heading}>LinumIQ Invoice</h1>
        <p className={styles.text}>
          Private Shopify app for issuing GoBD-compliant PDF invoices.
        </p>
        <p className={styles.text}>
          {allowedShop
            ? `This installation is reserved for ${allowedShop}. Open the app from the Shopify admin.`
            : "Open the app from the Shopify admin."}
        </p>
      </div>
    </div>
  );
}