"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import type { Product } from "@/lib/products";
import Image from "next/image";
import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { ChevronsRight } from "lucide-react";
import { ProductCard } from "./ProductCard";
import axios from "axios";
import EmptyState from "../productsPage/emptyData";
import Loading from "../loading";
import { getAllProducts } from "@/lib/api";
import { generateSlug } from "@/lib/slug";

// hello everyone

export function ProductsGrid() {
  const { t } = useLanguage();
  const [allProducts, setAllProducts] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    async function getData() {
      setLoading(true);
      const products = await getAllProducts();
      setAllProducts(
        products.map((product: any) => ({
          ...product,
          slug: generateSlug(product.name_uz),
        })).slice(0, 3)
      );
      setLoading(false);
    }
    getData();
  }, []);

  return (
    <>
      <section id="products" className="relative py-20">
        <div className="absolute -z-40 top-0 left-0 h-full w-full">
          <Image
            src="/images/hero2.jpg"
            alt="hero image"
            fill
            className="object-cover"
          />
        </div>
        <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              {t.products.title}
            </h2>
            <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
          </motion.div>

          {loading && (
            <div className="w-full flex items-center justify-center">
              <Loading />
            </div>
          )}

          {/* Product Grid */}
          {loading || (allProducts && allProducts.length > 0) ? (
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
            >
              {allProducts.map((product: any) => (
                <motion.div key={product.id}>
                  <ProductCard product={product} />
                </motion.div>
              ))}
            </motion.div>
          ) : (
            <EmptyState page="main" />
          )}
        </div>
        <div className="mt-10 w-full flex items-center justify-center">
          <Link
            href="/product"
            className="text-primary flex items-center gap-2 text-[18px] hover:bg-primary hover:text-white py-2 px-6 rounded-lg bg-[#ffffffb5] border mx-auto border-white"
          >
            {t.more} <ChevronsRight />
          </Link>
        </div>
      </section>
    </>
  );
}