package com.placeholder.sherpai2.ui.presentation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
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.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Label
import androidx.compose.material.icons.filled.*
import com.placeholder.sherpai2.ui.navigation.AppRoutes

/**
 * SLIMMED DOWN AppDrawer - 280dp width, inline logo, cleaner sections
 * UPDATED: Discover People feature with sparkle icon ✨
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppDrawerContent(
    currentRoute: String?,
    onDestinationClicked: (String) -> Unit
) {
    ModalDrawerSheet(
        modifier = Modifier.width(280.dp), // SLIMMER (was 300dp)
        drawerContainerColor = MaterialTheme.colorScheme.surface
    ) {
        // SCROLLABLE Column - works on small phones!
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {

            // ===== COMPACT HEADER - Icon + Text Inline =====
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(
                        Brush.verticalGradient(
                            colors = listOf(
                                MaterialTheme.colorScheme.primaryContainer,
                                MaterialTheme.colorScheme.surface
                            )
                        )
                    )
                    .padding(20.dp) // Reduced padding
            ) {
                Row(
                    horizontalArrangement = Arrangement.spacedBy(12.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // App icon - smaller
                    Surface(
                        modifier = Modifier.size(48.dp), // Smaller (was 56dp)
                        shape = RoundedCornerShape(14.dp),
                        color = MaterialTheme.colorScheme.primary,
                        shadowElevation = 4.dp
                    ) {
                        Box(contentAlignment = Alignment.Center) {
                            Icon(
                                Icons.Default.Terrain,  // Mountain theme!
                                contentDescription = null,
                                modifier = Modifier.size(28.dp),
                                tint = MaterialTheme.colorScheme.onPrimary
                            )
                        }
                    }

                    // Text next to icon
                    Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {
                        Text(
                            "SherpAI",
                            style = MaterialTheme.typography.titleLarge, // Smaller (was headlineMedium)
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colorScheme.onSurface
                        )

                        Text(
                            "Face Recognition",
                            style = MaterialTheme.typography.bodySmall, // Smaller
                            color = MaterialTheme.colorScheme.onSurfaceVariant
                        )
                    }
                }
            }

            Spacer(modifier = Modifier.height(4.dp)) // Reduced spacing

            // ===== NAVIGATION SECTIONS =====
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 8.dp), // Reduced padding
                verticalArrangement = Arrangement.spacedBy(2.dp) // Tighter spacing
            ) {

                // Photos Section
                DrawerSection(title = "Photos")

                val photoItems = listOf(
                    DrawerItem(AppRoutes.SEARCH, "Search", Icons.Default.Search),
                    DrawerItem(AppRoutes.EXPLORE, "Explore", Icons.Default.Explore),
                    DrawerItem(AppRoutes.COLLECTIONS, "Collections", Icons.Default.Collections)
                )

                photoItems.forEach { item ->
                    DrawerNavigationItem(
                        item = item,
                        selected = item.route == currentRoute,
                        onClick = { onDestinationClicked(item.route) }
                    )
                }

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

                // Face Recognition Section
                DrawerSection(title = "Face Recognition")

                val faceItems = listOf(
                    DrawerItem(AppRoutes.DISCOVER, "Discover", Icons.Default.AutoAwesome), // ✨ UPDATED!
                    DrawerItem(AppRoutes.INVENTORY, "People", Icons.Default.Face),
                    DrawerItem(AppRoutes.TRAIN, "Train Model", Icons.Default.ModelTraining)
                )

                faceItems.forEach { item ->
                    DrawerNavigationItem(
                        item = item,
                        selected = item.route == currentRoute,
                        onClick = { onDestinationClicked(item.route) }
                    )
                }

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

                // Organization Section
                DrawerSection(title = "Organization")

                val orgItems = listOf(
                    DrawerItem(AppRoutes.TAGS, "Tags", Icons.AutoMirrored.Filled.Label),
                    DrawerItem(AppRoutes.UTILITIES, "Utilities", Icons.Default.Build)
                )

                orgItems.forEach { item ->
                    DrawerNavigationItem(
                        item = item,
                        selected = item.route == currentRoute,
                        onClick = { onDestinationClicked(item.route) }
                    )
                }

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

                // Settings at bottom
                HorizontalDivider(
                    modifier = Modifier.padding(vertical = 6.dp),
                    color = MaterialTheme.colorScheme.outlineVariant
                )

                DrawerNavigationItem(
                    item = DrawerItem(
                        AppRoutes.SETTINGS,
                        "Settings",
                        Icons.Default.Settings
                    ),
                    selected = AppRoutes.SETTINGS == currentRoute,
                    onClick = { onDestinationClicked(AppRoutes.SETTINGS) }
                )

                Spacer(modifier = Modifier.height(16.dp))  // Bottom padding for scroll
            }
        }
    }
}

/**
 * Section header - more compact
 */
@Composable
private fun DrawerSection(title: String) {
    Text(
        text = title,
        style = MaterialTheme.typography.labelSmall, // Smaller
        fontWeight = FontWeight.Bold,
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp) // Reduced padding
    )
}

/**
 * Navigation item - cleaner, no subtitle
 */
@Composable
private fun DrawerNavigationItem(
    item: DrawerItem,
    selected: Boolean,
    onClick: () -> Unit
) {
    NavigationDrawerItem(
        label = {
            Text(
                text = item.label,
                style = MaterialTheme.typography.bodyMedium, // Slightly smaller
                fontWeight = if (selected) FontWeight.SemiBold else FontWeight.Normal
            )
        },
        icon = {
            Icon(
                item.icon,
                contentDescription = item.label,
                modifier = Modifier.size(22.dp) // Slightly smaller
            )
        },
        selected = selected,
        onClick = onClick,
        modifier = Modifier
            .padding(NavigationDrawerItemDefaults.ItemPadding)
            .clip(RoundedCornerShape(10.dp)), // Slightly smaller radius
        colors = NavigationDrawerItemDefaults.colors(
            selectedContainerColor = MaterialTheme.colorScheme.primaryContainer,
            selectedIconColor = MaterialTheme.colorScheme.primary,
            selectedTextColor = MaterialTheme.colorScheme.onPrimaryContainer,
            unselectedContainerColor = Color.Transparent
        )
    )
}

/**
 * Simplified drawer item (no subtitle)
 */
private data class DrawerItem(
    val route: String,
    val label: String,
    val icon: androidx.compose.ui.graphics.vector.ImageVector
)