"use client";

import { useState, useCallback, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  Eye,
  FileDown,
  Folder,
  FolderOpen,
  ChevronRight,
  Bolt,
  Calendar,
  Tag,
  ShieldCheck,
  Clock,
  ChartLine,
  Box,
  Hash,
  CircleCheck,
  Layers,
  TrendingUp,
  Award,
  Zap,
  ArrowUpDown,
  Printer,
  X,
  BookOpenText,
} from "lucide-react";
import BannerHeader from "@/components/bannerHeader";
import Link from "next/link";
import { catalogueData } from "@/lib/productPrice";

// ==================== TYPES ====================
interface Product {
  sl: number;
  name: string;
  price: string;
}



interface CatalogueItem {
  id: number;
  product: string;
  category: string;
  unit: string;
  productItems: Product[];
}

const ProductRow = ({ 
  product, 
  index,
  showFileLink,
  onPreview 
}: { 
  product: Product; 
  index: number;
  showFileLink: boolean;
  onPreview: (product: Product) => void;
}) => {
  return (
    <tr className="border-b border-slate-100 hover:bg-gradient-to-r hover:from-blue-50/40 hover:to-transparent transition-all duration-150 group">
      <td className="p-4 md:p-5 text-slate-400 font-mono text-sm">{index + 1}</td>
      <td className="p-4 md:p-5">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-blue-500 group-hover:scale-110 transition-transform" />
          <span className="font-semibold text-slate-800">{product.name}</span>
        </div>
      </td>
      <td className="p-4 md:p-5">
       {
        product.price? ( <span className="inline-flex items-center gap-1 bg-gradient-to-r from-emerald-50 to-teal-50 text-emerald-700 font-bold px-3 py-1.5 rounded-xl text-sm shadow-sm border border-emerald-100">
          <span className="text-emerald-500 text-xs">৳</span> {product.price}
        </span>) 
        : (
           <Link href="/contact"
            className="inline-flex items-center px-3 py-1.5 rounded-xl text-sm font-semibold bg-orange-100 text-orange-400 hover:bg-orange-500 hover:text-white transition">
            Contact
          </Link>
        )
       }
      </td>
      <td className="flex  p-4 md:p-5 text-center gap-2 justify-center">
        {/* {showFileLink && (
          <Link
            href={'/price/1'}
            className="w-9 h-9 cursor-pointer rounded-full bg-indigo-50 text-orange-600 hover:bg-orange-600 hover:text-white transition-all duration-200 flex items-center justify-center shadow-sm transform hover:scale-105"
            aria-label="Preview product"
          >
            <File size={16} />
          </Link>
        )} */}
        <button
          onClick={() => onPreview(product)}
          className="w-9 h-9 cursor-pointer rounded-full bg-indigo-50 text-orange-600 hover:bg-orange-600 hover:text-white transition-all duration-200 flex items-center justify-center shadow-sm transform hover:scale-105"
          aria-label="Preview product"
        >
          <Eye size={16} />
        </button>
      </td>
    </tr>
  );
};

// Category Sidebar Button Component
const CategoryButton = ({
  category,
  isActive,
  onClick
}: {
  category: CatalogueItem;
  isActive: boolean;
  onClick: () => void;
}) => {
  return (
    <button
      onClick={onClick}
      className={`
        w-full text-left px-5 py-4 transition-all duration-200 
        flex items-center gap-3 font-medium group
        ${isActive 
          ? "bg-gradient-to-r from-orange-600 to-orange-500 text-white shadow-md border-l-4 border-l-white" 
          : "hover:bg-slate-50 text-slate-700 border-l-4 border-l-transparent hover:border-l-blue-300"
        }
      `}
    >
      <span className="w-7 text-center">
        {isActive ? (
          <FolderOpen size={18} className="text-white" />
        ) : (
          <Folder size={18} className="text-slate-400 group-hover:text-blue-500" />
        )}
      </span>
      <span className="flex-1 text-sm md:text-xs lg:text-sm line-clamp-2 leading-tight">
        {category.category}
      </span>
      {isActive ? (
        <ChevronRight size={14} className="opacity-80" />
      ) : (
        <span className="text-xs text-slate-400 opacity-0 group-hover:opacity-100 transition">
          view
        </span>
      )}
    </button>
  );
};

// Empty State Component
// const EmptyState = () => (
//   <div className="text-center py-16 px-4 flex flex-col items-center gap-3">
//     <div className="bg-slate-100 rounded-full p-4">
//       <Search size={32} className="text-slate-400" />
//     </div>
//     <p className="text-slate-500 font-medium">No matching product found</p>
//     <p className="text-sm text-slate-400">Try adjusting your search keywords</p>
//   </div>
// );

// Modal Component for Product Preview
const PreviewModal = ({ product, category, onClose }: { product: Product; category: CatalogueItem; onClose: () => void }) => {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEsc);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', handleEsc);
      document.body.style.overflow = 'auto';
    };
  }, [onClose]);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full animate-in zoom-in-95 duration-200">
        <div className="flex justify-between items-center p-5 border-b">
          <div className="flex items-center gap-2">
            <div className="bg-blue-100 p-2 rounded-xl">
              <Zap size={20} className="text-blue-600" />
            </div>
            <h3 className="text-xl font-bold text-slate-800">Product Details</h3>
          </div>
          <button onClick={onClose} className="p-1 cursor-pointer hover:bg-slate-100 rounded-lg transition">
            <X size={20} className="text-slate-500" />
          </button>
        </div>
        <div className="p-6 space-y-4">
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl">
            <p className="text-sm text-blue-600 font-semibold mb-1">Product Name</p>
            <p className="text-lg font-bold text-slate-800">{product.name}</p>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-slate-50 p-3 rounded-lg">
              <p className="text-xs text-slate-500 mb-1">Price (BDT)</p>
              <p className="text-2xl font-bold text-emerald-600">৳ {product.price}</p>
              <p className="text-xs text-slate-400">
                {
                  product.name.includes('UTP Cable') ? 'Per 305m' : 'per 100m'
                }
              </p>
            </div>
            <div className="bg-slate-50 p-3 rounded-lg">
              <p className="text-xs text-slate-500 mb-1">SL No.</p>
              <p className="text-2xl font-bold text-slate-700">{product.sl}</p>
            </div>
          </div>
          <div className="border-t pt-4">
            <p className="text-sm font-semibold text-slate-700 mb-2">Category Information</p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-500">Category:</span>
                <span className="text-slate-800 font-medium">{category.category}</span>
              </div>
            
            </div>
          </div>
        </div>
        <div className="p-5 border-t bg-slate-50 flex justify-end">
          <button
            onClick={onClose}
            className="px-5 py-2 cursor-pointer bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white rounded-xl font-medium transition shadow-md"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

// Sort Button Component
const SortButton = ({ sortBy, setSortBy, sortOrder, setSortOrder }: any) => {
  const toggleSort = (field: string) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(field);
      setSortOrder('asc');
    }
  };

  return (
    <div className="flex gap-2">
      <button
        onClick={() => toggleSort('sl')}
        className={`flex items-center gap-1 text-xs px-2 py-1 rounded-md transition ${
          sortBy === 'sl' ? 'bg-orange-100 text-orange-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
        }`}
      >
        NO <ArrowUpDown size={12} />
      </button>
      <button
        onClick={() => toggleSort('name')}
        className={`flex items-center gap-1 text-xs px-2 py-1 rounded-md transition ${
          sortBy === 'name' ? 'bg-orange-100 text-orange-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
        }`}
      >
        Name <ArrowUpDown size={12} />
      </button>
      <button
        onClick={() => toggleSort('price')}
        className={`flex items-center gap-1 text-xs px-2 py-1 rounded-md transition ${
          sortBy === 'price' ? 'bg-orange-100 text-orange-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
        }`}
      >
        Price <ArrowUpDown size={12} />
      </button>
    </div>
  );
};

// ==================== MAIN COMPONENT ====================
function CataloguePageContent() {
  const [selectedProduct, setSelectedProduct] = useState<string>("");
  const [activeCategory, setActiveCategory] = useState<CatalogueItem | null>(null);
  const [filteredCategories, setFilteredCategories] = useState<CatalogueItem[]>([]);
  const [sortBy, setSortBy] = useState<string>("sl");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
  const [previewProduct, setPreviewProduct] = useState<Product | null>(null);
  const [isExporting, setIsExporting] = useState(false);
  const router = useRouter();
  const searchParams = useSearchParams();

  // Get unique product list for dropdown
  const uniqueProducts = [...new Map(catalogueData.map(item => [item.product, item.product])).keys()];

  const updateSelectionInUrl = useCallback((product: string, category?: string | null) => {
    const params = new URLSearchParams();

    if (product) {
      params.set("product", product);
    }

    if (category) {
      params.set("category", category);
    }

    const query = params.toString();
    const nextUrl = query ? `/price?${query}` : "/price";
    router.replace(nextUrl, { scroll: false });
  }, [router]);

  useEffect(() => {
    const productParam = searchParams.get("product")?.trim() ?? "";
    const categoryParam = searchParams.get("category")?.trim() ?? "";

    if (!productParam) {
      setSelectedProduct("");
      setFilteredCategories([]);
      setActiveCategory(null);
      return;
    }

    const matchedCategories = catalogueData.filter((item) => item.product === productParam);
    setSelectedProduct(productParam);
    setFilteredCategories(matchedCategories);

    const matchedCategory = matchedCategories.find((item) => item.category === categoryParam);
    setActiveCategory(matchedCategory ?? matchedCategories[0] ?? null);
  }, [searchParams]);

  const getFilteredAndSortedProducts = useCallback(() => {
    if (!activeCategory) return [];
    let products = [...activeCategory.productItems];
    
    // Sort
    products.sort((a, b) => {
      let aVal: any = a[sortBy as keyof Product];
      let bVal: any = b[sortBy as keyof Product];
      
      if (sortBy === 'price') {
        aVal = parseInt(aVal.replace(/,/g, ''));
        bVal = parseInt(bVal.replace(/,/g, ''));
      }
      
      if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
      return 0;
    });
    
    return products;
  }, [activeCategory, sortBy, sortOrder]);

  const filteredProducts = getFilteredAndSortedProducts();

  const handleProductSelection = (value: string) => {
    setSelectedProduct(value);

    if (!value) {
      setFilteredCategories([]);
      setActiveCategory(null);
      updateSelectionInUrl("");
      return;
    }

    const nextCategories = catalogueData.filter((item) => item.product === value);
    setFilteredCategories(nextCategories);

    const fallbackCategory = nextCategories[0] ?? null;
    setActiveCategory(fallbackCategory);
    updateSelectionInUrl(value, fallbackCategory?.category ?? null);
  };

  const handleCategorySelection = (category: CatalogueItem) => {
    setActiveCategory(category);

    if (selectedProduct) {
      updateSelectionInUrl(selectedProduct, category.category);
    }
  };

  const handleProductPreview = (product: Product) => {
    setPreviewProduct(product);
  };

  const handlePdfExport = async () => {
    setIsExporting(true);
    await new Promise(resolve => setTimeout(resolve, 1500));
    alert("📄 PDF Export simulation complete!\n\nFull catalogue with all categories and products would be generated as a professional PDF document.");
    setIsExporting(false);
  };

  // Get total number of products across all categories
  const totalProducts = catalogueData.reduce((acc, cat) => acc + cat.productItems.length, 0);

  return (
    <div className="min-h-screen flex flex-col bg-gradient-to-br from-slate-50 to-slate-100">
      <BannerHeader bannerTitle={'Price Catalogue'} image={'https://images.unsplash.com/photo-1522202176988-66273c2fd55f'} />
      
      <header className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white shadow-xl">
        <div className="container mx-auto px-4 md:px-6 py-6 md:py-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="text-center md:text-left">
              <div className="flex items-center gap-3 justify-center md:justify-start">
                <div className="h-12 w-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                  <Bolt size={24} className="text-white" />
                </div>
                <div>
                  <h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-wider">
                    PRODUCTS <span className="text-orange-500">PRICE LIST</span>
                  </h1>
                  <p className="text-slate-300 text-sm mt-1 font-medium flex items-center gap-1 justify-center md:justify-start">
                    <Calendar size={12} className="text-blue-400" />
                    Official Price List — February 2026
                  </p>
                </div>
              </div>
            </div>
            
            <div className="flex gap-3">
              <button
                onClick={handlePdfExport}
                disabled={isExporting}
                className="group bg-white/10 backdrop-blur-sm hover:bg-blue-600 border border-white/20 px-5 py-2.5 rounded-xl flex items-center gap-2 transition-all duration-300 shadow-md hover:shadow-blue-500/20 disabled:opacity-70"
              >
                {isExporting ? (
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                ) : (
                  <FileDown size={16} className="text-red-400 group-hover:text-white transition" />
                )}
                <span className="font-semibold text-sm text-slate-200 group-hover:text-white">
                  {isExporting ? "Exporting..." : "Export PDF"}
                </span>
              </button>
              <button
                onClick={() => window.print()}
                className="group bg-white/10 backdrop-blur-sm hover:bg-slate-700 border border-white/20 px-5 py-2.5 rounded-xl flex items-center gap-2 transition-all duration-300"
              >
                <Printer size={16} className="text-slate-300" />
                <span className="font-semibold text-sm text-slate-200">Print</span>
              </button>
            </div>
          </div>
          
          <div className="flex flex-wrap gap-4 mt-6 pt-4 border-t border-white/10">
            <div className="flex items-center gap-2 text-sm">
              <Award size={14} className="text-blue-400" />
              <span>{catalogueData.length} Categories</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Box size={14} className="text-blue-400" />
              <span>{totalProducts} Products</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <ShieldCheck size={14} className="text-blue-400" />
              <span>ISO Certified</span>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 md:px-6 py-8 w-full flex-grow">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-5">
          <aside className="lg:col-span-3">
            <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-slate-100 sticky top-34 transition-all">
              <div className="border-b border-slate-100">
                <div className="flex items-center gap-2 px-5 py-4">
                  <BookOpenText size={18} className="text-orange-500" />
                  <h3 className="font-bold text-slate-800 text-lg">Select Product</h3>
                </div>
                <select 
                  className="w-full bg-white/70 px-5 py-3 text-gray-800 transition-all duration-300 outline-none"
                  value={selectedProduct}
                  onChange={(e) => handleProductSelection(e.target.value)}
                >
                  <option value="">All Products (Select to filter)</option>
                  {uniqueProducts.map((product) => (
                    <option key={product} value={product}>
                      {product.charAt(0).toUpperCase() + product.slice(1)}
                    </option>
                  ))}
                </select>
              </div>
              
              {selectedProduct && (
                <>
                  <div className="bg-gradient-to-r from-slate-50 to-white px-5 py-4 border-b border-slate-100">
                    <div className="flex items-center gap-2">
                      <Layers size={18} className="text-orange-600" />
                      <h3 className="font-bold text-slate-800 text-lg">Categories</h3>
                    </div>
                    <p className="text-xs text-slate-400 mt-1">Select a category to view products</p>
                  </div>
                  
                  <nav className="divide-y divide-slate-50 max-h-[60vh] overflow-y-auto no-scrollbar">
                    {filteredCategories.map((category) => (
                      <CategoryButton
                        key={category.id}
                        category={category}
                        isActive={activeCategory?.id === category.id}
                        onClick={() => handleCategorySelection(category)}
                      />
                    ))}
                  </nav>
                </>
              )}
              
              <div className="p-4 bg-gradient-to-r from-slate-50 to-white text-xs text-slate-500 border-t flex justify-between">
                <span className="flex items-center gap-1">
                  <CircleCheck size={12} className="text-green-500" />
                  Live prices
                </span>
                <span className="flex items-center gap-1">
                  <Tag size={12} />
                  incl. VAT
                </span>
              </div>
            </div>
          </aside>

          <div className="lg:col-span-9">
            {!selectedProduct ? (
              // Default view when no product selected - Show all categories
              <div className="bg-white rounded-2xl shadow-xl border border-slate-100 overflow-hidden">
                <div className="bg-gradient-to-r from-slate-50 to-white px-6 py-5 border-b border-slate-100">
                  <h2 className="text-xl font-bold text-slate-800">All Categories</h2>
                  <p className="text-sm text-slate-500 mt-1">Select a product from the dropdown to view category-wise products</p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-6">
                  {uniqueProducts.map((product) => {
                    const productCategories = catalogueData.filter(cat => cat.product === product);
                    return (
                      <div onClick={() => handleProductSelection(product)} key={product} className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100 cursor-pointer">
                        <div className="flex items-center gap-2 mb-3">
                          <div className="bg-orange-500 p-2 rounded-lg">
                            <Box size={16} className="text-white" />
                          </div>
                          <h3 className="font-bold text-slate-800 text-lg capitalize">{product}</h3>
                          <span className="text-xs bg-white px-2 py-1 rounded-full text-slate-600 ml-auto">
                            {productCategories.length} Categories
                          </span>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {productCategories.slice(0, 3).map((cat) => (
                            <span key={cat.id} className="text-xs bg-white/80 px-2 py-1 rounded-md text-slate-600">
                              {cat.category.length > 40 ? cat.category.substring(0, 40) + "..." : cat.category}
                            </span>
                          ))}
                          {productCategories.length > 3 && (
                            <span className="text-xs bg-white/80 px-2 py-1 rounded-md text-orange-600">
                              +{productCategories.length - 3} more
                            </span>
                          )}
                        </div>
                        <button
                          
                          className="mt-3 text-sm text-orange-600 font-medium hover:text-orange-700 flex items-center gap-1"
                        >
                          View all categories <ChevronRight size={14} />
                        </button>
                      </div>
                    );
                  })}
                </div>
                <div className="bg-gradient-to-r from-slate-50 to-white px-6 py-3 text-center text-xs text-slate-500 border-t">
                  Select a product from the dropdown above to see detailed category and product information
                </div>
              </div>
            ) : !activeCategory ? (
              // When product selected but no categories found
              <div className="bg-white rounded-2xl shadow-xl border border-slate-100 overflow-hidden">
                <div className="text-center py-20 px-4 flex flex-col items-center gap-4">
                  <div className="bg-slate-100 rounded-full p-6">
                    <Folder size={48} className="text-slate-400" />
                  </div>
                  <h3 className="text-xl font-bold text-slate-700">No categories found</h3>
                  <p className="text-slate-500">
                    No categories available for "{selectedProduct}"
                  </p>
                </div>
              </div>
            ) : (
              // Product and category selected - Show products table
              <div className="bg-white rounded-2xl shadow-xl border border-slate-100 overflow-hidden transition-all duration-300">
                <div className="bg-white px-4 md:px-6 py-5 border-b border-slate-100 flex flex-wrap items-center justify-between gap-3">
                  <div className="flex w-full items-end justify-between gap-2">
                    <SortButton
                      sortBy={sortBy}
                      setSortBy={setSortBy}
                      sortOrder={sortOrder}
                      setSortOrder={setSortOrder}
                    />
                    <div className="text-right bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-xl">
                      <div className="text-xs text-slate-500">Products</div>
                      <div className="text-2xl font-black text-blue-700">{filteredProducts.length}</div>
                    </div>
                  </div>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full min-w-[500px]">
                    <thead className="bg-slate-50 border-b border-slate-200">
                      <tr>
                        <th className="text-left p-5 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                          <div className="flex items-center gap-1">
                            <Hash size={12} />
                            NO
                          </div>
                        </th>
                        <th className="text-left p-5 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                          <div className="flex items-center gap-1">
                            <Box size={12} />
                            Product Item
                          </div>
                        </th>
                        <th className="text-left p-5 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                          <div className="flex items-center gap-1">
                            <span>৳</span>
                            Price (BDT)
                          </div>
                        </th>
                        <th className="text-center p-5 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                          Details
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredProducts.map((product, idx) => (
                        <ProductRow
                          key={`${activeCategory.id}-${product.sl}`}
                          product={product}
                          index={idx}
                          showFileLink={activeCategory.product === 'Cables'}
                          onPreview={handleProductPreview}
                        />
                      ))}
                    </tbody>
                   </table>
                </div>

                <div className="bg-gradient-to-r from-slate-50 to-white px-4 md:px-6 py-3 text-right text-xs text-slate-500 border-t flex justify-between items-center flex-wrap gap-2">
                  <div className="flex gap-3">
                    <span className="flex items-center gap-1">
                      <Clock size={12} />
                      Prices effective: February 2026
                    </span>
                    <span className="flex items-center gap-1">
                      <TrendingUp size={12} />
                      Subject to market changes
                    </span>
                  </div>
                  <div className="flex items-center gap-1">
                    <ChartLine size={12} />
                    Prices are per 100 meter coil including VAT
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      <footer className="border-t border-slate-200 bg-white/80 mt-12 py-5 text-center text-xs text-slate-400">
        <div className="max-w-7xl mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center gap-2">
          <span>© 2026 SQ Cable Industries Ltd. | Authorized Price Catalogue</span>
          <span className="flex items-center gap-1">
            <ShieldCheck size={12} />
            Specifications verified as per BDS & IEC standards
          </span>
        </div>
      </footer>

      {previewProduct && activeCategory && (
        <PreviewModal
          product={previewProduct}
          category={activeCategory}
          onClose={() => setPreviewProduct(null)}
        />
      )}
    </div>
  );
}

export default function CataloguePage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
          <div className="text-center">
            <div className="w-8 h-8 border-4 border-orange-500 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
            <p className="text-slate-600 font-medium">Loading price catalogue...</p>
          </div>
        </div>
      }
    >
      <CataloguePageContent />
    </Suspense>
  );
}