- {formatDistanceToNow(new Date(version.created_at))} ago
+
+
+ {currentPlan?.plan_overview?.focus} Training Plan
+
+
+ {currentPlan?.plan_overview?.duration_weeks} weeks โข
+ {currentPlan?.plan_overview?.weekly_hours} hrs/week
+
+
+ {currentPlan?.weeks?.map((week, weekIndex) => (
+
+
+
+ Week {weekIndex + 1}: {week.focus}
+
+
+
+
+ {week.workouts.length} workouts
-
- {version.trigger || 'Initial version'}
-
- ))}
-
- {selectedVersion && (
-
-
- Version {selectedVersion.version} Details
-
-
-
- Created:{' '}
- {new Date(selectedVersion.created_at).toLocaleString()}
-
- {selectedVersion.changes_summary && (
-
- Changes:{' '}
- {selectedVersion.changes_summary}
-
- )}
- {selectedVersion.parent_plan_id && (
-
- Parent Version:{' '}
- v{selectedVersion.parent_plan_id}
-
- )}
+
+ {week.workouts.map((workout, workoutIndex) => (
+ {
+ setSelectedWeek(weekIndex);
+ setSelectedWorkout(workout);
+ setShowEditModal(true);
+ }}
+ editable={mode === 'edit'}
+ />
+ ))}
- )}
+ ))}
+
+ {showEditModal && (
+
setShowEditModal(false)}
+ onSave={handleWorkoutUpdate}
+ />
+ )}
+
+
{workout?.type?.replace('_', ' ') || 'Workout'}
+ {editable && (
+
+ )}
+
+
+
Duration: {workout?.duration_minutes || 0} minutes
+
Intensity: {workout?.intensity || 'N/A'}
+ {workout?.description && (
+
{workout.description}
+ )}
+
+
Loading map...
+})
+
+const FileUpload = ({ onUploadSuccess }) => {
+ const { apiKey } = useAuth()
+ const [isDragging, setIsDragging] = useState(false)
+ const [previewData, setPreviewData] = useState(null)
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const handleFile = async (file) => {
+ if (file.type !== 'application/gpx+xml') {
+ setError('Please upload a valid GPX file')
+ return
+ }
+
+ try {
+ // Preview parsing
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ try {
+ const parser = new DOMParser()
+ const gpxDoc = parser.parseFromString(e.target.result, 'text/xml')
+ const geoJson = gpx(gpxDoc)
+
+ // Extract basic info from GeoJSON
+ const name = geoJson.features[0]?.properties?.name || 'Unnamed Route'
+
+ // Calculate distance and elevation (simplified)
+ let totalDistance = 0
+ let elevationGain = 0
+ let elevationLoss = 0
+ let maxElevation = 0
+
+ // Simple calculation - in a real app you'd want more accurate distance calculation
+ const coordinates = geoJson.features[0]?.geometry?.coordinates || []
+ for (let i = 1; i < coordinates.length; i++) {
+ const [prevLon, prevLat, prevEle] = coordinates[i-1]
+ const [currLon, currLat, currEle] = coordinates[i]
+ // Simple distance calculation (you might want to use a more accurate method)
+ const distance = Math.sqrt(Math.pow(currLon - prevLon, 2) + Math.pow(currLat - prevLat, 2)) * 111000 // rough meters
+ totalDistance += distance
+
+ if (prevEle && currEle) {
+ const eleDiff = currEle - prevEle
+ if (eleDiff > 0) {
+ elevationGain += eleDiff
+ } else {
+ elevationLoss += Math.abs(eleDiff)
+ }
+ maxElevation = Math.max(maxElevation, currEle)
+ }
+ }
+
+ const avgGrade = totalDistance > 0 ? ((elevationGain / totalDistance) * 100).toFixed(1) : '0.0'
+
+ setPreviewData({
+ name,
+ distance: (totalDistance / 1000).toFixed(1) + 'km',
+ elevationGain: elevationGain.toFixed(0) + 'm',
+ elevationLoss: elevationLoss.toFixed(0) + 'm',
+ maxElevation: maxElevation.toFixed(0) + 'm',
+ avgGrade: avgGrade + '%',
+ category: 'mixed',
+ gpxContent: e.target.result
+ })
+ } catch (parseError) {
+ setError('Error parsing GPX file: ' + parseError.message)
+ }
+ }
+ reader.readAsText(file)
+ } catch (err) {
+ setError('Error parsing GPX file')
+ }
+ }
+
+ const handleUpload = async () => {
+ if (!previewData) return
+
+ setIsLoading(true)
+ try {
+ const formData = new FormData()
+ const blob = new Blob([previewData.gpxContent], { type: 'application/gpx+xml' })
+ formData.append('file', blob, previewData.name + '.gpx')
+
+ const response = await fetch('/api/routes/upload', {
+ method: 'POST',
+ headers: {
+ 'X-API-Key': apiKey
+ },
+ body: formData
+ })
+
+ if (!response.ok) throw new Error('Upload failed')
+
+ const result = await response.json()
+ onUploadSuccess(result)
+ setPreviewData(null)
+ setError(null)
+ } catch (err) {
+ setError(err.message || 'Upload failed')
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const onDragOver = useCallback((e) => {
+ e.preventDefault()
+ setIsDragging(true)
+ }, [])
+
+ const onDragLeave = useCallback((e) => {
+ e.preventDefault()
+ setIsDragging(false)
+ }, [])
+
+ const onDrop = useCallback((e) => {
+ e.preventDefault()
+ setIsDragging(false)
+ const file = e.dataTransfer.files[0]
+ if (file) handleFile(file)
+ }, [])
+
+ return (
+
+
+
e.target.files[0] && handleFile(e.target.files[0])}
+ />
+
+
+
+ {previewData && (
+
+
Route Preview
+
+
+
+
+ setPreviewData(prev => ({...prev, name: e.target.value}))}
+ className="w-full p-2 border rounded-md"
+ />
+
+
+
+
+
+
+
+
+
+
{previewData.distance}
+
+
+
+
{previewData.elevationGain}
+
+
+
+
{previewData.avgGrade}
+
+
+
+
{previewData.maxElevation}
+
+
+
+
{previewData.elevationLoss}
+
+
+
+
+
+
+
+
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ handleChange('searchQuery', e.target.value)}
+ placeholder="Search routes..."
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+ handleChange('minDistance', Number(e.target.value))}
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+ handleChange('maxDistance', Number(e.target.value))}
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+
+
+
+
+
setSearchQuery(e.target.value)}
+ />
+
+
+ {categories.map(category => (
+
+ ))}
+
+
+
+ {isLoading ? (
+
+ ) : error ? (
+
{error}
+ ) : (
+
+ {filteredRoutes.map(route => (
+
onRouteSelect(route)}
+ >
+
+
{route.name}
+
+ {format(new Date(route.created_at), 'MMM d, yyyy')}
+
+
+
+
+ Distance:
+ {(route.distance / 1000).toFixed(1)}km
+
+
+ Elevation:
+ {route.elevation_gain}m
+
+
+ Category:
+ {route.category}
+
+
+ Grade:
+ {route.grade_avg}%
+
+
+ Difficulty:
+ {[...Array(5)].map((_, index) => (
+
+ ))}
+
+
+
+ ))}
+
+ )}
+
+
+ Route Details
+
+
+
+
+
+
+
Elevation Gain
+
{route.elevation_gain}m
+
+
+
+
+
+
+
Avg Grade
+
{route.grade_avg}%
+
+
+
+
+
+
+
Difficulty
+
+ {[...Array(5)].map((_, index) => (
+
+ ))}
+
+
+
+
+
+
+
Distance
+
{(route.distance / 1000).toFixed(1)}km
+
+
+
Category
+
{route.category}
+
+
+
+
+
+
+
+
+ Start/End Point
+
+
+
+
+ {/* Elevation chart will be rendered here */}
+
+
+
+
Route Sections
+
+
+ {editing && (
+
+ )}
+
+
+
+ {localSections.map((section) => (
+
+
+
Section {section.id}
+
+
+
+
+
+
Distance: {section.distance} km
+
Elevation: {section.elevationGain} m
+
+
+
Max Grade: {section.maxGrade}%
+
Surface:
+ {editing === section.id ? (
+
+ ) : (
+ {section.surfaceType}
+ )}
+
+
+
+
+ {editing === section.id && (
+
+
+
+
+ )}
+
+ ))}
+
+
+ setNewSection({...newSection, name: e.target.value})}
+ />
+ setNewSection({...newSection, start: +e.target.value})}
+ />
+ setNewSection({...newSection, end: +e.target.value})}
+ />
+
+
+
+ {sections.map(section => (
+
+
+
{section.name}
+
{section.start}km - {section.end}km
+
Difficulty: {section.difficulty}/5
+
{section.recommended_gear.replace('_', ' ')}
+
+
+
+ ))}
+
+
+
+
Natural Language Editor
+
+
+ {showTemplates && (
+
+ {templateSuggestions.map((template, index) => (
+
{
+ onChange(template);
+ setShowTemplates(false);
+ }}
+ >
+ {template}
+
+ ))}
+
+ )}
+
+
+
+