import { useEffect, useState } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";
import { CheckCircle, Mail, LayoutDashboard, Sparkles } from "lucide-react";
import Footer from "../components/Footer";

export default function SuccessPage() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    // O Stripe passa 'session_id' automaticamente quando redireciona,
    // Ou podemos checar um parâmetro manual como '?status=approved'
    const sessionId = searchParams.get("session_id");
    const status = searchParams.get("status");

    if (sessionId || status === "approved") {
      setIsValid(true);
      // Fire Purchase parameter for Meta Pixel
      if (typeof window !== 'undefined' && 'fbq' in window) {
        (window as any).fbq('track', 'Purchase', {
          value: 9.99,
          currency: 'BRL'
        });
      }
    } else {
      // Se não tiver nenhum parâmetro válido, joga de volta pra home
      navigate("/", { replace: true });
    }
  }, [searchParams, navigate]);

  if (!isValid) {
    return null; // Retorna nulo enquanto valida para não piscar a tela
  }

  return (
    <div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col">
      <main className="flex-1 py-12 px-4 md:px-6 flex items-center justify-center">
        <div className="max-w-5xl mx-auto w-full">
          {/* Success Banner */}
          <section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100">
            <CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" />
            <h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
              Pagamento Confirmado!
            </h1>
            <p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto mb-12">
              Tudo certo com o seu pedido! Preparamos tudo para você começar a criar a festa dos sonhos em instantes.
            </p>

            <div className="grid md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto">
              <div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
                <div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-pink-500 mb-4">
                  <Mail className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-indigo-950 text-lg mb-2">1. Fique de olho no e-mail</h3>
                <p className="text-indigo-700/80 text-sm leading-relaxed">
                  Em até 5 minutos, você receberá um e-mail de confirmação com a nota do seu pedido e todos os detalhes.
                </p>
              </div>

              <div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
                <div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-violet-500 mb-4">
                  <LayoutDashboard className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-indigo-950 text-lg mb-2">2. Acesse o Painel</h3>
                <p className="text-indigo-700/80 text-sm leading-relaxed">
                  No mesmo e-mail, enviaremos um <strong>link de acesso exclusivo</strong> direto para o nosso Painel de Criação Mágica. Não se preocupe em criar conta!
                </p>
              </div>

              <div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
                <div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-amber-500 mb-4">
                  <Sparkles className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-indigo-950 text-lg mb-2">3. Crie a Magia</h3>
                <p className="text-indigo-700/80 text-sm leading-relaxed">
                  Dentro do painel, siga as instruções rápidas, faça o upload da foto e deixe a inteligência artificial transformar tudo em um kit inesquecível!
                </p>
              </div>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
}