"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 { ProductModal } from "./ProductModal";
import axios from "axios";
import EmptyState from "../productsPage/emptyData";

// hello everyone

export function ProductsGrid() {
  const { t } = useLanguage();
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [allProducts, setAllProducts] = useState<any>([]);

  useEffect(() => {
    async function getData() {
      await axios
        .get("https://admin.promtechno.uz/api/products/")
        .then((res) => {
          console.log("all data main page: ", res?.data);
          const allData = res?.data || [];
          setAllProducts(allData.slice(0, 3));
        });
    }
    getData();
  }, []);

  const handleViewDetails = (slug: number) => {
    const product = allProducts.find((p: any) => p.id === slug);
    if (product) {
      setSelectedProduct(product);
    }
  };

  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>

          {/* Product Grid */}
          {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}
                    onViewDetails={handleViewDetails}
                  />
                </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>

      {/* Product Modalll */}
      {selectedProduct && (
        <ProductModal
          product={selectedProduct}
          onClose={() => setSelectedProduct(null)}
        />
      )}
    </>
  );
}