function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); const [searchResults, setSearchResults] = useState([]); const [aiResults, setAiResults] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [combinedResults, setCombinedResults] = useState([]); const handleSearch = async ()=>{ if (!searchQuery.trim()) return; setIsLoading(true); setError(null); setCombinedResults(Array.from({ length: 4 }).fill({ type: "loading", title: "Cargando..." })); try { const searchResponse = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchQuery)}`); if (!searchResponse.ok) { throw new Error(`Error en búsqueda: ${searchResponse.status}`); } const searchData = await searchResponse.json(); const searchImages = searchData.items.slice(0, 2).map((item)=>({ ...item, type: "search" })); const pollinationsImages = Array.from({ length: 2 }).fill(null).map(()=>{ const seed = Math.floor(Math.random() * (500 - 10 + 1)) + 10; const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(searchQuery)}?seed=${seed}`; return { url, type: "ai", thumbnailImageUrl: url, originalImageUrl: url, title: `IA: ${searchQuery}` }; }); setCombinedResults([ ...searchImages, ...pollinationsImages ]); } catch (err) { console.error(err); setError("Error al obtener imágenes"); } finally{ setIsLoading(false); } }; const handleDownload = async (url, title)=>{ try { const response = await fetch(url); const blob = await response.blob(); const blobUrl = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = blobUrl; link.download = `${title}.jpg`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(blobUrl); } catch (err) { console.error("Error al descargar la imagen:", err); } }; useEffect(()=>{ setCombinedResults([]); }, [ searchQuery ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-8", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl text-center font-roboto font-bold text-blue-800 mb-8", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Buscador de Imágenes"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-8", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Buscar imágenes...", className: "flex-1 p-4 rounded-lg font-roboto border border-blue-200 shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition-all duration-300", name: "search", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: isLoading, className: "px-8 py-4 rounded-lg font-roboto font-medium text-white bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 transform hover:-translate-y-0.5 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed shadow-md", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }), " Buscar"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-6 font-roboto text-center bg-red-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), error), combinedResults.length === 0 && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600 font-roboto p-8 bg-white/50 rounded-lg", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-4xl mb-4 text-gray-400", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Escribe algo para comenzar la búsqueda")), combinedResults.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, combinedResults.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "group relative bg-white p-4 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-square relative overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 z-10", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, image.type !== "loading" && /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full font-roboto text-xs font-medium ${image.type === "search" ? "bg-blue-100 text-blue-600" : "bg-purple-100 text-purple-600"}`, __source: { fileName: "", lineNumber: 138, columnNumber: 23 }, __self: this }, image.type === "search" ? "Búsqueda" : "IA")), image.type === "loading" ? /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }, index < 2 ? "Buscando imagen..." : "Generando imagen con IA...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl || image.url, alt: image.title || `Imagen generada: ${searchQuery}`, className: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(image.originalImageUrl || image.url, image.title || `ia-${searchQuery}-${index}`), className: "absolute bottom-4 right-4 bg-white/90 hover:bg-white p-2 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110", title: "Descargar imagen", __source: { fileName: "", lineNumber: 163, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-blue-600", __source: { fileName: "", lineNumber: 175, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto text-sm text-gray-700 line-clamp-2", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, image.title || `Imagen generada con IA: ${searchQuery}`)))))); }