var __CODE__ = (() => { var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // virtual:/page.jsx var page_exports = {}; __export(page_exports, { default: () => page_default }); // virtual:/__injected-globals.js var fetch = /* @__PURE__ */ (function(originalFetch) { const getURlFromArgs = (...args) => { const [urlArg] = args; let url; if (typeof urlArg === "string") { url = urlArg; } else if (urlArg instanceof Request) { url = urlArg.url; } else { url = `${urlArg.protocol}//${urlArg.host}${urlArg.pathname}`; } return url; }; const isFirstPartyURL = (url) => { return url.startsWith(window.location.origin) || url.startsWith("/") || url.startsWith("https://created.app"); }; return async function fetchWithHeaders(input, init = {}) { const url = getURlFromArgs(input, init); const isExternalFetch = !isFirstPartyURL(url); if (isExternalFetch) { return originalFetch(input, init); } const initHeaders = init?.headers ?? {}; const finalHeaders = new Headers(initHeaders); finalHeaders.set("x-createxyz-project-id", "b98deeb9-3051-4d7a-a330-96ef46a06b26"); finalHeaders.set("x-createxyz-project-group-id", "c898d13d-ffc6-42b2-9e57-1506c724152c"); if (input instanceof Request) { input.headers.set("x-createxyz-project-id", "b98deeb9-3051-4d7a-a330-96ef46a06b26"); input.headers.set("x-createxyz-project-group-id", "c898d13d-ffc6-42b2-9e57-1506c724152c"); } return originalFetch(input, { ...init, headers: finalHeaders }); }; })(globalThis.fetch); // virtual:/page.jsx function MainComponent() { const [activeTab, setActiveTab] = React.useState("daily"); const [location, setLocation] = React.useState(""); const [locationSuggestions, setLocationSuggestions] = React.useState([]); const [showLocationSuggestions, setShowLocationSuggestions] = React.useState(false); const [weatherData, setWeatherData] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [tripData, setTripData] = React.useState({ destination: "", startDate: "", endDate: "" }); const [tripDestinationSuggestions, setTripDestinationSuggestions] = React.useState([]); const [showTripDestinationSuggestions, setShowTripDestinationSuggestions] = React.useState(false); const [itinerary, setItinerary] = React.useState(null); const [generatingItinerary, setGeneratingItinerary] = React.useState(false); const [quickPlanMode, setQuickPlanMode] = React.useState(false); const [quickPlanData, setQuickPlanData] = React.useState({ destination: "", activityType: "", duration: "2-4" }); const [quickDestinationSuggestions, setQuickDestinationSuggestions] = React.useState([]); const [showQuickDestinationSuggestions, setShowQuickDestinationSuggestions] = React.useState(false); const [quickPlan, setQuickPlan] = React.useState(null); const [generatingQuickPlan, setGeneratingQuickPlan] = React.useState(false); const [packingList, setPackingList] = React.useState([ { id: 1, category: "Sun Protection", items: [ { name: "Sunscreen (SPF 50+)", checked: false, essential: true }, { name: "Wide-brimmed hat", checked: false, essential: true }, { name: "UV-protective sunglasses", checked: false, essential: true }, { name: "UV-protective clothing", checked: false, essential: false }, { name: "Lip balm with SPF", checked: false, essential: false } ] }, { id: 2, category: "Medications & Health", items: [ { name: "Lupus medications", checked: false, essential: true }, { name: "Pain relievers", checked: false, essential: true }, { name: "First aid kit", checked: false, essential: false }, { name: "Medical ID bracelet", checked: false, essential: true }, { name: "Health insurance card", checked: false, essential: true } ] }, { id: 3, category: "Comfort & Protection", items: [ { name: "Water bottle", checked: false, essential: true }, { name: "Light jacket/layers", checked: false, essential: false }, { name: "Umbrella/rain protection", checked: false, essential: false }, { name: "Cooling towel", checked: false, essential: false }, { name: "Portable fan", checked: false, essential: false } ] }, { id: 4, category: "Emergency Items", items: [ { name: "Emergency contact list", checked: false, essential: true }, { name: "Phone charger", checked: false, essential: true }, { name: "Snacks", checked: false, essential: false }, { name: "Small ice pack", checked: false, essential: false } ] } ]); const fetchLocationSuggestions = async (input) => { if (!input || input.length < 2) { setLocationSuggestions([]); setShowLocationSuggestions(false); return; } try { const response = await fetch( `/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(input)}&radius=50000` ); if (response.ok) { const data = await response.json(); const filteredSuggestions = (data.predictions || []).filter( (prediction) => prediction.types.includes("locality") || prediction.types.includes("administrative_area_level_3") ); setLocationSuggestions(filteredSuggestions); setShowLocationSuggestions(true); } } catch (err) { console.error("Error fetching location suggestions:", err); } }; const fetchTripDestinationSuggestions = async (input) => { if (!input || input.length < 2) { setTripDestinationSuggestions([]); setShowTripDestinationSuggestions(false); return; } try { const response = await fetch( `/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(input)}&radius=50000` ); if (response.ok) { const data = await response.json(); const filteredSuggestions = (data.predictions || []).filter( (prediction) => prediction.types.includes("locality") || prediction.types.includes("administrative_area_level_3") ); setTripDestinationSuggestions(filteredSuggestions); setShowTripDestinationSuggestions(true); } } catch (err) { console.error("Error fetching trip destination suggestions:", err); } }; const fetchQuickDestinationSuggestions = async (input) => { if (!input || input.length < 2) { setQuickDestinationSuggestions([]); setShowQuickDestinationSuggestions(false); return; } try { const response = await fetch( `/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(input)}&radius=50000` ); if (response.ok) { const data = await response.json(); const filteredSuggestions = (data.predictions || []).filter( (prediction) => prediction.types.includes("locality") || prediction.types.includes("administrative_area_level_3") ); setQuickDestinationSuggestions(filteredSuggestions); setShowQuickDestinationSuggestions(true); } } catch (err) { console.error("Error fetching quick destination suggestions:", err); } }; const handleLocationChange = (value) => { setLocation(value); fetchLocationSuggestions(value); }; const selectLocationSuggestion = (suggestion) => { setLocation(suggestion.description); setShowLocationSuggestions(false); setLocationSuggestions([]); }; const handleTripDestinationChange = (value) => { setTripData({ ...tripData, destination: value }); fetchTripDestinationSuggestions(value); }; const selectTripDestinationSuggestion = (suggestion) => { setTripData({ ...tripData, destination: suggestion.description }); setShowTripDestinationSuggestions(false); setTripDestinationSuggestions([]); }; const handleQuickDestinationChange = (value) => { setQuickPlanData({ ...quickPlanData, destination: value }); fetchQuickDestinationSuggestions(value); }; const selectQuickDestinationSuggestion = (suggestion) => { setQuickPlanData({ ...quickPlanData, destination: suggestion.description }); setShowQuickDestinationSuggestions(false); setQuickDestinationSuggestions([]); }; const toggleItem = React.useCallback((categoryId, itemName) => { setPackingList( (prevList) => prevList.map( (category) => category.id === categoryId ? { ...category, items: category.items.map( (item) => item.name === itemName ? { ...item, checked: !item.checked } : item ) } : category ) ); }, []); const fetchWeather = React.useCallback(async (city) => { if (!city.trim()) return; setLoading(true); setError(null); setShowLocationSuggestions(false); try { const response = await fetch( `/integrations/weather-by-city/weather/${encodeURIComponent(city)}` ); if (!response.ok) { throw new Error(`Weather API returned ${response.status}`); } const data = await response.json(); setWeatherData(data); } catch (err) { console.error("Weather fetch error:", err); setError("Unable to fetch weather data. Please try again."); } finally { setLoading(false); } }, []); const getUVSafetyLevel = (uvIndex) => { if (uvIndex <= 1) return { level: "Minimal", color: "green", advice: "Low UV exposure - generally safe for brief outdoor activities with basic protection" }; if (uvIndex <= 2) return { level: "Low", color: "green", advice: "Use SPF 30+, protective clothing, and seek shade between 10am-4pm" }; if (uvIndex <= 4) return { level: "Moderate", color: "yellow", advice: "Limit sun exposure to 30 minutes, use SPF 50+, wear protective clothing and hat" }; if (uvIndex <= 6) return { level: "High", color: "orange", advice: "High risk - limit outdoor activities to early morning/evening, use maximum sun protection" }; if (uvIndex <= 8) return { level: "Very High", color: "red", advice: "Severe risk - avoid outdoor activities between 9am-5pm, essential to stay in shade" }; return { level: "Extreme", color: "purple", advice: "Dangerous levels - indoor activities strongly recommended to prevent flares" }; }; const getTempSafety = (tempF) => { if (tempF < 32) return { level: "Extreme Cold Risk", color: "blue", advice: "Cold can trigger Raynaud's phenomenon and joint pain - stay indoors" }; if (tempF < 45) return { level: "High Cold Risk", color: "blue", advice: "Risk of joint inflammation - limit exposure and wear insulated layers" }; if (tempF < 55) return { level: "Moderate Cold", color: "blue", advice: "May cause joint stiffness - wear warm layers and limit exposure time" }; if (tempF > 95) return { level: "Extreme Heat Risk", color: "red", advice: "Dangerous heat level - stay in air conditioning to prevent severe flares" }; if (tempF > 85) return { level: "High Heat Risk", color: "red", advice: "High flare risk - limit outdoor activity to 15 minutes, stay hydrated" }; if (tempF > 75) return { level: "Moderate Heat", color: "yellow", advice: "Increased fatigue risk - take frequent breaks and monitor symptoms" }; if (tempF > 65) return { level: "Mild", color: "green", advice: "Generally comfortable - good for outdoor activities with normal precautions" }; return { level: "Optimal", color: "green", advice: "Ideal temperature range for Lupus patients - maintain normal precautions" }; }; const getWindSafety = (windMph) => { if (windMph > 35) return { level: "Extreme Wind", color: "red", advice: "Dangerous conditions - stay indoors to prevent respiratory issues and fatigue" }; if (windMph > 25) return { level: "High Wind", color: "red", advice: "Risk of respiratory issues and increased UV exposure - avoid outdoor activities" }; if (windMph > 15) return { level: "Moderate Wind", color: "yellow", advice: "May increase fatigue - wear protective eyewear and face covering" }; if (windMph > 10) return { level: "Light Wind", color: "blue", advice: "Manageable conditions - wear light protective layers" }; return { level: "Calm", color: "green", advice: "Optimal conditions - maintain normal sun protection" }; }; const getHumiditySafety = (humidity) => { if (humidity > 80) return { level: "Extreme", color: "red", advice: "High risk of fatigue and breathing difficulty - limit outdoor exposure" }; if (humidity > 70) return { level: "High", color: "orange", advice: "Increased fatigue risk - wear moisture-wicking clothing and take breaks" }; if (humidity > 60) return { level: "Moderate", color: "yellow", advice: "Monitor energy levels - stay hydrated" }; if (humidity > 40) return { level: "Optimal", color: "green", advice: "Comfortable range - maintain normal activity" }; return { level: "Low", color: "blue", advice: "May cause dry airways - consider using a face covering" }; }; const generateRecommendations = (weather) => { if (!weather) return []; const recommendations = []; const uvSafety = getUVSafetyLevel(weather.current.uv); const tempSafety = getTempSafety(weather.current.temp_f); const windSafety = getWindSafety(weather.current.wind_mph); const humiditySafety = getHumiditySafety(weather.current.humidity); if (weather.current.uv > 4) { recommendations.push({ icon: "fas fa-sun-protection-factor", item: `SPF ${weather.current.uv > 6 ? "70+" : "50+"} sunscreen`, priority: "high" }); recommendations.push({ icon: "fas fa-hat-cowboy", item: "Wide-brimmed hat", priority: "high" }); } if (weather.current.temp_f > 85) { recommendations.push({ icon: "fas fa-tint", item: "Water bottle - drink 8-16oz per hour", priority: "high" }); } if (weather.current.temp_f < 45) { recommendations.push({ icon: "fas fa-mitten", item: "Warm layers and gloves", priority: "high" }); } if (weather.current.wind_mph > 20) { recommendations.push({ icon: "fas fa-wind", item: "Wind-resistant jacket", priority: "high" }); } if (tempSafety.color === "red" || uvSafety.color === "red" || windSafety.color === "red") { recommendations.push({ icon: "fas fa-first-aid", item: "Emergency medication kit", priority: "high" }); } return recommendations; }; const generateItinerary = React.useCallback(async () => { if (!tripData.destination || !tripData.startDate || !tripData.endDate) { setError("Please fill in all trip details"); return; } setGeneratingItinerary(true); setError(null); try { const weatherResponse = await fetch( `/integrations/weather-by-city/weather/${encodeURIComponent(tripData.destination)}` ); const weatherInfo = await weatherResponse.json(); const aiResponse = await fetch( "/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a specialized travel planner for Lupus patients. Create a detailed, safe itinerary that considers: - UV exposure (current UV index: ${weatherInfo.current?.uv || "unknown"}) - Temperature sensitivity (current temp: ${weatherInfo.current?.temp_f || "unknown"}\xB0F) - Fatigue management - Need for shade and rest areas - Indoor backup activities - Hydration reminders - Optimal timing (cooler parts of day) Format as a structured daily plan with specific times, activities, safety notes, and Lupus-friendly recommendations.` }, { role: "user", content: `Create a Lupus-friendly itinerary for ${tripData.destination} from ${tripData.startDate} to ${tripData.endDate}. Include specific activities, timing recommendations, safety considerations, and backup indoor options for high UV or extreme weather days.` } ], json_schema: { name: "lupus_itinerary", schema: { type: "object", properties: { destination: { type: "string" }, overview: { type: "string" }, daily_plans: { type: "array", items: { type: "object", properties: { date: { type: "string" }, weather_considerations: { type: "string" }, morning: { type: "object", properties: { time: { type: "string" }, activity: { type: "string" }, location: { type: "string" }, lupus_notes: { type: "string" } }, required: [ "time", "activity", "location", "lupus_notes" ], additionalProperties: false }, afternoon: { type: "object", properties: { time: { type: "string" }, activity: { type: "string" }, location: { type: "string" }, lupus_notes: { type: "string" } }, required: [ "time", "activity", "location", "lupus_notes" ], additionalProperties: false }, evening: { type: "object", properties: { time: { type: "string" }, activity: { type: "string" }, location: { type: "string" }, lupus_notes: { type: "string" } }, required: [ "time", "activity", "location", "lupus_notes" ], additionalProperties: false }, backup_indoor_options: { type: "array", items: { type: "string" } } }, required: [ "date", "weather_considerations", "morning", "afternoon", "evening", "backup_indoor_options" ], additionalProperties: false } }, general_tips: { type: "array", items: { type: "string" } }, packing_checklist: { type: "array", items: { type: "string" } } }, required: [ "destination", "overview", "daily_plans", "general_tips", "packing_checklist" ], additionalProperties: false } } }) } ); if (!aiResponse.ok) { throw new Error("Failed to generate itinerary"); } const result = await aiResponse.json(); const parsedItinerary = JSON.parse(result.choices[0].message.content); setItinerary(parsedItinerary); } catch (err) { console.error("Itinerary generation error:", err); setError("Unable to generate itinerary. Please try again."); } finally { setGeneratingItinerary(false); } }, [tripData]); const generateQuickPlan = React.useCallback(async () => { if (!quickPlanData.destination || !quickPlanData.activityType) { setError("Please fill in destination and activity type"); return; } setGeneratingQuickPlan(true); setError(null); try { const weatherResponse = await fetch( `/integrations/weather-by-city/weather/${encodeURIComponent(quickPlanData.destination)}` ); const weatherInfo = await weatherResponse.json(); const aiResponse = await fetch( "/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a specialized quick activity planner for Lupus patients. Create a safe, detailed plan for a ${quickPlanData.duration} hour ${quickPlanData.activityType} activity that considers: - UV exposure (current UV index: ${weatherInfo.current?.uv || "unknown"}) - Temperature sensitivity (current temp: ${weatherInfo.current?.temp_f || "unknown"}\xB0F) - Fatigue management and pacing - Need for shade and rest breaks - Hydration reminders - Safety considerations - Backup indoor options if weather becomes unsafe IMPORTANT: Use relative timestamps like "Start", "30 minutes", "1 hour", "2 hours" instead of specific times like "7:00 AM" or "2:30 PM". Focus on duration and pacing rather than clock times. Format as a structured plan with relative timing, specific recommendations, and Lupus-friendly safety notes.` }, { role: "user", content: `Create a ${quickPlanData.duration}-hour Lupus-friendly ${quickPlanData.activityType} plan for ${quickPlanData.destination}. Include specific timing, safety considerations, what to bring, and backup options.` } ], json_schema: { name: "quick_lupus_plan", schema: { type: "object", properties: { activity_title: { type: "string" }, destination: { type: "string" }, duration: { type: "string" }, weather_assessment: { type: "string" }, optimal_timing: { type: "string" }, activity_plan: { type: "array", items: { type: "object", properties: { time_slot: { type: "string" }, activity: { type: "string" }, location: { type: "string" }, lupus_considerations: { type: "string" } }, required: [ "time_slot", "activity", "location", "lupus_considerations" ], additionalProperties: false } }, safety_reminders: { type: "array", items: { type: "string" } }, items_to_bring: { type: "array", items: { type: "object", properties: { item: { type: "string" }, priority: { type: "string" }, reason: { type: "string" } }, required: ["item", "priority", "reason"], additionalProperties: false } }, backup_options: { type: "array", items: { type: "string" } } }, required: [ "activity_title", "destination", "duration", "weather_assessment", "optimal_timing", "activity_plan", "safety_reminders", "items_to_bring", "backup_options" ], additionalProperties: false } } }) } ); if (!aiResponse.ok) { throw new Error("Failed to generate quick plan"); } const result = await aiResponse.json(); const parsedPlan = JSON.parse(result.choices[0].message.content); setQuickPlan(parsedPlan); } catch (err) { console.error("Quick plan generation error:", err); setError("Unable to generate quick plan. Please try again."); } finally { setGeneratingQuickPlan(false); } }, [quickPlanData]); return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 font-inter" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-8 h-8 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-lg flex items-center justify-center" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-sun text-white text-sm" })), /* @__PURE__ */ React.createElement("span", { className: "text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent" }, "CumuLupus")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-4" }, /* @__PURE__ */ React.createElement( "a", { href: "/", className: "flex items-center space-x-2 px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-home" }), /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Home") ), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-600" }))))), /* @__PURE__ */ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-6xl font-bold text-gray-900 mb-6" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-sun text-purple-600 mr-2" }), "Lupus-Friendly Trip Planner"), /* @__PURE__ */ React.createElement("p", { className: "text-2xl text-gray-600" }, "Plan safe and enjoyable activities with weather-aware recommendations")), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-2 mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex space-x-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("daily"), className: `flex-1 py-3 px-4 rounded-xl font-semibold transition-all ${activeTab === "daily" ? "bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg" : "text-gray-600 hover:bg-purple-50"}` }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-calendar-day mr-2" }), "Daily Advisor" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("trip"), className: `flex-1 py-3 px-4 rounded-xl font-semibold transition-all ${activeTab === "trip" ? "bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg" : "text-gray-600 hover:bg-purple-50"}` }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-route mr-2" }), "Trip Planner" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("packing"), className: `flex-1 py-3 px-4 rounded-xl font-semibold transition-all ${activeTab === "packing" ? "bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg" : "text-gray-600 hover:bg-purple-50"}` }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-suitcase mr-2" }), "Packing List" ))), activeTab === "daily" && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-3xl font-bold text-gray-900 mb-6" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-map-marker-alt text-purple-600 mr-2" }), "Your Location"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: location, onChange: (e) => handleLocationChange(e.target.value), placeholder: "Enter your city (e.g., New York, London)", className: "flex-1 w-full px-6 py-4 text-xl border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent", onKeyPress: (e) => e.key === "Enter" && fetchWeather(location), onFocus: () => location.length >= 2 && setShowLocationSuggestions(true) } ), /* @__PURE__ */ React.createElement( "button", { onClick: () => fetchWeather(location), disabled: loading || !location.trim(), className: "absolute right-3 top-1/2 transform -translate-y-1/2 px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all" }, loading ? /* @__PURE__ */ React.createElement("i", { className: "fas fa-spinner fa-spin text-lg" }) : /* @__PURE__ */ React.createElement("i", { className: "fas fa-search text-lg" }) ), showLocationSuggestions && locationSuggestions.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-1 z-50 max-h-60 overflow-y-auto" }, locationSuggestions.map((suggestion, index) => /* @__PURE__ */ React.createElement( "div", { key: suggestion.place_id, onClick: () => selectLocationSuggestion(suggestion), className: "px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-gray-900" }, suggestion.structured_formatting.main_text), suggestion.structured_formatting.secondary_text && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, suggestion.structured_formatting.secondary_text) )))), error && /* @__PURE__ */ React.createElement("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-lg" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2" }), error)), weatherData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4" }, "Current Conditions - ", weatherData.location.name), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4" }, /* @__PURE__ */ React.createElement( "div", { className: `p-4 rounded-xl ${getUVSafetyLevel(weatherData.current.uv).color === "green" ? "bg-green-50 border border-green-200" : getUVSafetyLevel(weatherData.current.uv).color === "yellow" ? "bg-yellow-50 border border-yellow-200" : getUVSafetyLevel(weatherData.current.uv).color === "orange" ? "bg-orange-50 border border-orange-200" : getUVSafetyLevel(weatherData.current.uv).color === "red" ? "bg-red-50 border border-red-200" : "bg-purple-50 border border-purple-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-sun text-orange-500" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-600" }, "UV Index")), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-gray-900" }, weatherData.current.uv), /* @__PURE__ */ React.createElement( "div", { className: `text-xs font-medium ${getUVSafetyLevel(weatherData.current.uv).color === "green" ? "text-green-700" : getUVSafetyLevel(weatherData.current.uv).color === "yellow" ? "text-yellow-700" : getUVSafetyLevel(weatherData.current.uv).color === "orange" ? "text-orange-700" : getUVSafetyLevel(weatherData.current.uv).color === "red" ? "text-red-700" : "text-purple-700"}` }, getUVSafetyLevel(weatherData.current.uv).level ) ), /* @__PURE__ */ React.createElement( "div", { className: `p-4 rounded-xl ${getTempSafety(weatherData.current.temp_f).color === "green" ? "bg-green-50 border border-green-200" : getTempSafety(weatherData.current.temp_f).color === "blue" ? "bg-blue-50 border border-blue-200" : "bg-red-50 border border-red-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-thermometer-half text-blue-500" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-600" }, "Temperature")), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-gray-900" }, Math.round(weatherData.current.temp_f), "\xB0F"), /* @__PURE__ */ React.createElement( "div", { className: `text-xs font-medium ${getTempSafety(weatherData.current.temp_f).color === "green" ? "text-green-700" : getTempSafety(weatherData.current.temp_f).color === "blue" ? "text-blue-700" : "text-red-700"}` }, getTempSafety(weatherData.current.temp_f).level ) ), /* @__PURE__ */ React.createElement( "div", { className: `p-4 rounded-xl ${getWindSafety(weatherData.current.wind_mph).color === "green" ? "bg-green-50 border border-green-200" : getWindSafety(weatherData.current.wind_mph).color === "yellow" ? "bg-yellow-50 border border-yellow-200" : "bg-orange-50 border border-orange-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-wind text-gray-500" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-600" }, "Wind")), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-gray-900" }, Math.round(weatherData.current.wind_mph), " mph"), /* @__PURE__ */ React.createElement( "div", { className: `text-xs font-medium ${getWindSafety(weatherData.current.wind_mph).color === "green" ? "text-green-700" : getWindSafety(weatherData.current.wind_mph).color === "yellow" ? "text-yellow-700" : "text-orange-700"}` }, getWindSafety(weatherData.current.wind_mph).level ) ), /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 border border-blue-200 p-4 rounded-xl" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-tint text-blue-500" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-600" }, "Humidity")), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-gray-900" }, weatherData.current.humidity, "%"), /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium text-blue-700" }, weatherData.current.humidity > 70 ? "High" : weatherData.current.humidity > 40 ? "Moderate" : "Low")))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-shield-alt text-green-600 mr-2" }), "Safety Recommendations"), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-purple-50 border border-purple-200 rounded-xl" }, /* @__PURE__ */ React.createElement("div", { className: "font-semibold text-purple-900 mb-1" }, "UV Protection"), /* @__PURE__ */ React.createElement("div", { className: "text-purple-700" }, getUVSafetyLevel(weatherData.current.uv).advice)), /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-xl" }, /* @__PURE__ */ React.createElement("div", { className: "font-semibold text-blue-900 mb-1" }, "Temperature Comfort"), /* @__PURE__ */ React.createElement("div", { className: "text-blue-700" }, getTempSafety(weatherData.current.temp_f).advice)), /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-xl" }, /* @__PURE__ */ React.createElement("div", { className: "font-semibold text-gray-900 mb-1" }, "Wind Conditions"), /* @__PURE__ */ React.createElement("div", { className: "text-gray-700" }, getWindSafety(weatherData.current.wind_mph).advice)))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-backpack text-indigo-600 mr-2" }), "Items to Bring"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3" }, generateRecommendations(weatherData).map((item, index) => /* @__PURE__ */ React.createElement( "div", { key: index, className: `flex items-center space-x-3 p-3 rounded-xl ${item.priority === "high" ? "bg-red-50 border border-red-200" : item.priority === "medium" ? "bg-yellow-50 border border-yellow-200" : "bg-green-50 border border-green-200"}` }, /* @__PURE__ */ React.createElement( "i", { className: `${item.icon} ${item.priority === "high" ? "text-red-600" : item.priority === "medium" ? "text-yellow-600" : "text-green-600"}` } ), /* @__PURE__ */ React.createElement("span", { className: "ml-3 font-medium text-gray-900" }, item.item), item.priority === "high" && /* @__PURE__ */ React.createElement("span", { className: "ml-auto text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full font-medium" }, "Essential") )))))), activeTab === "trip" && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-map-marked-alt text-purple-600 mr-2" }), "Choose Your Planning Mode"), /* @__PURE__ */ React.createElement("div", { className: "grid md:grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { setQuickPlanMode(false); setQuickPlan(null); setItinerary(null); }, className: `p-6 rounded-xl border-2 transition-all ${!quickPlanMode ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-purple-300"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-3 mb-3" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-calendar-week text-purple-600 text-2xl" }), /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold text-gray-900" }, "Full Trip Planner")), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 text-sm" }, "Plan multi-day trips with detailed daily itineraries, weather considerations, and comprehensive packing lists.") ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { setQuickPlanMode(true); setQuickPlan(null); setItinerary(null); }, className: `p-6 rounded-xl border-2 transition-all ${quickPlanMode ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-purple-300"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-3 mb-3" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-bolt text-purple-600 text-2xl" }), /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold text-gray-900" }, "Quick Plan Mode")), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 text-sm" }, "Get instant plans for short outdoor activities with immediate safety recommendations and timing.") ))), quickPlanMode && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-bolt text-purple-600 mr-2" }), "Quick Activity Planner"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Where are you going?"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: quickPlanData.destination, onChange: (e) => handleQuickDestinationChange(e.target.value), placeholder: "Enter location (e.g., Central Park, Downtown)", className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent", onFocus: () => quickPlanData.destination.length >= 2 && setShowQuickDestinationSuggestions(true) } ), showQuickDestinationSuggestions && quickDestinationSuggestions.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-1 z-50 max-h-60 overflow-y-auto" }, quickDestinationSuggestions.map( (suggestion, index) => /* @__PURE__ */ React.createElement( "div", { key: suggestion.place_id, onClick: () => selectQuickDestinationSuggestion( suggestion ), className: "px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-gray-900" }, suggestion.structured_formatting.main_text), suggestion.structured_formatting.secondary_text && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, suggestion.structured_formatting.secondary_text) ) )))), /* @__PURE__ */ React.createElement("div", { className: "grid md:grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Activity Type"), /* @__PURE__ */ React.createElement( "select", { value: quickPlanData.activityType, onChange: (e) => setQuickPlanData({ ...quickPlanData, activityType: e.target.value }), className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Select activity type"), /* @__PURE__ */ React.createElement("option", { value: "walking" }, "Walking/Strolling"), /* @__PURE__ */ React.createElement("option", { value: "park-visit" }, "Park Visit"), /* @__PURE__ */ React.createElement("option", { value: "shopping" }, "Outdoor Shopping"), /* @__PURE__ */ React.createElement("option", { value: "sightseeing" }, "Sightseeing"), /* @__PURE__ */ React.createElement("option", { value: "photography" }, "Photography Walk"), /* @__PURE__ */ React.createElement("option", { value: "picnic" }, "Picnic"), /* @__PURE__ */ React.createElement("option", { value: "garden-visit" }, "Garden/Museum Visit"), /* @__PURE__ */ React.createElement("option", { value: "beach" }, "Beach/Waterfront"), /* @__PURE__ */ React.createElement("option", { value: "hiking" }, "Light Hiking") )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Duration"), /* @__PURE__ */ React.createElement( "select", { value: quickPlanData.duration, onChange: (e) => setQuickPlanData({ ...quickPlanData, duration: e.target.value }), className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" }, /* @__PURE__ */ React.createElement("option", { value: "1-2" }, "1-2 hours"), /* @__PURE__ */ React.createElement("option", { value: "2-4" }, "2-4 hours"), /* @__PURE__ */ React.createElement("option", { value: "4-6" }, "4-6 hours (Half day)"), /* @__PURE__ */ React.createElement("option", { value: "6-8" }, "6-8 hours (Full day)") ))), /* @__PURE__ */ React.createElement( "button", { onClick: generateQuickPlan, disabled: generatingQuickPlan || !quickPlanData.destination || !quickPlanData.activityType, className: "w-full py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all" }, generatingQuickPlan ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2" }), "Generating Quick Plan...") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-bolt mr-2" }), "Get My Quick Plan") )), error && /* @__PURE__ */ React.createElement("div", { className: "mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2" }), error)), quickPlan && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-bolt text-purple-600 mr-2" }), quickPlan.activity_title), /* @__PURE__ */ React.createElement( "button", { onClick: generateQuickPlan, className: "px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-redo mr-2" }), "Regenerate" )), /* @__PURE__ */ React.createElement("div", { className: "grid md:grid-cols-2 gap-4 mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-gradient-to-r from-purple-50 to-indigo-50 p-4 rounded-xl" }, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-gray-900 mb-2" }, "\u{1F4CD} ", quickPlan.destination), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600" }, "Duration: ", quickPlan.duration)), /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 p-4 rounded-xl" }, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-blue-900 mb-2" }, "\u23F0 Best Time"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-blue-700" }, quickPlan.optimal_timing))), /* @__PURE__ */ React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 p-4 rounded-xl" }, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-yellow-900 mb-2" }, "\u{1F324}\uFE0F Weather Assessment"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-yellow-800" }, quickPlan.weather_assessment))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-clock text-indigo-600 mr-2" }), "Activity Timeline"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, quickPlan.activity_plan.map((step, index) => /* @__PURE__ */ React.createElement( "div", { key: index, className: "border-l-4 border-purple-400 pl-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-clock text-purple-600" }), /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-gray-900" }, step.time_slot)), /* @__PURE__ */ React.createElement("div", { className: "text-gray-900 font-medium mb-1" }, step.activity), /* @__PURE__ */ React.createElement("div", { className: "text-gray-600 text-sm mb-2" }, "\u{1F4CD} ", step.location), /* @__PURE__ */ React.createElement("div", { className: "text-purple-700 text-sm bg-purple-50 p-2 rounded" }, "\u{1F4A1} ", step.lupus_considerations) )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-shield-alt text-green-600 mr-2" }), "Safety Reminders"), /* @__PURE__ */ React.createElement("ul", { className: "space-y-2" }, quickPlan.safety_reminders.map((reminder, index) => /* @__PURE__ */ React.createElement( "li", { key: index, className: "flex items-start space-x-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-check-circle text-green-500 mt-1" }), /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, reminder) )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-backpack text-indigo-600 mr-2" }), "Items to Bring"), /* @__PURE__ */ React.createElement("div", { className: "grid md:grid-cols-2 gap-3" }, quickPlan.items_to_bring.map((item, index) => /* @__PURE__ */ React.createElement( "div", { key: index, className: `flex items-center space-x-3 p-3 rounded-xl ${item.priority === "high" ? "bg-red-50 border border-red-200" : item.priority === "medium" ? "bg-yellow-50 border border-yellow-200" : "bg-green-50 border border-green-200"}` }, /* @__PURE__ */ React.createElement( "i", { className: `fas fa-circle ${item.priority === "high" ? "text-red-600" : item.priority === "medium" ? "text-yellow-600" : "text-green-600"}` } ), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-gray-900 block" }, item.item), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-600" }, item.reason)), item.priority === "high" && /* @__PURE__ */ React.createElement("span", { className: "text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full font-medium" }, "Essential") )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-home text-gray-600 mr-2" }), "Backup Indoor Options"), /* @__PURE__ */ React.createElement("ul", { className: "space-y-2" }, quickPlan.backup_options.map((option, index) => /* @__PURE__ */ React.createElement( "li", { key: index, className: "flex items-start space-x-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-arrow-right text-gray-400 mt-1" }), /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, option) )))))), !quickPlanMode && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-calendar-week text-purple-600 mr-2" }), "Multi-Day Trip Details"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Destination"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: tripData.destination, onChange: (e) => handleTripDestinationChange(e.target.value), placeholder: "Enter destination city", className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent", onFocus: () => tripData.destination.length >= 2 && setShowTripDestinationSuggestions(true) } ), showTripDestinationSuggestions && tripDestinationSuggestions.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-1 z-50 max-h-60 overflow-y-auto" }, tripDestinationSuggestions.map( (suggestion, index) => /* @__PURE__ */ React.createElement( "div", { key: suggestion.place_id, onClick: () => selectTripDestinationSuggestion( suggestion ), className: "px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-gray-900" }, suggestion.structured_formatting.main_text), suggestion.structured_formatting.secondary_text && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, suggestion.structured_formatting.secondary_text) ) )))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Start Date"), /* @__PURE__ */ React.createElement( "input", { type: "date", value: tripData.startDate, onChange: (e) => setTripData({ ...tripData, startDate: e.target.value }), className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "End Date"), /* @__PURE__ */ React.createElement( "input", { type: "date", value: tripData.endDate, onChange: (e) => setTripData({ ...tripData, endDate: e.target.value }), className: "w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" } ))), /* @__PURE__ */ React.createElement( "button", { onClick: generateItinerary, disabled: generatingItinerary || !tripData.destination || !tripData.startDate || !tripData.endDate, className: "w-full py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all" }, generatingItinerary ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2" }), "Generating AI Itinerary...") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-magic mr-2" }), "Generate Lupus-Friendly Itinerary") )), error && /* @__PURE__ */ React.createElement("div", { className: "mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2" }), error)), itinerary && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-gray-900" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-route text-indigo-600 mr-2" }), "Your Lupus-Friendly Itinerary"), /* @__PURE__ */ React.createElement( "button", { onClick: generateItinerary, className: "px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-redo mr-2" }), "Regenerate" )), /* @__PURE__ */ React.createElement("div", { className: "bg-gradient-to-r from-purple-50 to-indigo-50 p-4 rounded-xl" }, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-gray-900 mb-2" }, itinerary.destination), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700" }, itinerary.overview))), itinerary.daily_plans.map((day, index) => /* @__PURE__ */ React.createElement( "div", { key: index, className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-calendar-alt text-purple-600 mr-2" }), day.date), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { setGeneratingItinerary(true); try { const weatherResponse = await fetch( `/integrations/weather-by-city/weather/${encodeURIComponent(tripData.destination)}` ); const weatherInfo = await weatherResponse.json(); const aiResponse = await fetch( "/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a specialized travel planner for Lupus patients. Create a detailed, safe itinerary for a single day that considers: - UV exposure (current UV index: ${weatherInfo.current?.uv || "unknown"}) - Temperature sensitivity (current temp: ${weatherInfo.current?.temp_f || "unknown"}\xB0F) - Fatigue management - Need for shade and rest areas - Indoor backup activities - Hydration reminders - Optimal timing (cooler parts of day) Format as a structured daily plan with specific times, activities, safety notes, and Lupus-friendly recommendations.` }, { role: "user", content: `Create a single day Lupus-friendly itinerary for ${tripData.destination} on ${day.date}. Include specific activities, timing recommendations, safety considerations, and backup indoor options.` } ] }) } ); if (!aiResponse.ok) { throw new Error( "Failed to regenerate day plan" ); } const result = await aiResponse.json(); const newDayPlan = JSON.parse( result.choices[0].message.content ); setItinerary((prev) => ({ ...prev, daily_plans: prev.daily_plans.map( (d, i) => i === index ? { ...newDayPlan, date: day.date } : d ) })); } catch (err) { console.error("Day regeneration error:", err); setError( "Unable to regenerate day plan. Please try again." ); } finally { setGeneratingItinerary(false); } }, className: "px-3 py-1.5 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors text-sm" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-redo mr-1" }), "Regenerate Day" )), /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 border border-blue-200 p-3 rounded-lg mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-blue-900 mb-1" }, "Weather Considerations"), /* @__PURE__ */ React.createElement("div", { className: "text-blue-700 text-sm" }, day.weather_considerations)), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "border-l-4 border-yellow-400 pl-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-sun text-yellow-500" }), /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-gray-900" }, "Morning - ", day.morning.time)), /* @__PURE__ */ React.createElement("div", { className: "text-gray-900 font-medium" }, day.morning.activity), /* @__PURE__ */ React.createElement("div", { className: "text-gray-600 text-sm mb-1" }, "\u{1F4CD} ", day.morning.location), /* @__PURE__ */ React.createElement("div", { className: "text-purple-700 text-sm bg-purple-50 p-2 rounded" }, "\u{1F4A1} ", day.morning.lupus_notes)), /* @__PURE__ */ React.createElement("div", { className: "border-l-4 border-orange-400 pl-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-sun text-orange-500" }), /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-gray-900" }, "Afternoon - ", day.afternoon.time)), /* @__PURE__ */ React.createElement("div", { className: "text-gray-900 font-medium" }, day.afternoon.activity), /* @__PURE__ */ React.createElement("div", { className: "text-gray-600 text-sm mb-1" }, "\u{1F4CD} ", day.afternoon.location), /* @__PURE__ */ React.createElement("div", { className: "text-purple-700 text-sm bg-purple-50 p-2 rounded" }, "\u{1F4A1} ", day.afternoon.lupus_notes)), /* @__PURE__ */ React.createElement("div", { className: "border-l-4 border-indigo-400 pl-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-moon text-indigo-500" }), /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-gray-900" }, "Evening - ", day.evening.time)), /* @__PURE__ */ React.createElement("div", { className: "text-gray-900 font-medium" }, day.evening.activity), /* @__PURE__ */ React.createElement("div", { className: "text-gray-600 text-sm mb-1" }, "\u{1F4CD} ", day.evening.location), /* @__PURE__ */ React.createElement("div", { className: "text-purple-700 text-sm bg-purple-50 p-2 rounded" }, "\u{1F4A1} ", day.evening.lupus_notes))), day.backup_indoor_options.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-gray-900 mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-home text-gray-600 mr-2" }), "Backup Indoor Options"), /* @__PURE__ */ React.createElement("ul", { className: "space-y-1" }, day.backup_indoor_options.map( (option, optionIndex) => /* @__PURE__ */ React.createElement( "li", { key: optionIndex, className: "text-gray-700 text-sm" }, "\u2022 ", option ) ))) )), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-3" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-lightbulb text-yellow-500 mr-2" }), "General Tips for Your Trip"), /* @__PURE__ */ React.createElement("ul", { className: "space-y-2" }, itinerary.general_tips.map((tip, index) => /* @__PURE__ */ React.createElement( "li", { key: index, className: "flex items-start space-x-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-check-circle text-green-500 mt-1" }), /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, tip) )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-gray-900 mb-3" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-suitcase text-indigo-600 mr-2" }), "Lupus-Friendly Packing Checklist"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2" }, itinerary.packing_checklist.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "flex items-center p-2" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", className: "h-5 w-5 text-purple-600 rounded border-gray-300 focus:ring-purple-500" } ), /* @__PURE__ */ React.createElement("span", { className: "ml-3 text-gray-900" }, item)))))))), activeTab === "packing" && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-suitcase text-purple-600 mr-2" }), "Lupus-Friendly Packing List"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 mb-6" }, "Use this comprehensive packing list to ensure you have everything needed for a safe and comfortable outing."), packingList.map((category) => /* @__PURE__ */ React.createElement("div", { key: category.id, className: "mb-6 last:mb-0" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-3" }, category.category), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, category.items.map((item) => /* @__PURE__ */ React.createElement( "div", { key: item.name, className: `flex items-center space-x-2 p-3 rounded-xl ${item.checked ? "bg-green-50 border border-green-200" : "bg-white border-gray-200"}` }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", checked: item.checked, onChange: () => toggleItem(category.id, item.name), className: "h-5 w-5 text-purple-600 rounded border-gray-300 focus:ring-purple-500" } ), /* @__PURE__ */ React.createElement("span", { className: "ml-3 text-gray-900" }, item.name), item.essential && /* @__PURE__ */ React.createElement("span", { className: "ml-2 px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full font-medium" }, "Essential") )))))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, "Packing Progress"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, packingList.map((category) => { const checkedCount = category.items.filter( (item) => item.checked ).length; const totalCount = category.items.length; const progress = checkedCount / totalCount * 100; return /* @__PURE__ */ React.createElement("div", { key: category.id }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between text-sm text-gray-600 mb-1" }, /* @__PURE__ */ React.createElement("span", null, category.category), /* @__PURE__ */ React.createElement("span", null, checkedCount, "/", totalCount, " items")), /* @__PURE__ */ React.createElement("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden" }, /* @__PURE__ */ React.createElement( "div", { className: "h-full bg-gradient-to-r from-purple-600 to-indigo-600 transition-all duration-300", style: { width: `${progress}%` } } ))); })))))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();