"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 { AlertCircle, Github, Mail, Key, Eye, EyeOff, Loader2 } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const loginFormVariants = 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",
      minimal: "max-w-md mx-auto bg-transparent border-none shadow-none",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface LoginFormProps extends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof loginFormVariants> {
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
  showSocial?: boolean;
  showRememberMe?: boolean;
  loading?: boolean;
  /** Server-side error (e.g. "Invalid email or password"). Shows a banner and shakes the form. */
  error?: string;
}

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

/**
 * LoginForm — an email/password sign-in form.
 *
 * Pass `error` after a failed attempt to show a banner and shake the form, and
 * `loading` while the request is in flight to disable every control at once.
 *
 * @example
 * <LoginForm
 *   loading={pending}
 *   error={error}
 *   onSubmit={(e) => {
 *     e.preventDefault();
 *     signIn();
 *   }}
 * />
 */
export function LoginForm({
  className,
  variant,
  onSubmit,
  showSocial = true,
  showRememberMe = true,
  loading = false,
  error,
  ...props
}: LoginFormProps) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [rememberMe, setRememberMe] = React.useState(false);
  const [showPassword, setShowPassword] = React.useState(false);
  const [emailTouched, setEmailTouched] = React.useState(false);
  const [isShaking, setIsShaking] = React.useState(false);

  const emailInvalid = emailTouched && email.length > 0 && !EMAIL_PATTERN.test(email);

  React.useEffect(() => {
    if (!error) return;
    setIsShaking(true);
    const t = window.setTimeout(() => setIsShaking(false), 500);
    return () => window.clearTimeout(t);
  }, [error]);

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

  const FormContent = (
    <div className="space-y-4">
      <style>{`
        @keyframes login-shake {
          10%, 90% { transform: translateX(-1px); }
          20%, 80% { transform: translateX(2px); }
          30%, 50%, 70% { transform: translateX(-4px); }
          40%, 60% { transform: translateX(4px); }
        }
      `}</style>
      {error && (
        <div className="flex items-start gap-2 rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-600 dark:text-rose-400">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
          <span>{error}</span>
        </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={() => setEmailTouched(true)}
            aria-invalid={emailInvalid}
            className={cn(
              "pl-9 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30",
              emailInvalid && "border-rose-500 focus-visible:ring-rose-500/30"
            )}
            required
            disabled={loading}
          />
        </div>
        {emailInvalid && <p className="text-xs text-rose-500">Enter a valid email address.</p>}
      </div>
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium leading-none" htmlFor="password">
            Password
          </label>
          <a href="#" className="text-sm text-primary hover:underline">
            Forgot password?
          </a>
        </div>
        <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)}
            className="pl-9 pr-10 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={loading}
          />
          <button
            type="button"
            className="absolute right-3 top-3 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>
      
      {showRememberMe && (
        <div className="flex items-center space-x-2">
          <input
            type="checkbox"
            id="remember"
            className="h-4 w-4 rounded border-gray-300"
            checked={rememberMe}
            onChange={(e) => setRememberMe(e.target.checked)}
            disabled={loading}
          />
          <label htmlFor="remember" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
            Remember me
          </label>
        </div>
      )}

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

      {showSocial && (
        <>
          <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 continue 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">
        Don't have an account?{" "}
        <a href="#" className="underline">
          Sign up
        </a>
      </div>
    </div>
  );

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

  const shakeStyle = isShaking ? { animation: "login-shake 0.4s ease-in-out" } : undefined;

  if (variant === "split") {
    return (
      <div className={containerClass}>
        <div className="hidden md:block bg-muted rounded-lg h-full min-h-[400px]">
          {/* Image placeholder */}
        </div>
        <div className="p-8" style={shakeStyle}>
          <div className="mb-8">
            <h2 className="text-2xl font-bold tracking-tight">Welcome back</h2>
            <p className="text-sm text-muted-foreground">Enter your credentials to continue</p>
          </div>
          <form onSubmit={handleSubmit} {...props}>
            {FormContent}
          </form>
        </div>
      </div>
    );
  }

  if (variant === "minimal") {
    return (
      <div className={containerClass} style={shakeStyle}>
        <div className="mb-8">
          <h2 className="text-2xl font-bold tracking-tight">Welcome back</h2>
          <p className="text-sm text-muted-foreground">Enter your credentials to continue</p>
        </div>
        <form onSubmit={handleSubmit} {...props}>
          {FormContent}
        </form>
      </div>
    );
  }

  return (
    <Card className={containerClass} style={shakeStyle}>
      <CardHeader>
        <CardTitle className="text-2xl">Login</CardTitle>
        <CardDescription>
          Enter your email below to login to your account.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} {...props}>
          {FormContent}
        </form>
      </CardContent>
    </Card>
  );
}
Login Form

Login

Login
