kolaytercih/src/app/giris/giris-form.tsx

"use client";

import { useState } from "react";
import { Mail } from "lucide-react";
import { toast } from "sonner";
import { authClient } from "@/lib/auth-client";
import { olay } from "@/lib/analitik";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

function GoogleIcon() {
  return (
    <svg viewBox="0 0 24 24" className="size-4" aria-hidden>
      <path
        fill="#4285F4"
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"
      />
      <path
        fill="#34A853"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
      />
      <path
        fill="#FBBC05"
        d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z"
      />
      <path
        fill="#EA4335"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06L5.84 9.9C6.71 7.31 9.14 5.38 12 5.38Z"
      />
    </svg>
  );
}

export function GirisForm({ callbackURL }: { callbackURL: string }) {
  const [email, setEmail] = useState("");
  const [busy, setBusy] = useState<"google" | "email" | null>(null);
  const [sent, setSent] = useState(false);
  // Yeniden gönderim arası bekleme (sn) — istemeden spam'lenmesin
  const [bekleme, setBekleme] = useState(0);

  function geriSayimBaslat() {
    setBekleme(30);
    const sayac = setInterval(() => {
      setBekleme((s) => {
        if (s <= 1) {
          clearInterval(sayac);
          return 0;
        }
        return s - 1;
      });
    }, 1000);
  }

  async function googleIleGiris() {
    setBusy("google");
    olay("giris_denendi", { yontem: "google" });
    const { error } = await authClient.signIn.social({
      provider: "google",
      callbackURL,
    });
    if (error) {
      toast.error("Google ile giriş başarısız. Tekrar dener misin?");
      setBusy(null);
    }
  }

  async function linkGonder(e?: React.FormEvent) {
    e?.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(email)) {
      toast.error("Geçerli bir e-posta adresi gir.");
      return;
    }
    setBusy("email");
    const { error } = await authClient.signIn.magicLink({
      email,
      callbackURL,
      // Geçersiz/süresi dolmuş token'da kullanıcı ham ?error=INVALID_TOKEN
      // parametresiyle baş başa kalmasın: giriş sayfası bu değeri dostça bir
      // mesaja çevirir, callback korunur (bkz. src/app/giris/page.tsx).
      errorCallbackURL: `/giris?hata=gecersiz-baglanti&callback=${encodeURIComponent(callbackURL)}`,
    });
    setBusy(null);
    if (error) {
      toast.error("Bağlantı gönderilemedi. Tekrar dener misin?");
      return;
    }
    setSent(true);
    geriSayimBaslat();
    olay("giris_denendi", { yontem: "eposta" });
  }

  if (sent) {
    return (
      <div className="mt-6 space-y-3">
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">
          <p className="font-semibold">Bağlantı gönderildi 📬</p>
          <p className="mt-1">
            <span className="font-medium">{email}</span> adresine bir giriş
            bağlantısı gönderdik. Gelen kutunu (ve spam klasörünü) kontrol et —
            bağlantı 15 dakika geçerli.
          </p>
        </div>
        <div className="flex items-center justify-center gap-4 text-sm">
          <button
            type="button"
            onClick={() => linkGonder()}
            disabled={busy !== null || bekleme > 0}
            className="cursor-pointer font-medium text-primary underline-offset-2 hover:underline disabled:cursor-default disabled:text-slate-400 disabled:no-underline"
          >
            {busy === "email"
              ? "Gönderiliyor…"
              : bekleme > 0
                ? `Yeniden gönder (${bekleme})`
                : "Yeniden gönder"}
          </button>
          <button
            type="button"
            onClick={() => setSent(false)}
            className="cursor-pointer text-slate-500 underline-offset-2 hover:underline"
          >
            E-postayı düzelt
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="mt-6 space-y-4">
      <Button
        variant="outline"
        className="h-11 w-full cursor-pointer"
        onClick={googleIleGiris}
        disabled={busy !== null}
      >
        <GoogleIcon />
        {busy === "google" ? "Yönlendiriliyorsun…" : "Google ile devam et"}
      </Button>

      <div className="flex items-center gap-3 text-xs text-slate-400">
        <div className="h-px flex-1 bg-slate-200" />
        veya
        <div className="h-px flex-1 bg-slate-200" />
      </div>

      <form onSubmit={linkGonder} className="space-y-3">
        <Input
          type="email"
          inputMode="email"
          autoComplete="email"
          placeholder="E-posta adresin"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          disabled={busy !== null}
          className="h-11"
        />
        <Button
          type="submit"
          className="h-11 w-full cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
          disabled={busy !== null}
        >
          <Mail className="size-4" aria-hidden />
          {busy === "email" ? "Gönderiliyor…" : "Giriş bağlantısı gönder"}
        </Button>
      </form>
    </div>
  );
}