import { prisma } from "@/lib/prisma";
import ProductCard from "@/components/shop/ProductCard";
import Link from "next/link";
import { Metadata } from "next";
import { Tag, Percent, Clock, Truck } from "lucide-react";

export const metadata: Metadata = {
  title: "Deals & Clearance – Americas.Pet",
  description: "Shop our best deals on pet food, toys, beds, and more. Save up to 50% on premium pet products.",
};

export default async function DealsPage() {
  const saleProducts = await prisma.product.findMany({
    where: { active: true, salePrice: { not: null } },
    orderBy: { createdAt: "desc" },
  });

  const topDeals = saleProducts
    .map((p) => ({ ...p, discount: Math.round(((p.price - (p.salePrice ?? p.price)) / p.price) * 100) }))
    .sort((a, b) => b.discount - a.discount);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Banner */}
      <div className="bg-gradient-to-r from-red-500 to-orange-500 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 text-center">
          <div className="inline-flex items-center gap-2 bg-white/20 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
            <Percent className="h-4 w-4" /> Limited Time Offers
          </div>
          <h1 className="text-4xl lg:text-5xl font-bold mb-4">Deals & Clearance</h1>
          <p className="text-lg text-white/90 max-w-2xl mx-auto">
            Save big on premium pet products. Up to 50% off on food, toys, beds, and accessories for all your furry, feathered, and finned friends.
          </p>
        </div>
      </div>

      {/* Trust Badges */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6 relative z-10 mb-10">
        <div className="bg-white rounded-2xl shadow-sm p-6 grid grid-cols-1 sm:grid-cols-3 gap-6">
          <div className="flex items-center gap-3 justify-center">
            <Tag className="h-8 w-8 text-red-500" />
            <div>
              <p className="font-bold text-gray-900">Up to 50% Off</p>
              <p className="text-xs text-gray-500">On selected items</p>
            </div>
          </div>
          <div className="flex items-center gap-3 justify-center">
            <Truck className="h-8 w-8 text-primary-500" />
            <div>
              <p className="font-bold text-gray-900">Free Shipping</p>
              <p className="text-xs text-gray-500">Orders over $75</p>
            </div>
          </div>
          <div className="flex items-center gap-3 justify-center">
            <Clock className="h-8 w-8 text-amber-500" />
            <div>
              <p className="font-bold text-gray-900">Limited Stock</p>
              <p className="text-xs text-gray-500">While supplies last</p>
            </div>
          </div>
        </div>
      </div>

      {/* Products */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-900">{topDeals.length} Products on Sale</h2>
          <Link href="/shop" className="text-primary-600 hover:underline text-sm font-medium">View All Products</Link>
        </div>

        {topDeals.length === 0 ? (
          <div className="text-center py-20 bg-white rounded-2xl shadow-sm">
            <Tag className="h-12 w-12 text-gray-300 mx-auto mb-4" />
            <p className="text-gray-400 text-lg mb-2">No deals available right now.</p>
            <p className="text-gray-400 text-sm">Check back soon for new discounts!</p>
            <Link href="/shop" className="mt-6 btn-primary inline-block">Shop All Products</Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {topDeals.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}