from dash import html, dcc
import dash_bootstrap_components as dbc

def TTSLayout():
    return html.Div([
        html.H2("Text-to-Speech Management"),
        dbc.Button("Start TTS Training", id="start-training-tts", color="primary", className="mb-3"),
        dbc.Toast(
            id="tts-training-status",
            header="Training Status",
            is_open=False,
            dismissable=True,
            icon="info",
        ),
        html.H3("Upload TTS Data"),
        dcc.Upload(
            id="upload-tts-data",
            children=html.Div([
                'Drag and Drop or ',
                html.A('Select Files')
            ]),
            style={
                'width': '100%',
                'height': '60px',
                'lineHeight': '60px',
                'borderWidth': '1px',
                'borderStyle': 'dashed',
                'borderRadius': '5px',
                'textAlign': 'center',
                'margin': '10px'
            },
            multiple=True
        ),
        html.Div(id="tts-data-upload-status"),
        dbc.Button("Refresh TTS Data", id="refresh-tts-data", color="secondary", className="mt-3"),
        html.Div(id="tts-data-display"),
        dbc.Button("Refresh TTS Model Status", id="refresh-tts-model-status", color="secondary", className="mt-3"),
        html.Div(id="tts-model-status"),
    ])