function MainComponent() { const [prompt, setPrompt] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [cardImage, setCardImage] = useState(null); const [cardStyle, setCardStyle] = useState("Classic"); const [showBorder, setShowBorder] = useState(true); const [savedCards, setSavedCards] = useState([]); const [tooltipVisible, setTooltipVisible] = useState(false); const [cardType, setCardType] = useState("Character Card"); const [cardName, setCardName] = useState(""); const [cardDescription, setCardDescription] = useState(""); const [cardPower, setCardPower] = useState(""); const [cardRarity, setCardRarity] = useState("Common"); const [cardTheme, setCardTheme] = useState("Fantasy"); const [collections, setCollections] = useState([]); const [selectedCollection, setSelectedCollection] = useState(""); const [frameStyle, setFrameStyle] = useState("Standard"); const [textPosition, setTextPosition] = useState("Bottom"); const [fontStyle, setFontStyle] = useState("Modern"); const [favorites, setFavorites] = useState(new Set()); const [previewMode, setPreviewMode] = useState("front"); const [showAdvanced, setShowAdvanced] = useState(false); const cardTypes = [ "Character Card", "Spell Card", "Artifact Card", "Creature Card", "Location Card" ]; const rarityOptions = [ "Common", "Uncommon", "Rare", "Legendary" ]; const themeOptions = [ "Fantasy", "Sci-Fi", "Cyberpunk", "Steampunk", "Horror", "Nature" ]; const frameStyles = [ "Standard", "Ornate", "Minimal", "Futuristic", "Ancient" ]; const fontStyles = [ "Modern", "Classic", "Fantasy", "Tech", "Elegant" ]; const examplePrompts = [ "Mystical warrior with glowing sword", "Futuristic robot commander", "Ancient dragon with crystal scales" ]; const generateRandomCard = ()=>{ const randomType = cardTypes[Math.floor(Math.random() * cardTypes.length)]; const randomTheme = themeOptions[Math.floor(Math.random() * themeOptions.length)]; setCardType(randomType); setCardTheme(randomTheme); setPrompt(`Generate a ${randomTheme} style ${randomType.toLowerCase()}`); }; const generateCard = async ()=>{ if (!prompt.trim()) return; setLoading(true); setError(null); try { const fullPrompt = `${cardTheme} style ${cardType}: ${prompt} in ${cardStyle.toLowerCase()} trading card style ${showBorder ? "with decorative border" : "without border"}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(fullPrompt)}`); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); const newCard = { image: data.data[0], name: cardName, description: cardDescription, power: cardPower, rarity: cardRarity, type: cardType, theme: cardTheme, timestamp: Date.now() }; setCardImage(data.data[0]); setSavedCards((prev)=>[ newCard, ...prev ]); } catch (err) { setError("Failed to generate card. Please try again."); console.error(err); } finally{ setLoading(false); } }; const downloadCard = ()=>{ const link = document.createElement("a"); link.href = cardImage; link.download = `${cardName || "card"}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const shareCard = async ()=>{ try { await navigator.clipboard.writeText(cardImage); alert("Card URL copied to clipboard!"); } catch (err) { console.error("Failed to copy URL"); } }; const toggleFavorite = (cardIndex)=>{ setFavorites((prev)=>{ const newFavorites = new Set(prev); if (newFavorites.has(cardIndex)) { newFavorites.delete(cardIndex); } else { newFavorites.add(cardIndex); } return newFavorites; }); }; const exportCollection = ()=>{ const exportData = { cards: savedCards, favorites: Array.from(favorites), collections }; const dataStr = JSON.stringify(exportData); const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`; const link = document.createElement("a"); link.href = dataUri; link.download = "card-collection.json"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-4", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto pt-10", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-black mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "AI Card Generator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-lg border border-gray-200", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 space-y-4", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, examplePrompts.map((examplePrompt)=>/*#__PURE__*/ React.createElement("button", { key: examplePrompt, onClick: ()=>setPrompt(examplePrompt), className: "px-3 py-1 text-sm bg-gray-100 rounded-full hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }, examplePrompt))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the card you want to create...", className: "w-full p-3 rounded-lg bg-white text-black placeholder-gray-400 border border-gray-300 focus:outline-none focus:border-gray-600", onFocus: ()=>setTooltipVisible(true), onBlur: ()=>setTooltipVisible(false), __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }), tooltipVisible && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 mt-2 p-3 bg-black text-white text-sm rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, "Tip: Be specific about colors, style, and details for better results!")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: cardName, onChange: (e)=>setCardName(e.target.value), placeholder: "Card Name", className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: cardType, onChange: (e)=>setCardType(e.target.value), className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, cardTypes.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, __source: { fileName: "", lineNumber: 201, columnNumber: 23 }, __self: this }, type)))), /*#__PURE__*/ React.createElement("textarea", { value: cardDescription, onChange: (e)=>setCardDescription(e.target.value), placeholder: "Card Description", className: "w-full p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", rows: "3", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: cardPower, onChange: (e)=>setCardPower(e.target.value), placeholder: "Power/Strength", className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: cardRarity, onChange: (e)=>setCardRarity(e.target.value), className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, rarityOptions.map((rarity)=>/*#__PURE__*/ React.createElement("option", { key: rarity, __source: { fileName: "", lineNumber: 228, columnNumber: 23 }, __self: this }, rarity))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: cardTheme, onChange: (e)=>setCardTheme(e.target.value), className: "flex-1 p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, themeOptions.map((theme)=>/*#__PURE__*/ React.createElement("option", { key: theme, __source: { fileName: "", lineNumber: 242, columnNumber: 23 }, __self: this }, theme))), /*#__PURE__*/ React.createElement("select", { value: cardStyle, onChange: (e)=>setCardStyle(e.target.value), className: "flex-1 p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, "Classic"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 251, columnNumber: 21 }, __self: this }, "Modern"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }, "Minimal"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAdvanced(!showAdvanced), className: "w-full py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, showAdvanced ? "Hide Advanced Options" : "Show Advanced Options"), showAdvanced && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: frameStyle, onChange: (e)=>setFrameStyle(e.target.value), className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 268, columnNumber: 23 }, __self: this }, frameStyles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, __source: { fileName: "", lineNumber: 274, columnNumber: 27 }, __self: this }, style))), /*#__PURE__*/ React.createElement("select", { value: fontStyle, onChange: (e)=>setFontStyle(e.target.value), className: "p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 277, columnNumber: 23 }, __self: this }, fontStyles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, __source: { fileName: "", lineNumber: 283, columnNumber: 27 }, __self: this }, style)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: showBorder, onChange: (e)=>setShowBorder(e.target.checked), className: "rounded", __source: { fileName: "", lineNumber: 289, columnNumber: 25 }, __self: this }), "Card Border"), /*#__PURE__*/ React.createElement("select", { value: textPosition, onChange: (e)=>setTextPosition(e.target.value), className: "flex-1 p-2 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 297, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 302, columnNumber: 25 }, __self: this }, "Top"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 303, columnNumber: 25 }, __self: this }, "Bottom"))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-4", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateCard, disabled: loading || !prompt.trim(), className: `flex-1 py-3 rounded-lg font-semibold ${loading || !prompt.trim() ? "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-black text-white hover:bg-gray-800"} transition-colors`, __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 322, columnNumber: 23 }, __self: this }), "Generating...") : "Generate Card"), /*#__PURE__*/ React.createElement("button", { onClick: generateRandomCard, disabled: loading, className: "px-4 py-3 bg-gray-100 text-black rounded-lg hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-random", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-600 text-center", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 343, columnNumber: 13 }, __self: this }, cardImage && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-2xl p-3 border border-gray-200", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 347, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: cardImage, alt: "Generated trading card", className: "w-full h-auto rounded-xl", __source: { fileName: "", lineNumber: 348, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4 rounded-b-xl", __source: { fileName: "", lineNumber: 353, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 354, columnNumber: 25 }, __self: this }, cardName || "Unnamed Card"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 357, columnNumber: 25 }, __self: this }, cardDescription), cardPower && /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 359, columnNumber: 27 }, __self: this }, "Power: ", cardPower), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 361, columnNumber: 25 }, __self: this }, "Rarity: ", cardRarity))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex gap-2", __source: { fileName: "", lineNumber: 364, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadCard, className: "flex-1 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors", __source: { fileName: "", lineNumber: 365, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 369, columnNumber: 25 }, __self: this }), "Download"), /*#__PURE__*/ React.createElement("button", { onClick: shareCard, className: "flex-1 py-2 bg-gray-100 text-black rounded-lg hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 372, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share mr-2", __source: { fileName: "", lineNumber: 376, columnNumber: 25 }, __self: this }), "Share"), /*#__PURE__*/ React.createElement("button", { onClick: exportCollection, className: "flex-1 py-2 bg-gray-100 text-black rounded-lg hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 379, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-export mr-2", __source: { fileName: "", lineNumber: 383, columnNumber: 25 }, __self: this }), "Export")))))), savedCards.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 394, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 395, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 396, columnNumber: 17 }, __self: this }, "My Collection"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: selectedCollection, onChange: (e)=>setSelectedCollection(e.target.value), placeholder: "New Collection Name", className: "p-2 rounded-lg border border-gray-300", __source: { fileName: "", lineNumber: 398, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (selectedCollection) { setCollections((prev)=>[ ...prev, selectedCollection ]); setSelectedCollection(""); } }, className: "px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800", __source: { fileName: "", lineNumber: 405, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 414, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 419, columnNumber: 15 }, __self: this }, savedCards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 421, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.image, alt: card.name || `Saved card ${index + 1}`, className: "w-full h-auto rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 422, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 427, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleFavorite(index), className: "p-2 bg-white rounded-full shadow-lg", __source: { fileName: "", lineNumber: 428, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-star ${favorites.has(index) ? "text-yellow-500" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 432, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 rounded-b-lg", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 438, columnNumber: 23 }, __self: this }, card.name || "Unnamed Card"), /*#__PURE__*/ React.createElement("p", { className: "text-xs", __source: { fileName: "", lineNumber: 441, columnNumber: 23 }, __self: this }, card.type, " • ", card.rarity))))))))); }