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.*
import androidx.compose.material.icons.outlined.*
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.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
import com.example.notesai.util.AppColors


@Composable
fun DrawerMenu(
    currentScreen: String,
    isDarkTheme: Boolean,
    onDismiss: () -> Unit,
    onItemClick: (String) -> Unit,
    onThemeToggle: () -> Unit
) {
    // Backdrop with blur effect
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.5f))
            .clickable(
                onClick = onDismiss,
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            )
    ) {
        // Drawer Content
        Surface(
            modifier = Modifier
                .fillMaxHeight()
                .width(280.dp)
                .align(Alignment.CenterStart)
                .clickable(
                    onClick = {},
                    indication = null,
                    interactionSource = remember { MutableInteractionSource() }
                ),
            color = AppColors.Surface,
            shadowElevation = Constants.Elevation.ExtraLarge.dp
        ) {
            Column(
                modifier = Modifier.fillMaxSize()
            ) {
                // Header - Minimalist
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(
                            brush = Brush.verticalGradient(
                                colors = listOf(
                                    AppColors.Primary.copy(alpha = 0.15f),
                                    Color.Transparent
                                )
                            )
                        )
                        .padding(Constants.Spacing.ExtraLarge.dp)
                ) {
                    Column {
                        // App Icon with subtle background
                        Box(
                            modifier = Modifier
                                .size(56.dp)
                                .background(
                                    color = AppColors.Primary.copy(alpha = 0.2f),
                                    shape = RoundedCornerShape(Constants.Radius.Medium.dp)
                                ),
                            contentAlignment = Alignment.Center
                        ) {
                            Icon(
                                Icons.Default.Create,
                                contentDescription = null,
                                tint = AppColors.Primary,
                                modifier = Modifier.size(32.dp)
                            )
                        }

                        Spacer(modifier = Modifier.height(Constants.Spacing.Medium.dp))

                        Text(
                            "AI Notes",
                            style = MaterialTheme.typography.headlineMedium,
                            color = AppColors.OnBackground,
                            fontWeight = FontWeight.Bold,
                            fontSize = 24.sp
                        )

                        Spacer(modifier = Modifier.height(Constants.Spacing.ExtraSmall.dp))

                        Text(
                            "Smart Note Taking",
                            style = MaterialTheme.typography.bodyMedium,
                            color = AppColors.OnSurfaceVariant,
                            fontSize = 14.sp
                        )
                    }
                }

                Spacer(modifier = Modifier.height(Constants.Spacing.Large.dp))

                // Menu Items
                DrawerMenuItem(
                    icon = if (currentScreen == "main") Icons.Filled.Home else Icons.Outlined.Home,
                    text = "Beranda",
                    isSelected = currentScreen == "main",
                    onClick = { onItemClick("main") }
                )

                DrawerMenuItem(
                    icon = if (currentScreen == "starred") Icons.Filled.Star else Icons.Outlined.StarBorder,
                    text = "Berbintang",
                    isSelected = currentScreen == "starred",
                    onClick = { onItemClick("starred") }
                )

                DrawerMenuItem(
                    icon = if (currentScreen == "archive") Icons.Filled.Archive else Icons.Outlined.Archive,
                    text = "Arsip",
                    isSelected = currentScreen == "archive",
                    onClick = { onItemClick("archive") }
                )

                DrawerMenuItem(
                    icon = if (currentScreen == "trash") Icons.Filled.Delete else Icons.Outlined.Delete,
                    text = "Sampah",
                    isSelected = currentScreen == "trash",
                    onClick = { onItemClick("trash") }
                )

                Spacer(modifier = Modifier.height(Constants.Spacing.Medium.dp))

                HorizontalDivider(
                    color = AppColors.Divider,
                    modifier = Modifier.padding(horizontal = Constants.Spacing.Medium.dp)
                )

                Spacer(modifier = Modifier.height(Constants.Spacing.Medium.dp))

                // Theme Toggle
                ThemeToggleItem(
                    isDarkTheme = isDarkTheme,
                    onToggle = onThemeToggle
                )

                Spacer(modifier = Modifier.weight(1f))

                // Footer - Version info
                HorizontalDivider(
                    color = AppColors.Divider,
                    modifier = Modifier.padding(horizontal = Constants.Spacing.Medium.dp)
                )

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(Constants.Spacing.Medium.dp),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        "Version 1.1.0",
                        style = MaterialTheme.typography.bodySmall,
                        color = AppColors.OnSurfaceTertiary,
                        fontSize = 12.sp
                    )

                    // Powered by badge
                    Surface(
                        color = AppColors.Primary.copy(alpha = 0.1f),
                        shape = RoundedCornerShape(Constants.Radius.Small.dp)
                    ) {
                        Row(
                            modifier = Modifier.padding(horizontal = Constants.Spacing.Small.dp, vertical = 4.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.spacedBy(4.dp)
                        ) {
                            Icon(
                                Icons.Default.AutoAwesome,
                                contentDescription = null,
                                tint = AppColors.Primary,
                                modifier = Modifier.size(12.dp)
                            )
                            Text(
                                "Gemini AI",
                                color = AppColors.Primary,
                                fontSize = 11.sp,
                                fontWeight = FontWeight.Bold
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
private fun ThemeToggleItem(
    isDarkTheme: Boolean,
    onToggle: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = Constants.Spacing.Medium.dp)
            .clip(RoundedCornerShape(Constants.Radius.Medium.dp))
            .clickable(onClick = onToggle)
            .background(AppColors.SurfaceVariant)
            .padding(horizontal = Constants.Spacing.Medium.dp, vertical = Constants.Spacing.Medium.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(Constants.Spacing.Medium.dp)
        ) {
            // Icon with background
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .background(
                        color = AppColors.Primary.copy(alpha = 0.2f),
                        shape = CircleShape
                    ),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    if (isDarkTheme) Icons.Default.DarkMode else Icons.Default.LightMode,
                    contentDescription = null,
                    tint = AppColors.Primary,
                    modifier = Modifier.size(20.dp)
                )
            }

            // Text
            Column {
                Text(
                    "Tema Aplikasi",
                    style = MaterialTheme.typography.bodyLarge,
                    color = AppColors.OnSurface,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 15.sp
                )
                Text(
                    if (isDarkTheme) "Mode Gelap" else "Mode Terang",
                    style = MaterialTheme.typography.bodySmall,
                    color = AppColors.OnSurfaceTertiary,
                    fontSize = 12.sp
                )
            }
        }

        // Toggle Switch
        Switch(
            checked = isDarkTheme,
            onCheckedChange = { onToggle() },
            colors = SwitchDefaults.colors(
                checkedThumbColor = Color.White,
                checkedTrackColor = AppColors.Primary,
                uncheckedThumbColor = Color.White,
                uncheckedTrackColor = AppColors.Border
            )
        )
    }
}

@Composable
private fun DrawerMenuItem(
    icon: ImageVector,
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    // Scale animation
    val scale by animateFloatAsState(
        targetValue = if (isSelected) 1.02f else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMedium
        ),
        label = "scale"
    )

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .scale(scale)
            .clip(RoundedCornerShape(Constants.Radius.Medium.dp))
            .clickable(onClick = onClick)
            .background(
                color = if (isSelected)
                    AppColors.Primary.copy(alpha = 0.1f)
                else
                    Color.Transparent
            )
            .padding(horizontal = Constants.Spacing.Medium.dp, vertical = Constants.Spacing.Medium.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // Icon with background
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(
                    color = if (isSelected)
                        AppColors.Primary.copy(alpha = 0.2f)
                    else
                        AppColors.SurfaceVariant,
                    shape = CircleShape
                ),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                icon,
                contentDescription = null,
                tint = if (isSelected) AppColors.Primary else AppColors.OnSurfaceVariant,
                modifier = Modifier.size(20.dp)
            )
        }

        Spacer(modifier = Modifier.width(Constants.Spacing.Medium.dp))

        // Text
        Text(
            text,
            style = MaterialTheme.typography.bodyLarge,
            color = if (isSelected) AppColors.Primary else AppColors.OnSurface,
            fontWeight = if (isSelected) FontWeight.SemiBold else FontWeight.Normal,
            fontSize = 15.sp
        )
    }
}