import type { ReactNode } from "react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { Page, Layout, Card, BlockStack, Text } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await authenticate.admin(request);
  return null;
};

function Section({ heading, children }: { heading: string; children: ReactNode }) {
  return (
    <Card>
      <BlockStack gap="200">
        <Text as="h2" variant="headingMd">
          {heading}
        </Text>
        {children}
      </BlockStack>
    </Card>
  );
}

export default function Help() {
  return (
    <Page>
      <TitleBar title="Help" />
      <BlockStack gap="400">
        <Layout>
          <Layout.Section>
            <Section heading="Locations & weekly slots">
              <Text as="p">
                A <b>location</b> is a fulfillment point — a store, warehouse, or kitchen. Each
                location has its own <b>weekly slot templates</b>: the days and time windows it's
                open for Shipping, Local Delivery, or Pickup, plus how many orders it can take per
                slot (capacity), how long before a slot it stops accepting orders (cutoff), and how
                much lead time it needs to prepare (prep time).
              </Text>
              <Text as="p">
                <b>Overrides</b> and <b>blackout dates</b> adjust or close specific days without
                touching the weekly pattern — a holiday, an early closure, a one-off capacity bump.
              </Text>
            </Section>
          </Layout.Section>

          <Layout.Section>
            <Section heading="How enforcement works">
              <Text as="p">
                The date/time picker in your storefront and checkout is a convenience — the real
                enforcement happens server-side in a Shopify Function attached to checkout. That
                means a shopper can't bypass the picker (browser dev tools, a scripted checkout,
                etc.) and get an order for a slot that's full, closed, or past cutoff. This works on
                every Shopify plan, not just Plus.
              </Text>
            </Section>
          </Layout.Section>

          <Layout.Section>
            <Section heading="Delivery zones & rates (Growth plan and up)">
              <Text as="p">
                <b>Zones</b> define which addresses a location's Local Delivery covers — by postal/ZIP
                code list or by straight-line radius. When a shopper enters an address, the app finds
                the nearest eligible location and offers only that location's slots. A zone's{" "}
                <b>minimum orders</b> setting can delay opening it until you've already routed enough
                orders there (delivery-density gating), so you're not committing to sparse routes
                too early.
              </Text>
              <Text as="p">
                <b>Rates</b> price Local Delivery either by zone or by distance band from the
                location. Without a rate configured, checkout falls back to your own Shopify shipping
                rates.
              </Text>
            </Section>
          </Layout.Section>

          <Layout.Section>
            <Section heading="Dispatch dashboard (Starter plan and up)">
              <Text as="p">
                Filter bookings by date range, location, method, and status; see revenue by method,
                capacity utilization per day/location, and a list of upcoming fulfillments you can
                mark Fulfilled or No-show directly. Export the filtered list as CSV.
              </Text>
            </Section>
          </Layout.Section>

          <Layout.Section>
            <Section heading="POS & checkout">
              <Text as="p">
                Staff can book the same Shipping/Delivery/Pickup slots from the POS Smart Grid tile
                as a shopper booking online — both draw from the same capacity, so an in-store
                booking can't double-book a slot a customer just took online, or vice versa. On
                Shopify Plus, checkout shows a native date/time picker; on every plan, the confirmed
                slot appears on the order confirmation block once the order's placed.
              </Text>
            </Section>
          </Layout.Section>

          <Layout.Section>
            <Section heading="Your data">
              <Text as="p">
                Scheduling data (locations, slots, zones, rates, bookings) lives in this app's own
                database, scoped to your shop — nothing is shared across merchants. If you uninstall
                the app, your data is erased automatically 48 hours later, per Shopify's data
                protection requirements.
              </Text>
            </Section>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}