(
+ label: string,
+ value: T,
+ optionsList: { value: T; label: string }[],
+ onUpdate: (newValue: T) => void
+ ) => (
+
+ {label}
+
+
+ );
+
+ // Common options for all workout types
+ const renderCommonOptions = () => (
+ <>
+ {/* Warm Up */}
+ {renderSelect('Warm Up', options.warmUp, WARM_UP_OPTIONS, (v) => updateOption('warmUp', v))}
+
+ {/* Target Grade */}
+
+ Target Grade
+
+
+
+ );
+
+ // Quality filters section
+ const renderQualityFilters = () => (
+ <>
+
+ Min Ascents
+ updateOption('minAscents', v || 0)}
+ className={styles.inputNumber}
+ />
+
+
+
+ Min Rating
+ updateOption('minRating', v || 0)}
+ className={styles.inputNumber}
+ />
+
+
+ {/* Climb Bias */}
+ {renderSelect('Climb Bias', options.climbBias, CLIMB_BIAS_OPTIONS, (v) => updateOption('climbBias', v))}
+
+ );
+
+ // Volume-specific options
+ const renderVolumeOptions = () => {
+ const volumeOptions = options as VolumeOptions;
+ return (
+ <>
+ {renderCommonOptions()}
+
+ {renderStepper('Main Set Climbs', volumeOptions.mainSetClimbs, (v) =>
+ onChange({ ...volumeOptions, mainSetClimbs: v })
+ )}
+
+ {renderStepper('Main Set Variability', volumeOptions.mainSetVariability, (v) =>
+ onChange({ ...volumeOptions, mainSetVariability: v }), 0, 5
+ )}
+
+ {renderQualityFilters()}
+
+ );
+ };
+
+ // Pyramid-specific options
+ const renderPyramidOptions = () => {
+ const pyramidOptions = options as PyramidOptions;
+ return (
+ <>
+ {renderCommonOptions()}
+
+ {renderStepper('Number of Steps', pyramidOptions.numberOfSteps, (v) =>
+ onChange({ ...pyramidOptions, numberOfSteps: v }), 3, 15
+ )}
+
+ {renderStepper('Climbs per Step', pyramidOptions.climbsPerStep, (v) =>
+ onChange({ ...pyramidOptions, climbsPerStep: v }), 1, 5
+ )}
+
+ {renderQualityFilters()}
+
+ );
+ };
+
+ // Ladder-specific options
+ const renderLadderOptions = () => {
+ const ladderOptions = options as LadderOptions;
+ return (
+ <>
+ {renderCommonOptions()}
+
+ {renderStepper('Number of Steps', ladderOptions.numberOfSteps, (v) =>
+ onChange({ ...ladderOptions, numberOfSteps: v }), 3, 15
+ )}
+
+ {renderStepper('Climbs per Step', ladderOptions.climbsPerStep, (v) =>
+ onChange({ ...ladderOptions, climbsPerStep: v }), 1, 5
+ )}
+
+ {renderQualityFilters()}
+
+ );
+ };
+
+ // Grade Focus-specific options
+ const renderGradeFocusOptions = () => {
+ const focusOptions = options as GradeFocusOptions;
+ return (
+ <>
+ {renderCommonOptions()}
+
+ {renderStepper('Number of Climbs', focusOptions.numberOfClimbs, (v) =>
+ onChange({ ...focusOptions, numberOfClimbs: v }), 1, 50
+ )}
+
+ {renderQualityFilters()}
+
+ );
+ };
+
+ // Render the appropriate options form
+ const renderOptionsForm = () => {
+ switch (workoutType) {
+ case 'volume':
+ return renderVolumeOptions();
+ case 'pyramid':
+ return renderPyramidOptions();
+ case 'ladder':
+ return renderLadderOptions();
+ case 'gradeFocus':
+ return renderGradeFocusOptions();
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+ {renderOptionsForm()}
+
+
+
+ }
+ onClick={onReset}
+ className={styles.resetButton}
+ >
+ Reset
+
+
+
+ Configure options to preview
+
+ );
+ }
+
+ const { points, minGrade, maxGrade, gradeLabels } = chartData;
+ const gradeRange = maxGrade - minGrade || 1;
+
+ // Create SVG path for the line
+ const linePath = points
+ .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+ .join(' ');
+
+ return (
+
+ {/* Y-axis labels */}
+
+ {gradeLabels.filter((_, i, arr) => {
+ // Show fewer labels on small screens
+ const step = arr.length > 6 ? 2 : 1;
+ return i % step === 0 || i === arr.length - 1;
+ }).reverse().map((grade) => {
+ const yPercent = ((maxGrade - grade.difficulty_id) / gradeRange) * 100;
+ return (
+
+ {grade.difficulty_name}
+
+ );
+ })}
+
+
+ {/* Chart area */}
+
+
+
+
+
+
+ Adding climbs... {progress.current} / {progress.total}
+
+
+ );
+ }
+
+ if (drawerState === 'configure' && selectedType && options) {
+ const groupedSlots = groupSlotsBySection(plannedSlots);
+
+ return (
+
+ {/* Chart Preview */}
+
+
+
+
+ {/* Summary */}
+
+ {groupedSlots.map((group) => (
+
+ {group.label}
+
+ {group.slots.length} climb{group.slots.length !== 1 ? 's' : ''}
+ {' '}({getGradeName(group.slots[0].grade)}
+ {group.slots[0].grade !== group.slots[group.slots.length - 1].grade &&
+ ` - ${getGradeName(group.slots[group.slots.length - 1].grade)}`})
+
+
+ ))}
+
+ Total
+ {plannedSlots.length} climbs
+
+
+
+ {/* Options Form */}
+
+
+
+