"use client";

import { useLayoutEffect, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, Loader2 } from "lucide-react";
import { toast } from "@/components/ui/bildirim";
import { Button } from "@/components/ui/button";
import { olay } from "@/lib/analitik";
import { baslatOdeme } from "../odeme-actions";

const BAGLANTI_HATASI =
  "Ödeme başlatılamadı; kartından çekim yapılmadı. Bağlantını kontrol edip tekrar dener misin?";

export function SatinAlForm({
  urun,
  label,
  vurgulu = false,
}: {
  urun: "paket" | "topup";
  label: string;
  vurgulu?: boolean;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  // Action bitti, /odeme'ye geçiş sürüyor: buton o arada yeniden açılıp ikinci
  // bir sipariş başlatmasın.
  const [gidiyor, setGidiyor] = useState(false);
  const mesgul = pending || gidiyor;

  // cacheComponents açıkken /paket, /odeme'ye geçince unmount olmaz; gizli
  // <Activity> içinde state'iyle saklanır. Geri dönen kullanıcı kilitli değil
  // taze bir buton bulsun diye sayfa gizlenirken sıfırlanır (layout effect
  // cleanup'ı Activity gizlenince çalışır).
  useLayoutEffect(() => {
    return () => setGidiyor(false);
  }, []);

  // Yönlendirme client'ta: action `redirect()` fırlatmaz, hedefi döndürür
  // (nedeni odeme-actions.ts'te). Hata toast'ı da burada, effect'te değil —
  // effect'ler Activity geri açılınca yeniden koştuğu için eski hatayı
  // tekrar gösteriyordu.
  function gonder() {
    olay("odeme_baslatildi", { urun });
    startTransition(async () => {
      let sonuc;
      try {
        sonuc = await baslatOdeme(urun);
      } catch {
        toast.error(BAGLANTI_HATASI);
        return;
      }
      if ("error" in sonuc) {
        toast.error(sonuc.error);
        return;
      }
      setGidiyor(true);
      router.push(sonuc.yonlendir);
    });
  }

  return (
    <form action={gonder}>
      <Button
        type="submit"
        disabled={mesgul}
        aria-busy={mesgul}
        className={
          vurgulu
            ? "h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
            : "h-11 w-full cursor-pointer"
        }
        variant={vurgulu ? "default" : "outline"}
      >
        {/* Tıklamada metin değişmez (dar top-up kartında taşıyordu); geri
            bildirim aynı boyuttaki ikon takasıyla verilir: ok → dönen halka.
            Çift gönderim `disabled` ile engellenir. */}
        {label}
        {mesgul ? (
          <Loader2 className="size-4 animate-spin" aria-hidden />
        ) : (
          <ArrowRight className="size-4" aria-hidden />
        )}
      </Button>
    </form>
  );
}