import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search";
import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
import { useDecalStore, useSelectedItem } from "../../../store/builder/store";

// images -------------------
import vehicle from "../../../assets/image/categories/vehicles.png";
import workStation from "../../../assets/image/categories/workStation.png";
import machines from "../../../assets/image/categories/machines.png";
import worker from "../../../assets/image/categories/worker.png";
import storage from "../../../assets/image/categories/storage.png";
import office from "../../../assets/image/categories/office.png";
import safety from "../../../assets/image/categories/safety.png";
import feneration from "../../../assets/image/categories/feneration.png";
import decal from "../../../assets/image/categories/decal.png";
import SkeletonUI from "../../templates/SkeletonUI";
import {
  AlertIcon,
  DecalInfoIcon,
  HangTagIcon,
  NavigationIcon,
} from "../../icons/ExportCommonIcons";
import { assert } from "console";
import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
// -------------------------------------

interface AssetProp {
  filename: string;
  thumbnail?: string;
  category: string;
  description?: string;
  tags: string;
  url?: string;
  uploadDate?: number;
  isArchieve?: boolean;
  animated?: boolean;
  price?: number;
  CreatedBy?: string;
}
interface CategoryListProp {
  assetImage?: string;
  assetName?: string;
  categoryImage: string;
  category: string;
}
const Assets: React.FC = () => {
  const { setSelectedItem } = useSelectedItem();
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
  const [decalAsset, setDecalAsset] = useState<any>();
  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[] | []>(
    []
  );
  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
  const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();

  const handleSearchChange = (value: string) => {
    const searchTerm = searchValue
      ? searchValue.toLowerCase()
      : value.toLowerCase();
    setSearchValue(value);

    if (searchTerm.trim() === "" && !selectedCategory) {
      setCategoryAssets([]);

      return;
    }
    if (selectedCategory === "Decals" || selectedSubCategory) {
      const filteredModels = decalAsset?.filter((model: any) =>
        model.decalName?.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setCategoryAssets(filteredModels);
    } else {
      const filteredModels = filtereredAssets?.filter((model) => {
        if (!model?.tags || !model?.filename || !model?.category) return false;
        if (searchTerm.startsWith(":") && searchTerm.length > 1) {
          const tagSearchTerm = searchTerm.slice(1);
          return model.tags.toLowerCase().includes(tagSearchTerm);
        } else if (selectedCategory) {
          return (
            model.category
              .toLowerCase()
              .includes(selectedCategory.toLowerCase()) &&
            model.filename.toLowerCase().includes(searchTerm)
          );
        } else {
          return model.filename.toLowerCase().includes(searchTerm);
        }
      });

      setCategoryAssets(filteredModels);
    }
  };

  useEffect(() => {
    if (selectedCategory === "Decals") return;
    const filteredAssets = async () => {
      try {
        const filt = await fetchAssets();
        setFiltereredAssets(filt);
      } catch {
        echo.error("Filter asset not found");
      }
    };
    filteredAssets();
  }, [categoryAssets, selectedCategory]);
  useEffect(() => {
    if (
      (searchValue.trim() === "" && selectedCategory === "Decals") ||
      selectedSubCategory
    ) {
      const filteredModels = decalAsset?.filter((model: any) =>
        model.decalName?.toLowerCase().includes(searchValue.toLowerCase())
      );
      setCategoryAssets(filteredModels);
    }
  }, [selectedSubCategory, decalAsset, searchValue]);

  useEffect(() => {
    setCategoryList([
      { category: "Fenestration", categoryImage: feneration },
      { category: "Decals", categoryImage: decal },
      { category: "Vehicles", categoryImage: vehicle },
      { category: "Workstation", categoryImage: workStation },
      { category: "Machines", categoryImage: machines },
      { category: "Workers", categoryImage: worker },
      { category: "Storage", categoryImage: storage },
      { category: "Safety", categoryImage: safety },
      { category: "Office", categoryImage: office },
    ]);
  }, []);

  const fetchCategoryAssets = async (asset: any) => {
    setisLoading(true);
    setSelectedCategory(asset);
    try {
      const res = await getCategoryAsset(asset);
      setCategoryAssets(res);
      setFiltereredAssets(res);
      setisLoading(false); // End loading
      // eslint-disable-next-line
    } catch (error) {
      echo.error("failed to fetch assets");
      setisLoading(false);
    }
  };
  const fetchCategoryDecals = async (asset: any) => {
    setisLoading(true);
    // setSelectedCategory(asset);
    try {
      const res = await getCategoryDecals(asset);

      setCategoryAssets(res);
      setFiltereredAssets(res);
      setDecalAsset(res);
      setisLoading(false); // End loading
      // eslint-disable-next-line
    } catch (error) {
      echo.error("failed to fetch assets");
      setisLoading(false);
    }
  };

  const activeSubcategories = [
    { name: "Safety", icon: <AlertIcon /> },
    { name: "Navigation", icon: <NavigationIcon /> },
    { name: "Branding", icon: <HangTagIcon /> },
    { name: "Informational", icon: <DecalInfoIcon /> },
  ];

  return (
    <div className="assets-container-main">
      <Search onChange={handleSearchChange} value={searchValue} />
      <div className="assets-list-section">
        <section>
          {(() => {
            if (isLoading) {
              return <SkeletonUI type="asset" />; // Show skeleton when loading
            }
            if (searchValue) {
              return (
                <div className="assets-result">
                  <div className="assets-wrapper">
                    <div className="searched-content">
                      <p>Results for {searchValue}</p>
                    </div>
                    <div className="assets-container">
                      {selectedCategory == "Decals" ? (
                        <>
                          <div className="catogory-asset-filter">
                            {activeSubcategories.map((cat, index) => (
                              <div
                                key={index}
                                className={`catogory-asset-filter-wrapper ${
                                  selectedSubCategory === cat.name
                                    ? "active"
                                    : ""
                                }`}
                                onClick={() => {
                                  fetchCategoryDecals(cat.name);
                                  setSelectedSubCategory(cat.name);
                                }}
                              >
                                <div className="sub-catagory">{cat.icon}</div>
                                <div className="sub-catagory">{cat.name}</div>
                              </div>
                            ))}
                          </div>
                          {categoryAssets?.map((asset: any, index: number) => (
                            <div
                              key={`${index}-${asset}`}
                              className="assets"
                              id={asset.decalName}
                              title={asset.decalName}
                            >
                              <img
                                src={asset?.decalImage}
                                alt={asset.decalName}
                                className="asset-image"
                                onPointerDown={() => {
                                  setSelectedItem({
                                    name: asset.decalName,
                                    id: asset.id,
                                    type:
                                      asset.type === "undefined"
                                        ? undefined
                                        : asset.type,
                                    category: asset.category,
                                    // subType: asset.subType,
                                  });
                                }}
                              />
                              <div className="asset-name">
                                {asset.decalName
                                  .split("_")
                                  .map(
                                    (word: any) =>
                                      word.charAt(0).toUpperCase() +
                                      word.slice(1)
                                  )
                                  .join(" ")}
                              </div>
                            </div>
                          ))}
                        </>
                      ) : (
                        categoryAssets?.map((asset: any, index: number) => (
                          <div
                            key={`${index}-${asset.filename}`}
                            className="assets"
                            id={asset.filename}
                            title={asset.filename}
                          >
                            <img
                              src={asset?.thumbnail}
                              alt={asset.filename}
                              className="asset-image"
                              onPointerDown={() => {
                                setSelectedItem({
                                  name: asset.filename,
                                  id: asset.AssetID,
                                  type:
                                    asset.type === "undefined"
                                      ? undefined
                                      : asset.type,
                                });
                              }}
                            />

                            <div className="asset-name">
                              {asset.filename
                                .split("_")
                                .map(
                                  (word: any) =>
                                    word.charAt(0).toUpperCase() + word.slice(1)
                                )
                                .join(" ")}
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </div>
              );
            }

            if (selectedCategory) {
              return (
                <div className="assets-wrapper">
                  <h2>
                    {selectedCategory}
                    <button
                      className="back-button"
                      id="asset-backButtom"
                      onClick={() => {
                        setSelectedCategory(null);
                        setSelectedSubCategory(null);
                        setCategoryAssets([]);
                      }}
                    >
                      ← Back
                    </button>
                  </h2>

                  {selectedCategory === "Decals" && (
                    <>
                      <div className="catogory-asset-filter">
                        {activeSubcategories.map((cat, index) => (
                          <div
                            key={index}
                            className={`catogory-asset-filter-wrapper ${
                              selectedSubCategory === cat.name ? "active" : ""
                            }`}
                            onClick={() => {
                              fetchCategoryDecals(cat.name);
                              setSelectedSubCategory(cat.name);
                            }}
                          >
                            <div className="sub-catagory">{cat.icon}</div>
                            <div className="sub-catagory">{cat.name}</div>
                          </div>
                        ))}
                      </div>
                    </>
                  )}

                  {selectedCategory !== "Decals" && !selectedSubCategory ? (
                    <div className="assets-container">
                      {categoryAssets?.map((asset: any, index: number) => (
                        <div
                          key={`${index}-${asset}`}
                          className="assets"
                          id={asset.filename}
                          title={asset.filename}
                        >
                          <img
                            src={asset?.thumbnail}
                            alt={asset.filename}
                            className="asset-image"
                            onPointerDown={() => {
                              setSelectedItem({
                                name: asset.filename,
                                id: asset.AssetID,
                                type:
                                  asset.type === "undefined"
                                    ? undefined
                                    : asset.type,
                                category: asset.category,
                                subType: asset.subType,
                              });
                            }}
                          />
                          <div className="asset-name">
                            {asset.filename
                              .split("_")
                              .map(
                                (word: any) =>
                                  word.charAt(0).toUpperCase() + word.slice(1)
                              )
                              .join(" ")}
                          </div>
                        </div>
                      ))}
                      {categoryAssets.length === 0 && (
                        <div className="no-asset">
                          🚧 The asset shelf is empty. We're working on filling
                          it up!
                        </div>
                      )}
                    </div>
                  ) : (
                    <div className="assets-container">
                      {categoryAssets?.map((asset: any, index: number) => (
                        <div
                          key={`${index}-${asset}`}
                          className="assets"
                          id={asset.decalName}
                          title={asset.decalName}
                        >
                          <img
                            src={asset?.decalImage}
                            alt={asset.decalName}
                            className="asset-image"
                            onPointerDown={() => {
                              setSelectedItem({
                                name: asset.decalName,
                                id: asset.id,
                                type:
                                  asset.type === "undefined"
                                    ? undefined
                                    : asset.type,
                                category: asset.category,
                                // subType: asset.subType,
                              });
                            }}
                          />
                          <div className="asset-name">
                            {asset.decalName
                              .split("_")
                              .map(
                                (word: any) =>
                                  word.charAt(0).toUpperCase() + word.slice(1)
                              )
                              .join(" ")}
                          </div>
                        </div>
                      ))}
                      {categoryAssets.length === 0 && (
                        <div className="no-asset">
                          🚧 The asset shelf is empty. We're working on filling
                          it up!
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            }

            return (
              <div className="assets-wrapper">
                <h2>Categories</h2>
                <div className="categories-container">
                  {Array.from(
                    new Set(categoryList.map((asset) => asset.category))
                  ).map((category, index) => {
                    const categoryInfo = categoryList.find(
                      (asset) => asset.category === category
                    );
                    return (
                      <div
                        key={`${index}-${category}`}
                        className="category"
                        id={category}
                        onClick={() => {
                          fetchCategoryAssets(category);
                        }}
                      >
                        <img
                          src={categoryInfo?.categoryImage ?? ""}
                          alt={category}
                          className="category-image"
                          draggable={false}
                        />
                        <div className="category-name">{category}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })()}
        </section>
      </div>
    </div>
  );
};

export default Assets;