"""
Chart control components for the market data layout.
"""

from dash import html, dcc
from utils.logger import get_logger

logger = get_logger("chart_controls")


def create_chart_config_panel(strategy_options, overlay_options, subplot_options):
    """Create the chart configuration panel with add/edit UI."""
    return html.Div([
        html.H5("🎯 Chart Configuration", style={'color': '#2c3e50', 'margin-bottom': '15px'}),
        
        # Add New Indicator Button
        html.Div([
            html.Button(
                "➕ Add New Indicator",
                id="add-indicator-btn-visible",
                className="btn btn-primary",
                style={
                    'background-color': '#007bff',
                    'color': 'white',
                    'border': 'none',
                    'padding': '8px 16px',
                    'border-radius': '4px',
                    'cursor': 'pointer',
                    'margin-bottom': '15px',
                    'font-weight': 'bold'
                }
            )
        ]),
        
        # Strategy Selection
        html.Div([
            html.Label("Strategy Template:", style={'font-weight': 'bold', 'margin-bottom': '5px'}),
            dcc.Dropdown(
                id='strategy-dropdown',
                options=strategy_options,
                value=None,
                placeholder="Select a strategy template (optional)",
                style={'margin-bottom': '15px'}
            )
        ]),
        
        # Indicator Controls with Edit Buttons
        html.Div([
            # Overlay Indicators
            html.Div([
                html.Label("Overlay Indicators:", style={'font-weight': 'bold', 'margin-bottom': '10px', 'display': 'block'}),
                html.Div([
                    # Hidden checklist for callback compatibility
                    dcc.Checklist(
                        id='overlay-indicators-checklist',
                        options=overlay_options,
                        value=[],  # Start with no indicators selected
                        style={'display': 'none'}  # Hide the basic checklist
                    ),
                    # Custom indicator list with edit buttons
                    html.Div(id='overlay-indicators-list', children=[
                        # This will be populated dynamically
                    ])
                ])
            ], style={'width': '48%', 'display': 'inline-block', 'margin-right': '4%', 'vertical-align': 'top'}),
            
            # Subplot Indicators
            html.Div([
                html.Label("Subplot Indicators:", style={'font-weight': 'bold', 'margin-bottom': '10px', 'display': 'block'}),
                html.Div([
                    # Hidden checklist for callback compatibility
                    dcc.Checklist(
                        id='subplot-indicators-checklist',
                        options=subplot_options,
                        value=[],  # Start with no indicators selected
                        style={'display': 'none'}  # Hide the basic checklist
                    ),
                    # Custom indicator list with edit buttons
                    html.Div(id='subplot-indicators-list', children=[
                        # This will be populated dynamically
                    ])
                ])
            ], style={'width': '48%', 'display': 'inline-block', 'vertical-align': 'top'})
        ])
    ], style={
        'border': '1px solid #bdc3c7',
        'border-radius': '8px',
        'padding': '15px',
        'background-color': '#f8f9fa',
        'margin-bottom': '20px'
    })


def create_parameter_controls():
    """Create the parameter controls section for indicator configuration."""
    return html.Div([
        html.H5("📊 Indicator Parameters", style={'color': '#2c3e50', 'margin-bottom': '15px'}),
        
        # SMA/EMA Period Controls
        html.Div([
            html.Label("Moving Average Period:", style={'font-weight': 'bold', 'margin-bottom': '5px'}),
            dcc.Slider(
                id='ma-period-slider',
                min=5, max=200, step=5, value=20,
                marks={i: str(i) for i in [5, 20, 50, 100, 200]},
                tooltip={'placement': 'bottom', 'always_visible': True}
            )
        ], style={'margin-bottom': '20px'}),
        
        # RSI Period Control
        html.Div([
            html.Label("RSI Period:", style={'font-weight': 'bold', 'margin-bottom': '5px'}),
            dcc.Slider(
                id='rsi-period-slider',
                min=7, max=30, step=1, value=14,
                marks={i: str(i) for i in [7, 14, 21, 30]},
                tooltip={'placement': 'bottom', 'always_visible': True}
            )
        ], style={'margin-bottom': '20px'}),
        
        # MACD Parameters
        html.Div([
            html.Label("MACD Parameters:", style={'font-weight': 'bold', 'margin-bottom': '10px'}),
            html.Div([
                html.Div([
                    html.Label("Fast:", style={'font-size': '12px'}),
                    dcc.Input(
                        id='macd-fast-input',
                        type='number',
                        value=12,
                        min=5, max=50,
                        style={'width': '60px', 'margin-left': '5px'}
                    )
                ], style={'display': 'inline-block', 'margin-right': '15px'}),
                html.Div([
                    html.Label("Slow:", style={'font-size': '12px'}),
                    dcc.Input(
                        id='macd-slow-input',
                        type='number',
                        value=26,
                        min=10, max=100,
                        style={'width': '60px', 'margin-left': '5px'}
                    )
                ], style={'display': 'inline-block', 'margin-right': '15px'}),
                html.Div([
                    html.Label("Signal:", style={'font-size': '12px'}),
                    dcc.Input(
                        id='macd-signal-input',
                        type='number',
                        value=9,
                        min=3, max=20,
                        style={'width': '60px', 'margin-left': '5px'}
                    )
                ], style={'display': 'inline-block'})
            ])
        ], style={'margin-bottom': '20px'}),
        
        # Bollinger Bands Parameters
        html.Div([
            html.Label("Bollinger Bands:", style={'font-weight': 'bold', 'margin-bottom': '10px'}),
            html.Div([
                html.Div([
                    html.Label("Period:", style={'font-size': '12px'}),
                    dcc.Input(
                        id='bb-period-input',
                        type='number',
                        value=20,
                        min=5, max=50,
                        style={'width': '60px', 'margin-left': '5px'}
                    )
                ], style={'display': 'inline-block', 'margin-right': '15px'}),
                html.Div([
                    html.Label("Std Dev:", style={'font-size': '12px'}),
                    dcc.Input(
                        id='bb-stddev-input',
                        type='number',
                        value=2.0,
                        min=1.0, max=3.0, step=0.1,
                        style={'width': '70px', 'margin-left': '5px'}
                    )
                ], style={'display': 'inline-block'})
            ])
        ])
    ], style={
        'border': '1px solid #bdc3c7',
        'border-radius': '8px',
        'padding': '15px',
        'background-color': '#f8f9fa',
        'margin-bottom': '20px'
    })


def create_auto_update_control():
    """Create the auto-update control section."""
    return html.Div([
        dcc.Checklist(
            id='auto-update-checkbox',
            options=[{'label': ' Auto-update charts', 'value': 'auto'}],
            value=['auto'],
            style={'margin-bottom': '10px'}
        ),
        html.Div(id='update-status', style={'font-size': '12px', 'color': '#7f8c8d'})
    ])