package com.example.notesai.presentation.components

import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AutoAwesome
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.AutoAwesome
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.AppColors
import com.example.notesai.util.Constants

@Composable
fun ModernBottomBar(
    currentScreen: String,
    onHomeClick: () -> Unit,
    onAIClick: () -> Unit
) {
    // Floating Bottom Bar with Glassmorphism
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
    ) {
        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .shadow(
                    elevation = Constants.Elevation.Large.dp,
                    shape = RoundedCornerShape(Constants.Radius.ExtraLarge.dp)
                ),
            color = AppColors.SurfaceElevated,
            shape = RoundedCornerShape(Constants.Radius.ExtraLarge.dp)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp, horizontal = 24.dp),
                horizontalArrangement = Arrangement.SpaceEvenly,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // Home Button
                BottomBarItem(
                    selected = currentScreen == "main",
                    onClick = onHomeClick,
                    icon = if (currentScreen == "main") Icons.Filled.Home else Icons.Outlined.Home,
                    label = "Beranda"
                )

                // AI Button
                BottomBarItem(
                    selected = currentScreen == "ai",
                    onClick = onAIClick,
                    icon = if (currentScreen == "ai") Icons.Filled.AutoAwesome else Icons.Outlined.AutoAwesome,
                    label = "AI Helper"
                )
            }
        }
    }
}

@Composable
private fun BottomBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    label: String
) {
    // Scale animation
    val scale by animateFloatAsState(
        targetValue = if (selected) 1.1f else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        ),
        label = "scale"
    )

    // Color animation
    val iconColor by animateColorAsState(
        targetValue = if (selected) AppColors.Primary else AppColors.OnSurfaceVariant,
        animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM),
        label = "color"
    )

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .clip(RoundedCornerShape(12.dp))
            .clickable(
                onClick = onClick,
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            )
            .padding(horizontal = 24.dp, vertical = 8.dp)
    ) {
        // Icon with background indicator
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .size(48.dp)
                .scale(scale)
        ) {
            // Background indicator
            if (selected) {
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .background(
                            color = AppColors.Primary.copy(alpha = 0.15f),
                            shape = CircleShape
                        )
                )
            }

            Icon(
                icon,
                contentDescription = label,
                tint = iconColor,
                modifier = Modifier.size(24.dp)
            )
        }

        // Label with fade animation
        AnimatedVisibility(
            visible = selected,
            enter = fadeIn() + expandVertically(),
            exit = fadeOut() + shrinkVertically()
        ) {
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                label,
                color = AppColors.Primary,
                style = MaterialTheme.typography.bodySmall,
                fontWeight = FontWeight.Bold,
                fontSize = 12.sp
            )
        }
    }
}