import { redirect } from "next/navigation";
import { ArrowRight } from "lucide-react";
import { PixelCorner } from "@/components/pixel-decor";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";

/** Yalnızca site içi (göreli) callback'lere izin ver — open redirect kalkanı. */
function guvenliYol(deger: string | undefined, varsayilan: string): string {
  return deger && deger.startsWith("/") && !deger.startsWith("//")
    ? deger
    : varsayilan;
}

/**
 * Maildeki giriş bağlantısının indiği onay kartı. Doğrulama ucu
 * (/api/auth/magic-link/verify) GET'lendiği anda token'ı tüketir; mail
 * güvenlik tarayıcıları ve tarayıcı ön-yüklemeleri linki kullanıcıdan önce
 * açıp token'ı yakabildiği için maildeki link token'ı TÜKETMEYEN bu sayfaya
 * gelir. Verify ancak buradaki form gönderilince tetiklenir — tarayıcı botları
 * sayfayı GET'lese bile form'u göndermez, token yanmaz.
 */
export function DogrulaKarti({
  token,
  callbackURL,
  errorCallbackURL,
  newUserCallbackURL,
}: {
  token?: string;
  callbackURL?: string;
  errorCallbackURL?: string;
  newUserCallbackURL?: string;
}) {
  if (!token) redirect("/giris");

  const callback = guvenliYol(callbackURL, "/");
  const hataCallback = guvenliYol(
    errorCallbackURL,
    `/giris?hata=gecersiz-baglanti&callback=${encodeURIComponent(callback)}`,
  );
  const yeniKullaniciCallback = guvenliYol(newUserCallbackURL, callback);

  return (
    <div className="relative">
      <div className="relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
        <h1 className="font-heading text-xl font-bold">Girişini onayla</h1>
        <p className="mt-2 text-sm text-slate-600">
          Bu bağlantı senin için üretildi ve{" "}
          <span className="font-semibold">tek kullanımlık</span>. Aşağıdaki
          butona tıkladığında KolayTercih hesabına giriş yapacaksın.
        </p>
        <form
          method="GET"
          action="/api/auth/magic-link/verify"
          className="mt-6"
        >
          <input type="hidden" name="token" value={token} />
          <input type="hidden" name="callbackURL" value={callback} />
          <input
            type="hidden"
            name="errorCallbackURL"
            value={hataCallback}
          />
          <input
            type="hidden"
            name="newUserCallbackURL"
            value={yeniKullaniciCallback}
          />
          <Button
            type="submit"
            className="h-11 w-full cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
          >
            Giriş yap
            <ArrowRight className="size-4" aria-hidden />
          </Button>
        </form>
        <p className="mt-4 text-xs leading-relaxed text-slate-500">
          Bu isteği sen yapmadıysan bu sayfayı kapatabilirsin — butona
          tıklanmadığı sürece hesabında hiçbir şey değişmez.
        </p>
      </div>
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 z-10 text-primary"
      >
        <PixelCorner className="absolute -right-4 -top-4 size-9 [&_rect]:[fill-opacity:0.65]" />
        <PixelCorner className="absolute -bottom-4 -right-4 size-9 rotate-90 [&_rect]:[fill-opacity:0.65]" />
        <PixelCorner className="absolute -bottom-4 -left-4 size-9 rotate-180 [&_rect]:[fill-opacity:0.65]" />
        <PixelCorner className="absolute -left-4 -top-4 size-9 -rotate-90 [&_rect]:[fill-opacity:0.65]" />
      </div>
    </div>
  );
}

export function DogrulaKartiSkeleton() {
  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
      <Skeleton className="h-7 w-40" />
      <Skeleton className="mt-3 h-4 w-full" />
      <Skeleton className="mt-1.5 h-4 w-2/3" />
      <Skeleton className="mt-6 h-11 w-full rounded-lg" />
      <Skeleton className="mt-4 h-3 w-3/4" />
    </div>
  );
}
