/**
 * @page Products Catalog Router Shell (`app/products/page.tsx`)
 * @purpose Evaluates whether the selected category has `is_parent_feature = True`.
 *          If enabled, renders <ParentFeatureCatalog category={category} /> (Brand -> Series -> Model hierarchical mode).
 *          Otherwise, renders <StandardCatalog /> (Standard sidebar filter mode).
 */
'use client';

import { useState, useEffect, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { catalogService, CategoryResponse } from '@/services/api/catalogService';
import { ParentFeatureCatalog } from '@/components/catalog/ParentFeatureCatalog';
import { StandardCatalog } from '@/components/catalog/StandardCatalog';

function CatalogPageContent() {
  const searchParams = useSearchParams();
  const categoryParam = searchParams.get('category');
  const brandParam = searchParams.get('brand');
  const searchQuery = searchParams.get('search');

  const [categories, setCategories] = useState<CategoryResponse[]>([]);
  const [activeCategory, setActiveCategory] = useState<CategoryResponse | null>(null);
  const [isLoadingCategory, setIsLoadingCategory] = useState<boolean>(true);

  // Fetch Categories and evaluate parent feature flag
  useEffect(() => {
    setIsLoadingCategory(true);
    catalogService
      .getCategories()
      .then((catData) => {
        setCategories(catData);
        if (categoryParam) {
          const found = catData.find(
            (c) =>
              c.category_id === categoryParam ||
              c.slug.toLowerCase() === categoryParam.toLowerCase()
          );
          setActiveCategory(found || null);
        } else {
          setActiveCategory(null);
        }
      })
      .catch(() => {
        setCategories([]);
        setActiveCategory(null);
      })
      .finally(() => {
        setIsLoadingCategory(false);
      });
  }, [categoryParam]);

  if (isLoadingCategory) {
    return (
      <div className="w-full bg-[#f8f9fa] min-h-screen py-12 font-sans flex items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <div className="w-8 h-8 border-3 border-red-600 border-t-transparent rounded-full animate-spin" />
          <p className="text-xs font-semibold text-gray-500">Loading catalog...</p>
        </div>
      </div>
    );
  }

  // If a category is selected AND has is_parent_feature enabled -> Render ParentFeatureCatalog
  if (activeCategory && activeCategory.is_parent_feature) {
    return <ParentFeatureCatalog category={activeCategory} />;
  }

  // Otherwise -> Render StandardCatalog
  return (
    <StandardCatalog
      initialCategory={activeCategory}
      categoryParam={categoryParam}
      brandParam={brandParam}
      searchQuery={searchQuery}
    />
  );
}

export default function ProductsPage() {
  return (
    <Suspense
      fallback={
        <div className="w-full bg-[#f8f9fa] min-h-screen py-12 font-sans flex items-center justify-center">
          <div className="w-8 h-8 border-3 border-red-600 border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <CatalogPageContent />
    </Suspense>
  );
}