"use client";

import { useEffect, useState } from "react";
import ProductCard from "../components/ProductCard";

const API_URL = "http://localhost:5000";

type Category = {
  id: number;
  name: string;
  slug: string;
  icon: string;
  status: "active" | "inactive";
  sort_order: number;
  product_count: number;
};

type Subcategory = {
  id: number;
  category_id: number;
  name: string;
  slug: string;
  status: "active" | "inactive";
  sort_order: number;
  product_count: number;
};

type Product = {
  id: number;
  category_id: number;
  subcategory_id: number;
  name: string;
  regular_price: number;
  sale_price: number | null;
  image: string | null;
  status: "active" | "inactive";
  category_name: string | null;
  subcategory_name: string | null;
};

export default function CategoryPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [subcategories, setSubcategories] = useState<Subcategory[]>([]);
  const [products, setProducts] = useState<Product[]>([]);

  const [selectedCategory, setSelectedCategory] =
    useState<Category | null>(null);

  const [selectedSubcategory, setSelectedSubcategory] =
    useState<Subcategory | null>(null);

  const [search, setSearch] = useState("");

  const [loadingCategories, setLoadingCategories] =
    useState(true);

  const [loadingSubcategories, setLoadingSubcategories] =
    useState(false);

  // Load main categories
  useEffect(() => {
    async function fetchCategories() {
      try {
        const response = await fetch(
          `${API_URL}/api/categories`
        );

        if (!response.ok) {
          throw new Error("Failed to fetch categories");
        }

        const data: Category[] = await response.json();

        const activeCategories = data.filter(
          (category) => category.status === "active"
        );

        setCategories(activeCategories);

        if (activeCategories.length > 0) {
          setSelectedCategory(activeCategories[0]);
        }
      } catch (error) {
        console.error(
          "Failed to load categories:",
          error
        );
      } finally {
        setLoadingCategories(false);
      }
    }

    fetchCategories();
  }, []);

  // Load subcategories when main category changes
  useEffect(() => {
    if (!selectedCategory) {
      setSubcategories([]);
      return;
    }

   async function fetchSubcategories() {
  if (!selectedCategory) {
    setSubcategories([]);
    return;
  }

  setLoadingSubcategories(true);

  try {
    const response = await fetch(
      `${API_URL}/api/subcategories/category/${selectedCategory.id}`
    );

    if (!response.ok) {
      throw new Error("Failed to fetch subcategories");
    }

    const data: Subcategory[] = await response.json();

    setSubcategories(
      data.filter(
        (subcategory) => subcategory.status === "active"
      )
    );
  } catch (error) {
    console.error("Error fetching subcategories:", error);
  } finally {
    setLoadingSubcategories(false);
  }
}

    fetchSubcategories();
  }, [selectedCategory]);

  // Load products
  useEffect(() => {
    async function fetchProducts() {
      try {
        const response = await fetch(
          `${API_URL}/api/products`
        );

        if (!response.ok) {
          throw new Error("Failed to fetch products");
        }

        const data: Product[] = await response.json();

        setProducts(
          data.filter(
            (product) => product.status === "active"
          )
        );
      } catch (error) {
        console.error(
          "Failed to load products:",
          error
        );

        setProducts([]);
      }
    }

    fetchProducts();
  }, []);

  // Filter products
  const filteredProducts = products.filter((product) => {
    if (!selectedCategory) {
      return false;
    }

    if (product.category_id !== selectedCategory.id) {
      return false;
    }

    if (
      selectedSubcategory &&
      product.subcategory_id !== selectedSubcategory.id
    ) {
      return false;
    }

    if (
      search.trim() &&
      !product.name
        .toLowerCase()
        .includes(search.trim().toLowerCase())
    ) {
      return false;
    }

    return true;
  });

  return (
    <main className="min-h-screen bg-white py-10">
      <div className="mx-auto max-w-7xl px-4">

        {/* Page title */}
        <h1 className="text-2xl font-semibold text-[#4B5966]">
          Categories
        </h1>
        <p className="mt-2 text-gray-400">
          Browse our products by category.
        </p>

        {/* MAIN CATEGORIES */}
        <div className="mt-8">
          <h2 className="mb-4 text-lg font-semibold text-[#4B5966]">
            Categories
          </h2>
          {loadingCategories ? (
            <p className="text-sm text-gray-400">
              Loading categories...
            </p>
          ) : (
            <div className="flex flex-wrap gap-3">
              {categories.map((category) => {
                const active =
                  selectedCategory?.id === category.id;
                return (
                  <button
                    key={category.id}
                    type="button"
                    onClick={() => {
                      setSelectedCategory(category);
                      setSelectedSubcategory(null);
                      setSearch("");
                    }}
                    className={`rounded-lg border px-5 py-3 text-sm font-medium transition ${
                      active
                        ? "border-[#B570D4] bg-[#B570D4] text-white"
                        : "border-[#EEEEEE] bg-white text-[#4B5966] hover:border-[#B570D4] hover:text-[#B570D4]"
                    }`}
                  >
                    {category.name}
                  </button>
                );
              })}
            </div>
          )}
        </div>

        {/* SUBCATEGORIES */}
        {selectedCategory && (
          <div className="mt-8">
            <h2 className="mb-4 text-lg font-semibold text-[#4B5966]">
              {selectedCategory.name} Subcategories
            </h2>

            {loadingSubcategories ? (
              <p className="text-sm text-gray-400">
                Loading subcategories...
              </p>
            ) : subcategories.length === 0 ? (
              <p className="text-sm text-gray-400">
                No subcategories available.
              </p>
            ) : (
              <div className="flex flex-wrap gap-3">
                {subcategories.map((subcategory) => (
                  <button
                    key={subcategory.id}
                    type="button"
                    onClick={() => {
                      setSelectedSubcategory(subcategory);
                    }}
                    className={`rounded-lg border px-4 py-2 text-sm transition ${
                      selectedSubcategory?.id ===
                      subcategory.id
                        ? "border-[#B570D4] bg-[#B570D4] text-white"
                        : "border-[#EEEEEE] bg-white text-[#4B5966] hover:border-[#B570D4] hover:text-[#B570D4]"
                    }`}
                  >
                    {subcategory.name}
                  </button>
                ))}
              </div>
            )}
          </div>
        )}

        {/* SEARCH */}
        <div className="mt-8">
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search products..."
            className="w-full rounded-lg border border-[#EEEEEE] px-4 py-3 text-sm text-[#4B5966] outline-none focus:border-[#B570D4] md:max-w-md"
          />
        </div>

        {/* PRODUCTS */}
        {selectedCategory && (
          <div className="mt-10">
            <h2 className="mb-5 text-lg font-semibold text-[#4B5966]">
              {selectedSubcategory
                ? selectedSubcategory.name
                : `${selectedCategory.name} Products`}
            </h2>

            {filteredProducts.length === 0 ? (
              <p className="text-sm text-gray-400">
                No products available.
              </p>
            ) : (
              <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                {filteredProducts.map((product) => {
                  const regularPrice = Number(
                    product.regular_price || 0
                  );

                  const salePrice =
                    product.sale_price !== null
                      ? Number(product.sale_price)
                      : null;

                  const hasSale =
                    salePrice !== null &&
                    salePrice > 0 &&
                    salePrice < regularPrice;

                  return (
                    <ProductCard
                      key={product.id}
                      id={product.id}
                      image={
                        product.image ||
                        "/products/01_1_.jpg"
                      }
                      category={
                        product.category_name ||
                        "Pharmacy"
                      }
                      title={product.name}
                      price={
                        hasSale
                          ? salePrice!
                          : regularPrice
                      }
                      oldPrice={
                        hasSale
                          ? regularPrice
                          : undefined
                      }
                      sale={hasSale}
                    />
                  );
                })}
              </div>
            )}
          </div>
        )}
      </div>
    </main>
  );
}