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

import { login } from "../../shopify.server";

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

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);

  if (url.searchParams.get("shop")) {
    throw redirect(`/app?${url.searchParams.toString()}`);
  }

  return { showForm: Boolean(login) };
};

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

  return (
    <div className={styles.index}>
      <div className={styles.content}>
        <h1 className={styles.heading}>Bundle Offers: run all your festival deals at once</h1>
        <p className={styles.text}>
          Fixed bundles, mix & match and buy X get Y, applied automatically at checkout. Each item counts towards one offer, in the order you choose.
        </p>
        {showForm && (
          <Form className={styles.form} method="post" action="/auth/login">
            <label className={styles.label}>
              <span>Shop domain</span>
              <input className={styles.input} type="text" name="shop" />
              <span>e.g: my-shop-domain.myshopify.com</span>
            </label>
            <button className={styles.button} type="submit">
              Log in
            </button>
          </Form>
        )}
        <ul className={styles.list}>
          <li>
            <strong>No discount stacking surprises</strong>. Many offers can run together; every item counts once,
            in your priority order.
          </li>
          <li>
            <strong>Festival-ready</strong>. Templates and a calendar for Diwali, Eid, Pongal, Lunar New Year,
            Christmas and more, with scheduled start and end dates.
          </li>
          <li>
            <strong>Native checkout</strong>. A Shopify discount function: works with Shop Pay and accelerated
            checkouts, with cart hints that nudge customers to complete a bundle.
          </li>
        </ul>
      </div>
    </div>
  );
}