package com.socialapp.presentation.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.socialapp.presentation.ui.theme.AccentMagenta

@Composable
fun EditProfileScreen(
    onBackClick: () -> Unit = {},
    onSaveClick: () -> Unit = {}
) {
    val username = remember { mutableStateOf("Rohim") }
    val bio = remember { mutableStateOf("Travel | Photography | Tech Lover") }
    val website = remember { mutableStateOf("www.example.com") }
    val email = remember { mutableStateOf("user@example.com") }
    val phone = remember { mutableStateOf("+1 234 567 8900") }
    val location = remember { mutableStateOf("New York, USA") }
    val isPrivate = remember { mutableStateOf(false) }
    val isVerified = remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        // Header
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            IconButton(onClick = onBackClick, modifier = Modifier.size(40.dp)) {
                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = "Back",
                    tint = MaterialTheme.colorScheme.onBackground
                )
            }
            Text(
                text = "Edit Profile",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            Button(
                onClick = onSaveClick,
                modifier = Modifier
                    .height(36.dp)
                    .clip(RoundedCornerShape(18.dp)),
                colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
                contentPadding = PaddingValues(horizontal = 16.dp)
            ) {
                Text("Save", fontSize = 12.sp, fontWeight = FontWeight.Bold)
            }
        }

        Divider(color = MaterialTheme.colorScheme.surface, thickness = 1.dp)

        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // Profile Picture Section
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .background(MaterialTheme.colorScheme.surface),
                contentAlignment = Alignment.Center
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Box(
                        modifier = Modifier
                            .size(80.dp)
                            .clip(CircleShape)
                            .background(AccentMagenta.copy(alpha = 0.3f)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("R", fontSize = 36.sp, fontWeight = FontWeight.Bold, color = AccentMagenta)
                    }

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

                    Button(
                        onClick = { /* Pick image */ },
                        modifier = Modifier
                            .height(36.dp)
                            .clip(RoundedCornerShape(18.dp)),
                        colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
                        contentPadding = PaddingValues(horizontal = 20.dp)
                    ) {
                        Text("Change Photo", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
                    }
                }
            }

            // Username
            EditProfileField(
                label = "Username",
                value = username.value,
                onValueChange = { username.value = it },
                placeholder = "Enter username"
            )

            // Bio
            EditProfileField(
                label = "Bio",
                value = bio.value,
                onValueChange = { bio.value = it },
                placeholder = "Tell about yourself",
                maxLines = 3
            )

            // Website
            EditProfileField(
                label = "Website",
                value = website.value,
                onValueChange = { website.value = it },
                placeholder = "Your website URL"
            )

            // Email
            EditProfileField(
                label = "Email",
                value = email.value,
                onValueChange = { email.value = it },
                placeholder = "your@email.com"
            )

            // Phone
            EditProfileField(
                label = "Phone",
                value = phone.value,
                onValueChange = { phone.value = it },
                placeholder = "Your phone number"
            )

            // Location
            EditProfileField(
                label = "Location",
                value = location.value,
                onValueChange = { location.value = it },
                placeholder = "City, Country"
            )

            Divider(color = MaterialTheme.colorScheme.surface, thickness = 1.dp)

            // Privacy Settings
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(12.dp))
                    .background(MaterialTheme.colorScheme.surface)
                    .clickable { isPrivate.value = !isPrivate.value }
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Column {
                    Text(
                        text = "Private Account",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.SemiBold
                    )
                    Text(
                        text = "Only approved followers can see your posts",
                        fontSize = 12.sp,
                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
                        modifier = Modifier.padding(top = 4.dp)
                    )
                }

                Switch(
                    checked = isPrivate.value,
                    onCheckedChange = { isPrivate.value = it }
                )
            }

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

            // Notifications
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(12.dp))
                    .background(MaterialTheme.colorScheme.surface)
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Column {
                    Text(
                        text = "Email Notifications",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.SemiBold
                    )
                    Text(
                        text = "Get notified about comments and likes",
                        fontSize = 12.sp,
                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
                        modifier = Modifier.padding(top = 4.dp)
                    )
                }

                Switch(
                    checked = true,
                    onCheckedChange = { }
                )
            }

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

            // Danger Zone
            Button(
                onClick = { /* Delete account */ },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(44.dp),
                colors = ButtonDefaults.buttonColors(
                    containerColor = androidx.compose.ui.graphics.Color.Red.copy(alpha = 0.2f)
                ),
                shape = RoundedCornerShape(12.dp)
            ) {
                Text(
                    "Delete Account",
                    fontSize = 14.sp,
                    fontWeight = FontWeight.SemiBold,
                    color = androidx.compose.ui.graphics.Color.Red
                )
            }

            Spacer(modifier = Modifier.height(16.dp))
        }
    }
}

@Composable
private fun EditProfileField(
    label: String,
    value: String,
    onValueChange: (String) -> Unit,
    placeholder: String,
    maxLines: Int = 1
) {
    Column {
        Text(
            text = label,
            fontSize = 12.sp,
            fontWeight = FontWeight.SemiBold,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f),
            modifier = Modifier.padding(bottom = 6.dp)
        )

        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            placeholder = { Text(placeholder, fontSize = 13.sp) },
            modifier = Modifier
                .fillMaxWidth()
                .height(if (maxLines > 1) 100.dp else 44.dp),
            maxLines = maxLines,
            singleLine = (maxLines == 1),
            colors = OutlinedTextFieldDefaults.colors(
                unfocusedContainerColor = MaterialTheme.colorScheme.surface,
                focusedContainerColor = MaterialTheme.colorScheme.surface
            ),
            shape = RoundedCornerShape(12.dp)
        )
    }
}