import Header from "@/components/Header";
import { DonationCard } from "@/components/donation-card";
import { BlurFade } from "@/components/ui/blur-fade";
import { NumberTicker } from "@/components/ui/number-ticker";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Heart, Server, Code, Shield, AlertTriangle } from "lucide-react";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { ShareButton } from "@/components/share-button";

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

export default async function SupportPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "donation" });

  // Dados mockados para demonstração
  const stats = {
    totalSupporters: 1247,
    totalRaised: 18542,
    monthsOnline: 12,
    uptime: 99.8,
  };

  const transparencyData = [
    {
      icon: Server,
      title: t("transparency.hosting"),
      percentage: 40,
      description: t("transparency.hostingDesc"),
      color: "text-blue-500",
    },
    {
      icon: Code,
      title: t("transparency.development"),
      percentage: 35,
      description: t("transparency.developmentDesc"),
      color: "text-green-500",
    },
    {
      icon: Shield,
      title: t("transparency.support"),
      percentage: 15,
      description: t("transparency.supportDesc"),
      color: "text-purple-500",
    },
    {
      icon: AlertTriangle,
      title: t("transparency.emergency"),
      percentage: 10,
      description: t("transparency.emergencyDesc"),
      color: "text-orange-500",
    },
  ];

  const faqItems = [
    {
      question: t("faq.q1"),
      answer: t("faq.a1"),
    },
    {
      question: t("faq.q2"),
      answer: t("faq.a2"),
    },
    {
      question: t("faq.q3"),
      answer: t("faq.a3"),
    },
    {
      question: t("faq.q4"),
      answer: t("faq.a4"),
    },
    {
      question: t("faq.q5"),
      answer: t("faq.a5"),
    },
  ];

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

      <div className="container mx-auto px-4 py-20">
        {/* Hero Section */}
        <BlurFade delay={0.1}>
          <div className="text-center mb-16">
            <div className="flex justify-center mb-6">
              <div className="p-4 rounded-full bg-primary/10 border border-primary/20">
                <Heart className="w-12 h-12 text-primary" />
              </div>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              {t("title")}
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              {t("subtitle")}
            </p>
          </div>
        </BlurFade>

        {/* História & Missão */}
        <BlurFade delay={0.2}>
          <div className="mb-20">
            <h2 className="text-3xl font-bold text-center mb-8">
              {t("story.title")}
            </h2>
            <div className="max-w-4xl mx-auto">
              <div className="p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg">
                <p className="text-lg leading-relaxed text-muted-foreground whitespace-pre-line">
                  {t("story.text")}
                </p>
              </div>
            </div>
          </div>
        </BlurFade>

        {/* Transparência */}
        <BlurFade delay={0.3}>
          <div className="mb-20">
            <h2 className="text-3xl font-bold text-center mb-8">
              {t("transparency.title")}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
              {transparencyData.map((item, idx) => (
                <div
                  key={idx}
                  className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-sm"
                >
                  <div className="flex items-start gap-4">
                    <div className="p-3 rounded-lg bg-muted/50">
                      <item.icon className={`w-6 h-6 ${item.color}`} />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold">{item.title}</h3>
                        <Badge variant="secondary">{item.percentage}%</Badge>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {item.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </BlurFade>

        {/* Prova Social */}
        <BlurFade delay={0.4}>
          <div className="mb-20">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              <div>
                <p className="text-3xl font-bold text-primary mb-2">
                  <NumberTicker value={stats.totalSupporters} />
                </p>
                <p className="text-sm text-muted-foreground">
                  {t("social.supporters")}
                </p>
              </div>
              <div>
                <p className="text-3xl font-bold text-primary mb-2">
                  R$ <NumberTicker value={stats.totalRaised} />
                </p>
                <p className="text-sm text-muted-foreground">
                  {t("social.raised")}
                </p>
              </div>
              <div>
                <p className="text-3xl font-bold text-primary mb-2">
                  <NumberTicker value={stats.monthsOnline} />
                </p>
                <p className="text-sm text-muted-foreground">
                  {t("social.months")}
                </p>
              </div>
              <div>
                <p className="text-3xl font-bold text-primary mb-2">
                  <NumberTicker value={stats.uptime} />%
                </p>
                <p className="text-sm text-muted-foreground">
                  {t("social.uptime")}
                </p>
              </div>
            </div>
          </div>
        </BlurFade>

        {/* Opções de Doação */}
        <BlurFade delay={0.5}>
          <div className="mb-20">
            <h2 className="text-3xl font-bold text-center mb-8">
              Escolha como apoiar
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
              <DonationCard
                id="coffee"
                amount={5}
                title={t("tiers.coffee.title")}
                description={t("tiers.coffee.description")}
                icon="coffee"
                badge={t("tiers.coffee.badge")}
              />
              <DonationCard
                id="lunch"
                amount={25}
                title={t("tiers.lunch.title")}
                description={t("tiers.lunch.description")}
                icon="pizza"
                badge={t("tiers.lunch.badge")}
                highlighted
              />
              <DonationCard
                id="custom"
                title={t("tiers.custom.title")}
                description={t("tiers.custom.description")}
                icon="heart"
              />
            </div>
          </div>
        </BlurFade>

        {/* FAQ */}
        <BlurFade delay={0.6}>
          <div className="mb-20">
            <h2 className="text-3xl font-bold text-center mb-8">
              {t("faq.title")}
            </h2>
            <Accordion type="single" collapsible className="max-w-3xl mx-auto">
              {faqItems.map((item, idx) => (
                <AccordionItem key={idx} value={`item-${idx}`}>
                  <AccordionTrigger className="text-left">
                    {item.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-muted-foreground">
                    {item.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </BlurFade>

        {/* CTA Final */}
        <BlurFade delay={0.7}>
          <div className="text-center">
            <div className="p-12 rounded-2xl border border-border/50 bg-card backdrop-blur-sm">
              <h3 className="text-3xl font-bold mb-4">{t("cta.final")}</h3>
              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
                {t("cta.subtitle")}
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" className="bg-primary hover:bg-primary/90">
                  {t("cta.support")}
                </Button>
                <ShareButton />
              </div>
            </div>
          </div>
        </BlurFade>
      </div>
    </div>
  );
}