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

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const category =
    typeof searchParams.category === 'string' ? searchParams.category : '';
  const q = typeof searchParams.q === 'string' ? searchParams.q : '';
  const min =
    typeof searchParams.min === 'string' ? parseFloat(searchParams.min) : 0;
  const max =
    typeof searchParams.max === 'string' ? parseFloat(searchParams.max) : 0;
  const sort = typeof searchParams.sort === 'string' ? searchParams.sort : 'newest';

  let products: Product[] = [];
  let categories: Category[] = [];

  try {
    products = await getProducts({
      status: 'active',
      category,
      q,
      min,
      max,
      sort: sort as any,
    });

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

  return (
    <div className="container mx-auto px-4 py-10">
      <div className="mb-8 rounded-xl border bg-muted/30 p-6 md:p-10">
        <h1 className="text-3xl font-bold">All Products</h1>
        <p className="mt-2 text-muted-foreground">
          Browse phones, laptops, accessories, and more.
        </p>
      </div>

      <ProductFilters categories={categories} />

      {products.length > 0 ? (
        <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </div>
      ) : (
        <div className="mt-6 rounded-xl border bg-card p-10 text-center text-muted-foreground">
          <div className="mx-auto mb-4 h-24 w-24 opacity-30">
            <Image
              src="/placeholder.svg"
              alt="No products"
              width={96}
              height={96}
            />
          </div>
          <p className="text-lg font-medium">No products found</p>
          <p className="mt-1 text-sm">
            Try adjusting filters or search terms.
          </p>
          <Link
            href="/products"
            className="mt-4 inline-block rounded-lg bg-primary px-5 py-2 text-sm font-medium text-primary-foreground"
          >
            Clear filters
          </Link>
        </div>
      )}
    </div>
  );
}