package com.example.ui.customer

import androidx.activity.compose.BackHandler
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
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.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Receipt
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Notifications
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material.icons.outlined.Receipt
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
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 coil.compose.AsyncImage
import com.example.ui.theme.HeroGradient
import com.example.ui.theme.LoveRedPrimary
import com.example.viewmodel.AuthViewModel
import com.example.viewmodel.CustomerNavScreen
import com.example.viewmodel.CustomerViewModel

@Composable
fun CustomerMainScreen(
    customerViewModel: CustomerViewModel,
    authViewModel: AuthViewModel,
    onOpenAdminPortal: () -> Unit,
    onLogout: () -> Unit,
    modifier: Modifier = Modifier
) {
    val currentScreen by customerViewModel.currentScreen.collectAsState()
    val cartCount by customerViewModel.cartTotalCount.collectAsState()
    val notifications by customerViewModel.allNotifications.collectAsState()
    val unreadCount = notifications.count { !it.isRead }

    BackHandler(enabled = currentScreen != CustomerNavScreen.Home) {
        customerViewModel.navigateTo(CustomerNavScreen.Home)
    }

    val user by customerViewModel.currentUser.collectAsState()

    Scaffold(
        modifier = modifier.fillMaxSize(),
        bottomBar = {
            CustomerBottomNav(
                currentScreen = currentScreen,
                cartCount = cartCount,
                unreadAlerts = unreadCount,
                profileImageUri = user.profileImageUri,
                onSelectScreen = { screen -> customerViewModel.navigateTo(screen) }
            )
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            Crossfade(targetState = currentScreen, label = "CustomerNavCrossfade") { screen ->
                when (screen) {
                    CustomerNavScreen.Home -> {
                        HomeScreen(customerViewModel = customerViewModel)
                    }
                    CustomerNavScreen.Menu -> {
                        MenuScreen(customerViewModel = customerViewModel)
                    }
                    CustomerNavScreen.Orders -> {
                        OrdersScreen(
                            customerViewModel = customerViewModel,
                            authViewModel = authViewModel
                        )
                    }
                    CustomerNavScreen.Alerts -> {
                        AlertsScreen(customerViewModel = customerViewModel)
                    }
                    CustomerNavScreen.Account -> {
                        AccountScreen(
                            customerViewModel = customerViewModel,
                            authViewModel = authViewModel,
                            onOpenAdminPortal = onOpenAdminPortal,
                            onLogout = onLogout
                        )
                    }
                    CustomerNavScreen.Cart, CustomerNavScreen.Checkout -> {
                        CartScreen(
                            customerViewModel = customerViewModel,
                            authViewModel = authViewModel
                        )
                    }
                    is CustomerNavScreen.TrackOrder -> {
                        OrderTrackingScreen(
                            orderId = screen.orderId,
                            customerViewModel = customerViewModel,
                            onBack = { customerViewModel.navigateTo(CustomerNavScreen.Orders) }
                        )
                    }
                    else -> {}
                }
            }
        }
    }
}

@Composable
fun CustomerBottomNav(
    currentScreen: CustomerNavScreen,
    cartCount: Int,
    unreadAlerts: Int,
    profileImageUri: String,
    onSelectScreen: (CustomerNavScreen) -> Unit
) {
    Surface(
        color = Color.White,
        shadowElevation = 16.dp,
        shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp),
        modifier = Modifier
            .fillMaxWidth()
            .windowInsetsPadding(WindowInsets.navigationBars)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(70.dp)
                .padding(horizontal = 12.dp)
        ) {
            Row(
                modifier = Modifier.fillMaxSize(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                // 1. Home
                BottomNavItem(
                    label = "Explore",
                    icon = if (currentScreen == CustomerNavScreen.Home) Icons.Default.Home else Icons.Outlined.Home,
                    isSelected = currentScreen == CustomerNavScreen.Home,
                    onClick = { onSelectScreen(CustomerNavScreen.Home) },
                    modifier = Modifier.weight(1f).testTag("bottom_nav_home")
                )

                // 2. Orders
                BottomNavItem(
                    label = "Orders",
                    icon = if (currentScreen == CustomerNavScreen.Orders) Icons.Default.Receipt else Icons.Outlined.Receipt,
                    isSelected = currentScreen == CustomerNavScreen.Orders,
                    onClick = { onSelectScreen(CustomerNavScreen.Orders) },
                    modifier = Modifier.weight(1f).testTag("bottom_nav_orders")
                )

                // Spacer for floating center cart button
                Spacer(modifier = Modifier.weight(1f))

                // 4. Alerts
                BottomNavItem(
                    label = "Alerts",
                    icon = if (currentScreen == CustomerNavScreen.Alerts) Icons.Default.Notifications else Icons.Outlined.Notifications,
                    isSelected = currentScreen == CustomerNavScreen.Alerts,
                    badgeCount = unreadAlerts,
                    onClick = { onSelectScreen(CustomerNavScreen.Alerts) },
                    modifier = Modifier.weight(1f).testTag("bottom_nav_alerts")
                )

                // 5. Account
                BottomNavItem(
                    label = "Account",
                    icon = if (currentScreen == CustomerNavScreen.Account) Icons.Default.Person else Icons.Outlined.Person,
                    isSelected = currentScreen == CustomerNavScreen.Account,
                    profileImageUri = profileImageUri,
                    onClick = { onSelectScreen(CustomerNavScreen.Account) },
                    modifier = Modifier.weight(1f).testTag("bottom_nav_account")
                )
            }

            // Floating Center Cart Button with Luxury Gradient
            Box(
                modifier = Modifier
                    .align(Alignment.Center)
                    .offset(y = (-18).dp)
                    .size(58.dp)
                    .shadow(12.dp, CircleShape, spotColor = LoveRedPrimary)
                    .background(HeroGradient, CircleShape)
                    .clickable { onSelectScreen(CustomerNavScreen.Cart) }
                    .border(2.dp, Color.White, CircleShape)
                    .testTag("floating_cart_button"),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.ShoppingCart,
                    contentDescription = "Cart",
                    tint = Color.White,
                    modifier = Modifier.size(26.dp)
                )

                if (cartCount > 0) {
                    Box(
                        modifier = Modifier
                            .align(Alignment.TopEnd)
                            .offset(x = 4.dp, y = (-2).dp)
                            .size(22.dp)
                            .background(Color(0xFF7209B7), CircleShape)
                            .border(1.5.dp, Color.White, CircleShape),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = if (cartCount > 99) "99+" else "$cartCount",
                            color = Color.White,
                            fontSize = 10.sp,
                            fontWeight = FontWeight.Bold
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun BottomNavItem(
    label: String,
    icon: ImageVector,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    badgeCount: Int = 0,
    profileImageUri: String = ""
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .clickable(onClick = onClick)
            .padding(vertical = 4.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Box {
            if (profileImageUri.isNotBlank() && label == "Account") {
                AsyncImage(
                    model = profileImageUri,
                    contentDescription = label,
                    modifier = Modifier
                        .size(24.dp)
                        .clip(CircleShape)
                        .border(
                            width = if (isSelected) 2.dp else 0.dp,
                            color = LoveRedPrimary,
                            shape = CircleShape
                        ),
                    contentScale = ContentScale.Crop
                )
            } else {
                Icon(
                    imageVector = icon,
                    contentDescription = label,
                    tint = if (isSelected) LoveRedPrimary else Color(0xFF94A3B8),
                    modifier = Modifier.size(24.dp)
                )
            }
            if (badgeCount > 0) {
                Box(
                    modifier = Modifier
                        .align(Alignment.TopEnd)
                        .offset(x = 8.dp, y = (-4).dp)
                        .size(16.dp)
                        .background(LoveRedPrimary, CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "$badgeCount",
                        color = Color.White,
                        fontSize = 9.sp,
                        fontWeight = FontWeight.Bold
                    )
                }
            }
        }
        Spacer(modifier = Modifier.height(2.dp))
        Text(
            text = label,
            fontSize = 11.sp,
            fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Medium,
            color = if (isSelected) LoveRedPrimary else Color(0xFF64748B)
        )
    }
}