"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { badgeVariants } from "@/components/ui/badge";
import Link from "next/link";
import { useState } from "react";
import { Alert } from "@/components/ui/alert";
import { AlertCircle, Check } from "lucide-react";

export default function Home() {
  const [email, setEmail] = useState("");
  const [alertType, setAlertType] = useState("default");
  const [alertMessage, setAlertMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);
  async function handleSubmit(e: any) {
    e.preventDefault(); // prevent the default form submission behavior
    const res = await fetch("/api/waitlist", {
      method: "POST", // specify the HTTP method
      headers: { "Content-Type": "application/json" }, // specify the content type
      body: JSON.stringify({
        email: email,
      }),
    });
    const data = await res.json();

    if (data.email) {
      setAlertType("success");
      setAlertMessage("You have been added to the waitlist!");
      setSubmitted(true);
    } else {
      setAlertType("error");
      setAlertMessage("Something went wrong. Please try again later.");
    }
  }

  return (
    <main className="min-h-screen flex flex-row items-center justify-center p-4">
      <div className="min-h-full flex flex-col space-y-8">
        <div>
          <Link
            className={badgeVariants({ variant: "outline" })}
            href="https://twitter.com/SkalaraAI"
          >
            Follow us on Twitter!
          </Link>
        </div>
        <h1 className="scroll-m-20 text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight">
          Redefine <span className="text-[#3b82f6]">Project Management.</span>
        </h1>
        <h2 className="font-medium text-lg">
          Empowering tech startups to automate, optimize, and streamline
          projects
          <br className="hidden md:block" />
          like never before.
        </h2>
        <div className="flex flex-col md:flex-row w-full max-w-md items-center space-y-2 md:space-y-0 md:space-x-2">
          <Input
            type="email"
            placeholder="Email"
            className="mb-2 md:mb-0"
            onChange={(e) => setEmail(e.target.value)}
          />
          {submitted ? (
            <Button
              disabled
              type="submit"
              onClick={handleSubmit}
              className="w-full md:w-1/2 bg-[#3b82f6] hover:bg-[#20498a]"
            >
              Join the Waitlist
            </Button>
          ) : (
            <Button
              type="submit"
              onClick={handleSubmit}
              className="w-full md:w-1/2 bg-[#3b82f6] hover:bg-[#20498a]"
            >
              Join the Waitlist
            </Button>
          )}
        </div>
        {alertMessage && (
          <Alert variant="default" className="w-1/2">
            {alertType === "success" ? (
              <Check className="w-6 h-6" />
            ) : (
              <AlertCircle className="w-6 h-6" />
            )}
            <span className="ml-2">{alertMessage}</span>
          </Alert>
        )}
      </div>
    </main>
  );
}