"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Github, User, Mail, Key, Eye, EyeOff, Loader2, CheckCircle2 } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const signupFormVariants = cva("w-full", {
  variants: {
    variant: {
      default: "max-w-md mx-auto",
      split: "grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto items-center",
      "with-social": "max-w-md mx-auto",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface SignupFormProps extends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof signupFormVariants> {
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
  showSocial?: boolean;
  loading?: boolean;
}

/**
 * SignupForm — an account creation form with live field validation.
 *
 * Each field validates on blur, and the password rules are shown as you type.
 *
 * @example
 * <SignupForm
 *   onSubmit={(e) => {
 *     e.preventDefault();
 *     register();
 *   }}
 * />
 */
export function SignupForm({
  className,
  variant,
  onSubmit,
  showSocial = true,
  loading = false,
  ...props
}: SignupFormProps) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [confirmPassword, setConfirmPassword] = React.useState("");
  const [terms, setTerms] = React.useState(false);
  const [showPassword, setShowPassword] = React.useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = React.useState(false);

  const [blurredFields, setBlurredFields] = React.useState<Record<string, boolean>>({});

  const handleBlur = (field: string) => {
    setBlurredFields((prev) => ({ ...prev, [field]: true }));
  };

  const isNameValid = name.trim().length > 0;
  const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const isPasswordValid = password.length >= 8;
  const isConfirmPasswordValid = confirmPassword.length >= 8 && confirmPassword === password;

  const getPasswordStrength = (pass: string) => {
    if (pass.length === 0) return { score: 0, label: "", color: "bg-transparent" };
    let score = 0;
    if (pass.length >= 8) score += 1;
    if (/\d/.test(pass)) score += 1;
    if (/[A-Z]/.test(pass) && /[^A-Za-z0-9]/.test(pass)) score += 1;

    if (score === 1) return { score, label: "Weak", color: "bg-red-500", w: "w-1/3" };
    if (score === 2) return { score, label: "Medium", color: "bg-amber-500", w: "w-2/3" };
    if (score === 3) return { score, label: "Strong", color: "bg-emerald-500", w: "w-full" };
    return { score: 0, label: "Too short", color: "bg-red-500", w: "w-1/4" };
  };

  const strength = getPasswordStrength(password);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit?.(e);
  };

  const isSocialVariant = variant === "with-social" || showSocial;

  const FormContent = (
    <div className="space-y-4">
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="name">
          Name
        </label>
        <div className="relative">
          <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
          <Input
            id="name"
            placeholder="John Doe"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            onBlur={() => handleBlur("name")}
            className="pl-9 pr-10 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={loading}
          />
          {blurredFields.name && isNameValid && (
            <CheckCircle2 className="absolute right-3 top-3 h-4 w-4 text-emerald-500" />
          )}
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="email">
          Email
        </label>
        <div className="relative">
          <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
          <Input
            id="email"
            placeholder="m@example.com"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            onBlur={() => handleBlur("email")}
            className="pl-9 pr-10 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={loading}
          />
          {blurredFields.email && isEmailValid && (
            <CheckCircle2 className="absolute right-3 top-3 h-4 w-4 text-emerald-500" />
          )}
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="password">
          Password
        </label>
        <div className="relative">
          <Key className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
          <Input
            id="password"
            type={showPassword ? "text" : "password"}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            onBlur={() => handleBlur("password")}
            className="pl-9 pr-16 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={loading}
          />
          <div className="absolute right-3 top-3 flex items-center space-x-2 bg-background pl-1">
            {blurredFields.password && isPasswordValid && (
              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
            )}
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground transition-colors"
              onClick={() => setShowPassword(!showPassword)}
              disabled={loading}
            >
              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </button>
          </div>
        </div>
        {password.length > 0 && (
          <div className="flex items-center space-x-2 mt-2">
            <div className="h-1.5 w-full bg-muted rounded-full overflow-hidden">
              <div className={cn("h-full transition-all duration-300", strength.color, strength.w)} />
            </div>
            <span className={cn("text-xs font-medium w-16 text-right", {
              "text-red-500": strength.score <= 1,
              "text-amber-500": strength.score === 2,
              "text-emerald-500": strength.score === 3,
            })}>
              {strength.label}
            </span>
          </div>
        )}
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="confirmPassword">
          Confirm Password
        </label>
        <div className="relative">
          <Key className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
          <Input
            id="confirmPassword"
            type={showConfirmPassword ? "text" : "password"}
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            onBlur={() => handleBlur("confirmPassword")}
            className="pl-9 pr-16 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={loading}
          />
          <div className="absolute right-3 top-3 flex items-center space-x-2 bg-background pl-1">
            {blurredFields.confirmPassword && isConfirmPasswordValid && (
              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
            )}
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground transition-colors"
              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              disabled={loading}
            >
              {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </button>
          </div>
        </div>
      </div>
      
      <div className="flex items-center space-x-2 pt-2">
        <input
          type="checkbox"
          id="terms"
          className="h-4 w-4 rounded border-gray-300"
          checked={terms}
          onChange={(e) => setTerms(e.target.checked)}
          required
          disabled={loading}
        />
        <label htmlFor="terms" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
          I agree to the Terms and Conditions
        </label>
      </div>

      <Button type="submit" className="w-full" disabled={loading}>
        {loading ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Creating account...
          </>
        ) : (
          "Sign up"
        )}
      </Button>

      {isSocialVariant && (
        <>
          <div className="relative my-4">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">
                Or sign up with
              </span>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Button 
              variant="outline" 
              type="button"
              className="hover:bg-gray-900 hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors"
              disabled={loading}
            >
              <Github className="mr-2 h-4 w-4" />
              Github
            </Button>
            <Button 
              variant="outline" 
              type="button"
              className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
              disabled={loading}
            >
              <svg className="mr-2 h-4 w-4" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>
              Google
            </Button>
          </div>
        </>
      )}

      <div className="mt-4 text-center text-sm">
        Already have an account?{" "}
        <a href="#" className="underline text-primary">
          Log in
        </a>
      </div>
    </div>
  );

  const containerClass = cn(signupFormVariants({ variant, className }));

  if (variant === "split") {
    return (
      <div className={containerClass}>
        <div className="p-8">
          <div className="mb-8">
            <h2 className="text-2xl font-bold tracking-tight">Create an account</h2>
            <p className="text-sm text-muted-foreground">Enter your details below to get started</p>
          </div>
          <form onSubmit={handleSubmit} {...props}>
            {FormContent}
          </form>
        </div>
        <div className="hidden md:block bg-muted rounded-lg h-full min-h-[500px]">
          {/* Image placeholder */}
        </div>
      </div>
    );
  }

  return (
    <Card className={containerClass}>
      <CardHeader>
        <CardTitle className="text-2xl">Create an account</CardTitle>
        <CardDescription>
          Enter your details below to create your account
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} {...props}>
          {FormContent}
        </form>
      </CardContent>
    </Card>
  );
}
Signup Form

Create an account

Create an account
