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.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
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

data class UserFollow(
    val id: Int,
    val name: String,
    val username: String,
    val bio: String,
    val isFollowing: Boolean,
    val isMutual: Boolean
)

@Composable
fun FollowersScreen(
    title: String = "Followers",
    onBackClick: () -> Unit = {},
    onUserClick: (Int) -> Unit = {}
) {
    val searchQuery = remember { mutableStateOf("") }
    val followers = remember {
        mutableStateOf(
            listOf(
                UserFollow(1, "Sarah", "@sarah", "Designer & Artist", true, true),
                UserFollow(2, "Mike", "@mike", "Photography enthusiast", false, false),
                UserFollow(3, "Emma", "@emma", "Travel blogger", true, true),
                UserFollow(4, "John", "@john", "Tech developer", false, false),
                UserFollow(5, "Lisa", "@lisa", "Fashion & lifestyle", true, false),
                UserFollow(6, "Alex", "@alex", "Music producer", true, true),
            )
        )
    }

    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.ArrowBack,
                    contentDescription = "Back",
                    tint = MaterialTheme.colorScheme.onBackground
                )
            }
            Text(
                text = title,
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.width(40.dp))
        }

        // Search Bar
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .height(40.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(MaterialTheme.colorScheme.surface)
                .padding(horizontal = 12.dp),
            contentAlignment = Alignment.CenterStart
        ) {
            if (searchQuery.value.isEmpty()) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = "Search",
                        tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
                        modifier = Modifier.size(18.dp)
                    )
                    Text(
                        text = "Search...",
                        fontSize = 13.sp,
                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                    )
                }
            }
        }

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

        // Followers List
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(followers.value) { user ->
                FollowerItem(
                    user = user,
                    onUserClick = { onUserClick(user.id) }
                )
                Divider(color = MaterialTheme.colorScheme.surface, thickness = 1.dp, modifier = Modifier.padding(horizontal = 16.dp))
            }
        }
    }
}

@Composable
private fun FollowerItem(
    user: UserFollow,
    onUserClick: () -> Unit = {}
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onUserClick() }
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.weight(1f),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(AccentMagenta.copy(alpha = 0.3f)),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = user.name.first().toString(),
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    color = AccentMagenta
                )
            }

            Column {
                Text(
                    text = user.name,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.SemiBold
                )
                Text(
                    text = user.username,
                    fontSize = 12.sp,
                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
                )
                if (user.isMutual) {
                    Text(
                        text = "Follows you",
                        fontSize = 11.sp,
                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                    )
                }
            }
        }

        if (user.isFollowing) {
            Box(
                modifier = Modifier
                    .clip(RoundedCornerShape(18.dp))
                    .background(MaterialTheme.colorScheme.surface)
                    .padding(horizontal = 12.dp, vertical = 6.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Following", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
            }
        } else {
            Button(
                onClick = { },
                modifier = Modifier
                    .height(36.dp)
                    .clip(RoundedCornerShape(18.dp)),
                colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
                contentPadding = PaddingValues(horizontal = 16.dp)
            ) {
                Text("Follow", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
            }
        }
    }
}