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.LazyRow
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.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.socialapp.presentation.ui.theme.AccentMagenta

data class Story(
    val id: Int,
    val userName: String,
    val userAvatar: String,
    val media: String,
    val isViewed: Boolean,
    val isOwnStory: Boolean
)

@Composable
fun StoriesScreen(
    onBackClick: () -> Unit = {},
    onStoryClick: (Int) -> Unit = {},
    onCreateStoryClick: () -> Unit = {}
) {
    val stories = remember {
        mutableStateOf(
            listOf(
                Story(0, "Your Story", "", "", false, true),
                Story(1, "Sarah", "", "", false, false),
                Story(2, "Mike", "", "", true, false),
                Story(3, "Emma", "", "", false, false),
                Story(4, "John", "", "", true, false),
                Story(5, "Lisa", "", "", false, 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.ArrowBack,
                    contentDescription = "Back",
                    tint = MaterialTheme.colorScheme.onBackground
                )
            }
            Text(
                text = "Stories",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            IconButton(onClick = { }, modifier = Modifier.size(40.dp)) {
                Icon(
                    imageVector = Icons.Default.MoreVert,
                    contentDescription = "More",
                    tint = MaterialTheme.colorScheme.onBackground
                )
            }
        }

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

        // Stories Row
        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(stories.value) { story ->
                StoryItem(
                    story = story,
                    onStoryClick = {
                        if (story.isOwnStory) onCreateStoryClick()
                        else onStoryClick(story.id)
                    }
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))
        Divider(color = MaterialTheme.colorScheme.surface, thickness = 1.dp)
    }
}

@Composable
fun StoryViewer(
    storyId: Int,
    onBackClick: () -> Unit = {},
    onReply: () -> Unit = {}
) {
    var currentIndex by remember { mutableStateOf(0) }
    val progress = remember { mutableStateOf(0f) }

    LaunchedEffect(Unit) {
        repeat(100) {
            progress.value = it / 100f
            kotlinx.coroutines.delay(30)
        }
        onBackClick()
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    ) {
        // Progress Bar
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(3.dp)
                .background(Color.White.copy(alpha = 0.3f))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxHeight()
                    .fillMaxWidth(progress.value)
                    .background(Color.White)
            )
        }

        // Header
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(AccentMagenta.copy(alpha = 0.3f)),
                    contentAlignment = Alignment.Center
                ) {
                    Text("S", fontSize = 18.sp, fontWeight = FontWeight.Bold, color = AccentMagenta)
                }
                Spacer(modifier = Modifier.width(12.dp))
                Text("Story User", fontSize = 14.sp, fontWeight = FontWeight.Bold, color = Color.White)
            }

            IconButton(onClick = onBackClick) {
                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = "Close",
                    tint = Color.White
                )
            }
        }

        // Story Content
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Black),
            contentAlignment = Alignment.Center
        ) {
            AsyncImage(
                model = "https://via.placeholder.com/400x800",
                contentDescription = "Story",
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Crop
            )
        }

        // Reply Section
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(40.dp)
                    .clip(RoundedCornerShape(20.dp))
                    .background(Color.White.copy(alpha = 0.1f))
                    .padding(horizontal = 12.dp),
                contentAlignment = Alignment.CenterStart
            ) {
                Text(
                    text = "Reply to story...",
                    fontSize = 13.sp,
                    color = Color.White.copy(alpha = 0.6f)
                )
            }

            IconButton(
                onClick = onReply,
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)
                    .background(Color.White.copy(alpha = 0.1f))
            ) {
                Icon(
                    imageVector = Icons.Default.Send,
                    contentDescription = "Send",
                    tint = AccentMagenta
                )
            }
        }
    }
}

@Composable
private fun StoryItem(
    story: Story,
    onStoryClick: () -> Unit = {}
) {
    if (story.isOwnStory) {
        // Create Story Button
        Column(
            modifier = Modifier
                .clip(RoundedCornerShape(16.dp))
                .background(MaterialTheme.colorScheme.surface)
                .clickable { onStoryClick() }
                .padding(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Box(
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
                    .background(AccentMagenta.copy(alpha = 0.3f)),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add Story",
                    tint = AccentMagenta,
                    modifier = Modifier.size(28.dp)
                )
            }
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "Your Story",
                fontSize = 11.sp,
                fontWeight = FontWeight.Medium,
                maxLines = 1
            )
        }
    } else {
        // Story Ring
        Column(
            modifier = Modifier
                .clip(RoundedCornerShape(16.dp))
                .background(MaterialTheme.colorScheme.surface)
                .clickable { onStoryClick() }
                .padding(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Box(
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
                    .background(
                        androidx.compose.ui.graphics.Brush.linearGradient(
                            colors = listOf(
                                if (story.isViewed) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
                                else AccentMagenta,
                                if (story.isViewed) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
                                else Color(0xFFFFA500)
                            )
                        )
                    )
                    .padding(2.dp)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .clip(CircleShape)
                        .background(Color(0xFF1a1a1a)),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = story.userName.first().toString(),
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        color = AccentMagenta
                    )
                }
            }

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

            Text(
                text = story.userName,
                fontSize = 11.sp,
                fontWeight = FontWeight.Medium,
                maxLines = 1
            )
        }
    }
}