from dash import dcc, html
from pkg.config import interval_options, days_options, render_data


def layout_config(app):
    # Dash app layout (unchanged except default days value)
    app.layout = html.Div([
        # Left sidebar with clock button and tooltip (unchanged)
        html.Div(
            id='clock-container',
            children=[
                html.Div(
                    id='clock-button',
                    children='🕒',
                    style={
                        'fontSize': '24px',
                        'cursor': 'pointer',
                        'padding': '5px',
                    }
                ),
                html.Div(
                    id='clock-tooltip',
                    children=[
                        html.Div(id='pst-clock')
                    ],
                    style={
                        'position': 'absolute',
                        'left': '35px',
                        'top': '0px',
                        'backgroundColor': 'rgba(0, 0, 0, 0.8)',
                        'color': 'white',
                        'padding': '10px',
                        'borderRadius': '5px',
                        'fontSize': '14px',
                        'display': 'none',
                        'whiteSpace': 'nowrap'
                    }
                ),
                html.Div(
                    id='play-button',
                    children='▶️',
                    n_clicks=0,
                    style={
                        'fontSize': '24px',
                        'cursor': 'pointer',
                        'padding': '5px',
                        'marginTop': '10px'
                    }
                ),
                html.Div(
                    id='play-tooltip',
                    children=[],
                    style={
                        'position': 'absolute',
                        'left': '35px',
                        'top': '40px',
                        'backgroundColor': 'rgba(0, 0, 0, 0.8)',
                        'color': 'white',
                        'padding': '10px',
                        'borderRadius': '5px',
                        'fontSize': '14px',
                        'display': 'none',
                        'whiteSpace': 'nowrap'
                    }
                ),
                # 新增按钮和提示框
                html.Div(
                    id='info-button',
                    children='ℹ️',
                    style={
                        'fontSize': '24px',
                        'cursor': 'pointer',
                        'padding': '5px',
                        'marginTop': '10px'
                    }
                ),
                html.Div(
                    id='info-tooltip',
                    children='这是一个信息按钮示例',  # 默认显示的信息
                    style={
                        'position': 'absolute',
                        'left': '35px',
                        'top': '80px',  # 调整位置，避免与其他 tooltip 重叠
                        'backgroundColor': 'rgba(0, 0, 0, 0.8)',
                        'color': 'white',
                        'padding': '10px',
                        'borderRadius': '5px',
                        'fontSize': '14px',
                        'display': 'none',
                        'whiteSpace': 'nowrap'
                    }
                ),
                html.A(
                    href='https://x.com/elonmusk',
                    target='_blank',
                    children=[
                        html.Img(
                            src='https://pbs.twimg.com/profile_images/1893803697185910784/Na5lOWi5_400x400.jpg',
                            style={
                                'height': '24px',  # Matches fontSize of other buttons
                                'width': '24px',
                                'cursor': 'pointer',
                                'padding': '5px',
                                'marginTop': '10px'
                            }
                        )
                    ]
                )
            ],
            style={
                'position': 'fixed',
                'left': '10px',
                'top': '50%',
                'transform': 'translateY(-50%)',
                'zIndex': 1000
            }
        ),
        # Main content
        html.Div([
            html.H1("Elon Musk Tweet Time Analysis (EST)"),
            html.Div(id='date-picker-container', children=[
                dcc.Dropdown(
                    id='multi-date-picker',
                    options=[{'label': str(date), 'value': str(date)} for date in render_data.all_dates],
                    value=render_data.default_date,
                    multi=True,
                    searchable=True,
                    placeholder="Search and select dates (YYYY-MM-DD)",
                    style={'width': '100%'}
                )
            ]),
            dcc.Dropdown(
                id='multi-interval-picker',
                options=interval_options,
                value=10,
                style={'width': '50%', 'marginTop': '10px'}
            ),
            html.Div(id='days-display-container', style={'display': 'none'}, children=[
                dcc.Dropdown(
                    id='days-display-picker',
                    options=days_options,
                    value=30,  # Default changed to 30 since 1 is removed
                    style={'width': '50%', 'marginTop': '10px'}
                )
            ]),
            html.Div(id='multi-day-warning', style={'color': 'red', 'margin': '10px'}),
            dcc.Checklist(
                id='time-zone-checklist',
                options=[
                    {'label': 'California Time (PST)', 'value': 'PST'},
                    {'label': 'Texas Time (CST)', 'value': 'CST'}
                ],
                value=['PST'],
                style={'margin': '10px'}
            ),
            html.Div(id='multi-tweet-summary', style={'fontSize': '20px', 'margin': '10px'}),
            dcc.Tabs(id='tabs', value='line', children=[
                dcc.Tab(label='Line', value='line'),
                dcc.Tab(label='Heatmap', value='heatmap'),
                dcc.Tab(label='Heatmap(1-day)', value='one_day_heatmap'),
            ]),
            html.Div(id='tabs-content'),
            dcc.Input(
                id='target-input',
                type='number',
                placeholder='输入 Target 值',
                value=None,
                style={'marginTop': '10px', 'width': '50%'}
            ),
        ], style={'marginLeft': '50px'}),

        dcc.Interval(id='clock-interval', interval=1000, n_intervals=0)
    ])
    return app