"use client";

import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function MagicLinkForm() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPending(true);
    setError(null);
    const email = String(new FormData(e.currentTarget).get("email"));
    const result = await authClient.signIn.magicLink({ email, callbackURL: "/dashboard" });
    setPending(false);
    if (result.error) return setError(result.error.message ?? "Envoi impossible");
    setSent(true);
  }

  if (sent) return <p className="text-sm">Lien envoyé. Vérifiez votre boîte mail.</p>;

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="magic-email">Email</Label>
        <Input id="magic-email" name="email" type="email" autoComplete="email" required />
      </div>
      {error ? <p className="text-destructive text-sm">{error}</p> : null}
      <Button type="submit" variant="outline" disabled={pending} className="w-full">
        Recevoir un lien de connexion
      </Button>
    </form>
  );
}