import Link from "next/link";
import { ArrowRight, Shield, LineChart, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getPlatformStatsServer } from "@/lib/api";
import { HomeNavbar } from "@/components/home-navbar";
import { Suspense } from "react";
import { AnimatedStatsSection } from "@/components/animated-stats-section";
import Image from "next/image";
import { TextTyper } from "@/components/text-typer";

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

// Format number with commas
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();

    return (
      <div className="flex flex-col min-h-screen bg-black text-white">
        <HomeNavbar />

        {/* Hero Section */}  
        <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
          <div className="space-y-4 max-w-3xl">
            <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
              Streamlined E-commerce <span className="text-[#D53F8C]">Management</span>
            </h1>
            <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
              Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-4">
            <Link href="/dashboard">
              <Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
                Go to Dashboard
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
            <Link href="/auth/register">
              <Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
                Create Account
              </Button>
            </Link>
          </div>
        </section>

        {/* Statistics Section */}
        <section className="py-16 px-6 md:px-10 bg-black">
          <div className="max-w-6xl mx-auto">
            <Suspense fallback={<div className="text-center">Loading statistics...</div>}>
              <AnimatedStatsSection stats={stats} />
            </Suspense>
          </div>
        </section>

        {/* Features Section */}
        <section id="features" className="py-20 px-6 md:px-10 bg-black">
          <div className="max-w-6xl mx-auto space-y-10">
            <div className="text-center space-y-4">
              <h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
              <p className="text-gray-400 max-w-2xl mx-auto">
                Everything you need to manage orders, track metrics, and grow your business.
              </p>
            </div>
            <div className="grid md:grid-cols-3 gap-6">
              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
                <div className="mb-4">
                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
                    <Shield className="h-6 w-6 text-[#D53F8C]" />
                  </div>
                  <h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3>
                </div>
                <p className="text-gray-400 text-sm">
                  Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
                </p>
              </div>
              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
                <div className="mb-4">
                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
                    <LineChart className="h-6 w-6 text-[#D53F8C]" />
                  </div>
                  <h3 className="mt-4 text-xl font-semibold text-white">Order Tracking</h3>
                </div>
                <p className="text-gray-400 text-sm">
                  Manage and track orders from receipt to delivery with our intuitive order management system.
                </p>
              </div>
              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
                <div className="mb-4">
                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
                    <Zap className="h-6 w-6 text-[#D53F8C]" />
                  </div>
                  <h3 className="mt-4 text-xl font-semibold text-white">Fast Performance</h3>
                </div>
                <p className="text-gray-400 text-sm">
                  Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        <section id="benefits" className="py-20 px-6 md:px-10 bg-black">
          <div className="max-w-6xl mx-auto space-y-10">
            <div className="text-center space-y-4">
              <h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2>
              <p className="text-gray-400 max-w-2xl mx-auto">
                Our platform is designed to make e-commerce management simple and efficient.
              </p>
            </div>
            <div className="grid md:grid-cols-2 gap-10">
              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
                <h3 className="text-xl font-semibold text-white">Centralized Management</h3>
                <p className="text-gray-400">
                  Manage all aspects of your e-commerce business from a single dashboard.
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
                <h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
                <p className="text-gray-400">
                  Gain insights into your business with detailed analytics and reporting tools.
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
                <h3 className="text-xl font-semibold text-white">Customer Management</h3>
                <p className="text-gray-400">
                  Keep track of customer information and purchase history to provide better service.
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
                <h3 className="text-xl font-semibold text-white">Inventory Control</h3>
                <p className="text-gray-400">
                  Manage your inventory with precision to avoid stock-outs and overstocking.
                </p>
              </div>
            </div>
            <div className="flex justify-center mt-10">
              <Link href="/dashboard">
                <Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Start Now</Button>
              </Link>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black">
          <div className="max-w-6xl mx-auto text-center">
            <h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
            <p className="text-sm text-gray-400">
              The complete e-commerce management solution for modern businesses.
            </p>
          </div>
          <div className="mt-10 text-center text-sm text-gray-500">
            <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
          </div>
        </footer>
      </div>
    );
  } catch (error) {
    console.error(error);
    return <div>Error loading page</div>;
  }
}