import * as React from "react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export interface AuthFormProps
  extends Omit<React.ComponentProps<typeof Card>, "onSubmit"> {
  title?: string
  description?: string
  submitLabel?: string
  /** Receives the entered email + password. */
  onSubmit?: (data: { email: string; password: string }) => void
}

/**
 * AuthForm — sign-in card composed from Card + Input + Checkbox +
 * Button + Separator. Self-contained controlled inputs.
 */
export function AuthForm({
  title = "Welcome back",
  description = "Sign in to your account to continue",
  submitLabel = "Sign in",
  onSubmit,
  className,
  ...props
}: AuthFormProps) {
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")

  return (
    <Card className={cn("w-full max-w-sm", className)} {...props}>
      <CardHeader className="text-center">
        <CardTitle className="text-xl">{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <form
          className="grid gap-4"
          onSubmit={(e) => {
            e.preventDefault()
            onSubmit?.({ email, password })
          }}
        >
          <div className="grid gap-2">
            <label htmlFor="auth-email" className="text-sm font-medium">
              Email
            </label>
            <Input
              id="auth-email"
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              autoComplete="email"
            />
          </div>
          <div className="grid gap-2">
            <div className="flex items-center justify-between">
              <label htmlFor="auth-pass" className="text-sm font-medium">
                Password
              </label>
              <a
                href="#"
                className="text-muted-foreground text-xs underline-offset-4 hover:underline"
              >
                Forgot?
              </a>
            </div>
            <Input
              id="auth-pass"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete="current-password"
            />
          </div>
          <label className="flex items-center gap-2 text-sm">
            <Checkbox id="auth-remember" defaultChecked />
            Remember me for 30 days
          </label>
          <Button type="submit" className="w-full">
            {submitLabel}
          </Button>
        </form>
        <div className="my-4 flex items-center gap-3">
          <Separator className="flex-1" />
          <span className="text-muted-foreground text-xs">OR</span>
          <Separator className="flex-1" />
        </div>
        <Button variant="outline" className="w-full">
          Continue with GitHub
        </Button>
      </CardContent>
      <CardFooter className="justify-center">
        <span className="text-muted-foreground text-sm">
          No account?{" "}
          <a href="#" className="text-foreground font-medium underline-offset-4 hover:underline">
            Sign up
          </a>
        </span>
      </CardFooter>
    </Card>
  )
}