"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";
import { createBrowserClient } from "@supabase/ssr";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";

// ============================================================================
// Types
// ============================================================================

type SubmitStatus = "idle" | "loading" | "success" | "error";

interface Waitlist02Props {
  badge?: string;
  title?: string;
  description?: string;
  inputPlaceholder?: string;
  buttonText?: string;
  successMessage?: string;
  errorMessage?: string;
  socialProof?: {
    avatars: string[];
    text: string;
  };
  tableName?: string;
  className?: string;
}

// ============================================================================
// Supabase client (module-level singleton — env vars are static at build time)
// ============================================================================

const supabase = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
);

// ============================================================================
// Email Validation
// ============================================================================

const isValidEmail = (email: string): boolean => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

// ============================================================================
// Main Component
//
// Required env vars:
//   NEXT_PUBLIC_SUPABASE_URL=your-project-url
//   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-key
//
// Supabase table setup (run in SQL Editor):
//   CREATE TABLE waitlist (
//     id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
//     email TEXT UNIQUE NOT NULL,
//     created_at TIMESTAMPTZ DEFAULT NOW()
//   );
//   ALTER TABLE waitlist ENABLE ROW LEVEL SECURITY;
//   CREATE POLICY "Allow anonymous inserts" ON waitlist
//     FOR INSERT TO anon WITH CHECK (true);
// ============================================================================

const Waitlist02 = ({
  badge = "Coming Soon",
  title = "Join the Waiting List",
  description = "Be amongst the first to experience our product. Sign up to be notified when we launch!",
  inputPlaceholder = "Enter your email",
  buttonText = "Join waitlist",
  successMessage = "You're on the list! We'll notify you when we launch.",
  errorMessage = "Something went wrong. Please try again.",
  socialProof = {
    avatars: [
      "https://www.shadcnship.com/images/avatars/avatar-1.webp",
      "https://www.shadcnship.com/images/avatars/avatar-2.webp",
      "https://www.shadcnship.com/images/avatars/avatar-3.webp",
      "https://www.shadcnship.com/images/avatars/avatar-4.webp",
    ],
    text: "Join 2,500+ others on the waitlist",
  },
  tableName = "waitlist",
  className,
}: Waitlist02Props) => {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<SubmitStatus>("idle");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!isValidEmail(email)) {
      setStatus("error");
      toast.error("Please enter a valid email address");
      return;
    }

    setStatus("loading");

    try {
      const { error } = await supabase.from(tableName).insert({ email });

      if (error) {
        const message =
          error.code === "23505"
            ? "This email is already on the waitlist"
            : errorMessage;
        throw new Error(message);
      }

      setStatus("success");
      toast.success(successMessage);
      setEmail("");
    } catch (error) {
      setStatus("error");
      toast.error(error instanceof Error ? error.message : errorMessage);
    }
  };

  const isDisabled = status === "loading" || status === "success";

  return (
    <section className={cn("container mx-auto px-6 py-12 md:py-24", className)}>
      <div className="mx-auto max-w-2xl space-y-4 text-center">
        <p className="mb-2 text-sm font-semibold tracking-wide text-muted-foreground uppercase">
          {badge}
        </p>

        {/* Title */}
        <h2 className="text-4xl font-semibold tracking-tight md:text-5xl">
          {title}
        </h2>

        {/* Description */}
        <p className="text-muted-foreground">{description}</p>

        {/* Email Form */}
        <form onSubmit={handleSubmit}>
          <div className="mx-auto flex max-w-md items-center gap-2 rounded-full border bg-background p-1.5 shadow-sm">
            <Input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={inputPlaceholder}
              disabled={isDisabled}
              className="flex-1 rounded-full border-0 bg-transparent shadow-none focus-visible:ring-0"
            />
            <Button
              type="submit"
              disabled={isDisabled}
              className="rounded-full px-6"
            >
              {status === "loading" && (
                <Loader2 className="mr-2 size-4 animate-spin" />
              )}
              {buttonText}
            </Button>
          </div>
        </form>

        <Toaster />

        {/* Social Proof */}
        {socialProof && (
          <div className="mt-6 flex items-center justify-center gap-3">
            <div className="flex -space-x-2">
              {socialProof.avatars.map((avatar, index) => (
                <img
                  key={index}
                  src={avatar}
                  alt={`User ${index + 1}`}
                  className="size-8 rounded-full border-2 border-background object-cover"
                />
              ))}
            </div>
            <p className="text-sm text-muted-foreground">{socialProof.text}</p>
          </div>
        )}
      </div>
    </section>
  );
};

export { Waitlist02 };
export type { Waitlist02Props };
Waitlist 02
