import Logout from "@/components/logout";
import GridPattern from "@/components/magicui/grid-pattern";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import Link from "next/link";

export const dynamic = "force-dynamic";

export default async function Home() {
  const supabase = createServerComponentClient({ cookies });

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    console.log("BOO no user");
  }

  return (
    <main className="flex flex-col w-screen justify-center items-center">
      <div className="w-full flex flex-col items-center h-screen">
        <nav className="w-full flex justify-center h-16">
          <div className="w-3/5 flex justify-between items-center p-4 text-sm text-foreground">
            <div className="flex flex-row space-x-2 justify-center items-center">
              <svg
                fill="#7C3AED"
                width="32px"
                height="32px"
                viewBox="0 0 15 15"
                version="1.1"
                id="circle"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" />
              </svg>
              <h1 className="text-lg font-extrabold text-secondary-foreground">
                SKALARA
              </h1>
            </div>
            <div>
              {!user ? (
                <div className="flex items-center gap-4">
                  <Link
                    href="/auth"
                    className={buttonVariants({ variant: "default" })}
                  >
                    Login
                  </Link>
                  <ThemeToggle />
                </div>
              ) : (
                <div className="flex items-center gap-4">
                  <Link
                    className={cn(buttonVariants({ variant: "default" }))}
                    href="/dashboard"
                  >
                    Dashboard
                  </Link>
                  <Logout />
                  <ThemeToggle />
                </div>
              )}
            </div>
          </div>
        </nav>

        <div className="flex flex-col text-foreground bg-cover w-full h-full justify-center items-center">
          <div className="flex flex-col items-center space-y-6 text-center z-10">
            <h1 className="text-8xl font-bold">
              Simple. Intelligent. Automated.
            </h1>
            <p className="text-3xl tracking-wide">
              AI-powered project management for indie developers.
            </p>
            <div className="flex flex-col w-1/2 space-y-4 md:flex-row md:space-x-4 md:space-y-0">
              <Input
                className="bg-secondary shadow-inner"
                placeholder="example@company.com"
              />
              <Button
                variant="default"
                className="shadow-lg shadow-primary/30 w-full md:w-2/3"
              >
                Join Waitlist
              </Button>
            </div>
          </div>
          <GridPattern
            width={60}
            height={60}
            x={-1}
            y={-1}
            strokeDasharray={"4 2"}
            className="[mask-image:linear-gradient(to_top,transparent,white_45%,transparent_90%,transparent)]"
          />
        </div>
      </div>
    </main>
  );
}