"use client";

import React, { useState, useEffect } from "react";
import FlipbookCatalog from "../../components/catalog/FlipbookCatalog";
import { productService } from "../../lib/services/productService";
import { Product } from "../../lib/data/products";

export default function CatalogClient() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    productService.getProducts({ limit: 999 })
      .then(res => {
        if (res.data && res.data.length > 0) {
          setProducts(res.data);
        } else {
          setProducts([]);
        }
      })
      .catch(err => {
        console.error("Catalog fetch error:", err);
        setProducts([]);
      })
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-900 text-slate-100 flex items-center justify-center font-vazir">
        <div className="text-center space-y-4">
          <div className="w-12 h-12 border-4 border-amber-400 border-t-transparent rounded-full animate-spin mx-auto" />
          <p className="text-sm font-bold text-slate-300">در حال بارگذاری کاتالوگ دیجیتال Canina Pharma...</p>
        </div>
      </div>
    );
  }

  return <FlipbookCatalog products={products} />;
}