function MainComponent() { const [mode, setMode] = useState("url"); const [url, setUrl] = useState(""); const [qrCode, setQrCode] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const [warning, setWarning] = useState(""); const [history, setHistory] = useState([]); const [contact, setContact] = useState({ fullName: "", phone: "", email: "", company: "", website: "", address: "" }); const isValidUrl = (string)=>{ try { new URL(string); return true; } catch (_) { return false; } }; const validateInput = useCallback((input)=>{ if (!input.trim()) { setWarning(""); return; } if (input.startsWith("http://") || input.startsWith("www.")) { setWarning("Consider using HTTPS for better security"); } else if (input.includes(".") && !input.startsWith("https://")) { setWarning("Add 'https://' to make this a valid URL"); } else { setWarning(""); } }, []); const formatVCard = (contact)=>{ let vcard = "BEGIN:VCARD\nVERSION:3.0\n"; if (contact.fullName) vcard += `FN:${contact.fullName}\n`; if (contact.phone) vcard += `TEL:${contact.phone}\n`; if (contact.email) vcard += `EMAIL:${contact.email}\n`; if (contact.company) vcard += `ORG:${contact.company}\n`; if (contact.website) vcard += `URL:${contact.website}\n`; if (contact.address) vcard += `ADR:;;${contact.address}\n`; vcard += "END:VCARD"; return vcard; }; const parseVCard = (vcard)=>{ const lines = vcard.split("\n"); const contact = { fullName: "", phone: "", email: "", company: "", website: "", address: "" }; lines.forEach((line)=>{ const [key, value] = line.split(":"); if (key === "FN") contact.fullName = value; if (key === "TEL") contact.phone = value; if (key === "EMAIL") contact.email = value; if (key === "ORG") contact.company = value; if (key === "URL") contact.website = value; if (key === "ADR") contact.address = value.split(";")[2]; }); return contact; }; const handleContactChange = (e)=>{ setContact((prev)=>({ ...prev, [e.target.name]: e.target.value })); }; const isValidContact = ()=>{ return contact.fullName && contact.email; }; const generateContactQR = useCallback(()=>{ if (!isValidContact()) { setError("Please fill in the required fields (Full Name and Email)"); return; } const vCardData = formatVCard(contact); generateQRCode(vCardData); }, [ contact ]); const generateQRCode = useCallback(async (data)=>{ if (!data?.trim()) { setError("Please enter data to generate QR code"); return; } setIsLoading(true); setError(""); setQrCode(""); try { const params = new URLSearchParams({ data: data, size: "400" }); const endpoint = `/integrations/qr-code/generatebasicbase64?${params}`; const response = await fetch(endpoint); if (!response.ok) { let errorDetail; try { const errorJson = await response.json(); errorDetail = errorJson.message || errorJson.error || response.statusText; } catch { errorDetail = await response.text(); } let userMessage = "Failed to generate QR code. "; if (response.status === 400) { userMessage += "Please check if the input is valid and properly formatted."; } else if (response.status === 429) { userMessage += "Too many requests. Please try again in a moment."; } else { userMessage += `An error occurred: ${errorDetail}`; } throw new Error(userMessage); } const responseData = await response.text(); if (!responseData) { throw new Error("Unable to generate QR code. Please try again."); } setQrCode(responseData); setHistory((prev)=>{ const newHistory = [ { text: data, code: responseData }, ...prev ]; return newHistory.slice(0, 5); }); } catch (err) { const errorMessage = err.message || "An unexpected error occurred while generating the QR code"; console.error("Error generating QR code:", err); setError(errorMessage); } finally{ setIsLoading(false); } }, []); const handleCopyToClipboard = useCallback(async ()=>{ if (!qrCode) return; try { await navigator.clipboard.writeText(`data:image/png;base64,${qrCode}`); } catch (err) { console.error("Failed to copy to clipboard:", err); setError("Failed to copy to clipboard. Please try again."); } }, [ qrCode ]); const handleDownload = useCallback(()=>{ if (!qrCode) return; const link = document.createElement("a"); link.href = `data:image/png;base64,${qrCode}`; link.download = "qr-code.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }, [ qrCode ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-inter font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, "QR Code Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex gap-2 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("url"), className: `flex-1 py-2 px-4 rounded-md font-inter ${mode === "url" ? "bg-white dark:bg-gray-700 shadow-sm" : "text-gray-600 dark:text-gray-400"}`, __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "URL/Text"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("contact"), className: `flex-1 py-2 px-4 rounded-md font-inter ${mode === "contact" ? "bg-white dark:bg-gray-700 shadow-sm" : "text-gray-600 dark:text-gray-400"}`, __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "Contact Card")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, mode === "url" ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: (e)=>{ setUrl(e.target.value); validateInput(e.target.value); }, placeholder: "Enter URL or text", className: `w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 ${warning ? "border-yellow-400" : isValidUrl(url) ? "border-green-500" : "border-gray-200 dark:border-gray-700"}`, name: "url", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-between", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 224, columnNumber: 23 }, __self: this }, url.includes(".") ? "Website: " : "Text: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 226, columnNumber: 25 }, __self: this }, url || "None"))), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }, url.length, " characters")), warning && /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-sm text-yellow-600 dark:text-yellow-400", __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }, "⚠️ ", warning)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>generateQRCode(url), disabled: isLoading, className: "bg-gray-900 hover:bg-gray-700 text-white font-inter px-6 py-3 rounded-lg transition-colors whitespace-nowrap h-[48px]", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, isLoading ? "Generating..." : "Generate QR"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }, "Full Name ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 253, columnNumber: 31 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", value: contact.fullName, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", required: true, __source: { fileName: "", lineNumber: 255, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: contact.phone, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 268, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, "Email ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 278, columnNumber: 27 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: contact.email, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", required: true, __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "company", value: contact.company, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 302, columnNumber: 19 }, __self: this }, "Website"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "website", value: contact.website, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 305, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", value: contact.address, onChange: handleContactChange, className: "w-full p-3 border rounded-lg font-inter text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateContactQR, disabled: isLoading || !isValidContact(), className: "bg-gray-900 hover:bg-gray-700 text-white font-inter px-6 py-3 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, isLoading ? "Generating..." : "Generate Contact QR")), contact.fullName && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, "Preview"), /*#__PURE__*/ React.createElement("pre", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap font-mono", __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this }, formatVCard(contact)))), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg font-inter", __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, error), isLoading && /*#__PURE__*/ React.createElement("div", { className: "h-[400px] w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse", __source: { fileName: "", lineNumber: 355, columnNumber: 13 }, __self: this }), qrCode && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 359, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg", __source: { fileName: "", lineNumber: 360, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "Generated QR code", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 361, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "bg-gray-900 hover:bg-gray-700 text-white font-inter px-6 py-3 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, "Download QR Code"), /*#__PURE__*/ React.createElement("button", { onClick: handleCopyToClipboard, className: "bg-gray-700 hover:bg-gray-600 text-white font-inter px-6 py-3 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 374, columnNumber: 17 }, __self: this }, "Copy to Clipboard"))), history.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-inter font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 386, columnNumber: 15 }, __self: this }, "Recent QR Codes (", history.length, ")"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, history.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-50 dark:bg-gray-800 p-4 rounded-lg flex items-center gap-4 group hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-16 h-16", __source: { fileName: "", lineNumber: 395, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${item.code}`, alt: `Previous QR code for ${item.text}`, className: "w-16 h-16 rounded-lg", __source: { fileName: "", lineNumber: 396, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-300 truncate font-medium", __source: { fileName: "", lineNumber: 403, columnNumber: 23 }, __self: this }, item.text.startsWith("BEGIN:VCARD") ? "Contact Card" : item.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, "Type:", " ", item.text.startsWith("BEGIN:VCARD") ? "Contact" : "URL/Text")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (item.text.startsWith("BEGIN:VCARD")) { setMode("contact"); const parsedContact = parseVCard(item.text); setContact(parsedContact); generateQRCode(item.text); } else { setMode("url"); setUrl(item.text); generateQRCode(item.text); } }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors", "aria-label": "Regenerate QR code", __source: { fileName: "", lineNumber: 415, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo-alt", __source: { fileName: "", lineNumber: 431, columnNumber: 23 }, __self: this }))))))))); }