"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import { Flame, ShoppingCart, Timer } from "lucide-react";

interface FlashProduct {
  id: number;
  name: string;
  slug: string;
  price: string;
  sale_price?: string | null;
  image?: string | null;
}

interface FlashSale {
  id: number;
  title: string;
  products?: FlashProduct[];
}

export default function FlashSaleSection() {
  const [flashSales, setFlashSales] = useState<FlashSale[]>([]);

  useEffect(() => {
    fetchFlashSales();
  }, []);

  const fetchFlashSales = async () => {
    try {
      const res = await api.get("/flash-sales");
      setFlashSales(res.data.data || []);
    } catch (error) {
      console.error(error);
    }
  };

  const sale = flashSales[0];
  const products = sale?.products || [];

  if (!sale || products.length === 0) return null;

  return (
    <section className="relative py-16 lg:py-24 bg-gradient-to-br from-orange-50 via-white to-green-50 overflow-hidden">
      <div className="max-w-7xl mx-auto px-4">
        <div className="bg-gradient-to-r from-slate-950 to-slate-800 rounded-[36px] p-6 lg:p-10 shadow-2xl overflow-hidden">
          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mb-8">
            <div>
              <div className="inline-flex items-center gap-2 bg-orange-500 text-white px-4 py-2 rounded-full font-bold text-sm">
                <Flame size={18} />
                Flash Sale
              </div>

              <h2 className="text-4xl lg:text-5xl font-black text-white mt-4">
                {sale.title}
              </h2>

              <p className="text-white/60 mt-2">
                Limited time deals on selected products.
              </p>
            </div>

            <div className="inline-flex items-center gap-3 bg-white/10 border border-white/10 text-white px-5 py-4 rounded-2xl">
              <Timer className="text-orange-400" />
              <span className="font-bold">Hurry Up!</span>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6">
            {products.slice(0, 4).map((product) => (
              <div
                key={product.id}
                className="bg-white rounded-[26px] overflow-hidden shadow-lg group"
              >
                <div className="relative h-44 md:h-56 bg-slate-100 overflow-hidden">
                  <img
                    src={
                      product.image
                        ? `https://ecom.gainsuper.com/storage/${product.image}`
                        : "https://via.placeholder.com/400"
                    }
                    alt={product.name}
                    className="w-full h-full object-cover group-hover:scale-110 transition duration-500"
                  />

                  <span className="absolute top-3 left-3 bg-orange-500 text-white text-xs font-black px-3 py-1 rounded-full">
                    DEAL
                  </span>
                </div>

                <div className="p-4">
                  <Link href={`/products/${product.slug}`} prefetch={false}>
                    <h3 className="font-black text-slate-800 line-clamp-2 min-h-[44px] group-hover:text-green-600">
                      {product.name}
                    </h3>
                  </Link>

                  <div className="mt-4 flex items-center justify-between">
                    <div>
                      <span className="text-green-600 font-black text-lg">
                        ৳ {product.sale_price || product.price}
                      </span>

                      {product.sale_price && (
                        <span className="ml-2 text-slate-400 line-through text-sm">
                          ৳{product.price}
                        </span>
                      )}
                    </div>

                    <button className="cursor-pointer w-10 h-10 rounded-2xl bg-green-100 text-green-600 hover:bg-green-600 hover:text-white flex items-center justify-center">
                      <ShoppingCart size={18} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}