import Header from "@/components/Header";
import { Button } from "@/components/ui/button";
import { BlurFade } from "@/components/ui/blur-fade";
import { Heart, Share2, Home } from "lucide-react";
import { getTranslations } from "next-intl/server";
import Link from "next/link";

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
  return {
    title: t("title"),
    description: t("subtitle"),
  };
}

export default async function ThankYouPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const t = await getTranslations({ locale, namespace: "donation.thankYou" });

  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 coração animado */}
            <div className="flex justify-center mb-8">
              <div className="p-6 rounded-full bg-primary/10 border border-primary/20">
                <Heart className="w-16 h-16 text-primary animate-pulse" />
              </div>
            </div>

            {/* Título e subtítulo */}
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              {t("title")}
            </h1>
            <p className="text-xl text-muted-foreground mb-8">
              {t("subtitle")}
            </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">
                {t("message")}
              </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" />
                  {t("back")}
                </Button>
              </Link>

              <Button
                size="lg"
                variant="outline"
                className="w-full sm:w-auto"
                onClick={() => {
                  if (navigator.share) {
                    navigator.share({
                      title: "Tibia Trade Pagodera",
                      text: "Conheça o marketplace mais seguro para negociar itens no servidor Pagodera!",
                      url: window.location.origin,
                    });
                  } else {
                    // Fallback para copiar link
                    navigator.clipboard.writeText(window.location.origin);
                    alert("Link copiado para a área de transferência!");
                  }
                }}
              >
                <Share2 className="mr-2 h-5 w-5" />
                {t("share")}
              </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 Pagodera, mais
                forte nossa comunidade fica.
              </p>
            </div>
          </div>
        </BlurFade>
      </div>
    </div>
  );
}