"use client";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient, googleSignInAvailable } from "@/lib/auth/client";
import { cn } from "@/lib/utils/ui";
import { RiLoader4Line } from "@remixicon/react";
import { useRouter } from "next/navigation";
import { useState, useMemo, type FormEvent } from "react";
import { toast } from "sonner";
import { Logo } from "../logo";
import { AuthErrorAlert } from "./auth-error-alert";
import { AuthHeader } from "./auth-header";
import AuthSidebar from "./auth-sidebar";
import { GoogleAuthButton } from "./google-auth-button";
import { RiCheckLine, RiCloseLine } from "@remixicon/react";

interface PasswordValidation {
  hasLowercase: boolean;
  hasUppercase: boolean;
  hasNumber: boolean;
  hasSpecial: boolean;
  hasMinLength: boolean;
  hasMaxLength: boolean;
  isValid: boolean;
}

function validatePassword(password: string): PasswordValidation {
  const hasLowercase = /[a-z]/.test(password);
  const hasUppercase = /[A-Z]/.test(password);
  const hasNumber = /\d/.test(password);
  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(password);
  const hasMinLength = password.length >= 7;
  const hasMaxLength = password.length <= 23;

  return {
    hasLowercase,
    hasUppercase,
    hasNumber,
    hasSpecial,
    hasMinLength,
    hasMaxLength,
    isValid:
      hasLowercase &&
      hasUppercase &&
      hasNumber &&
      hasSpecial &&
      hasMinLength &&
      hasMaxLength,
  };
}

function PasswordRequirement({
  met,
  label,
}: {
  met: boolean;
  label: string;
}) {
  return (
    <div
      className={cn(
        "flex items-center gap-1.5 text-xs transition-colors",
        met ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
      )}
    >
      {met ? (
        <RiCheckLine className="h-3.5 w-3.5" />
      ) : (
        <RiCloseLine className="h-3.5 w-3.5" />
      )}
      <span>{label}</span>
    </div>
  );
}

type DivProps = React.ComponentProps<"div">;

export function SignupForm({ className, ...props }: DivProps) {
  const router = useRouter();
  const isGoogleAvailable = googleSignInAvailable;

  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const [error, setError] = useState("");
  const [loadingEmail, setLoadingEmail] = useState(false);
  const [loadingGoogle, setLoadingGoogle] = useState(false);

  const passwordValidation = useMemo(
    () => validatePassword(password),
    [password]
  );

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    if (!passwordValidation.isValid) {
      setError("A senha não atende aos requisitos de segurança.");
      return;
    }

    await authClient.signUp.email(
      {
        email,
        password,
        name: fullname,
      },
      {
        onRequest: () => {
          setError("");
          setLoadingEmail(true);
        },
        onSuccess: () => {
          setLoadingEmail(false);
          toast.success("Conta criada com sucesso!");
          router.replace("/dashboard");
        },
        onError: (ctx) => {
          setError(ctx.error.message);
          setLoadingEmail(false);
        },
      }
    );
  }

  async function handleGoogle() {
    if (!isGoogleAvailable) {
      setError("Login com Google não está disponível no momento.");
      return;
    }

    // Ativa loading antes de iniciar o fluxo OAuth
    setError("");
    setLoadingGoogle(true);

    // OAuth redirect - o loading permanece até a página ser redirecionada
    await authClient.signIn.social(
      {
        provider: "google",
        callbackURL: "/dashboard",
      },
      {
        onError: (ctx) => {
          // Só desativa loading se houver erro
          setError(ctx.error.message);
          setLoadingGoogle(false);
        },
      }
    );
  }

  return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <Logo className="mb-2" />
      <Card className="overflow-hidden p-0">
        <CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
          <form
            className="flex flex-col gap-6 p-6 md:p-8"
            onSubmit={handleSubmit}
            noValidate
          >
            <FieldGroup className="gap-4">
              <AuthHeader title="Criar sua conta" />

              <AuthErrorAlert error={error} />

              <Field>
                <FieldLabel htmlFor="name">Nome completo</FieldLabel>
                <Input
                  id="name"
                  type="text"
                  placeholder="Digite seu nome"
                  autoComplete="name"
                  required
                  value={fullname}
                  onChange={(e) => setFullname(e.target.value)}
                  aria-invalid={!!error}
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="email">E-mail</FieldLabel>
                <Input
                  id="email"
                  type="email"
                  placeholder="Digite seu e-mail"
                  autoComplete="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  aria-invalid={!!error}
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="password">Senha</FieldLabel>
                <Input
                  id="password"
                  type="password"
                  required
                  autoComplete="new-password"
                  placeholder="Crie uma senha forte"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  aria-invalid={!!error || (password.length > 0 && !passwordValidation.isValid)}
                  maxLength={23}
                />
                {password.length > 0 && (
                  <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
                    <PasswordRequirement
                      met={passwordValidation.hasMinLength}
                      label="Mínimo 7 caracteres"
                    />
                    <PasswordRequirement
                      met={passwordValidation.hasMaxLength}
                      label="Máximo 23 caracteres"
                    />
                    <PasswordRequirement
                      met={passwordValidation.hasLowercase}
                      label="Letra minúscula"
                    />
                    <PasswordRequirement
                      met={passwordValidation.hasUppercase}
                      label="Letra maiúscula"
                    />
                    <PasswordRequirement
                      met={passwordValidation.hasNumber}
                      label="Número"
                    />
                    <PasswordRequirement
                      met={passwordValidation.hasSpecial}
                      label="Caractere especial"
                    />
                  </div>
                )}
              </Field>

              <Field>
                <Button
                  type="submit"
                  disabled={loadingEmail || loadingGoogle || (password.length > 0 && !passwordValidation.isValid)}
                  className="w-full"
                >
                  {loadingEmail ? (
                    <RiLoader4Line className="h-4 w-4 animate-spin" />
                  ) : (
                    "Criar conta"
                  )}
                </Button>
              </Field>

              <FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
                Ou continue com
              </FieldSeparator>

              <Field>
                <GoogleAuthButton
                  onClick={handleGoogle}
                  loading={loadingGoogle}
                  disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
                  text="Continuar com Google"
                />
              </Field>

              <FieldDescription className="text-center">
                Já tem uma conta?{" "}
                <a href="/login" className="underline underline-offset-4">
                  Entrar
                </a>
              </FieldDescription>
            </FieldGroup>
          </form>

          <AuthSidebar />
        </CardContent>
      </Card>

      {/* <AuthFooter /> */}
      <FieldDescription className="text-center">
        <a href="/" className="underline underline-offset-4">
          Voltar para o site
        </a>
      </FieldDescription>
    </div>
  );
}