package com.example.smarthome.ui

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
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.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import com.example.smarthome.data.BackgroundManager
import com.example.smarthome.data.LanguageManager
import com.example.smarthome.data.tr

@Composable
fun SettingsScreen(onBack: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFF121212))
            .padding(16.dp)
    ) {
        // 顶部栏
        SettingsTopBar(onBack = onBack)
        
        Spacer(modifier = Modifier.height(24.dp))
        
        // 设置内容
        SettingsContentList()
    }
}

@Composable
fun SettingsContentList() {
    val context = LocalContext.current
    val currentLang by LanguageManager.currentLanguage.collectAsState()
    var showLanguageDialog by remember { mutableStateOf(false) }
    
    // 语言选择对话框
    if (showLanguageDialog) {
        LanguageSelectDialog(
            currentLanguage = currentLang,
            onLanguageSelect = { lang ->
                LanguageManager.setLanguage(context, lang)
                showLanguageDialog = false
            },
            onDismiss = { showLanguageDialog = false }
        )
    }
    
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item { SettingsSection(title = tr("settings_account")) {
            SettingsItem(
                title = tr("settings_profile"),
                subtitle = tr("settings_profile_desc"),
                onClick = { }
            )
            SettingsItem(
                title = tr("settings_security"),
                subtitle = tr("settings_security_desc"),
                onClick = { }
            )
        }}
        
        item { SettingsSection(title = tr("settings_device")) {
            var autoConnect by remember { mutableStateOf(true) }
            SettingsSwitchItem(
                title = tr("settings_auto_connect"),
                subtitle = tr("settings_auto_connect_desc"),
                checked = autoConnect,
                onCheckedChange = { autoConnect = it }
            )
            
            var notifications by remember { mutableStateOf(true) }
            SettingsSwitchItem(
                title = tr("settings_notifications"),
                subtitle = tr("settings_notifications_desc"),
                checked = notifications,
                onCheckedChange = { notifications = it }
            )
        }}
        
        item { SettingsSection(title = tr("settings_display")) {
            BackgroundSelector()
            
            val selectedBg by BackgroundManager.selectedBackground.collectAsState()
            // 深色模式根据当前背景是否为暗色来判断
            val isDarkMode = BackgroundManager.backgrounds.getOrNull(selectedBg)?.isDark ?: false
            
            SettingsSwitchItem(
                title = tr("settings_dark_mode"),
                subtitle = tr("settings_dark_mode_desc"),
                checked = isDarkMode,
                onCheckedChange = { dark ->
                    // 切换深色/浅色模式时自动更换背景
                    if (dark) {
                        BackgroundManager.setBackground(context, 2) // 紫金绸
                    } else {
                        BackgroundManager.setBackground(context, 0) // 丝绸白
                    }
                }
            )
            
            SettingsItem(
                title = tr("settings_language"),
                subtitle = currentLang.nativeName,
                onClick = { showLanguageDialog = true }
            )
        }}
        
        item { SettingsSection(title = tr("settings_about")) {
            SettingsItem(
                title = tr("settings_version"),
                subtitle = "v1.0.0",
                onClick = { }
            )
            SettingsItem(
                title = tr("settings_privacy"),
                subtitle = tr("settings_privacy_desc"),
                onClick = { }
            )
            SettingsItem(
                title = tr("settings_terms"),
                subtitle = tr("settings_terms_desc"),
                onClick = { }
            )
        }}
        
        item { 
            Spacer(modifier = Modifier.height(16.dp))
            LogoutButton(onClick = { })
        }
    }
}

@Composable
fun LanguageSelectDialog(
    currentLanguage: LanguageManager.Language,
    onLanguageSelect: (LanguageManager.Language) -> Unit,
    onDismiss: () -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(20.dp))
                .background(Color(0xFF1E1E2E))
                .padding(20.dp)
        ) {
            Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
                Text(
                    text = tr("select_language"),
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                
                Spacer(modifier = Modifier.height(8.dp))
                
                LanguageManager.Language.entries.forEach { lang ->
                    val isSelected = lang == currentLanguage
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(12.dp))
                            .background(
                                if (isSelected) Color(0xFF6C63FF).copy(alpha = 0.3f)
                                else Color(0xFF2A2A3E)
                            )
                            .border(
                                width = if (isSelected) 2.dp else 0.dp,
                                color = if (isSelected) Color(0xFF6C63FF) else Color.Transparent,
                                shape = RoundedCornerShape(12.dp)
                            )
                            .clickable { onLanguageSelect(lang) }
                            .padding(16.dp)
                    ) {
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceBetween,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Column {
                                Text(
                                    text = lang.nativeName,
                                    fontSize = 16.sp,
                                    fontWeight = FontWeight.Medium,
                                    color = Color.White
                                )
                                if (lang.displayName != lang.nativeName) {
                                    Text(
                                        text = lang.displayName,
                                        fontSize = 12.sp,
                                        color = Color(0xFF9AA0A6)
                                    )
                                }
                            }
                            if (isSelected) {
                                Text(text = "✓", color = Color(0xFF6C63FF), fontSize = 18.sp)
                            }
                        }
                    }
                }
                
                Spacer(modifier = Modifier.height(8.dp))
                
                // 取消按钮
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(12.dp))
                        .background(Color(0xFF3A3A4E))
                        .clickable { onDismiss() }
                        .padding(14.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = tr("cancel"),
                        color = Color.White,
                        fontSize = 14.sp
                    )
                }
            }
        }
    }
}

@Composable
fun SettingsTopBar(onBack: () -> Unit) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(Color(0x50121212))
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    ) { onBack() },
                contentAlignment = Alignment.Center
            ) {
                Text(text = "←", color = Color.White, fontSize = 20.sp)
            }
            Text(
                text = tr("settings_title"),
                style = MaterialTheme.typography.titleLarge,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )
        }
    }
}

@Composable
fun SettingsSection(title: String, content: @Composable ColumnScope.() -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        Text(
            text = title,
            fontSize = 14.sp,
            fontWeight = FontWeight.Medium,
            color = Color(0xFF9AA0A6),
            modifier = Modifier.padding(horizontal = 4.dp)
        )
        
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(24.dp))
                .background(Color(0x50121212))
                .padding(8.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                content()
            }
        }
    }
}

@Composable
fun SettingsItem(
    title: String,
    subtitle: String,
    onClick: () -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Color(0x33121212))
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) { onClick() }
            .padding(16.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                verticalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                Text(
                    text = title,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Medium,
                    color = Color.White
                )
                Text(
                    text = subtitle,
                    fontSize = 13.sp,
                    color = Color(0xFF9AA0A6)
                )
            }
            Text(
                text = "›",
                fontSize = 24.sp,
                color = Color(0xFF9AA0A6)
            )
        }
    }
}

@Composable
fun SettingsSwitchItem(
    title: String,
    subtitle: String,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Color(0x33121212))
            .padding(16.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                modifier = Modifier.weight(1f),
                verticalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                Text(
                    text = title,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Medium,
                    color = Color.White
                )
                Text(
                    text = subtitle,
                    fontSize = 13.sp,
                    color = Color(0xFF9AA0A6)
                )
            }
            
            CustomSwitch(
                checked = checked,
                onCheckedChange = onCheckedChange
            )
        }
    }
}

@Composable
fun CustomSwitch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    Box(
        modifier = Modifier
            .size(52.dp, 30.dp)
            .clip(RoundedCornerShape(15.dp))
            .background(
                if (checked) {
                    Brush.linearGradient(
                        listOf(Color(0xFFA9F0FF), Color(0xFFB89CFF))
                    )
                } else {
                    Brush.linearGradient(
                        listOf(Color(0x33222222), Color(0x33222222))
                    )
                }
            )
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) { onCheckedChange(!checked) }
            .padding(3.dp)
    ) {
        Box(
            modifier = Modifier
                .size(24.dp)
                .clip(RoundedCornerShape(12.dp))
                .background(Color.White)
                .align(if (checked) Alignment.CenterEnd else Alignment.CenterStart)
        )
    }
}

@Composable
fun LogoutButton(onClick: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .shadow(8.dp, RoundedCornerShape(24.dp))
            .clip(RoundedCornerShape(24.dp))
            .background(
                Brush.linearGradient(
                    listOf(Color(0xFFFF6B6B), Color(0xFFFF5252))
                )
            )
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) { onClick() },
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = tr("settings_logout"),
            fontSize = 16.sp,
            fontWeight = FontWeight.Bold,
            color = Color.White
        )
    }
}


@Composable
fun SettingsContent() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // 顶部标题
        Text(
            text = "设置",
            style = MaterialTheme.typography.titleLarge,
            fontWeight = FontWeight.Bold,
            color = Color.White,
            modifier = Modifier.padding(bottom = 24.dp)
        )
        
        // 设置内容
        SettingsContentList()
    }
}

@Composable
fun BackgroundSelector() {
    val context = LocalContext.current
    val selectedBackground by BackgroundManager.selectedBackground.collectAsState()
    
    val interactionSources = remember { 
        BackgroundManager.backgrounds.map { MutableInteractionSource() } 
    }
    
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Color(0x33121212))
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        Text(
            text = "背景壁纸",
            fontSize = 16.sp,
            fontWeight = FontWeight.Medium,
            color = Color.White
        )
        Text(
            text = "选择您喜欢的背景图片",
            fontSize = 13.sp,
            color = Color(0xFF9AA0A6)
        )
        
        Spacer(modifier = Modifier.height(4.dp))
        
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            BackgroundManager.backgrounds.forEachIndexed { index, bg ->
                val isSelected = selectedBackground == bg.id
                
                Column(
                    modifier = Modifier.weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(6.dp)
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(56.dp)
                            .clip(RoundedCornerShape(10.dp))
                            .then(
                                if (isSelected) {
                                    Modifier.border(
                                        width = 2.dp,
                                        brush = Brush.linearGradient(
                                            listOf(Color(0xFFA9F0FF), Color(0xFFB89CFF))
                                        ),
                                        shape = RoundedCornerShape(10.dp)
                                    )
                                } else Modifier
                            )
                            .clickable(
                                indication = null,
                                interactionSource = interactionSources[index]
                            ) {
                                BackgroundManager.setBackground(context, bg.id)
                            }
                    ) {
                        Image(
                            painter = painterResource(id = bg.thumbId),
                            contentDescription = bg.name,
                            contentScale = ContentScale.Crop,
                            modifier = Modifier.fillMaxSize()
                        )
                        
                        if (isSelected) {
                            Box(
                                modifier = Modifier
                                    .fillMaxSize()
                                    .background(Color.Black.copy(alpha = 0.3f)),
                                contentAlignment = Alignment.Center
                            ) {
                                Box(
                                    modifier = Modifier
                                        .size(20.dp)
                                        .clip(RoundedCornerShape(10.dp))
                                        .background(
                                            Brush.linearGradient(
                                                listOf(Color(0xFFA9F0FF), Color(0xFFB89CFF))
                                            )
                                        ),
                                    contentAlignment = Alignment.Center
                                ) {
                                    Text(
                                        text = "✓",
                                        color = Color.White,
                                        fontSize = 12.sp,
                                        fontWeight = FontWeight.Bold
                                    )
                                }
                            }
                        }
                    }
                    
                    Text(
                        text = bg.name,
                        fontSize = 11.sp,
                        fontWeight = if (isSelected) FontWeight.Medium else FontWeight.Normal,
                        color = if (isSelected) Color(0xFFA9F0FF) else Color(0xFF9AA0A6)
                    )
                }
            }
        }
    }
}