upskill-event-manager/docs/EDIT-PAGE-REFACTORING-ANALYSIS.md

# Event Edit Page Refactoring Analysis

**Date**: September 27, 2025
**Analysis Tool**: Zen Refactor with GLM-4.5
**Scope**: Modernization of `trainer/event/edit/?event_id=6420` to match create page patterns

---

## Executive Summary

The event edit page uses a legacy iframe-based architecture that lacks feature parity with the modernized create page. A comprehensive architectural overhaul is required to achieve consistency and provide users with the same advanced functionality across both create and edit workflows.

**Total Issues Identified**: 14 refactoring opportunities
**Severity Breakdown**: 4 Critical, 5 High Priority, 4 Medium Priority, 1 Low Priority

---

## Current Architecture Comparison

### Edit Page (Legacy - REQUIRES REFACTORING)
```php
// page-tec-edit-event.php - Current Implementation
- Uses iframe embedding: `/events/network/edit/{id}/`
- No native form control
- Limited validation and error handling
- Cross-origin iframe limitations
- Basic styling and UX
```

### Create Page (Modern - TARGET PATTERN)
```php
// page-tec-create-event.php - Target Implementation
- Native HVAC_Event_Form_Builder integration
- HVAC_Event_Form_Handler for processing
- WordPress TinyMCE rich text editor
- AI-powered content generation
- Featured image upload with wp.media
- Searchable selectors with autocomplete
- Advanced options toggle functionality
- Modal venue/organizer creation
```

---

## Critical Issues (Immediate Action Required)

### 🚨 Issue #1: Missing Edit Methods
**File**: `includes/class-hvac-event-form-builder.php`
**Problem**: Only has `create_event_form()` method, no edit capability
**Solution**: Add `edit_event_form($event_id, $config = [])` method
**Impact**: Blocks native form implementation for editing

### 🚨 Issue #2: Missing Update Methods
**File**: `includes/class-hvac-event-form-handler.php`
**Problem**: Only has `create_event()` method, no update functionality
**Solution**: Add `update_event($event_id, $form_data)` method
**Impact**: Cannot process edit form submissions

### 🚨 Issue #3: Legacy Architecture
**File**: `templates/page-tec-edit-event.php`
**Problem**: Uses iframe embedding instead of native form builder
**Solution**: Replace with native HVAC form builder integration
**Impact**: Prevents access to modern features and causes UX inconsistencies

### 🚨 Issue #4: No Data Pre-population
**Files**: Form builder and handler classes
**Problem**: Cannot load existing event data into form fields
**Solution**: Implement event data loading and field pre-population
**Impact**: Users cannot see current values when editing

---

## High Priority Feature Gaps

### ⚠️ Issue #5: No AI Assistance
**Missing**: AI-powered content generation for event descriptions
**Implementation**: Integrate hvac-ai-assist.js with edit mode

### ⚠️ Issue #6: No Featured Images
**Missing**: Featured image editing capability
**Implementation**: Add wp.media integration for image uploads

### ⚠️ Issue #7: No Searchable Selectors
**Missing**: Autocomplete for venues/organizers/categories
**Implementation**: Add searchable selector components with pre-selected values

### ⚠️ Issue #8: No Advanced Options
**Missing**: Timezone, capacity, cost toggle functionality
**Implementation**: Add advanced options toggle with field visibility controls

### ⚠️ Issue #9: No Modal Creation
**Missing**: Inline venue/organizer creation
**Implementation**: Add modal forms for creating new entities during editing

---

## Medium Priority UX Consistency Issues

### 📋 Issue #10: No TinyMCE Editor
**Current**: Basic textarea for descriptions
**Target**: WordPress TinyMCE rich text editor with formatting

### 📋 Issue #11: No Form Validation
**Current**: Basic validation via iframe
**Target**: Comprehensive input validation with real-time feedback

### 📋 Issue #12: No Error Handling
**Current**: Basic error display
**Target**: Comprehensive error handling with user-friendly messages

### 📋 Issue #13: Inconsistent Styling
**Current**: Different CSS patterns between create and edit pages
**Target**: Unified styling system across both pages

---

## Implementation Strategy

### Phase 1: Extend Core Classes (Week 1)

#### 1.1 Extend HVAC_Event_Form_Builder
```php
// Add to class-hvac-event-form-builder.php
public function edit_event_form(int $event_id, array $config = []): self
public function load_event_data(int $event_id): array
public function populate_form_fields(array $event_data): self
```

#### 1.2 Extend HVAC_Event_Form_Handler
```php
// Add to class-hvac-event-form-handler.php
public static function update_event(int $event_id, array $form_data): int|WP_Error
public static function validate_update_permissions(int $event_id, int $user_id): bool
public static function get_event_data_for_editing(int $event_id): array|WP_Error
```

### Phase 2: Template Modernization (Week 2)

#### 2.1 Replace iframe Architecture
- Remove iframe embedding from `page-tec-edit-event.php`
- Implement native form builder integration
- Add form submission processing

#### 2.2 Add Modern Features
- AI assistance integration
- Featured image editing
- Searchable selectors with pre-selected values
- Advanced options toggle
- Modal creation forms

#### 2.3 Ensure Feature Parity
- TinyMCE rich text editor
- Comprehensive validation
- Error handling and user feedback
- Consistent styling

### Phase 3: Integration & Testing (Week 3)

#### 3.1 URL Compatibility
- Maintain existing URL structure: `trainer/event/edit/?event_id=6420`
- Ensure backward compatibility with bookmarks and links

#### 3.2 TEC Integration
- Verify tribe_events post type compatibility
- Test event metadata preservation
- Validate venue/organizer associations

#### 3.3 User Experience Testing
- Test complete edit workflow
- Verify form validation and error handling
- Confirm feature parity with create page

---

## Technical Requirements

### Form Builder Extensions
```php
// Required methods for edit functionality
- edit_event_form(int $event_id, array $config = []): self
- load_event_data(int $event_id): array
- populate_form_fields(array $event_data): self
- set_edit_mode(bool $is_edit): self
- get_form_mode(): string
```

### Form Handler Extensions
```php
// Required methods for update processing
- update_event(int $event_id, array $form_data): int|WP_Error
- validate_update_permissions(int $event_id, int $user_id): bool
- get_event_data_for_editing(int $event_id): array|WP_Error
- validate_and_sanitize_update(array $form_data, int $event_id): array|WP_Error
```

### Template Requirements
- Native form builder integration
- Event data pre-population
- Form submission handling
- Success/error feedback
- Modern feature integration (AI, featured images, etc.)

---

## Success Criteria

### Technical Metrics
- [ ] Native form builder replaces iframe approach
- [ ] Complete feature parity with create page
- [ ] All 14 identified issues resolved
- [ ] Backward URL compatibility maintained
- [ ] TEC integration preserved

### User Experience Metrics
- [ ] Consistent editing workflow with creation
- [ ] AI assistance available for content editing
- [ ] Featured image editing capability
- [ ] Advanced options accessible via toggle
- [ ] Real-time validation and error feedback

### Performance Metrics
- [ ] No iframe cross-origin limitations
- [ ] Faster form loading and interaction
- [ ] Reduced complexity in form submission

---

## Risk Assessment

### Low Risk ✅
- **Form Builder Extension**: Well-established patterns from create page
- **Template Modernization**: Clear target implementation exists
- **Feature Integration**: All components already functional on create page

### Medium Risk ⚠️
- **Data Migration**: Ensuring all existing event data loads correctly
- **URL Compatibility**: Maintaining backward compatibility during transition
- **User Training**: Users familiar with iframe approach may need guidance

### High Risk 🚨
- **TEC Integration**: Must preserve all event metadata and associations
- **Permission Validation**: Ensuring secure edit access controls
- **Data Integrity**: Preventing data loss during edit operations

---

## Implementation Priority

1. **Phase 1 (Critical)**: Extend form builder and handler classes
2. **Phase 2 (High)**: Replace template architecture and add modern features
3. **Phase 3 (Medium)**: Integration testing and URL compatibility

**Estimated Timeline**: 3 weeks
**Resource Requirements**: 1 developer, access to staging environment
**Dependencies**: Completion of create page modernization (✅ Complete)

---

*This analysis provides the complete roadmap for modernizing the event edit page to achieve feature parity with the create page while maintaining backward compatibility and TEC integration.*