"use client";

import React, { useEffect, useState } from "react";
import Title from "../../lib_components/title";
import Text from "../../lib_components/text";
import type { ProductTypes } from "@/types";
import { allProducts } from "@/data";
import ProductCard from "../../cards/productCard";
import { LoadingSkeleton } from "@/components/loadingProduct";
import { EmptyState } from "@/components/emptyState";
import { usePathname } from "next/navigation";
import { baseUrl } from "@/data/url";

export default function Products() {
  const [cars, setCars] = useState<ProductTypes[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const pathname = usePathname();
  const lang = pathname.split("/")[1];

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        setError(null);

        const response = await fetch(baseUrl, {
          headers: {
            "Accept-Language": lang,
          },
        });

        if (!response.ok) {
          throw new Error("Server xatosi");
        }

        const data = await response.json();
        console.log("backend Data: ", data?.data);

        if (data?.data && data.data.length > 0) {
          setCars(data.data);
        } else {
          setCars([]);
        }
      } catch (error) {
        console.log("Xatolik: ", error);
        setError(error instanceof Error ? error.message : "Noma'lum xatolik");
        // Xatolik bo'lsa ham local data'ni ko'rsatish
        setCars(allProducts);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [lang]); // Bo'sh array - faqat bitta marta ishlaydi

  return (
    <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
      {/* title part */}
      <div className="flex flex-col mb-10">
        <div className="flex items-center justify-center w-full">
          <div className="text-[#f2a01c] px-2 text-[18px] font-semibold">
            <Text txt="katalog" />
          </div>
        </div>
        <Title text="pricing-h2" />
      </div>

      {/* Error message */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-600 text-center">
            <Text txt="downloadError" /> : {error}
          </p>
        </div>
      )}

      {/* products */}
      <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
        {loading ? (
          <LoadingSkeleton />
        ) : cars.length > 0 ? (
          cars.map((item: ProductTypes, index: number) => (
            <div key={item.id || index}>
              <ProductCard data={item} />
            </div>
          ))
        ) : (
          <EmptyState />
        )}
      </div>
    </div>
  );
}