"use client";

import confetti from "canvas-confetti";
import { Heart, Home, Share2 } from "lucide-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import Header from "@/components/Header";
import { BlurFade } from "@/components/ui/blur-fade";
import { Button } from "@/components/ui/button";

export default function ThankYouPage() {
  const params = useParams();
  const locale = params.locale as string;

  // Confetti ao carregar página
  useEffect(() => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });
  }, []);

  return (
    <div className="min-h-screen">
      <Header />

      <div className="container mx-auto px-4 py-20">
        <BlurFade delay={0.1}>
          <div className="max-w-2xl mx-auto text-center">
            {/* Ícone de sucesso animado */}
            <div className="flex justify-center mb-8">
              <div className="relative">
                <div className="absolute inset-0 bg-green-500/20 rounded-full animate-ping" />
                <div className="relative p-6 rounded-full bg-green-500/10 border-4 border-green-500">
                  <Heart
                    className="w-20 h-20 text-green-500"
                    fill="currentColor"
                  />
                </div>
              </div>
            </div>

            {/* Título e subtítulo */}
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Muito Obrigado! 🎉
            </h1>
            <p className="text-xl text-muted-foreground mb-8">
              Sua doação foi confirmada com sucesso!
            </p>

            {/* Mensagem de agradecimento */}
            <div className="p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg mb-8">
              <p className="text-lg leading-relaxed text-muted-foreground">
                Sua generosidade nos ajuda a continuar desenvolvendo e mantendo
                o Tibia Trade. Cada contribuição faz toda a diferença para nossa
                comunidade!
              </p>
            </div>

            {/* Botões de ação */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href={`/${locale}`}>
                <Button size="lg" className="w-full sm:w-auto">
                  <Home className="mr-2 h-5 w-5" />
                  Voltar ao Início
                </Button>
              </Link>

              <Link href={`/${locale}/apoiar`}>
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full sm:w-auto"
                >
                  <Heart className="mr-2 h-5 w-5" />
                  Fazer Outra Doação
                </Button>
              </Link>

              <Button
                size="lg"
                variant="secondary"
                className="w-full sm:w-auto"
                onClick={() => {
                  if (typeof navigator !== "undefined" && navigator.share) {
                    navigator.share({
                      title: "Tibia Trade",
                      text: "Acabei de fazer uma doação para o Tibia Trade! Ajude também!",
                      url: window.location.origin,
                    });
                  } else if (
                    typeof navigator !== "undefined" &&
                    navigator.clipboard
                  ) {
                    navigator.clipboard.writeText(window.location.origin);
                    alert("Link copiado para a área de transferência!");
                  }
                }}
              >
                <Share2 className="mr-2 h-5 w-5" />
                Compartilhar
              </Button>
            </div>

            {/* Informação adicional */}
            <div className="mt-12 p-6 rounded-xl bg-muted/30 border border-border/30">
              <p className="text-sm text-muted-foreground">
                💡 <strong>Dica:</strong> Compartilhe nossa plataforma com seus
                amigos! Quanto mais pessoas usarem o Tibia Trade, mais forte
                nossa comunidade fica.
              </p>
            </div>
          </div>
        </BlurFade>
      </div>
    </div>
  );
}