"use client";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { GoogleIcon, GithubIcon, LogoIcon } from "@/components/social-icons";
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";

// ─── Schemas ──────────────────────────────────────────────────────────────────

const signUpSchema = z.object({
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email address"),
  password: z
    .string()
    .min(8, "Password must be at least 8 characters")
    .regex(/[A-Z]/, "Must contain an uppercase letter")
    .regex(/[a-z]/, "Must contain a lowercase letter")
    .regex(/[0-9]/, "Must contain a number"),
});

const signInSchema = z.object({
  email: z.string().email("Please enter a valid email address"),
  password: z.string().min(1, "Password is required"),
});

type SignUpFormData = z.infer<typeof signUpSchema>;
type SignInFormData = z.infer<typeof signInSchema>;

// ─── Props ────────────────────────────────────────────────────────────────────

interface Login02Props {
  mode?: "signin" | "signup";
  redirectTo?: string;
  logo?: React.ReactNode;
  logoText?: string;
  img?: string;
  tagline?: string;
  title?: string;
  subheading?: string;
  description?: string;
  signinHref?: string;
  signupHref?: string;
  className?: string;
}

// ─── Sign-in form ─────────────────────────────────────────────────────────────

function SignInForm({ onSuccess }: { onSuccess: () => void }) {
  const [showPassword, setShowPassword] = useState(false);
  const [authError, setAuthError] = useState<string | null>(null);
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<SignInFormData>({ resolver: zodResolver(signInSchema) });

  async function onSubmit(data: SignInFormData) {
    setAuthError(null);
    const supabase = createClient();
    if (!supabase) {
      setAuthError(
        "Supabase is not configured. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY in your .env.local.",
      );
      return;
    }
    const { error } = await supabase.auth.signInWithPassword({
      email: data.email,
      password: data.password,
    });
    if (error) {
      setAuthError(error.message);
    } else {
      onSuccess();
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="signin-email">Email</Label>
        <Input
          id="signin-email"
          type="email"
          placeholder="you@example.com"
          {...register("email")}
          aria-invalid={!!errors.email}
        />
        {errors.email && (
          <p className="text-xs text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="signin-password">Password</Label>
        <div className="relative">
          <Input
            id="signin-password"
            type={showPassword ? "text" : "password"}
            placeholder="Enter your password"
            {...register("password")}
            aria-invalid={!!errors.password}
            className="pr-10"
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
          >
            {showPassword ? (
              <EyeOff className="size-4" />
            ) : (
              <Eye className="size-4" />
            )}
          </button>
        </div>
        {errors.password && (
          <p className="text-xs text-destructive">{errors.password.message}</p>
        )}
      </div>

      {authError && <p className="text-sm text-destructive">{authError}</p>}

      <Button
        type="submit"
        className="w-full"
        size="lg"
        disabled={isSubmitting}
      >
        {isSubmitting ? "Signing in..." : "Sign In"}
      </Button>
    </form>
  );
}

// ─── Sign-up form ─────────────────────────────────────────────────────────────

function SignUpForm({ onSuccess }: { onSuccess: () => void }) {
  const [showPassword, setShowPassword] = useState(false);
  const [authError, setAuthError] = useState<string | null>(null);
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<SignUpFormData>({ resolver: zodResolver(signUpSchema) });

  async function onSubmit(data: SignUpFormData) {
    setAuthError(null);
    const supabase = createClient();
    if (!supabase) {
      setAuthError(
        "Supabase is not configured. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY in your .env.local.",
      );
      return;
    }
    const { error } = await supabase.auth.signUp({
      email: data.email,
      password: data.password,
      options: {
        data: {
          first_name: data.firstName,
          last_name: data.lastName,
          full_name: `${data.firstName} ${data.lastName}`.trim(),
        },
      },
    });
    if (error) {
      setAuthError(error.message);
    } else {
      onSuccess();
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="signup-firstName">First Name</Label>
          <Input
            id="signup-firstName"
            placeholder="John"
            {...register("firstName")}
            aria-invalid={!!errors.firstName}
          />
          {errors.firstName && (
            <p className="text-xs text-destructive">
              {errors.firstName.message}
            </p>
          )}
        </div>
        <div className="space-y-2">
          <Label htmlFor="signup-lastName">Last Name</Label>
          <Input
            id="signup-lastName"
            placeholder="Doe"
            {...register("lastName")}
            aria-invalid={!!errors.lastName}
          />
          {errors.lastName && (
            <p className="text-xs text-destructive">
              {errors.lastName.message}
            </p>
          )}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="signup-email">Email</Label>
        <Input
          id="signup-email"
          type="email"
          placeholder="you@example.com"
          {...register("email")}
          aria-invalid={!!errors.email}
        />
        {errors.email && (
          <p className="text-xs text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="signup-password">Password</Label>
        <div className="relative">
          <Input
            id="signup-password"
            type={showPassword ? "text" : "password"}
            placeholder="Enter your password"
            {...register("password")}
            aria-invalid={!!errors.password}
            className="pr-10"
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
          >
            {showPassword ? (
              <EyeOff className="size-4" />
            ) : (
              <Eye className="size-4" />
            )}
          </button>
        </div>
        {errors.password ? (
          <p className="text-xs text-destructive">{errors.password.message}</p>
        ) : (
          <p className="text-xs text-muted-foreground">
            Must be at least 8 characters.
          </p>
        )}
      </div>

      {authError && <p className="text-sm text-destructive">{authError}</p>}

      <Button
        type="submit"
        className="w-full"
        size="lg"
        disabled={isSubmitting}
      >
        {isSubmitting ? "Creating account..." : "Sign Up"}
      </Button>
    </form>
  );
}

// ─── Main component ───────────────────────────────────────────────────────────

const Login02 = ({
  mode = "signin",
  redirectTo = "/dashboard",
  logo = <LogoIcon className="size-5 dark:invert invert" />,
  logoText = "Shadcnship",
  img = "https://www.shadcnship.com/images/image-preview.webp",
  tagline = "Your productivity, supercharged.",
  title,
  subheading = "Welcome",
  description,
  signinHref = "#",
  signupHref = "#",
  className,
}: Login02Props) => {
  const router = useRouter();
  const isSignIn = mode === "signin";

  const resolvedHeading =
    title ?? (isSignIn ? "Welcome back" : "Create an account");
  const resolvedDescription =
    description ??
    (isSignIn
      ? "Sign in to your account to continue."
      : "Enter your details to get started.");

  async function handleOAuth(provider: "google" | "github") {
    const supabase = createClient();
    if (!supabase) return;

    await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: `${window.location.origin}/auth/callback`,
      },
    });
  }

  return (
    <section className={cn("min-h-screen w-full", className)}>
      <div className="grid min-h-screen lg:grid-cols-2">
        {/* Left Side */}
        <div className="relative hidden lg:flex flex-col justify-between p-10 overflow-hidden bg-accent text-white">
          {img && (
            <img
              src={img}
              alt=""
              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 object-cover h-full w-full"
            />
          )}
          <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" />
          <a href="/" className="relative z-10 flex items-center gap-2">
            {logo}
            <span className="text-lg font-semibold text-white">{logoText}</span>
          </a>

          <div className="relative z-10 max-w-xl">
            <p className="text-sm text-white/70 mb-2">{subheading}</p>
            <h2 className="text-3xl font-medium tracking-tight leading-tight">
              {tagline}
            </h2>
          </div>
        </div>

        {/* Right Side */}
        <div className="flex flex-col justify-center px-6 py-12 lg:px-16 xl:px-24">
          <div className="mx-auto w-full max-w-md">
            {logo && (
              <div className="mb-4 flex items-center gap-2 justify-center lg:hidden">
                {logo}
              </div>
            )}

            <div className="mb-6 text-center">
              <h1 className="text-2xl font-semibold tracking-tight">
                {resolvedHeading}
              </h1>
              <p className="mt-2 text-sm text-muted-foreground">
                {resolvedDescription}
              </p>
            </div>

            <div className="grid grid-cols-2 gap-4 mb-6">
              <Button
                variant="outline"
                size="lg"
                className="w-full"
                onClick={() => handleOAuth("google")}
              >
                <GoogleIcon className="size-5 mr-2" />
                Google
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="w-full"
                onClick={() => handleOAuth("github")}
              >
                <GithubIcon className="size-5 mr-2" />
                GitHub
              </Button>
            </div>

            <div className="relative mb-6">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t" />
              </div>
              <div className="relative flex justify-center text-xs">
                <span className="bg-background px-4 text-muted-foreground">
                  Or
                </span>
              </div>
            </div>

            {isSignIn ? (
              <SignInForm onSuccess={() => router.push(redirectTo)} />
            ) : (
              <SignUpForm onSuccess={() => router.push(redirectTo)} />
            )}

            <p className="mt-6 text-center text-sm text-muted-foreground">
              {isSignIn ? (
                <>
                  Don&apos;t have an account?{" "}
                  <a
                    href={signupHref}
                    className="font-medium text-foreground hover:underline underline-offset-4"
                  >
                    Sign up
                  </a>
                </>
              ) : (
                <>
                  Already have an account?{" "}
                  <a
                    href={signinHref}
                    className="font-medium text-foreground hover:underline underline-offset-4"
                  >
                    Log in
                  </a>
                </>
              )}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export {
  Login02,
  signUpSchema,
  signInSchema,
  type SignUpFormData,
  type SignInFormData,
};
Login Supabase
