"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import UpsellSection from "@/components/UpsellSection";

function ObrigadoInner() {
  const sp = useSearchParams();
  const saleId = sp.get("sale");
  const email = sp.get("email")?.toLowerCase().trim() || "";
  const [status, setStatus] = useState<"loading" | "paid" | "pending">("loading");

  useEffect(() => {
    if (!saleId || !email) {
      setStatus("paid");
      return;
    }
    let cancelled = false;
    async function check() {
      const q = new URLSearchParams({ saleId: saleId!, email });
      const res = await fetch(`/api/checkout/status?${q}`);
      const data = await res.json();
      if (!cancelled) setStatus(data.status === "paid" ? "paid" : "pending");
    }
    check();
    const iv = setInterval(check, 4000);
    return () => {
      cancelled = true;
      clearInterval(iv);
    };
  }, [saleId, email]);

  const paid = status === "paid";

  return (
    <div className="auth" style={{ gridTemplateColumns: "1fr" }}>
      <div className="auth-main">
        <div className="auth-card" style={{ textAlign: "center", maxWidth: 560, margin: "0 auto" }}>
          <div style={{ fontSize: "3rem", marginBottom: 16 }}>✓</div>
          <h1>{paid ? "Pagamento recebido!" : "Pagamento em processamento"}</h1>
          <p className="sub">
            {paid
              ? "Seu acesso será liberado no e-mail em instantes."
              : "Assim que o Pix ou cartão for confirmado, você receberá o acesso no e-mail."}
          </p>
          {saleId ? (
            <p style={{ fontSize: ".85rem", opacity: 0.55, marginTop: 12 }}>
              Pedido #{saleId}
            </p>
          ) : null}

          {paid && saleId && email ? <UpsellSection saleId={saleId} email={email} /> : null}

          <Link href="/painel/biblioteca" className="b lime" style={{ marginTop: 24, display: "inline-flex" }}>
            Ir para minha biblioteca
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function ObrigadoPage() {
  return (
    <Suspense
      fallback={
        <div className="auth" style={{ gridTemplateColumns: "1fr", padding: 48, textAlign: "center" }}>
          Carregando…
        </div>
      }
    >
      <ObrigadoInner />
    </Suspense>
  );
}