"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import ProductCard from "@/components/ProductCard";
import { Sparkles } from "lucide-react";

interface Product {
  id: number;
  name: string;
  slug: string;
  price: string;
  sale_price?: string | null;
  image?: string | null;
  stock_quantity?: number;
  stock_status?: string;
  is_featured?: boolean;
  category?: {
    id: number;
    name: string;
    slug: string;
  } | null;
  unit_type?: string;
  unit_value?: string;
}

export default function ProductSections() {
  const [products, setProducts] = useState<Product[]>([]);

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

  const fetchProducts = async () => {
    try {
      const res = await api.get("/products");
      setProducts(res.data.data || []);
    } catch (error) {
      console.error(error);
    }
  };

  const newProducts = products.slice(0, 8);

  const featuredProducts = products
    .filter((product) => product.is_featured)
    .slice(0, 8);

  return (
    <>
      <ProductBlock
        subtitle="Recently Added"
        titleBlack="New"
        titleGreen="Products"
        products={newProducts}
      />

      <ProductBlock
        subtitle="Handpicked For You"
        titleBlack="Featured"
        titleGreen="Products"
        products={featuredProducts}
        softBg
      />
    </>
  );
}

function ProductBlock({
  subtitle,
  titleBlack,
  titleGreen,
  products,
  softBg = false,
}: {
  subtitle: string;
  titleBlack: string;
  titleGreen: string;
  products: Product[];
  softBg?: boolean;
}) {
  if (products.length === 0) return null;

  return (
    <section
      className={`relative ${
        softBg ? "bg-white" : "bg-[#f7fff8]"
      } py-16 lg:py-24 overflow-hidden`}
    >
      <div className="max-w-7xl mx-auto px-4">
        <div className="relative z-20 text-center mb-16">
          <div className="inline-flex items-center justify-center gap-3 bg-white border border-green-100 shadow-sm px-5 py-2 rounded-full">
            <Sparkles size={16} className="text-green-600" />

            <p className="text-green-600 font-black text-xs uppercase tracking-[0.25em]">
              {subtitle}
            </p>
          </div>

          <h2 className="section-title mt-5">
            <span className="text-slate-900">{titleBlack}&nbsp;</span>

            <span className="bg-gradient-to-r from-green-500 to-green-700 bg-clip-text text-transparent">
              {titleGreen}
            </span>
          </h2>

          <div className="mx-auto mt-5 h-1.5 w-24 rounded-full bg-gradient-to-r from-green-400 to-green-700" />
        </div>

        <div className="relative z-10 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-7 mt-4">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

        <div className="text-center mt-12">
          <Link
            href="/products"
            className="inline-flex items-center justify-center bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 text-white px-8 py-4 rounded-2xl font-bold shadow-lg shadow-green-200 transition-all hover:scale-[1.02]"
          >
            View All Products
          </Link>
        </div>
      </div>
    </section>
  );
}