function MainComponent() { const [city, setCity] = React.useState(""); const [view, setView] = React.useState("daily"); const [data, setData] = React.useState([]); const [currentWeather, setCurrentWeather] = React.useState(null); const [forecast, setForecast] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const fetchHistoricalData = React.useCallback(async ()=>{ if (!city) return; try { const response = await fetch("/api/weather-history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ city }) }); const historicalData = await response.json(); if (historicalData.error) { setError(historicalData.error); return; } setData(historicalData); } catch (err) { setError("Failed to fetch historical data"); } }, [ city ]); const clearHistoricalData = React.useCallback(async ()=>{ if (!city) return; try { await fetch("/api/clear-weather-data", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ city }) }); setData([]); } catch (err) { setError("Failed to clear historical data"); } }, [ city ]); const fetchWeatherData = React.useCallback(async ()=>{ if (!city) return; setLoading(true); setError(null); try { const response = await fetch(`/integrations/weather-by-city/weather/${encodeURIComponent(city)}`, { method: "GET" }); const weatherData = await response.json(); if (weatherData.error) { setError(weatherData.error.message); return; } setCurrentWeather({ temp: weatherData.current.temp_c, conditions: weatherData.current.condition.text, timestamp: weatherData.current.last_updated }); if (weatherData.forecast && weatherData.forecast.forecastday) { setForecast(weatherData.forecast.forecastday); } } catch (err) { setError("Failed to fetch weather data"); } finally{ setLoading(false); } }, [ city ]); const collectData = React.useCallback(async ()=>{ if (!city) return; try { const response = await fetch("/api/collect-weather", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ city }) }); const result = await response.json(); if (result.error) { setError(result.error); return; } setData((prevData)=>[ ...prevData, { date: result.current.timestamp, forecast: result.forecast.hourly[0].temperature, actual: result.current.temperature } ]); fetchHistoricalData(); } catch (err) { setError("Failed to collect weather data"); } }, [ city, fetchHistoricalData ]); React.useEffect(()=>{ if (city) { fetchWeatherData(); fetchHistoricalData(); } }, [ city ]); const calculateAccuracy = (forecast, actual)=>{ return Math.abs(forecast - actual); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 w-full px-4 bg-[#f7f7f7] z-10", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border-b border-gray-200 shadow-sm p-3", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: "Enter city name...", className: "flex-1 p-3 border border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none font-roboto", value: city, onChange: (e)=>setCity(e.target.value), __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: collectData, className: "px-4 py-2 bg-blue-500 text-white rounded-md font-roboto hover:bg-blue-600 transition-colors", disabled: !city || loading, __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "Collect Data")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-3 bg-red-50 border border-red-200 rounded-md", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-500 mr-2", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-red-700 font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, error))))), /*#__PURE__*/ React.createElement("div", { className: "pt-20 px-4", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4 mb-4", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "Current Weather"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Loading...") : currentWeather ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-roboto", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, currentWeather.temp, "°C"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, currentWeather.conditions), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Last updated:", " ", new Date(currentWeather.timestamp).toLocaleTimeString()))) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "Select a city to view weather")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4 mb-4", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "7-Day Forecast"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Loading...") : forecast && forecast.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, forecast.map((day, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border rounded-lg", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 font-roboto mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, new Date(day.date).toLocaleDateString("en-US", { weekday: "short" })), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto mb-1", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, day.day.avgtemp_c, "°C"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, day.day.condition.text)))) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "No forecast data available")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Forecast History"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("daily"), className: `px-3 py-1 rounded-md font-roboto ${view === "daily" ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "Daily"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("hourly"), className: `px-3 py-1 rounded-md font-roboto ${view === "hourly" ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, "Hourly"), /*#__PURE__*/ React.createElement("button", { onClick: fetchWeatherData, className: "px-3 py-1 bg-green-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "Refresh Data"), /*#__PURE__*/ React.createElement("button", { onClick: clearHistoricalData, className: "px-3 py-1 bg-red-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }, "Clear History"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left font-roboto", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left font-roboto", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, "Forecast"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left font-roboto", __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }, "Actual"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left font-roboto", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, "Difference"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, data.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 255, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto", __source: { fileName: "", lineNumber: 256, columnNumber: 21 }, __self: this }, new Date(item.date).toLocaleString()), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto", __source: { fileName: "", lineNumber: 259, columnNumber: 21 }, __self: this }, item.forecast, "°C"), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, item.actual, "°C"), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto", __source: { fileName: "", lineNumber: 261, columnNumber: 21 }, __self: this }, calculateAccuracy(item.forecast, item.actual), "°C"))), data.length === 0 && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { colSpan: "4", className: "p-4 text-center text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, 'No data collected yet. Click "Collect Data" to start tracking.'))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 h-[300px] border rounded-lg p-4", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, data.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-end space-x-2", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, data.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex-1 flex flex-col items-center", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between", __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[200px] w-2 bg-blue-500", style: { height: `${item.forecast / 50 * 200}px` }, __source: { fileName: "", lineNumber: 291, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] w-2 bg-green-500", style: { height: `${item.actual / 50 * 200}px` }, __source: { fileName: "", lineNumber: 297, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-2 font-roboto", __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, new Date(item.date).toLocaleTimeString()))))) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }, "Collect data to see temperature trends"))))); }