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

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

  const locations = await db.location.findMany({
    where: { shopDomain: session.shop },
    include: { _count: { select: { slotTemplates: true } } },
  });

  return { locations };
};

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

  return (
    <Page>
      <TitleBar title="Delivery Date & Time" />
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <Card>
              {locations.length === 0 ? (
                <EmptyState
                  heading="No locations configured yet"
                  action={{ content: "Add a location", url: "/app/locations" }}
                  image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
                >
                  <Text as="p" variant="bodyMd">
                    Set up a fulfillment location and its weekly slots to start
                    taking scheduled Shipping, Local Delivery, or Pickup orders.
                  </Text>
                </EmptyState>
              ) : (
                <BlockStack gap="300">
                  <Text as="h2" variant="headingMd">
                    {locations.length} location{locations.length === 1 ? "" : "s"} configured
                  </Text>
                  {locations.map((location) => (
                    <InlineStack key={location.id} align="space-between">
                      <Text as="span">{location.name}</Text>
                      <Badge>{`${location._count.slotTemplates} slot templates`}</Badge>
                    </InlineStack>
                  ))}
                </BlockStack>
              )}
            </Card>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}