import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { getProducts, getCategories } from '@/lib/db';
import { ProductCard } from '@/components/ProductCard';
import type { Product, Category } from '@/types';

export default async function HomePage() {
  let featured: Product[] = [];
  let categories: Category[] = [];

  try {
    featured = await getProducts({
      status: 'active',
      featured: true,
      limit: 8,
    });

    categories = await getCategories();
  } catch (err) {
    console.error('Homepage DB error:', err);
  }

  return (
    <>
      <section className="bg-muted/50 py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid items-center gap-10 md:grid-cols-2">
            <div>
              <h1 className="text-4xl font-extrabold tracking-tight md:text-6xl">
                Quality Electronics & Accessories
              </h1>
              <p className="mt-4 text-lg text-muted-foreground">
                Shop the latest phones, laptops, smart gadgets, and accessories
                at the best prices in Kenya.
              </p>
              <Link
                href="/products"
                className="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
              >
                Shop now
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
            <div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-muted">
              <Image
                src="/placeholder.svg"
                alt="Electronics"
                fill
                className="object-cover"
                priority
              />
            </div>
          </div>
        </div>
      </section>

      <section className="container mx-auto px-4 py-14">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold">Featured Products</h2>
          <Link
            href="/products"
            className="text-sm font-medium text-primary hover:underline"
          >
            View all
          </Link>
        </div>

        {featured.length > 0 ? (
          <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {featured.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        ) : (
          <div className="mt-6 rounded-xl border bg-card p-8 text-center text-muted-foreground">
            No featured products yet. Add some from the admin panel.
          </div>
        )}
      </section>

      <section className="bg-muted/30 py-14">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold">Shop by Category</h2>
          <div className="mt-6 grid gap-4 sm:grid-cols-2 md:grid-cols-4">
            {categories.map((c) => (
              <Link
                key={c.id}
                href={`/products?category=${c.slug}`}
                className="rounded-xl border bg-card p-6 transition-shadow hover:shadow-md"
              >
                <h3 className="font-semibold">{c.name}</h3>
                <p className="text-sm text-muted-foreground">
                  {c.productCount ?? 0} products
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}