import PageLayout from "../components/PageLayout";
import * as api from "../api/index";
import { useState, useEffect, useMemo } from "react";
import CategoryTabs from "../components/CategoryTabs";
import CardItem from "../components/CardItem";

export default function Shop() {
  const [items, setItems] = useState([]);
  const [categories, setCategories] = useState([]);
  const [activeCategory, setActiveCategory] = useState(
    () => sessionStorage.getItem("shopCategory") || "все",
  );
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    Promise.all([api.getAllItems(), api.getAllCategories()])
      .then(([itemsRes, categoriesRes]) => {
        setItems(itemsRes?.data || []);
        setCategories(categoriesRes?.data || []);
        setLoading(false);
      })
      .catch((err) => {
        console.error("Ошибка при загрузке товара", err);
        alert(err);
        setLoading(false);
      });
  }, []);

  // восстановление скролла после загрузки товаров
  useEffect(() => {
    if (!loading && items.length > 0) {
      const saved = sessionStorage.getItem("shopScroll");
      if (saved) {
        window.scrollTo(0, parseInt(saved));
        sessionStorage.removeItem("shopScroll");
      }
    }
  }, [loading, items]);

  const filteredItems = useMemo(() => {
    return activeCategory === "все"
      ? items || []
      : (items || []).filter((item) => {
        if (!item || !item.category) return false;
        return item.category.toLowerCase() === activeCategory.toLowerCase();
      });
  }, [items, activeCategory]);

  // сохранить позицию и категорию перед уходом на товар
  const handleNavigateToItem = () => {
    sessionStorage.setItem("shopScroll", window.scrollY);
    sessionStorage.setItem("shopCategory", activeCategory);
  };

  const handleAddToCart = async (product, selectedWeight) => {
    try {
      await api.addToCart({
        item_id: product.id,
        quantity: selectedWeight,
      });
      alert(`${product.name} добавлен в корзину`);
    } catch (err) {
      console.error("Ошибка при добавлении товара в корзину", err);
      alert("Не удалось добавить товар в корзину");
    }
  };

  if (loading) {
    return (
      <PageLayout>
        <p className="text-white grow">Загрузка...</p>
      </PageLayout>
    );
  }

  return (
    <PageLayout>
      <main className="px-6 md:px-16 grow w-full ">
        <h1 className="text-2xl md:text-4xl text-white font-medium md:mt-10">
          Ассортимент
        </h1>
        <CategoryTabs
          categories={["все", ...(categories || [])]}
          activeCategory={activeCategory}
          onSelectCategory={setActiveCategory}
        />
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-4">
          {filteredItems.map((item) => (
            <CardItem
              key={item.id}
              item={item}
              onAddToCart={handleAddToCart}
              onNavigate={handleNavigateToItem}
            />
          ))}
        </div>
      </main>
    </PageLayout>
  );
}
