package com.example.notesai.presentation.dialogs

import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
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.graphics.Brush
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 CategoryDialog(
    onDismiss: () -> Unit,
    onSave: (String, Long, Long) -> Unit
) {
    var name by remember { mutableStateOf("") }
    var selectedGradient by remember { mutableStateOf(0) }

    AlertDialog(
        onDismissRequest = onDismiss,
        containerColor = AppColors.Surface,
        shape = RoundedCornerShape(Constants.Radius.Large.dp),
        title = {
            Text(
                "Kategori Baru",
                color = AppColors.OnBackground,
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp
            )
        },
        text = {
            Column(
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                // Name Input
                OutlinedTextField(
                    value = name,
                    onValueChange = { name = it },
                    label = {
                        Text(
                            "Nama Kategori",
                            color = AppColors.OnSurfaceVariant
                        )
                    },
                    placeholder = {
                        Text(
                            "Contoh: Pekerjaan, Pribadi...",
                            color = AppColors.OnSurfaceTertiary,
                            fontSize = 14.sp
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    colors = OutlinedTextFieldDefaults.colors(
                        focusedTextColor = AppColors.OnBackground,
                        unfocusedTextColor = AppColors.OnSurface,
                        focusedContainerColor = AppColors.SurfaceVariant,
                        unfocusedContainerColor = AppColors.SurfaceVariant,
                        cursorColor = AppColors.Primary,
                        focusedBorderColor = AppColors.Primary,
                        unfocusedBorderColor = Color.Transparent
                    ),
                    shape = RoundedCornerShape(Constants.Radius.Medium.dp),
                    singleLine = true
                )

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

                // Color picker title
                Text(
                    "Pilih Warna:",
                    style = MaterialTheme.typography.bodyMedium,
                    color = AppColors.OnSurface,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 14.sp
                )

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

                // Color Grid - 2 rows of 4 colors
                Constants.CategoryColors.chunked(4).forEach { row ->
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.spacedBy(12.dp)
                    ) {
                        row.forEachIndexed { _, gradient ->
                            val globalIndex = Constants.CategoryColors.indexOf(gradient)
                            val isSelected = selectedGradient == globalIndex

                            Box(
                                modifier = Modifier
                                    .weight(1f)
                                    .aspectRatio(1f)
                                    .clip(RoundedCornerShape(Constants.Radius.Medium.dp))
                                    .background(
                                        brush = Brush.linearGradient(
                                            colors = listOf(
                                                Color(gradient.first),
                                                Color(gradient.second)
                                            )
                                        )
                                    )
                                    .clickable { selectedGradient = globalIndex },
                                contentAlignment = Alignment.Center
                            ) {
                                // Checkmark with animation
                                androidx.compose.animation.AnimatedVisibility(
                                    visible = isSelected,
                                    enter = scaleIn(
                                        animationSpec = spring(
                                            dampingRatio = Spring.DampingRatioMediumBouncy,
                                            stiffness = Spring.StiffnessMedium
                                        )
                                    ) + fadeIn(),
                                    exit = scaleOut(
                                        animationSpec = spring(
                                            dampingRatio = Spring.DampingRatioMediumBouncy,
                                            stiffness = Spring.StiffnessMedium
                                        )
                                    ) + fadeOut()
                                ) {
                                    Icon(
                                        Icons.Default.Check,
                                        contentDescription = "Selected",
                                        tint = Color.White,
                                        modifier = Modifier.size(28.dp)
                                    )
                                }
                            }
                        }
                    }
                    Spacer(modifier = Modifier.height(12.dp))
                }
            }
        },
        confirmButton = {
            Row(
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                // Cancel button
                TextButton(
                    onClick = onDismiss,
                    shape = RoundedCornerShape(Constants.Radius.Medium.dp),
                    modifier = Modifier.height(48.dp)
                ) {
                    Text(
                        "Batal",
                        color = AppColors.OnSurfaceVariant,
                        fontSize = 15.sp
                    )
                }

                // Save button
                Button(
                    onClick = {
                        if (name.isNotBlank()) {
                            val gradient = Constants.CategoryColors[selectedGradient]
                            onSave(name, gradient.first, gradient.second)
                        }
                    },
                    enabled = name.isNotBlank(),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = AppColors.Primary,
                        disabledContainerColor = AppColors.Primary.copy(alpha = 0.5f)
                    ),
                    shape = RoundedCornerShape(Constants.Radius.Medium.dp),
                    modifier = Modifier.height(48.dp)
                ) {
                    Text(
                        "Buat",
                        color = Color.White,
                        fontWeight = FontWeight.Bold,
                        fontSize = 15.sp
                    )
                }
            }
        }
    )
}