import { Button } from "@repo/ui/shadcn/button";
import { auth, signIn, signOut } from "../../server/auth";
import { db } from "../../server/db";
import { sql } from "drizzle-orm";
import { users } from "../../server/db/schema";
import { getThemeToggler } from "../../lib/get-theme-button";

export const runtime = "edge";

export default async function Page() {
  const usr = await auth();

  const userCount = await db
    .select({
      count: sql<number>`count(*)`.mapWith(Number),
    })
    .from(users);

  const SetThemeButton = getThemeToggler();

  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <div className="flex max-w-2xl justify-between w-full">
        <SetThemeButton />

        <div className="flex gap-2 items-center justify-center">
          {" "}
          <svg
            viewBox="0 0 256 116"
            xmlns="http://www.w3.org/2000/svg"
            width="45px"
            height="45px"
            preserveAspectRatio="xMidYMid"
          >
            <path
              fill="#FFF"
              d="m202.357 49.394-5.311-2.124C172.085 103.434 72.786 69.289 66.81 85.997c-.996 11.286 54.227 2.146 93.706 4.059 12.039.583 18.076 9.671 12.964 24.484l10.069.031c11.615-36.209 48.683-17.73 50.232-29.68-2.545-7.857-42.601 0-31.425-35.497Z"
            />
            <path
              fill="#F4811F"
              d="M176.332 108.348c1.593-5.31 1.062-10.622-1.593-13.809-2.656-3.187-6.374-5.31-11.154-5.842L71.17 87.634c-.531 0-1.062-.53-1.593-.53-.531-.532-.531-1.063 0-1.594.531-1.062 1.062-1.594 2.124-1.594l92.946-1.062c11.154-.53 22.839-9.56 27.087-20.182l5.312-13.809c0-.532.531-1.063 0-1.594C191.203 20.182 166.772 0 138.091 0 111.535 0 88.697 16.995 80.73 40.896c-5.311-3.718-11.684-5.843-19.12-5.31-12.747 1.061-22.838 11.683-24.432 24.43-.531 3.187 0 6.374.532 9.56C16.996 70.107 0 87.103 0 108.348c0 2.124 0 3.718.531 5.842 0 1.063 1.062 1.594 1.594 1.594h170.489c1.062 0 2.125-.53 2.125-1.594l1.593-5.842Z"
            />
            <path
              fill="#FAAD3F"
              d="M205.544 48.863h-2.656c-.531 0-1.062.53-1.593 1.062l-3.718 12.747c-1.593 5.31-1.062 10.623 1.594 13.809 2.655 3.187 6.373 5.31 11.153 5.843l19.652 1.062c.53 0 1.062.53 1.593.53.53.532.53 1.063 0 1.594-.531 1.063-1.062 1.594-2.125 1.594l-20.182 1.062c-11.154.53-22.838 9.56-27.087 20.182l-1.063 4.78c-.531.532 0 1.594 1.063 1.594h70.108c1.062 0 1.593-.531 1.593-1.593 1.062-4.25 2.124-9.03 2.124-13.81 0-27.618-22.838-50.456-50.456-50.456"
            />
          </svg>
          <span className="italic">Cloudflare Next Saas Starter</span>
        </div>

        <div className="border border-black dark:border-white rounded-2xl p-2 flex items-center">
          Start by editing apps/web/page.tsx
        </div>
      </div>

      <div className="max-w-2xl text-start w-full mt-16">
        Welcome to Cloudflare Next Saas Starter. <br /> Built a full stack app
        using production-ready tools and frameworks, host on Cloudflare
        instantly.
        <br />
        An opinionated, batteries-included framework with{" "}
        <a
          className="text-transparent bg-clip-text bg-gradient-to-r from-[#a93d64] to-[#275ba9]"
          href="https://turbo.build"
        >
          Turborepo
        </a>{" "}
        and Nextjs. Fully Typesafe. Best practices followed by default.
        <br /> <br />
        Here's what the stack includes:
        <ul className="list-disc mt-4 prose dark:prose-invert">
          <li>
            Authentication with <code>next-auth</code>
          </li>
          <li>Database using Cloudflare's D1 serverless databases</li>
          <li>Drizzle ORM, already connected to your database and auth ⚡</li>
          <li>Light/darkmode theming that works with server components (!)</li>
          <li>Styling using TailwindCSS and ShadcnUI</li>
          <li>Turborepo with a landing page and shared components</li>
          <li>Cloudflare wrangler for quick functions on the edge</li>
          <li>
            ... best part: everything's already set up for you. Just code!
          </li>
        </ul>
        <div className="mt-4 flex flex-col gap-2">
          <span>Number of users in database: {userCount[0]!.count}</span>
        </div>
        {usr?.user?.email ? (
          <>
            <div className="mt-4 flex flex-col gap-2">
              <span>Hello {usr.user.name} 👋</span>
              <span>{usr.user.email}</span>
            </div>
            <form
              action={async () => {
                "use server";
                await signOut();
              }}
            >
              <Button variant={"destructive"} className="mt-4">
                Sign out
              </Button>
            </form>
          </>
        ) : (
          <form
            action={async () => {
              "use server";
              await signIn("google");
            }}
          >
            <Button className="mt-4">Login with Google</Button>
          </form>
        )}
      </div>
    </main>
  );
}