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.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 androidx.hilt.navigation.compose.hiltViewModel
import com.socialapp.presentation.ui.theme.AccentMagenta
import com.socialapp.presentation.viewmodel.PostViewModel

@Composable
fun CreatePostScreen(
    viewModel: PostViewModel = hiltViewModel(),
    onBackClick: () -> Unit = {},
    onPostCreated: () -> Unit = {}
) {
    val postCaption = remember { mutableStateOf("") }
    val selectedMedia = remember { mutableStateOf<String?>(null) }
    val postType = remember { mutableStateOf("image") } // image, video, text
    val isLoading = remember { mutableStateOf(false) }
    val category = remember { mutableStateOf("General") }

    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) {
                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = "Back",
                    tint = MaterialTheme.colorScheme.onBackground
                )
            }
            Text(
                text = "Create Post",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            Button(
                onClick = {
                    isLoading.value = true
                    viewModel.createPost(postCaption.value)
                    onPostCreated()
                },
                enabled = postCaption.value.isNotEmpty() && !isLoading.value,
                modifier = Modifier
                    .height(36.dp)
                    .clip(RoundedCornerShape(18.dp)),
                colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
                contentPadding = PaddingValues(horizontal = 12.dp)
            ) {
                Text("Post", fontSize = 12.sp, fontWeight = FontWeight.Bold)
            }
        }

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

        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(16.dp)
        ) {
            // User Info
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(bottom = 16.dp)
            ) {
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(AccentMagenta.copy(alpha = 0.3f)),
                    contentAlignment = Alignment.Center
                ) {
                    Text("U", fontSize = 18.sp, fontWeight = FontWeight.Bold, color = AccentMagenta)
                }
                Spacer(modifier = Modifier.width(12.dp))
                Column {
                    Text("Username", fontSize = 14.sp, fontWeight = FontWeight.SemiBold)
                    Text("@username", fontSize = 12.sp, color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f))
                }
            }

            // Caption Input
            OutlinedTextField(
                value = postCaption.value,
                onValueChange = { postCaption.value = it },
                placeholder = { Text("What&apos;s on your mind?") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(120.dp),
                maxLines = 5,
                colors = OutlinedTextFieldDefaults.colors(
                    unfocusedContainerColor = MaterialTheme.colorScheme.surface,
                    focusedContainerColor = MaterialTheme.colorScheme.surface
                )
            )

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

            // Media Preview
            if (selectedMedia.value != null) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .clip(RoundedCornerShape(16.dp))
                        .background(MaterialTheme.colorScheme.surface)
                ) {
                    Text(
                        "Media Preview",
                        modifier = Modifier.align(Alignment.Center),
                        fontSize = 14.sp,
                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                    )
                }
                Spacer(modifier = Modifier.height(16.dp))
            }

            // Category Selection
            Text("Category", fontSize = 14.sp, fontWeight = FontWeight.SemiBold, modifier = Modifier.padding(bottom = 8.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .horizontalScroll(rememberScrollState()),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                listOf("General", "Art", "Food", "Travel", "Lifestyle").forEach { cat ->
                    Box(
                        modifier = Modifier
                            .clip(RoundedCornerShape(20.dp))
                            .background(
                                if (category.value == cat) AccentMagenta
                                else MaterialTheme.colorScheme.surface
                            )
                            .clickable { category.value = cat }
                            .padding(horizontal = 12.dp, vertical = 6.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = cat,
                            fontSize = 12.sp,
                            fontWeight = FontWeight.SemiBold,
                            color = if (category.value == cat) MaterialTheme.colorScheme.background else MaterialTheme.colorScheme.onSurface
                        )
                    }
                }
            }

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

            // Media Options
            Text("Add Media", fontSize = 14.sp, fontWeight = FontWeight.SemiBold, modifier = Modifier.padding(bottom = 12.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                MediaOption(
                    icon = Icons.Default.Image,
                    label = "Image",
                    modifier = Modifier.weight(1f),
                    onClick = { selectedMedia.value = "image_selected" }
                )
                MediaOption(
                    icon = Icons.Default.Videocam,
                    label = "Video",
                    modifier = Modifier.weight(1f),
                    onClick = { selectedMedia.value = "video_selected" }
                )
                MediaOption(
                    icon = Icons.Default.LocationOn,
                    label = "Location",
                    modifier = Modifier.weight(1f),
                    onClick = { }
                )
            }
        }
    }
}

@Composable
private fun MediaOption(
    icon: androidx.compose.material.icons.materialIcon,
    label: String,
    modifier: Modifier = Modifier,
    onClick: () -> Unit
) {
    Column(
        modifier = modifier
            .clip(RoundedCornerShape(12.dp))
            .background(MaterialTheme.colorScheme.surface)
            .clickable { onClick() }
            .padding(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Icon(
            imageVector = icon,
            contentDescription = label,
            tint = AccentMagenta,
            modifier = Modifier.size(24.dp)
        )
        Spacer(modifier = Modifier.height(4.dp))
        Text(label, fontSize = 11.sp, fontWeight = FontWeight.Medium)
    }
}