package com.example.notesai.presentation.components

import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
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.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
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.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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModernTopBar(
    title: String,
    showBackButton: Boolean,
    onBackClick: () -> Unit,
    onMenuClick: () -> Unit,
    onSearchClick: () -> Unit,
    searchQuery: String,
    onSearchQueryChange: (String) -> Unit,
    showSearch: Boolean
) {
    // Floating Top Bar with same style as Bottom Bar
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.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)
        ) {
            // Smooth transition for search bar
            AnimatedContent(
                targetState = showSearch,
                transitionSpec = {
                    fadeIn(animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM)) togetherWith
                            fadeOut(animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM))
                },
                label = "topbar"
            ) { isSearching ->
                if (isSearching) {
                    // Search Mode
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 12.dp, vertical = 8.dp),
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        // Search TextField
                        OutlinedTextField(
                            value = searchQuery,
                            onValueChange = onSearchQueryChange,
                            placeholder = {
                                Text(
                                    "Cari...",
                                    color = AppColors.OnSurfaceVariant,
                                    fontSize = 15.sp
                                )
                            },
                            colors = OutlinedTextFieldDefaults.colors(
                                focusedContainerColor = AppColors.SurfaceVariant,
                                unfocusedContainerColor = AppColors.SurfaceVariant,
                                focusedTextColor = AppColors.OnBackground,
                                unfocusedTextColor = AppColors.OnSurface,
                                cursorColor = AppColors.Primary,
                                focusedBorderColor = AppColors.Primary,
                                unfocusedBorderColor = Color.Transparent
                            ),
                            modifier = Modifier
                                .weight(1f)
                                .heightIn(min = 48.dp),
                            shape = RoundedCornerShape(Constants.Radius.Large.dp),
                            singleLine = true,
                            textStyle = LocalTextStyle.current.copy(fontSize = 15.sp)
                        )

                        // Close Search Button
                        IconButton(
                            onClick = {
                                onSearchQueryChange("")
                                onSearchClick()
                            },
                            modifier = Modifier
                                .size(40.dp)
                                .clip(CircleShape)
                                .background(AppColors.SurfaceVariant)
                        ) {
                            Icon(
                                Icons.Default.Close,
                                contentDescription = "Close Search",
                                tint = AppColors.OnSurfaceVariant,
                                modifier = Modifier.size(20.dp)
                            )
                        }
                    }
                } else {
                    // Normal Mode
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 12.dp, vertical = 8.dp),
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        // Back/Menu Button
                        IconButton(
                            onClick = if (showBackButton) onBackClick else onMenuClick,
                            modifier = Modifier
                                .size(40.dp)
                                .clip(CircleShape)
                                .background(
                                    if (showBackButton) AppColors.SurfaceVariant
                                    else AppColors.Primary.copy(alpha = 0.1f)
                                )
                        ) {
                            Icon(
                                if (showBackButton) Icons.AutoMirrored.Filled.ArrowBack else Icons.Default.Menu,
                                contentDescription = if (showBackButton) "Back" else "Menu",
                                tint = if (showBackButton) AppColors.OnSurface else AppColors.Primary,
                                modifier = Modifier.size(20.dp)
                            )
                        }

                        // Title
                        Text(
                            title,
                            fontWeight = FontWeight.Bold,
                            fontSize = 18.sp,
                            color = AppColors.OnBackground,
                            modifier = Modifier
                                .weight(1f)
                                .padding(horizontal = 12.dp)
                        )

                        // Search Button
                        IconButton(
                            onClick = onSearchClick,
                            modifier = Modifier
                                .size(40.dp)
                                .clip(CircleShape)
                                .background(AppColors.SurfaceVariant)
                        ) {
                            Icon(
                                Icons.Default.Search,
                                contentDescription = "Search",
                                tint = AppColors.OnSurfaceVariant,
                                modifier = Modifier.size(20.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}