import { Link } from "@inertiajs/react";
import { useEffect, useMemo } from "react";

import Footer from "@/components/Footer";
import Header from "@/components/Header";

// import ProductContactSection from "@/components/product/ProductContactSection";

import ContactSection from "@/components/home/ContactSection";
import ProductDetailsSection from "@/components/product/ProductDetailsSection";
// import { products } from "@/components/product/ProductServicesSection";
import SeoHead from "@/components/SeoHead";

import {  products as productsRoute } from "@/routes";


export default function ProductShow({ slug, settings, data, products, success }: {slug: string, settings: any, data: any, products: any, success: string | null}) {
  // const product = useMemo(() => products.find((item) => item.slug === slug), [slug]);

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, []);

  return (
    <>
    <SeoHead seo={data?.seo} /> 
    <div className="min-h-screen bg-white text-slate-900">
      <Header settings={settings} products={products} />
      <main className="flex-1">
        {data ? (
          <>
            <ProductDetailsSection product={data} />
            <div className="mx-auto w-full max-w-[1000px] px-6">
              <a
                href={productsRoute.url()}
                className="inline-flex items-center rounded-full border border-emerald-600 px-4 py-1.5 text-base font-semibold text-emerald-700 transition-colors hover:bg-emerald-50"
              >
                {data.locale === "ar" ? "عرض جميع المنتجات" : "View all products"}
              </a>
              {/* <Link
                href={productsRoute.url()}
                className="inline-flex items-center justify-center rounded-full border border-slate-200 px-5 py-2 text-xs font-semibold text-slate-700 transition hover:border-emerald-500 hover:text-emerald-600"
              >
                {data.locale === "ar" ? "العودة إلى المنتجات" : "Back to products"}
              </Link> */}
            </div>
            <ContactSection settings={settings} data={data} success={success} />
          </>
        ) : (
          <section className="w-full bg-white py-12">
            <div className="mx-auto w-full max-w-[1000px] px-6">
              <div className="w-full rounded-2xl border border-dashed border-slate-200 px-6 py-10 text-center">
                <h1 className="text-lg font-semibold text-slate-900">{data.locale === "ar" ? "المنتج غير موجود" : "Product not found"}</h1>
                <p className="mt-2 text-sm text-slate-600">
                  {data.locale === "ar" ? "لا يمكننا العثور على هذا المنتج. يرجى العودة إلى صفحة المنتجات." : "We could not find this product. Please return to the products page."}
                </p>
                <div className="mt-4">
                  <Link
                    href="/product"
                    className="inline-flex items-center justify-center rounded-full bg-emerald-600 px-5 py-2 text-xs font-semibold text-white transition hover:bg-emerald-700"
                  >
                    {data.locale === "ar" ? "عرض جميع المنتجات" : "View all products"}
                  </Link>
                </div>
              </div>
            </div>
          </section>
        )}
      </main>
      <Footer settings={settings} />
    </div>
    </>
  );
}