import Link from "next/link";
import { ArrowRight, Shield, LineChart, Zap, Package, Users, CreditCard } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { fetchPlatformStats } from "@/lib/stats-service";
import { HomeNavbar } from "@/components/home-navbar";
import { Suspense } from "react";

// Format number with commas
function formatNumber(num: number): string {
  return new Intl.NumberFormat().format(Math.round(num));
}

// Format currency
function formatCurrency(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() {
  const stats = await fetchPlatformStats();

  return (
    <div className="flex flex-col min-h-screen bg-black text-white">
      {/* Header Navigation */}
      <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-[#FF7A00]">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-[#FF7A00] hover:bg-[#E86A00] 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>}>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
                <Package className="h-12 w-12 text-[#FF7A00] mb-4" />
                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.orders.completed)}+</div>
                <div className="text-xl font-semibold text-white mb-1">Orders Processed</div>
                <p className="text-sm text-gray-400">Successfully delivered to customers around the world</p>
              </div>
              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
                <Users className="h-12 w-12 text-[#FF7A00] mb-4" />
                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.vendors.total)}+</div>
                <div className="text-xl font-semibold text-white mb-1">Registered Vendors</div>
                <p className="text-sm text-gray-400">Trusted merchants selling on our platform</p>
              </div>
              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
                <CreditCard className="h-12 w-12 text-[#FF7A00] mb-4" />
                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatCurrency(stats.transactions.volume)}</div>
                <div className="text-xl font-semibold text-white mb-1">Transaction Volume</div>
                <p className="text-sm text-gray-400">Securely processed by our platform</p>
              </div>
            </div>
          </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-[#FF7A00]" />
                </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-[#FF7A00]" />
                </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-[#FF7A00]" />
                </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-[#FF7A00] hover:bg-[#E86A00] 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>
  );
}