package com.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.BackHandler
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AdminPanelSettings
import androidx.compose.material.icons.filled.Campaign
import androidx.compose.material.icons.filled.Chat
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Dashboard
import androidx.compose.material.icons.filled.Description
import androidx.compose.material.icons.filled.Group
import androidx.compose.material.icons.filled.Handshake
import androidx.compose.material.icons.filled.Inventory2
import androidx.compose.material.icons.filled.Leaderboard
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.PauseCircle
import androidx.compose.material.icons.filled.PowerSettingsNew
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.ToggleOn
import androidx.compose.material.icons.filled.TrendingUp
import androidx.compose.material.icons.filled.Verified
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Badge
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Surface
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.ui.screens.AdminPanelScreen
import com.example.ui.screens.CampaignsScreen
import com.example.ui.screens.ContactsScreen
import com.example.ui.screens.CustomerInboxScreen
import com.example.ui.screens.DashboardScreen
import com.example.ui.screens.LeadsCrmScreen
import com.example.ui.screens.MessageTemplatesScreen
import com.example.ui.screens.PartnerManagementScreen
import com.example.ui.screens.ProductCatalogueScreen
import com.example.ui.screens.SettingsScreen
import com.example.ui.theme.EmeraldDark
import com.example.ui.theme.EmeraldLight
import com.example.ui.theme.EmeraldPrimary
import com.example.ui.theme.MyApplicationTheme
import com.example.ui.theme.TealSecondary
import com.example.ui.viewmodel.AppScreen
import com.example.ui.viewmodel.MarketingViewModel
import com.example.ui.viewmodel.UserRole

import androidx.compose.material.icons.filled.ExitToApp
import com.example.ui.screens.LoginScreen

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                val viewModel: MarketingViewModel = viewModel()
                val isLoggedIn by viewModel.isLoggedIn.collectAsStateWithLifecycle()
                if (!isLoggedIn) {
                    LoginScreen(viewModel = viewModel)
                } else {
                    MainApp(viewModel = viewModel)
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainApp(viewModel: MarketingViewModel = viewModel()) {
    val currentRole by viewModel.currentRole.collectAsStateWithLifecycle()
    val currentScreen by viewModel.currentScreen.collectAsStateWithLifecycle()
    val userMessage by viewModel.userMessage.collectAsStateWithLifecycle()
    val account by viewModel.account.collectAsStateWithLifecycle()
    val partners by viewModel.partners.collectAsStateWithLifecycle()

    var showTopBarMenu by remember { mutableStateOf(false) }
    var showRoleMenu by remember { mutableStateOf(false) }
    var showActiveDeactiveDialog by remember { mutableStateOf(false) }
    val snackbarHostState = remember { SnackbarHostState() }

    LaunchedEffect(userMessage) {
        userMessage?.let { msg ->
            snackbarHostState.showSnackbar(msg)
            viewModel.dismissUserMessage()
        }
    }

    // Handle back button
    BackHandler(enabled = currentScreen != AppScreen.DASHBOARD) {
        viewModel.navigateTo(AppScreen.DASHBOARD)
    }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        snackbarHost = { SnackbarHost(snackbarHostState) },
        topBar = {
            Column(modifier = Modifier.background(EmeraldPrimary)) {
                TopAppBar(
                    title = {
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Box(
                                modifier = Modifier
                                    .size(32.dp)
                                    .clip(CircleShape)
                                    .background(Color.White),
                                contentAlignment = Alignment.Center
                            ) {
                                Icon(
                                    imageVector = Icons.Default.Campaign,
                                    contentDescription = null,
                                    tint = EmeraldPrimary,
                                    modifier = Modifier.size(20.dp)
                                )
                            }
                            Spacer(modifier = Modifier.width(10.dp))
                            Column {
                                Row(verticalAlignment = Alignment.CenterVertically) {
                                    Text(
                                        text = "Narada",
                                        fontSize = 17.sp,
                                        fontWeight = FontWeight.Bold,
                                        color = Color.White
                                    )
                                    Spacer(modifier = Modifier.width(4.dp))
                                    Icon(
                                        imageVector = Icons.Default.Verified,
                                        contentDescription = "Official Meta API",
                                        tint = EmeraldLight,
                                        modifier = Modifier.size(15.dp)
                                    )
                                }
                                Text(
                                    text = "Official Meta Cloud API • Active: ${account?.status ?: "ACTIVE"}",
                                    fontSize = 10.sp,
                                    color = Color(0xFFD4E7E4)
                                )
                            }
                        }
                    },
                    actions = {
                        // Role Switcher Button
                        Box {
                            Surface(
                                onClick = { showRoleMenu = true },
                                shape = RoundedCornerShape(16.dp),
                                color = Color(0xFF075E54),
                                modifier = Modifier.testTag("role_switcher_button")
                            ) {
                                Row(
                                    modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                                    verticalAlignment = Alignment.CenterVertically
                                ) {
                                    Box(
                                        modifier = Modifier
                                            .size(8.dp)
                                            .clip(CircleShape)
                                            .background(
                                                when (currentRole) {
                                                    UserRole.CONSUMER -> EmeraldLight
                                                    UserRole.ADMIN -> Color(0xFF38BDF8)
                                                    UserRole.SUPER_ADMIN -> Color(0xFFFBBF24)
                                                }
                                            )
                                    )
                                    Spacer(modifier = Modifier.width(6.dp))
                                    Text(
                                        text = currentRole.name.replace("_", " "),
                                        fontSize = 11.sp,
                                        fontWeight = FontWeight.SemiBold,
                                        color = Color.White
                                    )
                                }
                            }

                            DropdownMenu(
                                expanded = showRoleMenu,
                                onDismissRequest = { showRoleMenu = false }
                            ) {
                                DropdownMenuItem(
                                    text = { Text("Business Consumer") },
                                    onClick = {
                                        viewModel.setRole(UserRole.CONSUMER)
                                        showRoleMenu = false
                                    }
                                )
                                DropdownMenuItem(
                                    text = { Text("Admin") },
                                    onClick = {
                                        viewModel.setRole(UserRole.ADMIN)
                                        showRoleMenu = false
                                    }
                                )
                                DropdownMenuItem(
                                    text = { Text("Super Admin") },
                                    onClick = {
                                        viewModel.setRole(UserRole.SUPER_ADMIN)
                                        showRoleMenu = false
                                    }
                                )
                            }
                        }

                        // Top Bar Menu button
                        Box {
                            IconButton(
                                onClick = { showTopBarMenu = true },
                                modifier = Modifier.testTag("top_bar_menu_button")
                            ) {
                                Icon(Icons.Default.MoreVert, contentDescription = "Top Bar Menu", tint = Color.White)
                            }

                            // Top Bar Menu with requested items
                            DropdownMenu(
                                expanded = showTopBarMenu,
                                onDismissRequest = { showTopBarMenu = false }
                            ) {
                                // 1. Manage Leads CRM
                                DropdownMenuItem(
                                    text = { Text("Manage Leads CRM", fontWeight = FontWeight.SemiBold) },
                                    leadingIcon = { Icon(Icons.Default.TrendingUp, contentDescription = null, tint = EmeraldPrimary) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.LEADS)
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_manage_leads")
                                )

                                // 2. Manage Campaigns
                                DropdownMenuItem(
                                    text = { Text("Manage Campaigns", fontWeight = FontWeight.SemiBold) },
                                    leadingIcon = { Icon(Icons.Default.Campaign, contentDescription = null, tint = EmeraldPrimary) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.CAMPAIGNS)
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_manage_campaigns")
                                )

                                // 3. Manage Message Templets
                                DropdownMenuItem(
                                    text = { Text("Manage Message Templets", fontWeight = FontWeight.SemiBold) },
                                    leadingIcon = { Icon(Icons.Default.Description, contentDescription = null, tint = EmeraldPrimary) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.TEMPLATES)
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_manage_templates")
                                )

                                // 4. Manage Contact List
                                DropdownMenuItem(
                                    text = { Text("Manage Contact List", fontWeight = FontWeight.SemiBold) },
                                    leadingIcon = { Icon(Icons.Default.Group, contentDescription = null, tint = EmeraldPrimary) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.CONTACTS)
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_manage_contacts")
                                )

                                HorizontalDivider(modifier = Modifier.padding(vertical = 4.dp))

                                // 5. Partner Management
                                DropdownMenuItem(
                                    text = { Text("Partner Management", fontWeight = FontWeight.Medium) },
                                    leadingIcon = { Icon(Icons.Default.Handshake, contentDescription = null, tint = Color(0xFF0284C7)) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.PARTNERS)
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_partner_management")
                                )

                                // 6. Add/Remove Active/Deactive
                                DropdownMenuItem(
                                    text = { Text("Add/Remove Active/Deactive", fontWeight = FontWeight.Medium) },
                                    leadingIcon = { Icon(Icons.Default.PowerSettingsNew, contentDescription = null, tint = Color(0xFFD97706)) },
                                    onClick = {
                                        showActiveDeactiveDialog = true
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_active_deactive")
                                )

                                HorizontalDivider(modifier = Modifier.padding(vertical = 4.dp))

                                // Product Catalogue
                                DropdownMenuItem(
                                    text = { Text("Product Catalogue") },
                                    leadingIcon = { Icon(Icons.Default.Inventory2, contentDescription = null) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.CATALOGUE)
                                        showTopBarMenu = false
                                    }
                                )

                                // Admin Panel
                                DropdownMenuItem(
                                    text = { Text("Admin & Governance Panel") },
                                    leadingIcon = { Icon(Icons.Default.AdminPanelSettings, contentDescription = null) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.ADMIN_PANEL)
                                        showTopBarMenu = false
                                    }
                                )

                                // Settings
                                DropdownMenuItem(
                                    text = { Text("Meta & Business Settings") },
                                    leadingIcon = { Icon(Icons.Default.Settings, contentDescription = null) },
                                    onClick = {
                                        viewModel.navigateTo(AppScreen.SETTINGS)
                                        showTopBarMenu = false
                                    }
                                )

                                HorizontalDivider(modifier = Modifier.padding(vertical = 4.dp))

                                // Logout / Switch User
                                DropdownMenuItem(
                                    text = { Text("Switch User Type / Logout", color = Color(0xFFE11D48), fontWeight = FontWeight.Bold) },
                                    leadingIcon = { Icon(Icons.Default.ExitToApp, contentDescription = "Logout", tint = Color(0xFFE11D48)) },
                                    onClick = {
                                        viewModel.logout()
                                        showTopBarMenu = false
                                    },
                                    modifier = Modifier.testTag("menu_logout")
                                )
                            }
                        }

                        // 1-Tap Logout / Switch User Button
                        IconButton(
                            onClick = { viewModel.logout() },
                            modifier = Modifier.testTag("logout_button")
                        ) {
                            Icon(Icons.Default.ExitToApp, contentDescription = "Logout", tint = Color.White)
                        }
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = EmeraldPrimary
                    )
                )

                // Quick Navigation Horizontal Strip in the Top Bar for 1-tap access
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .horizontalScroll(rememberScrollState())
                        .padding(horizontal = 12.dp, vertical = 6.dp),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    TopBarQuickTab(
                        title = "Manage Leads CRM",
                        isSelected = currentScreen == AppScreen.LEADS,
                        onClick = { viewModel.navigateTo(AppScreen.LEADS) }
                    )
                    TopBarQuickTab(
                        title = "Manage Campaigns",
                        isSelected = currentScreen == AppScreen.CAMPAIGNS,
                        onClick = { viewModel.navigateTo(AppScreen.CAMPAIGNS) }
                    )
                    TopBarQuickTab(
                        title = "Manage Message Templets",
                        isSelected = currentScreen == AppScreen.TEMPLATES,
                        onClick = { viewModel.navigateTo(AppScreen.TEMPLATES) }
                    )
                    TopBarQuickTab(
                        title = "Manage Contact List",
                        isSelected = currentScreen == AppScreen.CONTACTS,
                        onClick = { viewModel.navigateTo(AppScreen.CONTACTS) }
                    )
                    TopBarQuickTab(
                        title = "Partner Management",
                        isSelected = currentScreen == AppScreen.PARTNERS,
                        onClick = { viewModel.navigateTo(AppScreen.PARTNERS) }
                    )
                }
            }
        },
        bottomBar = {
            NavigationBar(
                containerColor = MaterialTheme.colorScheme.surface,
                tonalElevation = 8.dp
            ) {
                NavigationBarItem(
                    selected = currentScreen == AppScreen.DASHBOARD,
                    onClick = { viewModel.navigateTo(AppScreen.DASHBOARD) },
                    icon = { Icon(Icons.Default.Dashboard, contentDescription = "Dashboard") },
                    label = { Text("Dashboard", fontSize = 11.sp) },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = EmeraldDark,
                        indicatorColor = EmeraldLight.copy(alpha = 0.25f)
                    ),
                    modifier = Modifier.testTag("nav_dashboard")
                )

                NavigationBarItem(
                    selected = currentScreen == AppScreen.CONTACTS,
                    onClick = { viewModel.navigateTo(AppScreen.CONTACTS) },
                    icon = { Icon(Icons.Default.Group, contentDescription = "Contacts") },
                    label = { Text("Contacts", fontSize = 11.sp) },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = EmeraldDark,
                        indicatorColor = EmeraldLight.copy(alpha = 0.25f)
                    ),
                    modifier = Modifier.testTag("nav_contacts")
                )

                NavigationBarItem(
                    selected = currentScreen == AppScreen.CAMPAIGNS,
                    onClick = { viewModel.navigateTo(AppScreen.CAMPAIGNS) },
                    icon = { Icon(Icons.Default.Campaign, contentDescription = "Campaigns") },
                    label = { Text("Campaigns", fontSize = 11.sp) },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = EmeraldDark,
                        indicatorColor = EmeraldLight.copy(alpha = 0.25f)
                    ),
                    modifier = Modifier.testTag("nav_campaigns")
                )

                NavigationBarItem(
                    selected = currentScreen == AppScreen.LEADS,
                    onClick = { viewModel.navigateTo(AppScreen.LEADS) },
                    icon = { Icon(Icons.Default.TrendingUp, contentDescription = "Leads") },
                    label = { Text("Leads CRM", fontSize = 11.sp) },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = EmeraldDark,
                        indicatorColor = EmeraldLight.copy(alpha = 0.25f)
                    ),
                    modifier = Modifier.testTag("nav_leads")
                )

                NavigationBarItem(
                    selected = currentScreen == AppScreen.INBOX,
                    onClick = { viewModel.navigateTo(AppScreen.INBOX) },
                    icon = { Icon(Icons.Default.Chat, contentDescription = "Inbox") },
                    label = { Text("Inbox", fontSize = 11.sp) },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = EmeraldDark,
                        indicatorColor = EmeraldLight.copy(alpha = 0.25f)
                    ),
                    modifier = Modifier.testTag("nav_inbox")
                )
            }
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            when (currentScreen) {
                AppScreen.DASHBOARD -> DashboardScreen(viewModel = viewModel)
                AppScreen.CONTACTS -> ContactsScreen(viewModel = viewModel)
                AppScreen.CAMPAIGNS -> CampaignsScreen(viewModel = viewModel)
                AppScreen.LEADS -> LeadsCrmScreen(viewModel = viewModel)
                AppScreen.INBOX -> CustomerInboxScreen(viewModel = viewModel)
                AppScreen.TEMPLATES -> MessageTemplatesScreen(viewModel = viewModel)
                AppScreen.PARTNERS -> PartnerManagementScreen(viewModel = viewModel)
                AppScreen.CATALOGUE -> ProductCatalogueScreen(viewModel = viewModel)
                AppScreen.ADMIN_PANEL -> AdminPanelScreen(viewModel = viewModel)
                AppScreen.SETTINGS -> SettingsScreen(viewModel = viewModel)
            }
        }
    }

    // Active / Deactive Quick Management Dialog
    if (showActiveDeactiveDialog) {
        val isAccountActive = account?.status == "ACTIVE"
        AlertDialog(
            onDismissRequest = { showActiveDeactiveDialog = false },
            title = {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        imageVector = Icons.Default.PowerSettingsNew,
                        contentDescription = null,
                        tint = if (isAccountActive) EmeraldPrimary else Color(0xFFE11D48)
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text("Active / Deactive Status")
                }
            },
            text = {
                Column(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        text = "Manage global system activity and business status:",
                        fontSize = 13.sp,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                    Spacer(modifier = Modifier.height(14.dp))

                    // Account Active Toggle
                    Surface(
                        shape = RoundedCornerShape(12.dp),
                        color = if (isAccountActive) Color(0xFFF0FDF4) else Color(0xFFFEF2F2),
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Row(
                            modifier = Modifier.padding(12.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Column(modifier = Modifier.weight(1f)) {
                                Text(
                                    text = "System Account Status",
                                    fontWeight = FontWeight.Bold,
                                    fontSize = 13.sp
                                )
                                Text(
                                    text = if (isAccountActive) "Status: ACTIVE (Operational)" else "Status: DEACTIVE (Paused)",
                                    fontSize = 11.sp,
                                    color = if (isAccountActive) EmeraldDark else Color(0xFFE11D48),
                                    fontWeight = FontWeight.SemiBold
                                )
                            }
                            Switch(
                                checked = isAccountActive,
                                onCheckedChange = { viewModel.toggleAccountStatus(it) },
                                colors = SwitchDefaults.colors(
                                    checkedThumbColor = Color.White,
                                    checkedTrackColor = EmeraldPrimary,
                                    uncheckedThumbColor = Color.White,
                                    uncheckedTrackColor = Color(0xFF94A3B8)
                                )
                            )
                        }
                    }

                    Spacer(modifier = Modifier.height(12.dp))

                    Text(
                        text = "Active Partners: ${partners.count { it.isActive }} of ${partners.size}",
                        fontSize = 12.sp,
                        fontWeight = FontWeight.Medium
                    )
                }
            },
            confirmButton = {
                Button(
                    onClick = {
                        showActiveDeactiveDialog = false
                        viewModel.navigateTo(AppScreen.PARTNERS)
                    },
                    colors = ButtonDefaults.buttonColors(containerColor = EmeraldPrimary)
                ) {
                    Text("Open Partner Management")
                }
            },
            dismissButton = {
                TextButton(onClick = { showActiveDeactiveDialog = false }) {
                    Text("Done")
                }
            }
        )
    }
}

@Composable
fun TopBarQuickTab(
    title: String,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Surface(
        onClick = onClick,
        shape = RoundedCornerShape(14.dp),
        color = if (isSelected) Color.White else Color(0xFF075E54)
    ) {
        Text(
            text = title,
            fontSize = 11.sp,
            fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Medium,
            color = if (isSelected) EmeraldDark else Color(0xFFD4E7E4),
            modifier = Modifier.padding(horizontal = 10.dp, vertical = 5.dp)
        )
    }
}