package com.example.notesai.presentation.screens.note.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp

@Composable
fun DraggableMiniMarkdownToolbar(
    modifier: Modifier = Modifier,
    onDrag: (dx: Float, dy: Float) -> Unit,

    // STATE
    isBoldActive: Boolean,
    isItalicActive: Boolean,
    isUnderlineActive: Boolean,
    canUndo: Boolean = false,
    canRedo: Boolean = false,

    // ACTIONS
    onBold: () -> Unit,
    onItalic: () -> Unit,
    onUnderline: () -> Unit,
    onUndo: () -> Unit = {},
    onRedo: () -> Unit = {}
) {
    Surface(
        modifier = modifier,
        shape = RoundedCornerShape(24.dp),
        color = MaterialTheme.colorScheme.surface.copy(alpha = 0.95f),
        shadowElevation = 6.dp
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 8.dp, vertical = 6.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(6.dp)
        ) {

            // 🔹 DRAG HANDLE
            Box(
                modifier = Modifier
                    .size(36.dp)
                    .pointerInput(Unit) {
                        detectDragGestures { change, dragAmount ->
                            change.consume()
                            onDrag(dragAmount.x, dragAmount.y)
                        }
                    },
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    Icons.Default.DragIndicator,
                    contentDescription = "Drag",
                    tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.4f),
                    modifier = Modifier.size(18.dp)
                )
            }

            ToolbarIcon(
                icon = Icons.Default.FormatBold,
                isActive = isBoldActive,
                onClick = onBold
            )

            ToolbarIcon(
                icon = Icons.Default.FormatItalic,
                isActive = isItalicActive,
                onClick = onItalic
            )

            ToolbarIcon(
                icon = Icons.Default.FormatUnderlined,
                isActive = isUnderlineActive,
                onClick = onUnderline
            )

            // Divider
            Box(
                modifier = Modifier
                    .width(1.dp)
                    .height(24.dp)
                    .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f))
            )

            // Undo
            ToolbarIcon(
                icon = Icons.Default.Undo,
                onClick = onUndo,
                enabled = canUndo
            )

            // Redo
            ToolbarIcon(
                icon = Icons.Default.Redo,
                onClick = onRedo,
                enabled = canRedo
            )
        }
    }
}

@Composable
private fun ToolbarIcon(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    onClick: () -> Unit,
    isActive: Boolean = false,
    enabled: Boolean = true
) {
    val activeBg = MaterialTheme.colorScheme.primary.copy(alpha = 0.15f)
    val activeColor = MaterialTheme.colorScheme.primary
    val disabledColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)

    Box(
        modifier = Modifier
            .size(36.dp)
            .background(
                color = if (isActive) activeBg else androidx.compose.ui.graphics.Color.Transparent,
                shape = RoundedCornerShape(10.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        IconButton(
            onClick = onClick,
            modifier = Modifier.size(36.dp),
            enabled = enabled
        ) {
            Icon(
                icon,
                contentDescription = null,
                tint = when {
                    !enabled -> disabledColor
                    isActive -> activeColor
                    else -> MaterialTheme.colorScheme.onSurface
                },
                modifier = Modifier.size(18.dp)
            )
        }
    }
}