import React, { useState, useEffect } from 'react'; // Main App component const App = () => { // State for currency conversion const [amount, setAmount] = useState(''); const [fromCurrency, setFromCurrency] = useState('EUR'); const [toCurrency, setToCurrency] = useState('MXN'); const [convertedAmount, setConvertedAmount] = useState(0); // State for Gemini API feature: what to buy/do const [geminiBuyResponse, setGeminiBuyResponse] = useState(''); const [loadingGeminiBuy, setLoadingGeminiBuy] = useState(false); // State for Gemini API feature: places to visit const [geminiVisitResponse, setGeminiVisitResponse] = useState(''); const [loadingGeminiVisit, setLoadingGeminiVisit] = useState(false); // Fixed commission rate const COMMISSION_RATE = 0.013; // 1.3% // Exchange rates (approximate, hardcoded for demonstration) // In a real app, these would come from an API const exchangeRates = { EUR: { USD: 1.08, MXN: 19.90, EUR: 1, // For same currency conversion }, USD: { EUR: 0.92, MXN: 18.40, USD: 1, }, MXN: { EUR: 0.050, USD: 0.054, MXN: 1, }, }; // Function to calculate the conversion const calculateConversion = () => { const inputAmount = parseFloat(amount); if (isNaN(inputAmount) || inputAmount <= 0) { setConvertedAmount(0); return; } // Get the base rate let rate = exchangeRates[fromCurrency][toCurrency]; // Apply commission const amountAfterCommission = inputAmount * (1 - COMMISSION_RATE); const result = amountAfterCommission * rate; setConvertedAmount(result.toFixed(2)); // Round to 2 decimal places }; // Recalculate whenever amount, fromCurrency, or toCurrency changes useEffect(() => { calculateConversion(); }, [amount, fromCurrency, toCurrency]); // Function to handle currency swap const swapCurrencies = () => { setFromCurrency(toCurrency); setToCurrency(fromCurrency); }; // Function to call Gemini API for suggestions on what to buy/do const handleGeminiBuySuggestion = async () => { if (parseFloat(convertedAmount) <= 0) { setGeminiBuyResponse('Por favor, ingresa un monto válido para obtener sugerencias.'); return; } setLoadingGeminiBuy(true); setGeminiBuyResponse(''); // Clear previous response const prompt = `Dado ${convertedAmount} ${toCurrency}, sugiere 3-5 artículos o experiencias típicas que un turista podría comprar o hacer en Madrid. Sé conciso y céntrate en categorías de gasto comunes para turistas como comida, souvenirs, transporte o actividades pequeñas. Responde en español.`; let chatHistory = []; chatHistory.push({ role: "user", parts: [{ text: prompt }] }); const payload = { contents: chatHistory }; const apiKey = ""; // Leave as-is for Canvas to provide the key const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`; try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const result = await response.json(); if (result.candidates && result.candidates.length > 0 && result.candidates[0].content && result.candidates[0].content.parts && result.candidates[0].content.parts.length > 0) { const text = result.candidates[0].content.parts[0].text; setGeminiBuyResponse(text); } else { setGeminiBuyResponse('No se pudieron generar sugerencias en este momento. Inténtalo de nuevo.'); } } catch (error) { console.error('Error calling Gemini API for buy suggestions:', error); setGeminiBuyResponse('Ocurrió un error al conectar con el servicio de IA. Por favor, inténtalo más tarde.'); } finally { setLoadingGeminiBuy(false); } }; // Function to call Gemini API for suggestions on places to visit const handleGeminiVisitSuggestion = async () => { if (parseFloat(convertedAmount) <= 0) { setGeminiVisitResponse('Por favor, ingresa un monto válido para obtener sugerencias de lugares.'); return; } setLoadingGeminiVisit(true); setGeminiVisitResponse(''); // Clear previous response const prompt = `Dado que tengo ${convertedAmount} ${toCurrency}, sugiere 3-5 lugares o actividades turísticas en Madrid que podría visitar o realizar con este presupuesto. Sé conciso y céntrate en opciones de bajo a medio costo. Responde en español.`; let chatHistory = []; chatHistory.push({ role: "user", parts: [{ text: prompt }] }); const payload = { contents: chatHistory }; const apiKey = ""; // Leave as-is for Canvas to provide the key const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`; try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const result = await response.json(); if (result.candidates && result.candidates.length > 0 && result.candidates[0].content && result.candidates[0].content.parts && result.candidates[0].content.parts.length > 0) { const text = result.candidates[0].content.parts[0].text; setGeminiVisitResponse(text); } else { setGeminiVisitResponse('No se pudieron generar sugerencias de lugares en este momento. Inténtalo de nuevo.'); } } catch (error) { console.error('Error calling Gemini API for visit suggestions:', error); setGeminiVisitResponse('Ocurrió un error al conectar con el servicio de IA. Por favor, inténtalo más tarde.'); } finally { setLoadingGeminiVisit(false); } }; return ( ); }; export default App;