from dash import html, dcc
from layouts.components import create_metric_card

def create_layout(full_data):
    return html.Div([
        # Keep your existing stores
        dcc.Store(id='backtest-results', storage_type='memory'),
        dcc.Store(id='forwardtest-results', storage_type='memory'),
        dcc.Store(id='current-params', storage_type='memory'),
        # Add new store for selected strategies
        dcc.Store(id='selected-strategies', data=[], storage_type='memory'),


        html.Div([
            html.H1("Backtest Strategy Dashboard",
                   style={'textAlign': 'center', 'marginBottom': '20px'}),

            # Add the mode switch section here
            html.Div([
                html.Div([
                    html.Label("Dashboard Mode:", style={
                        'fontWeight': '500',
                        'color': '#2c3e50',
                        'marginRight': '10px',
                        'fontSize': '16px'
                    }),
                    dcc.RadioItems(
                        id='dashboard-mode',
                        options=[
                            {'label': 'Single Strategy Mode', 'value': 'single'},
                            {'label': 'Aggregative Mode', 'value': 'aggregative'}
                        ],
                        value='single',
                        style={'display': 'inline-block'},
                        inputStyle={'marginRight': '5px'},
                        labelStyle={'marginRight': '20px', 'cursor': 'pointer'}
                    ),
                    # Changed ID for the second clear selection button
                    html.Button(
                        'Clear Selection',
                        id='strategy-clear-selection',
                        style={
                            'marginLeft': '10px',
                            'padding': '5px 10px',
                            'backgroundColor': '#dc3545',
                            'color': 'white',
                            'border': 'none',
                            'borderRadius': '4px',
                            'cursor': 'pointer',
                            'display': 'none'  # Initially hidden
                        }
                    ),
                    html.Div(
                        id='selected-count',
                        style={
                            'marginLeft': '15px',
                            'display': 'inline-block',
                            'color': '#2c3e50'
                        }
                    )
                ], style={'display': 'flex', 'alignItems': 'center'})
            ], style={
                'marginBottom': '20px',
                'padding': '15px',
                'backgroundColor': '#f8f9fa',
                'borderRadius': '8px',
                'border': '1px solid #e9ecef'
            }),

            # Parameters input section
            html.Div([
                # First row of inputs
                # First row of inputs
                html.Div([
                    html.Div([
                        html.Label("Backtest End Date:", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        dcc.DatePickerSingle(
                            id='bt-end-date',
                            min_date_allowed=full_data.index[0],
                            max_date_allowed=full_data.index[-1],
                            initial_visible_month=full_data.index[0],
                            date=full_data.index[len(full_data) // 2],
                            display_format='YYYY-MM-DD',
                            style={'width': '150px'}
                        )
                    ], style={'marginRight': '20px', 'display': 'inline-block'}),

                    html.Div([
                        html.Label("Time Factor:", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        dcc.Input(
                            id='time-factor',
                            type='number',
                            value=8760,
                            style={
                                'width': '100px',
                                'height': '36px',
                                'padding': '8px',
                                'borderRadius': '4px',
                                'border': '1px solid #dcdfe6',
                                'fontSize': '14px'
                            }
                        )
                    ], style={'marginRight': '20px', 'display': 'inline-block'}),

                    html.Div([
                        html.Label("Commission (%):", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        dcc.Input(
                            id='commission',
                            type='number',
                            value=0.06,
                            step=0.01,
                            style={
                                'width': '80px',
                                'height': '36px',
                                'padding': '8px',
                                'borderRadius': '4px',
                                'border': '1px solid #dcdfe6',
                                'fontSize': '14px'
                            }
                        )
                    ], style={'marginRight': '20px', 'display': 'inline-block'}),

                    html.Div([
                        html.Label("Heatmap Title:", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        dcc.Input(
                            id='heatmap-title',
                            type='text',
                            placeholder='Enter heatmap title',
                            autoComplete='off',
                            style={
                                'width': '200px',
                                'height': '36px',
                                'padding': '8px',
                                'borderRadius': '4px',
                                'border': '1px solid #dcdfe6',
                                'fontSize': '14px'
                            }
                        )
                    ], style={'display': 'inline-block'}),
                ], style={'marginBottom': '15px'}),

                # Second row of inputs
                html.Div([
                    html.Div([
                        html.Label("Window Range:", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        html.Div([
                            dcc.Input(
                                id='window-start',
                                type='number',
                                value=100,
                                placeholder='Start',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px',
                                    'marginRight': '10px'
                                }
                            ),
                            dcc.Input(
                                id='window-end',
                                type='number',
                                value=1000,
                                placeholder='End',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px',
                                    'marginRight': '10px'
                                }
                            ),
                            dcc.Input(
                                id='window-step',
                                type='number',
                                value=100,
                                placeholder='Step',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px'
                                }
                            ),
                        ], style={'display': 'flex'})
                    ], style={'marginRight': '40px', 'display': 'inline-block'}),

                    html.Div([
                        html.Label("Threshold Range:", style={
                            'fontWeight': '500',
                            'color': '#2c3e50',
                            'marginBottom': '5px',
                            'display': 'block'
                        }),
                        html.Div([
                            dcc.Input(
                                id='threshold-start',
                                type='number',
                                value=0.0,
                                placeholder='Start',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px',
                                    'marginRight': '10px'
                                }
                            ),
                            dcc.Input(
                                id='threshold-end',
                                type='number',
                                value=2.0,
                                placeholder='End',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px',
                                    'marginRight': '10px'
                                }
                            ),
                            dcc.Input(
                                id='threshold-step',
                                type='number',
                                value=0.2,
                                placeholder='Step',
                                style={
                                    'width': '80px',
                                    'height': '36px',
                                    'padding': '8px',
                                    'borderRadius': '4px',
                                    'border': '1px solid #dcdfe6',
                                    'fontSize': '14px'
                                }
                            ),
                        ], style={'display': 'flex'})
                    ], style={'display': 'inline-block'}),
                ], style={'marginBottom': '15px'}),

                html.Button(
                    'Run Backtest',
                    id='run-backtest',
                    n_clicks=0,
                    style={
                        'width': '150px',
                        'height': '36px',
                        'marginTop': '10px',
                        'backgroundColor': '#1a73e8',
                        'color': 'white',
                        'border': 'none',
                        'borderRadius': '4px',
                        'cursor': 'pointer',
                        'fontSize': '14px',
                        'fontWeight': '500'
                    }
                ),
            ], style={
                'padding': '20px',
                'backgroundColor': 'white',
                'borderRadius': '8px',
                'marginBottom': '20px',
                'boxShadow': '0 1px 3px rgba(0,0,0,0.1)'
            }),

            # Heatmap Container
            html.Div([
                dcc.Graph(id='combined-heatmap'),
            ], style={
                'marginBottom': '30px',
                'backgroundColor': 'white',
                'borderRadius': '10px',
                'padding': '15px',
                'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
            }),

            # Strategy details section
            html.Div([
                html.H3("Strategy Details",
                        id='strategy-header',
                        style={'textAlign': 'center', 'marginTop': '30px', 'marginBottom': '20px'}),

                # Date range picker section
                html.Div([
                    html.Label("Select Date Range:", style={'fontWeight': 'bold', 'marginRight': '10px'}),
                    dcc.DatePickerRange(
                        id='date-range-picker',
                        min_date_allowed=full_data.index[0],
                        max_date_allowed=full_data.index[-1],
                        start_date=full_data.index[0],
                        end_date=full_data.index[-1],
                        display_format='YYYY-MM-DD'
                    ),
                    html.Button(
                        'Apply',
                        id='apply-date-range',
                        style={
                            'marginLeft': '10px',
                            'backgroundColor': '#2c3e50',
                            'color': 'white',
                            'border': 'none',
                            'padding': '5px 15px',
                            'borderRadius': '5px',
                            'cursor': 'pointer'
                        }
                    ),
                    html.Button(
                        'Reset',
                        id='reset-date-range',
                        style={
                            'marginLeft': '10px',
                            'backgroundColor': '#7f7f7f',
                            'color': 'white',
                            'border': 'none',
                            'padding': '5px 15px',
                            'borderRadius': '5px',
                            'cursor': 'pointer'
                        }
                    )
                ], style={
                    'marginBottom': '20px',
                    'display': 'flex',
                    'alignItems': 'center',
                    'justifyContent': 'center'
                }),

                # New flex container for metrics and plots
                html.Div([
                    # Left side - Metrics and Yearly Returns
                    html.Div([
                        # Metrics
                        html.Div(id='strategy-metrics', style={
                            'display': 'grid',
                            'gridTemplateColumns': 'repeat(2, 1fr)',
                            'gap': '10px',  # Reduced from 20px
                            'padding': '10px',  # Reduced from 20px
                            'backgroundColor': '#f8f9fa',
                            'borderRadius': '8px',  # Reduced from 10px
                            'boxShadow': '0 2px 4px rgba(0,0,0,0.1)',
                            'height': 'fit-content',
                            'marginBottom': '15px',  # Reduced from 20px
                            'fontSize': '12px'  # Added to reduce text size
                        }),

                        # Yearly Returns
                        html.Div([
                            dcc.Graph(id='yearly-returns-plot')
                        ], style={
                            'backgroundColor': 'white',
                            'borderRadius': '8px',  # Reduced from 10px
                            'padding': '10px',  # Reduced from 15px
                            'boxShadow': '0 2px 4px rgba(0,0,0,0.1)',
                            'marginTop': '15px'  # Reduced from 20px
                        })
                    ], style={
                        'width': '30%',
                        'marginRight': '15px'  # Reduced from 20px
                    }),

                    # Right side - Plots
                    html.Div([
                        # Equity curve
                        html.Div([
                            dcc.Graph(id='equity-curve')
                        ], style={
                            'marginBottom': '20px',
                            'backgroundColor': 'white',
                            'borderRadius': '10px',
                            'padding': '15px',
                            'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                        }),

                        # Underwater plot
                        html.Div([
                            dcc.Graph(id='underwater-plot')
                        ], style={
                            'backgroundColor': 'white',
                            'borderRadius': '10px',
                            'padding': '15px',
                            'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                        })
                    ], style={
                        'width': '70%',  # Adjust this value to change the width of the plots section
                        'display': 'flex',
                        'flexDirection': 'column'
                    })
                ], style={
                    'display': 'flex',
                    'marginTop': '20px'
                })
            ])
        ], style={
            'maxWidth': '1800px',
            'margin': '0 auto',
            'padding': '20px',
            'backgroundColor': '#ffffff'
        })
    ])