function MainComponent() { const [step, setStep] = React.useState("upload"); const [sessionId, setSessionId] = React.useState(null); const [billImage, setBillImage] = React.useState(null); const [items, setItems] = React.useState([]); const [error, setError] = React.useState(null); const [loading, setLoading] = React.useState(false); const [fontSize, setFontSize] = React.useState("normal"); const [highContrast, setHighContrast] = React.useState(false); const [upload, { loading: uploadLoading }] = useUpload(); const [selectedItems, setSelectedItems] = React.useState({}); const [quantities, setQuantities] = React.useState({}); const [uploadProgress, setUploadProgress] = React.useState(0); const [taxAmount, setTaxAmount] = React.useState(0); const [tipAmount, setTipAmount] = React.useState(0); const [tipPercentage, setTipPercentage] = React.useState(15); const [taxDivision, setTaxDivision] = React.useState(1); const handleImageUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; setError(null); setLoading(true); setUploadProgress(0); try { // Validate file size (max 10MB) if (file.size > 10 * 1024 * 1024) { throw new Error("File size must be less than 10MB"); } const validTypes = [ "image/png", "image/jpeg", "image/jpg", "image/webp", "image/gif" ]; if (!validTypes.includes(file.type)) { throw new Error("Please upload a PNG, JPEG, WEBP, or non-animated GIF file"); } // Convert file to base64 const reader = new FileReader(); const base64Promise = new Promise((resolve, reject)=>{ reader.onload = ()=>resolve(reader.result); reader.onerror = ()=>reject(new Error("Failed to read file")); }); reader.readAsDataURL(file); setUploadProgress(20); const base64Image = await base64Promise; setBillImage(base64Image); // Store the image for later use setUploadProgress(40); // Process with GPT Vision - Updated prompt to handle separate tax and fees const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: 'Look for any tax-related charges on this restaurant bill. This could include "Tax", "Sales Tax", "Service Fee", "City Tax", etc. Extract all items, their prices, and ALL tax/fee amounts separately. Return them in this exact format, with no other text: {"items": [{"name": "Item Name", "price": 10.00}, {"name": "Another Item", "price": 20.00}], "tax": 15.06, "fees": 2.50}. The "tax" field should be the sum of all tax-related charges if multiple exist. If there are no separate fees, omit the "fees" field. Make sure all amounts are exactly as shown on the bill, not calculated.' }, { type: "image_url", image_url: { url: base64Image } } ] } ] }) }); setUploadProgress(60); if (!response.ok) { throw new Error("Failed to process image. Please try again."); } const result = await response.json(); setUploadProgress(80); if (!result?.choices?.[0]?.message?.content) { throw new Error("Invalid response format from GPT Vision"); } let extractedData; try { const content = result.choices[0].message.content.trim(); const jsonMatch = content.match(/\{.*\}/s); const jsonStr = jsonMatch ? jsonMatch[0] : content; extractedData = JSON.parse(jsonStr); setUploadProgress(90); if (!Array.isArray(extractedData.items)) { throw new Error("Extracted items data is not an array"); } const extractedItems = extractedData.items.map((item, index)=>{ if (!item.name || !item.price) { throw new Error(`Item at index ${index} is missing required fields`); } return { name: String(item.name).trim(), price: Number(item.price), quantity: item.quantity ? Number(item.quantity) : 1 }; }); const initialQuantities = extractedItems.reduce((acc, item, index)=>{ acc[index] = item.quantity || 1; return acc; }, {}); setQuantities(initialQuantities); setItems(extractedItems); // Set the tax amount, combining tax and fees if both exist if (extractedData.tax || extractedData.fees) { const totalTax = (Number(extractedData.tax) || 0) + (Number(extractedData.fees) || 0); setTaxAmount(totalTax); } } catch (e) { console.error("Parse error:", e, "Raw content:", result.choices[0].message.content); throw new Error("Failed to parse items from the bill. Please try again."); } if (!extractedData.items.length) { throw new Error("No items were found in the bill. Please try again with a clearer image."); } setUploadProgress(100); setStep("items"); } catch (err) { console.error("Upload error:", err); setError(err.message || "Failed to process the bill. Please try again."); setBillImage(null); setItems([]); } finally{ setLoading(false); setUploadProgress(0); } }; const handleCancel = ()=>{ setLoading(false); setError(null); setBillImage(null); setItems([]); }; const formatCurrency = (amount)=>{ const value = parseFloat(amount); return value < 0 ? `(${Math.abs(value).toFixed(2)})` : `${value.toFixed(2)}`; }; const calculateSubtotal = ()=>{ return items.filter((_, index)=>selectedItems[index]).reduce((sum, item, index)=>sum + item.price / quantities[index], 0); }; const calculateTotalBeforeTax = ()=>{ return items.reduce((sum, item, index)=>sum + item.price / quantities[index], 0); }; const calculateProportionalTax = ()=>{ // Simply divide the total tax by the number of people return Number((Number(taxAmount) / taxDivision).toFixed(2)); }; const calculateTotal = ()=>{ const subtotal = calculateSubtotal(); const proportionalTax = calculateProportionalTax(); return subtotal + proportionalTax + Number(tipAmount); }; const renderTaxAndTip = ()=>/*#__PURE__*/ React.createElement("div", { style: { marginBottom: "20px" }, __source: { fileName: "", lineNumber: 206, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { padding: "16px", backgroundColor: highContrast ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)", borderRadius: "8px", marginBottom: "16px" }, __source: { fileName: "", lineNumber: 207, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { padding: "16px", backgroundColor: highContrast ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)", borderRadius: "8px", marginBottom: "16px" }, __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }, __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Subtotal"), /*#__PURE__*/ React.createElement("span", { style: { color: highContrast ? "white" : colors.accent, fontFamily: "font-roboto-mono", fontSize: fontSize === "large" ? "1.2rem" : "1.1rem" }, __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, formatCurrency(calculateSubtotal()))), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "12px" }, __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }, __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, "Tax and Fees"), /*#__PURE__*/ React.createElement("span", { style: { color: highContrast ? "white" : colors.accent, fontFamily: "font-roboto-mono", fontSize: fontSize === "large" ? "1.2rem" : "1.1rem" }, __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, formatCurrency(taxAmount))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }, __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, "Division"), /*#__PURE__*/ React.createElement("div", { style: { flex: 1 }, __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { style: { fontSize: fontSize === "large" ? "0.9rem" : "0.8rem", color: highContrast ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.6)", display: "block", marginBottom: "4px" }, __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "How many people would you like to divide the tax and fees by?"), /*#__PURE__*/ React.createElement("input", { type: "number", value: taxDivision, onChange: (e)=>setTaxDivision(Math.max(1, Number(e.target.value))), style: { width: "100px", padding: "8px", border: `1px solid ${highContrast ? "white" : colors.subtle}`, borderRadius: "4px", backgroundColor: "transparent", color: highContrast ? "white" : colors.text, fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-roboto-mono", textAlign: "right" }, placeholder: "1", step: "1", min: "1", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px", backgroundColor: highContrast ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)", borderRadius: "4px", marginTop: "4px" }, __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "0.9rem" : "0.8rem", fontFamily: "font-montserrat", color: highContrast ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.6)" }, __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, "Your Share of Tax and Fees (divided by ", taxDivision, " ", taxDivision === 1 ? "person" : "people", ")"), /*#__PURE__*/ React.createElement("span", { style: { color: highContrast ? "white" : colors.accent, fontFamily: "font-roboto-mono", fontSize: fontSize === "large" ? "1rem" : "0.9rem" }, __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, formatCurrency(calculateProportionalTax())))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" }, __source: { fileName: "", lineNumber: 371, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }, "Tip"), /*#__PURE__*/ React.createElement("input", { type: "number", value: tipAmount, onChange: (e)=>{ const newTip = Math.max(0, Number(e.target.value)); setTipAmount(newTip); const subtotal = calculateSubtotal(); if (subtotal > 0) { setTipPercentage(Math.round(newTip / subtotal * 100)); } }, style: { width: "100px", padding: "8px", border: `1px solid ${highContrast ? "white" : colors.subtle}`, borderRadius: "4px", backgroundColor: "transparent", color: highContrast ? "white" : colors.text, fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-roboto-mono", textAlign: "right" }, placeholder: "0.00", step: "0.01", min: "0", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "12px" }, __source: { fileName: "", lineNumber: 415, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, __source: { fileName: "", lineNumber: 416, columnNumber: 13 }, __self: this }, [ 15, 18, 20 ].map((percentage)=>/*#__PURE__*/ React.createElement("button", { key: percentage, onClick: ()=>{ setTipPercentage(percentage); setTipAmount(Number((calculateSubtotal() * (percentage / 100)).toFixed(2))); }, style: { flex: 1, padding: "8px", backgroundColor: tipPercentage === percentage ? highContrast ? "white" : colors.primary : "transparent", color: tipPercentage === percentage ? highContrast ? "black" : "white" : highContrast ? "white" : colors.primary, border: `1px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "4px", cursor: "pointer", fontSize: fontSize === "large" ? "1rem" : "0.9rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, percentage, "%")), /*#__PURE__*/ React.createElement("div", { style: { flex: 1, position: "relative" }, __source: { fileName: "", lineNumber: 455, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Custom %", value: tipPercentage !== 15 && tipPercentage !== 18 && tipPercentage !== 20 ? tipPercentage : "", onChange: (e)=>{ const newPercentage = Math.max(0, Number(e.target.value)); setTipPercentage(newPercentage); setTipAmount(Number((calculateSubtotal() * (newPercentage / 100)).toFixed(2))); }, style: { width: "100%", padding: "8px", backgroundColor: "transparent", color: highContrast ? "white" : colors.primary, border: `1px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "4px", fontSize: fontSize === "large" ? "1rem" : "0.9rem", fontFamily: "font-montserrat", textAlign: "center" }, min: "0", step: "1", __source: { fileName: "", lineNumber: 456, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { style: { position: "absolute", right: "8px", top: "50%", transform: "translateY(-50%)", color: highContrast ? "white" : colors.primary, pointerEvents: "none" }, __source: { fileName: "", lineNumber: 491, columnNumber: 17 }, __self: this }, "%"))))))); const colors = { primary: "#2D2D2D", background: "#F7F7F7", accent: "#A38F85", subtle: "#E5E5E5", text: "#2D2D2D", error: "#B56B6B", overlay: "rgba(0, 0, 0, 0.5)" }; const containerStyle = { maxWidth: "600px", margin: "0 auto", padding: "40px 20px", backgroundColor: highContrast ? "black" : colors.background, color: highContrast ? "white" : colors.text, minHeight: "100vh" }; const buttonStyle = { padding: "16px 32px", fontSize: fontSize === "large" ? "1.3rem" : "1rem", backgroundColor: "transparent", color: highContrast ? "white" : colors.primary, border: `1px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "2px", cursor: "pointer", marginTop: "20px", width: "100%", transition: "all 0.3s ease", fontFamily: "font-montserrat", letterSpacing: "0.1em", ":hover": { backgroundColor: highContrast ? "white" : colors.primary, color: highContrast ? "black" : "white" } }; const dropZoneStyle = { width: "100%", padding: "40px 20px", border: `2px dashed ${highContrast ? "white" : colors.accent}`, borderRadius: "12px", display: "flex", flexDirection: "column", alignItems: "center", gap: "16px", backgroundColor: highContrast ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)", cursor: "pointer", transition: "all 0.2s ease", marginBottom: "24px" }; const accessibilityControls = /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "40px", display: "flex", justifyContent: "flex-end", gap: "12px" }, __source: { fileName: "", lineNumber: 567, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFontSize(fontSize === "normal" ? "large" : "normal"), style: { padding: "8px 16px", backgroundColor: "transparent", border: `1px solid ${highContrast ? "white" : colors.accent}`, borderRadius: "2px", color: highContrast ? "white" : colors.accent }, "aria-label": "Toggle font size", __source: { fileName: "", lineNumber: 575, columnNumber: 7 }, __self: this }, fontSize === "normal" ? "A+" : "A-"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setHighContrast(!highContrast), style: { padding: "8px 16px", backgroundColor: "transparent", border: `1px solid ${highContrast ? "white" : colors.accent}`, borderRadius: "2px", color: highContrast ? "white" : colors.accent }, "aria-label": "Toggle high contrast", __source: { fileName: "", lineNumber: 588, columnNumber: 7 }, __self: this }, highContrast ? "Normal Contrast" : "High Contrast")); const handleQuantityChange = (index, value)=>{ const newValue = Math.max(1, parseInt(value) || 1); // Ensure minimum of 1 setQuantities((prev)=>({ ...prev, [index]: newValue })); }; const handleShare = async ()=>{ try { // Create session when sharing if (!sessionId) { const sessionResponse = await fetch("/api/create-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ billImageUrl: billImage, items: items.map((item)=>({ name: item.name, price: Number(item.price) })), taxAmount: Number(taxAmount) || 0, tipAmount: Number(tipAmount) || 0 }) }); if (!sessionResponse.ok) { throw new Error(`Server error: ${sessionResponse.status}`); } const sessionData = await sessionResponse.json(); console.log("Session creation response:", sessionData); if (!sessionData?.session_id) { throw new Error("Invalid response: missing session ID"); } setSessionId(sessionData.session_id); } // Now proceed with sharing if (navigator.share) { try { await navigator.share({ title: "Split the Bill", text: "Join me to split the bill!", url: `${window.location.origin}/session/${sessionId}` }); } catch (err) { if (err.name !== "AbortError") { setError("Failed to share. You can copy the link manually."); } } } else { // Fallback to copying to clipboard try { await navigator.clipboard.writeText(`${window.location.origin}/session/${sessionId}`); setError("Link copied to clipboard!"); setTimeout(()=>setError(null), 2000); } catch (err) { setError("Failed to copy link. Please copy it manually."); } } // Move to share step after successful share/copy setStep("share"); } catch (err) { console.error("Share error:", err); setError(err.message || "Failed to share the bill. Please try again."); } }; const handleVenmo = ()=>{ const total = calculateTotal(); const venmoUrl = `venmo://paycharge?txn=pay&recipients=&amount=${total}¬e=Bill Split`; window.location.href = venmoUrl; }; const handleNewReceipt = ()=>{ setStep("upload"); setSessionId(null); setBillImage(null); setItems([]); setError(null); setTaxAmount(0); setTipAmount(0); setTipPercentage(15); setTaxDivision(1); setSelectedItems({}); setQuantities({}); }; return /*#__PURE__*/ React.createElement("div", { style: containerStyle, __source: { fileName: "", lineNumber: 699, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 700, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2a92a237-df32-4b6f-8d6d-10f608f41f1d/-/format/auto/", alt: "Bannana Split logo", style: { width: "200px", height: "auto", opacity: highContrast ? "0.9" : "0.8" }, __source: { fileName: "", lineNumber: 707, columnNumber: 9 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { style: { color: colors.error, marginBottom: "30px", padding: "16px", border: `1px solid ${colors.error}`, borderRadius: "2px", textAlign: "center", fontSize: fontSize === "large" ? "1.1rem" : "0.9rem" }, __source: { fileName: "", lineNumber: 719, columnNumber: 9 }, __self: this }, error), step === "upload" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 735, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "16px", marginBottom: "12px" }, __source: { fileName: "", lineNumber: 736, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", capture: "environment", onChange: handleImageUpload, style: { display: "none" }, id: "camera-capture", __source: { fileName: "", lineNumber: 737, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "camera-capture", style: { flex: 1, padding: "16px", backgroundColor: highContrast ? "white" : colors.primary, color: highContrast ? "black" : "white", borderRadius: "8px", textAlign: "center", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 745, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera", __source: { fileName: "", lineNumber: 763, columnNumber: 15 }, __self: this }), "Take Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/png,image/jpeg,image/jpg,image.heic,image.heif,application/pdf", onChange: handleImageUpload, style: { display: "none" }, id: "bill-upload", __source: { fileName: "", lineNumber: 767, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "bill-upload", style: { flex: 1, padding: "16px", backgroundColor: "transparent", color: highContrast ? "white" : colors.primary, border: `2px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "8px", textAlign: "center", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 774, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder", __source: { fileName: "", lineNumber: 793, columnNumber: 15 }, __self: this }), "Browse Files")), /*#__PURE__*/ React.createElement("p", { style: { textAlign: "center", color: highContrast ? "rgba(255, 255, 255, 0.7)" : "rgba(45, 45, 45, 0.6)", fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat", marginTop: "8px", fontStyle: "italic" }, __source: { fileName: "", lineNumber: 798, columnNumber: 11 }, __self: this }, "Please get the clearest image possible"), (loading || uploadLoading) && /*#__PURE__*/ React.createElement("div", { style: { marginTop: "24px" }, __source: { fileName: "", lineNumber: 814, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "100%", maxWidth: "400px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 815, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "100%", height: "8px", backgroundColor: highContrast ? "#333" : colors.subtle, borderRadius: "4px", overflow: "hidden", marginBottom: "16px" }, __source: { fileName: "", lineNumber: 818, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: `${uploadProgress}%`, height: "100%", backgroundColor: highContrast ? "white" : colors.accent, transition: "width 0.3s ease" }, __source: { fileName: "", lineNumber: 828, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { style: { color: highContrast ? "white" : colors.primary, fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-montserrat", textAlign: "center", marginBottom: "16px" }, __source: { fileName: "", lineNumber: 837, columnNumber: 17 }, __self: this }, uploadProgress < 33 ? "Uploading..." : uploadProgress < 66 ? "Processing image..." : uploadProgress < 100 ? "Extracting items..." : "Almost done..."), /*#__PURE__*/ React.createElement("button", { onClick: handleCancel, style: { width: "100%", padding: "8px 24px", backgroundColor: "transparent", border: `2px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "8px", color: highContrast ? "white" : colors.primary, cursor: "pointer", fontSize: fontSize === "large" ? "1rem" : "0.9rem", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 854, columnNumber: 17 }, __self: this }, "Cancel")))), step === "items" && items.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 877, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: "1.6rem", marginBottom: "20px", textAlign: "center", fontWeight: "300", letterSpacing: "0.1em", color: highContrast ? "white" : colors.primary, fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 878, columnNumber: 11 }, __self: this }, "Items"), /*#__PURE__*/ React.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 20px 0" }, __source: { fileName: "", lineNumber: 892, columnNumber: 11 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, style: { padding: "8px 16px", borderBottom: `1px solid ${highContrast ? "white" : colors.subtle}`, fontSize: fontSize === "large" ? "1.1rem" : "0.9rem", display: "flex", alignItems: "center", gap: "12px", fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 894, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `item-${index}`, checked: selectedItems[index] || false, onChange: (e)=>{ setSelectedItems((prev)=>({ ...prev, [index]: e.target.checked })); }, style: { width: "18px", height: "18px", cursor: "pointer", accentColor: colors.accent }, __source: { fileName: "", lineNumber: 906, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `item-${index}`, style: { flex: 1, display: "flex", justifyContent: "space-between", alignItems: "center", gap: "12px", cursor: "pointer" }, __source: { fileName: "", lineNumber: 923, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: fontSize === "large" ? "1rem" : "0.9rem", flex: "2" }, __source: { fileName: "", lineNumber: 934, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: "1", justifyContent: "flex-end" }, __source: { fileName: "", lineNumber: 942, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", value: quantities[index] || 1, onChange: (e)=>handleQuantityChange(index, e.target.value), onClick: (e)=>e.stopPropagation(), style: { width: "60px", padding: "4px 8px", border: `1px solid ${highContrast ? "white" : colors.subtle}`, borderRadius: "4px", backgroundColor: "transparent", color: highContrast ? "white" : colors.text, fontSize: fontSize === "large" ? "1.1rem" : "1rem", fontFamily: "font-roboto-mono", textAlign: "center" }, __source: { fileName: "", lineNumber: 951, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { style: { color: highContrast ? "white" : colors.accent, fontSize: fontSize === "large" ? "1.2rem" : "1.1rem", fontWeight: "500", fontFamily: "font-roboto-mono", minWidth: "80px", textAlign: "right" }, __source: { fileName: "", lineNumber: 971, columnNumber: 21 }, __self: this }, formatCurrency(item.price / (quantities[index] || 1)))))))), renderTaxAndTip(), /*#__PURE__*/ React.createElement("div", { style: { padding: "16px 20px", borderTop: `2px solid ${highContrast ? "white" : colors.subtle}`, marginBottom: "20px", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: fontSize === "large" ? "1.3rem" : "1.1rem", fontFamily: "font-montserrat", fontWeight: "500" }, __source: { fileName: "", lineNumber: 991, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1004, columnNumber: 13 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("span", { style: { color: highContrast ? "white" : colors.accent, fontSize: fontSize === "large" ? "1.4rem" : "1.2rem", fontFamily: "font-roboto-mono" }, __source: { fileName: "", lineNumber: 1005, columnNumber: 13 }, __self: this }, formatCurrency(calculateTotal()))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "16px" }, __source: { fileName: "", lineNumber: 1016, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVenmo, style: { ...buttonStyle, flex: 1, backgroundColor: "#008CFF", color: "white", border: "none", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, "aria-label": "Pay with Venmo", __source: { fileName: "", lineNumber: 1017, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-venmo", style: { fontSize: "1.2em" }, __source: { fileName: "", lineNumber: 1032, columnNumber: 15 }, __self: this }), "Venmo"), /*#__PURE__*/ React.createElement("button", { onClick: handleShare, style: { ...buttonStyle, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, "aria-label": "Share bill", __source: { fileName: "", lineNumber: 1036, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt", style: { fontSize: "1.2em" }, __source: { fileName: "", lineNumber: 1048, columnNumber: 15 }, __self: this }), "Share"))), step === "share" && sessionId && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1056, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: fontSize === "large" ? "1.6rem" : "1.3rem", marginBottom: "30px", textAlign: "center", fontWeight: "300", letterSpacing: "0.1em", color: highContrast ? "white" : colors.primary, fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 1057, columnNumber: 11 }, __self: this }, "Share"), /*#__PURE__*/ React.createElement("p", { style: { fontSize: fontSize === "large" ? "1rem" : "0.9rem", marginBottom: "20px", textAlign: "center", color: highContrast ? "white" : colors.text, fontFamily: "font-montserrat" }, __source: { fileName: "", lineNumber: 1070, columnNumber: 11 }, __self: this }, "Share this link to start splitting the bill"), /*#__PURE__*/ React.createElement("div", { style: { padding: "20px", backgroundColor: highContrast ? "#333" : colors.subtle, borderRadius: "2px", wordBreak: "break-all", textAlign: "center", fontFamily: "font-montserrat", fontSize: fontSize === "large" ? "1rem" : "0.9rem", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 1081, columnNumber: 11 }, __self: this }, window.location.origin, "/session/", sessionId), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStep("upload"); setSessionId(null); setBillImage(null); setItems([]); setError(null); }, style: { ...buttonStyle, marginTop: "20px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, __source: { fileName: "", lineNumber: 1096, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload", style: { fontSize: "1.2em" }, __source: { fileName: "", lineNumber: 1113, columnNumber: 13 }, __self: this }), "Upload Another Bill")), /*#__PURE__*/ React.createElement("div", { style: { marginTop: "40px", display: "flex", flexDirection: "column", gap: "20px" }, __source: { fileName: "", lineNumber: 1119, columnNumber: 7 }, __self: this }, step !== "upload" && /*#__PURE__*/ React.createElement("button", { onClick: handleNewReceipt, style: { padding: "12px 24px", backgroundColor: "transparent", color: highContrast ? "white" : colors.primary, border: `2px solid ${highContrast ? "white" : colors.primary}`, borderRadius: "8px", cursor: "pointer", fontSize: fontSize === "large" ? "1rem" : "0.9rem", fontFamily: "font-montserrat", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", width: "100%" }, __source: { fileName: "", lineNumber: 1128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 1146, columnNumber: 13 }, __self: this }), "Upload New Receipt"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "12px" }, __source: { fileName: "", lineNumber: 1151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFontSize(fontSize === "normal" ? "large" : "normal"), style: { padding: "8px 16px", backgroundColor: "transparent", border: `1px solid ${highContrast ? "white" : colors.accent}`, borderRadius: "2px", color: highContrast ? "white" : colors.accent }, "aria-label": "Toggle font size", __source: { fileName: "", lineNumber: 1158, columnNumber: 11 }, __self: this }, fontSize === "normal" ? "A+" : "A-"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setHighContrast(!highContrast), style: { padding: "8px 16px", backgroundColor: "transparent", border: `1px solid ${highContrast ? "white" : colors.accent}`, borderRadius: "2px", color: highContrast ? "white" : colors.accent }, "aria-label": "Toggle high contrast", __source: { fileName: "", lineNumber: 1173, columnNumber: 11 }, __self: this }, highContrast ? "Normal Contrast" : "High Contrast")))); }