feat: product picker with search in mockup page

src/app/(dashboard)/mockup/page.tsx

@@ -1,19 +1,39 @@
 'use client'
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Header } from '@/components/layout/Header'
 import { TemplateLibrary } from '@/components/mockup/TemplateLibrary'
 import { MockupGenerator } from '@/components/mockup/MockupGenerator'
 
 type Tab = 'generate' | 'library'
 
+interface Product {
+  shopifyId: string
+  title: string
+  ref: string
+}
+
 export default function MockupPage() {
   const [tab, setTab] = useState<Tab>('generate')
 
-  const [shopifyId, setShopifyId] = useState('')
+  const [products, setProducts] = useState<Product[]>([])
-  const [productName, setProductName] = useState('')
+  const [search, setSearch] = useState('')
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
   const [family, setFamily] = useState('Menuiserie')
   const [dimensions, setDimensions] = useState('')
   const [cutoutB64, setCutoutB64] = useState<string | null>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    fetch('/api/products/list')
+      .then(r => r.json())
+      .then(data => setProducts(data.products ?? []))
+  }, [])
+
+  const filtered = search.length < 2 ? [] : products.filter(p =>
+    p.title.toLowerCase().includes(search.toLowerCase()) ||
+    p.ref.toLowerCase().includes(search.toLowerCase())
+  ).slice(0, 20)
 
   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
@@ -31,12 +51,8 @@ export default function MockupPage() {
       <Header title="🖼️ Mockups" actions={
         <div className="flex gap-2">
           {(['generate', 'library'] as Tab[]).map(t => (
-            <button
+            <button key={t} type="button" onClick={() => setTab(t)}
-              key={t}
+              className={`px-3 py-1 text-xs rounded-lg transition-colors ${tab === t ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'}`}>
-              type="button"
-              onClick={() => setTab(t)}
-              className={`px-3 py-1 text-xs rounded-lg transition-colors ${tab === t ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'}`}
-            >
               {t === 'generate' ? 'Générer' : 'Bibliothèque templates'}
             </button>
           ))}
@@ -50,17 +66,49 @@ export default function MockupPage() {
           <div className="space-y-4">
             <div className="bg-slate-800 rounded-xl p-4 border border-slate-700 space-y-3">
               <h2 className="text-sm font-semibold text-white">Produit</h2>
+
+              {/* Product picker */}
+              <div className="relative" ref={dropdownRef}>
+                <label className="block text-xs text-gray-400 mb-1">Rechercher un produit</label>
+                {selectedProduct ? (
+                  <div className="flex items-center gap-2 bg-slate-700 border border-slate-600 rounded px-2 py-1.5">
+                    <span className="flex-1 text-sm text-white truncate">{selectedProduct.title}</span>
+                    <span className="text-xs text-gray-400 shrink-0">{selectedProduct.ref}</span>
+                    <button type="button" onClick={() => { setSelectedProduct(null); setSearch('') }}
+                      className="text-gray-400 hover:text-white ml-1 shrink-0">✕</button>
+                  </div>
+                ) : (
+                  <>
+                    <input
+                      type="text"
+                      value={search}
+                      onChange={e => { setSearch(e.target.value); setShowDropdown(true) }}
+                      onFocus={() => setShowDropdown(true)}
+                      placeholder="Nom ou référence du produit…"
+                      className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    />
+                    {showDropdown && filtered.length > 0 && (
+                      <div className="absolute z-10 mt-1 w-full bg-slate-700 border border-slate-600 rounded shadow-lg max-h-56 overflow-y-auto">
+                        {filtered.map(p => (
+                          <button key={p.shopifyId} type="button"
+                            onMouseDown={() => { setSelectedProduct(p); setSearch(''); setShowDropdown(false) }}
+                            className="w-full text-left px-3 py-2 text-sm text-white hover:bg-slate-600 flex justify-between gap-2">
+                            <span className="truncate">{p.title}</span>
+                            <span className="text-xs text-gray-400 shrink-0">{p.ref}</span>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                    {showDropdown && search.length >= 2 && filtered.length === 0 && (
+                      <div className="absolute z-10 mt-1 w-full bg-slate-700 border border-slate-600 rounded px-3 py-2">
+                        <p className="text-xs text-gray-400">Aucun résultat</p>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+
               <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-xs text-gray-400 mb-1">Nom produit</label>
-                  <input value={productName} onChange={e => setProductName(e.target.value)}
-                    className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-                </div>
-                <div>
-                  <label className="block text-xs text-gray-400 mb-1">ID Shopify</label>
-                  <input value={shopifyId} onChange={e => setShopifyId(e.target.value)}
-                    className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-                </div>
                 <div>
                   <label className="block text-xs text-gray-400 mb-1">Famille</label>
                   <select value={family} onChange={e => setFamily(e.target.value)}
@@ -75,22 +123,25 @@ export default function MockupPage() {
                     className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
                 </div>
               </div>
+
               <div>
                 <label className="block text-xs text-gray-400 mb-1">Image découpée (PNG)</label>
                 <input type="file" accept="image/png" onChange={handleFile} className="text-sm text-gray-300" />
               </div>
             </div>
 
-            {cutoutB64 ? (
+            {cutoutB64 && selectedProduct ? (
               <MockupGenerator
                 productCutoutBase64={cutoutB64}
-                productName={productName}
+                productName={selectedProduct.title}
-                shopifyId={shopifyId || undefined}
+                shopifyId={selectedProduct.shopifyId}
                 family={family}
                 dimensions={dimensions || undefined}
               />
             ) : (
-              <p className="text-sm text-gray-500 text-center py-8">Sélectionnez une image découpée pour commencer.</p>
+              <p className="text-sm text-gray-500 text-center py-8">
+                {!selectedProduct ? 'Sélectionnez un produit pour commencer.' : 'Chargez une image PNG découpée.'}
+              </p>
             )}
           </div>
         )}