components.py

"""
UI components for the plotter interface.
"""
from dash import dcc, html
from styles import (
    create_button_style, create_arrow_button_style, create_panel_style,
    create_code_editor_style, create_header_style, create_nav_button_style,
    LABEL_STYLE, COLORS
)

DEFAULT_CODE = """# Example: Spiral
num_points = 1000
theta = np.linspace(0, 4*np.pi, num_points)
r = np.linspace(0, 1, num_points)
X = r * np.cos(theta)
Y = r * np.sin(theta)
Z = np.zeros_like(X)
"""

def create_header():
    """Create the main header with navigation."""
    return html.Div([
        html.H2("🖊️ Interactive Plotter Interface", style={
            'fontFamily': 'Segoe UI, Arial, sans-serif',
            'fontWeight': 'bold',
            'color': '#222',
            'margin': '0',
            'letterSpacing': '1px',
            'flex': '1'
        }),
        
        html.Div([
            dcc.Link('🖊️ Plotter', href='/', 
                    style=create_nav_button_style(COLORS['primary'])),
            dcc.Link('📁 File Manager', href='/file-manager', 
                    style=create_nav_button_style(COLORS['success'])),
            dcc.Link('📊 Data Manager', href='/data-manager', 
                    style=create_nav_button_style(COLORS['info'])),
        ])
    ], style=create_header_style())

def create_mode_toggle():
    """Create the input mode toggle section."""
    return html.Div([
        html.Label("Input Mode:", style=LABEL_STYLE),
        dcc.RadioItems(
            id='input-mode-toggle',
            options=[
                {'label': ' Python Code\t', 'value': 'python'},
                {'label': ' G-code File', 'value': 'gcode'}
            ],
            value='python',
            inline=True,
            style={'marginBottom': '15px'}
        ),
    ])

def create_code_library_section(test_codes_dict):
    """Create the Python code library section."""
    return html.Div([
        html.Label("Test Code Library:", style=LABEL_STYLE),
        dcc.Dropdown(
            id='test-code-dropdown',
            options=[
                {'label': f"📄 {data['name']}", 'value': key}
                for key, data in test_codes_dict.items()
            ],
            value=None,
            placeholder="Select a test file to load...",
            clearable=True,
            style={'marginBottom': '16px'}
        ),
    ], id='python-code-section')

def create_gcode_library_section(gcode_files_dict):
    """Create the G-code file library section."""
    return html.Div([
        html.Label("G-code File Library:", style=LABEL_STYLE),
        dcc.Dropdown(
            id='gcode-file-dropdown',
            options=[
                {'label': f"📄 {data['name']}", 'value': key}
                for key, data in gcode_files_dict.items()
            ],
            value=None,
            placeholder="Select a G-code file to load...",
            clearable=True,
            style={'marginBottom': '16px'}
        ),
    ], id='gcode-file-section', style={'display': 'none'})

def create_code_editor():
    """Create the code editor section."""
    return html.Div([
        html.Label("Python Code (auto-generated from test patterns):", 
                  style={**LABEL_STYLE, 'fontSize': '17px'}),
        
        dcc.Textarea(
            id='code-input',
            value=DEFAULT_CODE,
            style=create_code_editor_style()
        ),
        
        html.Br(),
        
        html.Div([
            html.Button("Execute Code", id='exec-btn', n_clicks=0, 
                       style=create_button_style()),
            html.Div(id='execution-output', style={'display': 'none'}),
        ], style={'display': 'flex', 'alignItems': 'center', 'marginBottom': '10px'}),
    ])

def create_format_selector(format_options):
    """Create the format selection dropdown."""
    return html.Div([
        html.Label("Select G-code Format:", style=LABEL_STYLE),
        dcc.Dropdown(
            id='format-dropdown',
            options=[{'label': fmt, 'value': fmt} for fmt in format_options],
            value=format_options[0] if format_options else None,
            clearable=False,
            style={'marginBottom': '16px'}
        ),
    ])

def create_mirror_controls():
    """Create the mirror/flip controls."""
    return html.Div([
        html.Label("Mirror Options:", style=LABEL_STYLE),
        html.Div([
            dcc.Checklist(
                id='mirror-controls',
                options=[
                    {'label': ' Horizontal Mirror (X-axis)', 'value': 'horizontal'},
                    {'label': ' Vertical Mirror (Y-axis)', 'value': 'vertical'}
                ],
                value=[],
                style={'fontFamily': 'Segoe UI, Arial, sans-serif', 'fontSize': '14px'}
            )
        ], style={
            'marginBottom': '16px', 
            'backgroundColor': '#ffffff', 
            'padding': '8px', 
            'borderRadius': '4px', 
            'border': '1px solid #ddd'
        }),
    ])

def create_control_buttons():
    """Create the main control buttons."""
    return html.Div([
        html.Button("Show Path Preview", id='toggle-preview-btn', n_clicks=0,
                   style=create_button_style(COLORS['info'])),
        html.Button("Connect to Printer", id='connect-btn', n_clicks=0,
                   style=create_button_style(COLORS['success'])),
    ], style={'display': 'flex', 'gap': '10px', 'marginBottom': '10px'})

def create_movement_controls():
    """Create the XY and Z movement controls."""
    return html.Div([
        # Z Position buttons
        html.Div([
            html.Button("Set Z Position", id='set-z-btn', n_clicks=0,
                        style=create_button_style('#009688')),
            html.Br(),
            html.Button("Accept Z Position", id='accept-z-btn', n_clicks=0,
                        style=create_button_style('#43a047', marginTop='8px')),
        ], style={
            'display': 'inline-block',
            'verticalAlign': 'top',
            'marginRight': '24px',
            'textAlign': 'center'
        }),
        
        # XY movement arrows
        html.Div([
            html.Div([
                html.Button("⬆️", id='y-up-btn', n_clicks=0, 
                           style=create_arrow_button_style()),
            ], style={'textAlign': 'center'}),
            
            html.Div([
                html.Button("⬅️", id='x-left-btn', n_clicks=0, 
                           style=create_arrow_button_style()),
                html.Button("⬇️", id='y-down-btn', n_clicks=0, 
                           style=create_arrow_button_style()),
                html.Button("➡️", id='x-right-btn', n_clicks=0, 
                           style=create_arrow_button_style()),
            ], style={'textAlign': 'center', 'marginTop': '2px'}),
            
            # Z movement buttons
            html.Div([
                html.Button("⬆️ Z Large", id='z-up-large-btn', n_clicks=0,
                            style=create_button_style('#ffa726', 
                                                   padding='12px 18px', 
                                                   fontSize='18px', 
                                                   fontWeight='700', 
                                                   marginLeft='8px')),
                html.Button("⬇️ Z Large", id='z-down-large-btn', n_clicks=0,
                            style=create_button_style('#ffa726', 
                                                   padding='12px 18px', 
                                                   fontSize='18px', 
                                                   fontWeight='700', 
                                                   marginLeft='8px')),
                html.Button("⬆️ Z Small", id='z-up-small-btn', n_clicks=0,
                            style=create_button_style('#90caf9', 
                                                   padding='6px 10px', 
                                                   marginLeft='8px')),
                html.Button("⬇️ Z Small", id='z-down-small-btn', n_clicks=0,
                            style=create_button_style('#90caf9', 
                                                   padding='6px 10px', 
                                                   marginLeft='8px')),
            ], style={'marginTop': '10px', 'textAlign': 'center'}),
        ], style={
            'display': 'inline-block',
            'verticalAlign': 'top',
            'textAlign': 'center'
        }),
    ], style={
        'display': 'flex',
        'flexWrap': 'nowrap',
        'justifyContent': 'center',
        'alignItems': 'flex-start',
        'marginTop': '20px',
        'gap': '8px'
    })

def create_printer_actions():
    """Create the printer action buttons."""
    return html.Div([
        html.Button("Send to Printer", id='send-btn', n_clicks=0,
                   style=create_button_style(COLORS['warning'])),
        html.Button("Emergency Stop", id='force-stop-btn', n_clicks=0,
                   style=create_button_style(COLORS['danger'])),
    ], style={
        'display': 'flex',
        'justifyContent': 'center',
        'alignItems': 'center',
        'marginTop': '20px',
        'gap': '15px'
    })

def create_left_panel(test_codes_dict, gcode_files_dict, format_options):
    """Create the left panel with code editor and controls."""
    return html.Div([
        create_mode_toggle(),
        create_code_library_section(test_codes_dict),
        create_gcode_library_section(gcode_files_dict),
        create_code_editor(),
        create_format_selector(format_options),
        create_mirror_controls(),
        create_control_buttons(),
        html.Div(id='connection-output', style={
            'marginTop': '10px',
            'color': '#008800',
            'fontFamily': 'Segoe UI, Arial, sans-serif',
            'fontSize': '15px',
            'fontWeight': '400'
        }),
    ], style={**create_panel_style(), 'paddingRight': '2%'})

def create_right_panel():
    """Create the right panel with plots and controls."""
    return html.Div([
        html.Div(id='plot-or-gcode-output', style={
            'marginTop': '0px',
            'backgroundColor': '#fff',
            'borderRadius': '12px',
            'boxShadow': '0 2px 12px rgba(0,0,0,0.04)',
            'padding': '6px',
            'height': '400px'
        }),
        
        html.Hr(),
        create_movement_controls(),
        
        html.Div(id='printer-action-output', style={
            'marginTop': '15px',
            'padding': '10px',
            'backgroundColor': '#f0f8ff',
            'border': '1px solid #d0e8ff',
            'borderRadius': '6px',
            'color': '#1976d2',
            'fontFamily': 'Segoe UI, Arial, sans-serif',
            'fontSize': '14px',
            'fontWeight': '400',
            'minHeight': '20px'
        }),
        
        html.Hr(),
        create_printer_actions(),
    ], style=create_panel_style())

def create_upload_section(section_type, title, upload_id, drop_zone_id, status_id):
    """Create a reusable upload section."""
    color = COLORS['info'] if section_type == 'python' else COLORS['warning']
    accept = '.py' if section_type == 'python' else '.gcode'
    
    return html.Div([
        html.H4(title, style={'color': '#444', 'marginBottom': '15px'}),
        
        html.Div([
            html.P(f"Drag and drop {title.lower()} here", style={
                'textAlign': 'center',
                'color': '#666',
                'margin': '20px',
                'fontStyle': 'italic'
            }),
        ], id=drop_zone_id, style={
            'border': '2px dashed #ccc',
            'borderRadius': '10px',
            'minHeight': '150px',
            'backgroundColor': '#f9f9f9',
            'display': 'flex',
            'alignItems': 'center',
            'justifyContent': 'center',
            'marginBottom': '20px'
        }),
        
        html.Div(id=status_id),
        
        dcc.Upload(
            id=upload_id,
            children=html.Button(f'Upload {title}', style={
                'backgroundColor': color,
                'color': 'white',
                'border': 'none',
                'padding': '10px 20px',
                'borderRadius': '5px',
                'cursor': 'pointer'
            }),
            multiple=True,
            accept=accept
        ),
    ], style={'width': '48%', 'display': 'inline-block', 'verticalAlign': 'top'})

def create_file_list_section(title, list_id):
    """Create a reusable file list section."""
    return html.Div([
        html.H4(title, style={'color': '#444'}),
        html.Div(id=list_id),
    ], style={'width': '48%', 'display': 'inline-block', 'verticalAlign': 'top'})

def create_data_manager_panel():
    """Create the upgraded data manager panel with Sacred experiments support."""
    return html.Div([
        html.H3("📊 Data Manager - Sacred Experiments & MongoDB", 
                style={'color': '#2c3e50', 'marginBottom': '20px'}),
        
        # Connection Status
        html.Div([
            html.H4("🔗 Connection Status", style={'color': '#34495e'}),
            html.Div(id='connection-status-display', 
                    style={'padding': '10px', 'marginBottom': '20px', 'border': '1px solid #bdc3c7', 'borderRadius': '5px'}),
            html.Button("Test All Connections", id='test-connections-btn', 
                       style=create_button_style('#3498db')),
        ], style={'marginBottom': '30px'}),
        
        # Sacred Experiments Section
        html.Div([
            html.H4("🧪 Sacred Experiments Manager", style={'color': '#8e44ad', 'marginBottom': '15px'}),
            
            # Auto-match files
            html.Div([
                html.P("Automatically match G-code files with time-lapse videos:", 
                      style={'marginBottom': '10px', 'color': '#7f8c8d'}),
                html.Button("🔍 Find File Matches", id='find-matches-btn', 
                           style=create_button_style('#9b59b6')),
                html.Div(id='file-matches-display', 
                        style={'marginTop': '15px', 'padding': '10px', 'border': '1px solid #bdc3c7', 'borderRadius': '5px', 'maxHeight': '300px', 'overflowY': 'auto'})
            ], style={'marginBottom': '20px'}),
            
            # Bulk experiment creation
            html.Div([
                html.P("Create Sacred experiments from matched files:", 
                      style={'marginBottom': '10px', 'color': '#7f8c8d'}),
                html.Div([
                    html.Button("📦 Create All Experiments", id='create-all-experiments-btn', 
                               style=create_button_style('#27ae60')),
                    html.Button("📦 Create Selected", id='create-selected-experiments-btn', 
                               style=create_button_style('#f39c12'), disabled=True),
                ], style={'display': 'flex', 'gap': '10px'}),
                html.Div(id='experiment-creation-status', 
                        style={'marginTop': '15px'})
            ], style={'marginBottom': '20px'}),
            
        ], style={'marginBottom': '30px', 'padding': '20px', 'backgroundColor': '#f8f9fa', 'borderRadius': '8px'}),
        
        # Individual File Management
        html.Div([
            html.H4("📂 Individual File Management", style={'color': '#34495e'}),
            
            # Tabs for file types
            dcc.Tabs(id="file-management-tabs", value='gcode-tab', children=[
                dcc.Tab(label='📄 G-code Files', value='gcode-tab', children=[
                    html.Div([
                        html.Button("Fetch G-code Files", id='fetch-gcode-btn', 
                                   style=create_button_style('#27ae60')),
                        html.Div(id='gcode-files-display', 
                                style={'marginTop': '15px', 'maxHeight': '250px', 'overflowY': 'auto'})
                    ], style={'padding': '20px'})
                ]),
                dcc.Tab(label='🎥 Time-lapse Files', value='timelapse-tab', children=[
                    html.Div([
                        html.Button("Fetch Time-lapse Files", id='fetch-timelapse-btn', 
                                   style=create_button_style('#e67e22')),
                        html.Div(id='timelapse-files-display', 
                                style={'marginTop': '15px', 'maxHeight': '250px', 'overflowY': 'auto'})
                    ], style={'padding': '20px'})
                ])
            ], style={'marginBottom': '20px'}),
            
        ], style={'marginBottom': '30px'}),
        
        # Manual Experiment Creation
        html.Div([
            html.H4("🎯 Manual Experiment Creation", style={'color': '#34495e'}),
            html.Div([
                html.Div([
                    html.Label("Experiment Name:", style={'fontWeight': 'bold'}),
                    dcc.Input(
                        id='manual-experiment-name',
                        type='text',
                        placeholder="Enter experiment name...",
                        style={'width': '100%', 'padding': '8px', 'marginBottom': '10px'}
                    )
                ]),
                html.Div([
                    html.Label("Select G-code file:", style={'fontWeight': 'bold'}),
                    dcc.Dropdown(
                        id='gcode-selection-dropdown',
                        placeholder="Select a G-code file...",
                        style={'marginBottom': '10px'}
                    )
                ]),
                html.Div([
                    html.Label("Select Time-lapse file (optional):", style={'fontWeight': 'bold'}),
                    dcc.Dropdown(
                        id='timelapse-selection-dropdown', 
                        placeholder="Select a time-lapse file...",
                        style={'marginBottom': '15px'}
                    )
                ]),
                html.Button("🔬 Create Manual Experiment", id='create-manual-experiment-btn',
                           style=create_button_style('#8e44ad')),
                html.Div(id='manual-experiment-status',
                        style={'marginTop': '15px'})
            ])
        ], style={'marginBottom': '30px'}),
        
        # Sacred Experiments Database
        html.Div([
            html.H4("🗃️ Sacred Experiments Database", style={'color': '#16a085'}),
            html.Div([
                html.Div([
                    html.Button("📋 View All Experiments", id='view-experiments-btn',
                               style=create_button_style('#16a085')),
                    html.Button("🔄 Refresh Database", id='refresh-experiments-btn',
                               style=create_button_style('#95a5a6')),
                ], style={'display': 'flex', 'gap': '10px', 'marginBottom': '15px'}),
                
                # Search and filter
                html.Div([
                    dcc.Input(
                        id='experiment-search-input',
                        type='text',
                        placeholder="Search experiments by name...",
                        style={'width': '70%', 'padding': '8px', 'marginRight': '10px'}
                    ),
                    html.Button("🔍 Search", id='search-experiments-btn',
                               style=create_button_style('#3498db')),
                ], style={'display': 'flex', 'alignItems': 'center', 'marginBottom': '15px'}),
                
                # Experiments display
                html.Div(id='sacred-experiments-display',
                        style={'maxHeight': '400px', 'overflowY': 'auto', 'border': '1px solid #bdc3c7', 'borderRadius': '5px', 'padding': '10px'})
            ])
        ], style={'marginBottom': '30px'}),
        
        # Statistics and Analytics
        html.Div([
            html.H4("📈 Database Statistics", style={'color': '#e74c3c'}),
            html.Div(id='database-stats-display',
                    style={'padding': '15px', 'backgroundColor': '#fef9e7', 
                          'border': '1px solid #f39c12', 'borderRadius': '5px'})
        ])
        
    ], style=create_panel_style())