'use client'; import React, { useState, useEffect } from 'react'; import { useSearchParams } from 'next/navigation'; import AppLayout from '@/components/layout/AppLayout'; import { CatalogProductRecord } from '@/types'; export default function ProductManagementPage() { const searchParams = useSearchParams(); const queryShop = searchParams.get('shop') || ''; const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [syncingShopify, setSyncingShopify] = useState(false); const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string; hint?: string; } | null>(null); // Filters & Search const [searchQuery, setSearchQuery] = useState(''); const [selectedCollection, setSelectedCollection] = useState(''); const [selectedTag, setSelectedTag] = useState(''); const [statusFilter, setStatusFilter] = useState<'all' | 'included' | 'excluded' | 'in_stock' | 'out_of_stock'>('all'); // Available options const [availableCollections, setAvailableCollections] = useState([]); const [availableTags, setAvailableTags] = useState([]); // Counts const [counts, setCounts] = useState({ total: 0, included: 0, excluded: 0, outOfStock: 0, }); // Pagination const [page, setPage] = useState(1); const [limit, setLimit] = useState(20); const [totalPages, setTotalPages] = useState(1); const [filteredTotal, setFilteredTotal] = useState(0); // Selection for bulk actions const [selectedIds, setSelectedIds] = useState([]); const [isUpdating, setIsUpdating] = useState(false); const fetchProducts = async () => { setLoading(true); try { const params = new URLSearchParams(); if (queryShop) params.set('shop', queryShop); if (searchQuery.trim()) params.set('q', searchQuery.trim()); if (selectedCollection) params.set('collection', selectedCollection); if (selectedTag) params.set('tag', selectedTag); if (statusFilter !== 'all') params.set('status', statusFilter); params.set('page', String(page)); params.set('limit', String(limit)); const res = await fetch(`/api/products?${params.toString()}`); const data = await res.json(); if (data.success) { setProducts(data.products || []); setCounts(data.counts || { total: 0, included: 0, excluded: 0, outOfStock: 0 }); setTotalPages(data.pagination?.totalPages || 1); setFilteredTotal(data.pagination?.total || 0); if (Array.isArray(data.collections)) { setAvailableCollections(data.collections.map((c: any) => typeof c === 'string' ? c : c.title)); } if (Array.isArray(data.tags)) { setAvailableTags(data.tags); } } else { setProducts([]); } } catch (err: any) { console.error('Failed to load products:', err); setNotification({ type: 'error', message: err.message || 'Error fetching products from database', }); setProducts([]); } finally { setLoading(false); } }; useEffect(() => { fetchProducts(); }, [queryShop, searchQuery, selectedCollection, selectedTag, statusFilter, page, limit]); // Handle single product exclusion toggle const handleToggleExclusion = async (product: CatalogProductRecord) => { const newExcluded = !product.is_excluded; setIsUpdating(true); try { const res = await fetch('/api/products', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: newExcluded ? 'exclude' : 'include', productIds: [product.id], reason: newExcluded ? 'Manually excluded by merchant' : undefined, }), }); const data = await res.json(); if (data.success) { setProducts((prev) => prev.map((p) => (p.id === product.id ? { ...p, is_excluded: newExcluded } : p)) ); setCounts((prev) => ({ ...prev, included: newExcluded ? prev.included - 1 : prev.included + 1, excluded: newExcluded ? prev.excluded + 1 : prev.excluded - 1, })); } else { setNotification({ type: 'error', message: data.error || 'Failed to update product status' }); } } catch (err: any) { setNotification({ type: 'error', message: err.message || 'Failed to update product' }); } finally { setIsUpdating(false); } }; // Bulk actions const handleBulkAction = async (action: 'include' | 'exclude') => { if (selectedIds.length === 0) return; setIsUpdating(true); try { const res = await fetch('/api/products', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, productIds: selectedIds, reason: action === 'exclude' ? 'Bulk excluded by merchant' : undefined, }), }); const data = await res.json(); if (data.success) { setNotification({ type: 'success', message: `Successfully ${action === 'include' ? 'included' : 'excluded'} ${selectedIds.length} products.`, }); setSelectedIds([]); await fetchProducts(); } else { setNotification({ type: 'error', message: data.error || 'Bulk operation failed' }); } } catch (err: any) { setNotification({ type: 'error', message: err.message || 'Bulk operation failed' }); } finally { setIsUpdating(false); } }; // Sync products directly from Shopify const handleSyncShopify = async () => { setSyncingShopify(true); setNotification(null); try { const res = await fetch('/api/shopify/products/sync', { method: 'POST' }); const data = await res.json(); if (data.success) { setNotification({ type: 'success', message: data.message || `Synchronized ${data.totalProducts || 0} products from Shopify.`, }); setPage(1); await fetchProducts(); } else { setNotification({ type: 'error', message: data.error || 'Failed to sync products from Shopify', hint: data.hint, }); } } catch (err: any) { setNotification({ type: 'error', message: err.message || 'Sync network request failed', }); } finally { setSyncingShopify(false); } }; const handleSelectAll = (checked: boolean) => { if (checked) { setSelectedIds(products.map((p) => p.id)); } else { setSelectedIds([]); } }; const handleSelectRow = (id: string, checked: boolean) => { if (checked) { setSelectedIds((prev) => [...prev, id]); } else { setSelectedIds((prev) => prev.filter((item) => item !== id)); } }; const resetFilters = () => { setSearchQuery(''); setSelectedCollection(''); setSelectedTag(''); setStatusFilter('all'); setPage(1); }; return (
{/* Header & Main Sync Button */}
Catalog Rules & Visibility

Product Management

Filter and control which products are included in your Facebook & Instagram catalogs and feeds.

{/* Notification Toast */} {notification && (
{notification.message}
{notification.hint && (
💡 Hint: {notification.hint}
)}
)} {/* Status Metrics Cards */}
{/* Search & Filter Toolbar */}
{/* Search Input */}
{ setSearchQuery(e.target.value); setPage(1); }} placeholder="Search products by title, SKU, or brand..." className="w-full pl-9 pr-4 py-2 text-xs rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" />
{/* Filter Dropdowns */}
{/* Collection Dropdown */} {/* Tag Dropdown */} {(searchQuery || selectedCollection || selectedTag || statusFilter !== 'all') && ( )}
{/* Bulk Action Bar (when rows are selected) */} {selectedIds.length > 0 && (
{selectedIds.length} product{selectedIds.length > 1 ? 's' : ''} selected
)}
{/* Products Table Card */}
{loading ? (
Loading products from database...
) : counts.total === 0 ? ( /* EMPTY STATE: Store has 0 products */

No Products in Store

Your store catalog is currently empty. Click 'Sync Products from Shopify' to pull your product inventory and variant details.

) : products.length === 0 ? ( /* EMPTY STATE: Filters return 0 rows */

No Matching Products

No products match the selected filters or search keyword.

) : ( <>
{products.map((prod) => { const isOutOfStock = prod.availability === 'out of stock' || (prod.inventory_quantity !== undefined && prod.inventory_quantity <= 0); const isSelected = selectedIds.includes(prod.id); return ( {/* Checkbox */} {/* Image & Title */} {/* Status Badge */} {/* Inventory */} {/* Price */} {/* Collection / Tags */} {/* Include/Exclude Toggle */} ); })}
0 && selectedIds.length === products.length} onChange={(e) => handleSelectAll(e.target.checked)} className="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 cursor-pointer" /> Product Details Catalog Status Inventory Price Collection / Tags Inclusion Toggle
handleSelectRow(prod.id, e.target.checked)} className="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 cursor-pointer" />
{prod.image_url ? ( {prod.title} ) : ( )}

{prod.title}

{prod.variant_title && ( {prod.variant_title} )} {prod.sku && SKU: {prod.sku}}
{prod.is_excluded ? ( Excluded ) : ( Included )} {prod.is_excluded && prod.exclusion_reason && (

{prod.exclusion_reason}

)} 		{isOutOfStock ? 'Out of Stock' : `${prod.inventory_quantity ?? 0} in stock`} {prod.currency || '$'}{Number(prod.price || 0).toFixed(2)}
{prod.custom_label_0 && ( {prod.custom_label_0} )} {Array.isArray(prod.tags) && prod.tags.length > 0 && (
{prod.tags.slice(0, 2).map((t: string) => ( #{t} ))} {prod.tags.length > 2 && ( +{prod.tags.length - 2} )}
)}
{/* Pagination Controls */}
Showing {(page - 1) * limit + 1} to {Math.min(page * limit, filteredTotal)} of {filteredTotal} products
Page {page} of {totalPages}
)}
); }