import { getPlatformStatsServer } from "@/lib/server-api";
import { HomeNavbar } from "@/components/home-navbar";
import { Suspense } from "react";
import { Shield, LineChart, Zap, ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { AnimatedStatsSection } from "@/components/animated-stats-section";
import { isDecember } from "@/lib/utils/christmas";
import { MotionWrapper } from "@/components/ui/motion-wrapper";

export const dynamic = 'force-dynamic';

const PY_20 = 20;
const PY_32 = 32;
const PX_6 = 6;
const PX_10 = 10;

function formatNumberValue(num: number): string {
  return new Intl.NumberFormat().format(Math.round(num));
}

// Format currency
function formatCurrencyValue(amount: number): string {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    maximumFractionDigits: 0
  }).format(amount);
}

// This is a server component
export default async function Home() {
  try {
    const stats = await getPlatformStatsServer();
    const isDec = isDecember();

    return (
      <div className={`flex flex-col min-h-screen bg-black text-white ${isDec ? 'christmas-theme' : ''}`}>
        <div className={`absolute inset-0 bg-gradient-to-br pointer-events-none scale-100 ${isDec
          ? 'from-red-500/10 via-green-500/5 to-transparent'
          : 'from-[#D53F8C]/10 via-[#D53F8C]/3 to-transparent'
          }`} />
        <HomeNavbar />

        {/* Hero Section */}
        <section className="relative overflow-hidden">
          <div className="relative flex flex-col items-center px-4 py-20 md:py-32 mx-auto max-w-7xl">
            <div className="flex flex-col items-center text-center space-y-6 max-w-3xl">
              <div className={`inline-flex items-center px-4 py-2 rounded-full border mb-4 ${isDec
                ? 'bg-red-500/10 border-red-500/20'
                : 'bg-[#D53F8C]/10 border-[#D53F8C]/20'
                }`}>
                <Sparkles className={`h-4 w-4 mr-2 ${isDec ? 'text-red-400' : 'text-[#D53F8C]'}`} />
                <span className={`text-sm font-medium ${isDec ? 'text-red-400' : 'text-[#D53F8C]'}`}>
                  Secure Crypto Payments
                </span>
              </div>
              <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
                The Future of <span className={isDec ? 'text-red-400' : 'text-[#D53F8C]'}>E-commerce</span> Management
              </h1>
              <p className="text-lg md:text-xl text-zinc-400 max-w-2xl">
                {isDec
                  ? 'Spread joy this holiday season with our all-in-one platform. Secure payments, order tracking, and analytics wrapped up in one beautiful package. 🎄'
                  : 'Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.'
                }
              </p>
              <div className="flex flex-col sm:flex-row gap-4 mt-4">
                <Link href="/dashboard">
                  <Button
                    size="lg"
                    className={`gap-2 text-white border-0 h-12 px-8 ${isDec
                      ? 'bg-gradient-to-r from-red-500 to-green-500 hover:from-red-600 hover:to-green-600'
                      : 'bg-[#D53F8C] hover:bg-[#B83280]'
                      }`}
                  >
                    Get Started
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </section>

        {/* Features Grid */}
        <section className="relative py-20 px-4">
          <div className="max-w-7xl mx-auto space-y-20">
            <MotionWrapper>
              <div className="grid md:grid-cols-3 gap-6">
                {[
                  {
                    icon: Shield,
                    title: "Secure Payments",
                    description: "Built-in cryptocurrency support with maximum privacy and security for your transactions."
                  },
                  {
                    icon: LineChart,
                    title: "Real-time Analytics",
                    description: "Track your business performance with detailed insights and reporting tools."
                  },
                  {
                    icon: Zap,
                    title: "Lightning Fast",
                    description: "Optimized for speed with real-time updates and instant notifications."
                  }
                ].map((feature, i) => {
                  const christmasColors = ['from-red-500/5', 'from-green-500/5', 'from-yellow-500/5'];
                  const christmasBorders = ['border-red-500/30', 'border-green-500/30', 'border-yellow-500/30'];
                  const christmasIcons = ['text-red-400', 'text-green-400', 'text-yellow-400'];
                  const christmasBgs = ['bg-red-500/10', 'bg-green-500/10', 'bg-yellow-500/10'];

                  return (
                    <div
                      key={i}
                      className={`group relative overflow-hidden rounded-xl bg-gradient-to-b p-6 border transition-all duration-300 hover:scale-[1.02] hover:shadow-lg ${isDec
                        ? `from-zinc-800/30 to-transparent ${christmasBorders[i % 3]}`
                        : 'from-zinc-800/30 to-transparent border-zinc-800'
                        }`}
                    >
                      <div
                        className={`absolute inset-0 bg-gradient-to-b to-transparent opacity-0 group-hover:opacity-100 transition-opacity ${isDec ? christmasColors[i % 3] : 'from-[#D53F8C]/5'
                          }`}
                      />
                      <div className="relative">
                        <div className={`h-12 w-12 flex items-center justify-center rounded-lg mb-4 ${isDec ? christmasBgs[i % 3] : 'bg-[#D53F8C]/10'
                          }`}>
                          <feature.icon className={`h-6 w-6 ${isDec ? christmasIcons[i % 3] : 'text-[#D53F8C]'}`} />
                        </div>
                        <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
                        <p className="text-sm text-zinc-400">{feature.description}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </MotionWrapper>

            {/* Stats Section */}
            <div className="relative">
              <AnimatedStatsSection stats={stats as any} />
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="relative py-12 px-4 mt-auto">
          <div className="max-w-7xl mx-auto flex flex-col items-center">
            {isDec && (
              <div className="flex items-center gap-2 mb-4 text-red-400 animate-twinkle">
                <span className="text-xl">🎄</span>
                <span className="text-sm font-medium">Happy Holidays from da ember team!</span>
                <span className="text-xl">🎄</span>
              </div>
            )}
            <div className="text-sm text-zinc-500">
              © {new Date().getFullYear()} Ember. All rights reserved.
            </div>
          </div>
        </footer>
      </div>
    );
  } catch (error) {
    console.error(error);
    return <div>Error loading page</div>;
  }
}