import type { LoaderFunctionArgs } from "react-router";
import { login } from "../shopify.server";

/**
 * Datewise is installed and opened from Shopify only (App Store requirement 2.3.1), so there is no
 * shop-domain form here. When Shopify sends ?shop=, hand off to OAuth; otherwise explain where to go.
 */
export const loader = async ({ request }: LoaderFunctionArgs) => {
  if (new URL(request.url).searchParams.get("shop")) {
    const res = await login(request);
    if (res instanceof Response) throw res;
  }
  return null;
};

export default function Login() {
  return (
    <main style={{ maxWidth: 480, margin: "10vh auto", padding: 16, fontFamily: "system-ui, sans-serif", lineHeight: 1.5 }}>
      <h1>Open Datewise from Shopify</h1>
      <p>
        Datewise runs inside your Shopify admin. Install it from the Shopify App Store, or open it from
        <strong> Apps</strong> in your Shopify admin if it's already installed.
      </p>
    </main>
  );
}