import { useEffect } from "react";
import { CheckCircle, ArrowRight } from "lucide-react";
import { Link, useSearchParams } from "react-router-dom";
import Navbar from "@/components/Navbar";
import chatskuLogo from "@/assets/chatsku-logo.png";

declare global {
  interface Window {
    gtag?: (...args: unknown[]) => void;
    fbq?: (...args: unknown[]) => void;
  }
}

const SignupThankYou = () => {
  const [searchParams] = useSearchParams();
  const leadId = searchParams.get("lead_id");

  useEffect(() => {
    // GA4 sign_up event
    window.gtag?.("event", "sign_up", {
      method: "revenutize",
      ...(leadId && { lead_id: leadId }),
    });

    // Meta Pixel Lead event
    window.fbq?.("track", "Lead", {
      ...(leadId && { external_id: leadId, lead_id: leadId }),
    });
  }, [leadId]);
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main className="pt-16 min-h-screen flex items-center justify-center px-4">
        <div className="max-w-lg w-full text-center">
          <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
            <CheckCircle className="w-8 h-8 text-primary" />
          </div>
          <h1 className="font-display font-bold text-3xl sm:text-4xl text-foreground mb-3">
            You're all set!
          </h1>
          <p className="text-muted-foreground text-lg mb-8">
            Thanks for signing up. We're getting your store ready — check your inbox for next steps.
          </p>
          <div className="p-6 rounded-xl bg-card border border-border mb-8">
            <div className="flex items-center justify-center gap-2 mb-3">
              <img src={chatskuLogo} alt="ChatSKU" className="h-7" />
            </div>
            <p className="text-sm text-muted-foreground">
              Your AI-powered catalog is being set up. You'll receive an email with your login credentials and onboarding guide shortly.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              to="/"
              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors"
            >
              Back to Home
              <ArrowRight className="w-4 h-4" />
            </Link>
            <Link
              to="/demo"
              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg border border-border text-foreground font-medium hover:bg-accent transition-colors"
            >
              Explore the Demo
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
};

export default SignupThankYou;
