import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { fetchProductById } from "../../features/catalog/productsSlice";
import styles from "./ItemPage.module.css";
import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
import Button from "../../components/Button/Button";
import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";

const ItemPage = () => {
  const { id } = useParams();
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { items, loading } = useAppSelector((state) => state.products);
  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);

  const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");

  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (id) dispatch(fetchProductById(id));
  }, [id]);

  const product = items.find((item) => item.id === Number(id));
  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))

  if ((loading || !product)) return <div>Загрузка...</div>;
  if(!category) return <div>Загрузка...</div>;

  return (
    <div className={styles.page}>
      <PriceLisForm open={open} onClose={() => setOpen(false)}/>
      <div className={styles.top}>
        <button className={styles.back} onClick={() => navigate(-1)}>
          ← НАЗАД В КАТАЛОГ
        </button>
      </div>

      <div className={styles.hero}>
        <div className={styles.left}>
          <img src={product.image} alt={product.name} />
        </div>

        <div className={styles.right}>
          <div className={styles.breadcrumbs}>
            ГЛАВНАЯ / {category?.name} / {product.name}
          </div>

          <h1>{product.name}</h1>

          <p className={styles.short}>{product.description}</p>
          <Button
            label="СКАЧАТЬ ПРАЙС-ЛИСТ"
            onClick={() => setOpen(true)}
          />
        </div>
      </div>

      <div className={styles.tabs}>
        <button
          className={activeTab === "desc" ? styles.active : ""}
          onClick={() => setActiveTab("desc")}
        >
          ОПИСАНИЕ
        </button>
        <button
          className={activeTab === "chars" ? styles.active : ""}
          onClick={() => setActiveTab("chars")}
        >
          ХАРАКТЕРИСТИКИ
        </button>
      </div>

      <div className={styles.content}>
        {activeTab === "desc" && (
          <div>
            <h2>ОПИСАНИЕ</h2>
            <p>{product.description}</p>
          </div>
        )}

        {activeTab === "chars" && (
          <div>
            <h2>ХАРАКТЕРИСТИКИ</h2>
            {category.atributes?.map((attr: CategoryAtributes) => (
              <div key={attr.id} className={styles.attrRow}>
                <span>{attr.name}</span>
                {attr.vals?.map((val: CategoryAtrVals) => (
                  <div key={val.id}>
                    <span>{val.val}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default ItemPage;