package com.img.rabbit.pages.screen.mine

import android.text.TextUtils
import android.widget.Toast
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.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.google.gson.JsonArray
import com.google.gson.JsonObject
import com.img.rabbit.components.ImagePicker
import com.img.rabbit.pages.toolbar.TitleBar
import com.img.rabbit.viewmodel.FeedbackViewModel
import okhttp3.RequestBody.Companion.toRequestBody

@Composable
fun FeedbackScreen(navController: NavHostController, viewModel: FeedbackViewModel = viewModel()) {
    val context = LocalContext.current

    LaunchedEffect(viewModel.errorState.value) {
        if(viewModel.errorState.value != null){
            Toast.makeText(context, viewModel.errorState.value?.message, Toast.LENGTH_SHORT).show()
        }
        viewModel.errorState.value = null
    }

    Scaffold{
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            TitleBar(navController = navController, paddingValues = it, title = "意见反馈")
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .padding(start = 16.dp, end = 16.dp)
            ){
                // 意见反馈内容
                Column(
                    modifier = Modifier.fillMaxSize()
                ) {
                    // 意见反馈类型
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                    ) {
                        Text(
                            text = "*",
                            color = Color(0xFFEA0000),
                            fontSize = 16.sp,
                            fontWeight = FontWeight.Normal,
                        )
                        Text(
                            text = "您想反馈的功能类型",
                            color = Color(0xFF1A1A1A),
                            fontSize = 16.sp,
                            fontWeight = FontWeight.Normal,
                            modifier = Modifier.wrapContentSize()
                        )
                    }
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(top = 12.dp)
                    ) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(34.dp)
                                .weight(1f)
                                .background(
                                    Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.FUNCTION) 0xFF252525 else 0xFFFFFFFF),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .border(
                                    width = 1.dp,
                                    Color(0xFFD8D8D8),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .clickable(
                                    indication = null,
                                    interactionSource = remember { MutableInteractionSource() }
                                ) { viewModel.setFeedbackType(FeedbackViewModel.FeedbackType.FUNCTION) }
                        ){
                            Text(
                                text = "功能问题",
                                color = Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.FUNCTION) 0xFFC2FF43 else 0xFF1A1A1A),
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .align(Alignment.Center)
                            )
                        }
                        Box(
                            modifier = Modifier.width(21.dp)
                        )
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(34.dp)
                                .weight(1f)
                                .background(
                                    Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.FEATURE) 0xFF252525 else 0xFFFFFFFF),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .border(
                                    width = 1.dp,
                                    Color(0xFFD8D8D8),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .clickable(
                                    indication = null,
                                    interactionSource = remember { MutableInteractionSource() }
                                ) { viewModel.setFeedbackType(FeedbackViewModel.FeedbackType.FEATURE) }
                        ){
                            Text(
                                text = "优化建议",
                                color = Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.FEATURE) 0xFFC2FF43 else 0xFF1A1A1A),
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .align(Alignment.Center)
                            )
                        }
                        Box(
                            modifier = Modifier.width(21.dp)
                        )
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(34.dp)
                                .weight(1f)
                                .background(
                                    Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.OTHER) 0xFF252525 else 0xFFFFFFFF),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .border(
                                    width = 1.dp,
                                    Color(0xFFD8D8D8),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .clickable(
                                    indication = null,
                                    interactionSource = remember { MutableInteractionSource() }
                                ) { viewModel.setFeedbackType(FeedbackViewModel.FeedbackType.OTHER) }
                        ){
                            Text(
                                text = "其他",
                                color = Color(if (viewModel.feedbackType == FeedbackViewModel.FeedbackType.OTHER) 0xFFC2FF43 else 0xFF1A1A1A),
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .align(Alignment.Center)
                            )
                        }
                    }
                    //补充反馈内容
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(top = 18.dp)
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                        ) {
                            Text(
                                text = "*",
                                color = Color(0xFFEA0000),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Normal,
                            )
                            Text(
                                text = "请补充详细问题或意见",
                                color = Color(0xFF1A1A1A),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier.wrapContentSize()
                            )
                        }
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(150.dp)
                                .padding(top = 12.dp)
                                .background(
                                    Color(0xFFEEEEEE),
                                    shape = RoundedCornerShape(12.dp)
                                )
                                .border(
                                    width = 1.dp,
                                    Color(0xFFEEEEEE),
                                    shape = RoundedCornerShape(12.dp)
                                )
                        ){
                            BasicTextField(
                                value = viewModel.feedbackMore,
                                onValueChange = {content->
                                    if (content.length <= 200) {
                                        viewModel.setFeedbackMore(content)
                                    }
                                                },
                                modifier = Modifier
                                    .fillMaxSize()
                                    .background(Color.Transparent)
                                    .padding(start = 18.dp, top = 7.dp, end = 18.dp, bottom = 7.dp),
                                textStyle = androidx.compose.ui.text.TextStyle(
                                    color = Color.Black,
                                    fontSize = 14.sp
                                ),
                                singleLine = false,
                                keyboardOptions = androidx.compose.foundation.text.KeyboardOptions(
                                    keyboardType = androidx.compose.ui.text.input.KeyboardType.Text,
                                    imeAction = androidx.compose.ui.text.input.ImeAction.Done
                                ),
                                decorationBox = { innerTextField ->
                                    Box(
                                        modifier = Modifier
                                            .fillMaxSize()
                                            .background(Color.Transparent)
                                    ) {
                                        if (viewModel.feedbackMore.isEmpty()) {
                                            Text(
                                                "请在这里输入内容",
                                                color = Color(0xFF767676),
                                                fontSize = 14.sp
                                            )
                                        }
                                        innerTextField()
                                    }
                                }
                            )
                            Text(
                                text = "${viewModel.feedbackMore.length}/200",
                                color = Color(0xFF767676),
                                fontSize = 14.sp,
                                modifier = Modifier
                                    .align(Alignment.BottomEnd)
                                    .padding(end = 18.dp, bottom = 7.dp)
                            )
                        }
                    }
                    //提供相关图片
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(top = 18.dp)
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                        ) {
                            Text(
                                text = "请提供相关问题的图片",
                                color = Color(0xFF1A1A1A),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Normal,
                            )
                            Text(
                                text = "（选填，最多可上传三张）",
                                color = Color(0xFFAAAAAA),
                                fontSize = 11.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .align(Alignment.CenterVertically)
                            )
                        }
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                                .padding(top = 12.dp)
                        ) {
                            ImagePicker(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight(),
                                imageHeight = 100.dp,
                                aspectRatio = 100f / 100f,
                                maxCount = 3,
                                addButtonName = "添加图片",
                                currentImageUris = viewModel.currentImageUris,
                                onImagesUpdated = { uri, uris ->
                                    viewModel.setCurrentImageUris(uris)
                                    viewModel.uploadImage(context, uri)
                                },
                                onDeleteUpdated = { uri, uris ->
                                    viewModel.setCurrentImageUris(uris)
                                    viewModel.deleteImage(uri)
                                }
                            )
                        }
                    }
                    //联系方式
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(top = 18.dp)
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                        ) {
                            Text(
                                text = "联系方式",
                                color = Color(0xFF1A1A1A),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Normal,
                            )
                            Text(
                                text = "（选填，可以留下您的手机号、微信、邮箱）",
                                color = Color(0xFFAAAAAA),
                                fontSize = 11.sp,
                                fontWeight = FontWeight.Normal,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .align(Alignment.CenterVertically)
                            )
                        }
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                                .padding(top = 12.dp)
                                .background(
                                    Color(0xFFEEEEEE),
                                    shape = RoundedCornerShape(8.dp)
                                )
                                .border(
                                    width = 1.dp,
                                    Color(0xFFEEEEEE),
                                    shape = RoundedCornerShape(8.dp)
                                )
                        ){
                            BasicTextField(
                                value = viewModel.feedbackContact,
                                onValueChange = {content->
                                    if (content.length <= 50) {
                                        viewModel.setFeedbackContact(content)
                                    }
                                },
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight()
                                    .background(Color.Transparent)
                                    .padding(
                                        start = 18.dp,
                                        top = 10.dp,
                                        end = 18.dp,
                                        bottom = 10.dp
                                    ),
                                textStyle = androidx.compose.ui.text.TextStyle(
                                    color = Color.Black,
                                    fontSize = 14.sp
                                ),
                                singleLine = true,
                                maxLines = 1,
                                keyboardOptions = androidx.compose.foundation.text.KeyboardOptions(
                                    keyboardType = androidx.compose.ui.text.input.KeyboardType.Text,
                                    imeAction = androidx.compose.ui.text.input.ImeAction.Done
                                ),
                                decorationBox = { innerTextField ->
                                    Box(
                                        modifier = Modifier
                                            .fillMaxWidth()
                                            .wrapContentHeight()
                                            .background(Color.Transparent)
                                    ) {
                                        if (viewModel.feedbackContact.isEmpty()) {
                                            Text(
                                                "请输入您的联系方式",
                                                color = Color(0xFF767676),
                                                fontSize = 14.sp
                                            )
                                        }
                                        innerTextField()
                                    }
                                }
                            )
                        }
                    }
                }


                //提交
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .padding(start = 33.dp, end = 33.dp, bottom = 30.dp)
                        .background(
                            Color(0xFF252525),
                            shape = RoundedCornerShape(359.dp),
                        )
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() }
                        ) {
                            if (viewModel.feedbackMore.isEmpty()) {
                                Toast.makeText(context, "请填写详细问题或意见...", Toast.LENGTH_SHORT).show()
                                return@clickable
                            }
                            // 提交反馈
                            val jsonObject = JsonObject()
                            jsonObject.addProperty("type", viewModel.feedbackType.value)
                            jsonObject.addProperty("content", viewModel.feedbackMore)
                            jsonObject.addProperty("contact", viewModel.feedbackContact)
                            val imageArray = JsonArray()
                            viewModel.uploadFiles.forEach { fileEntity ->
                                imageArray.add(fileEntity.fileEntity.url)
                            }
                            jsonObject.add("images", imageArray)
                            viewModel.submitFeedback(jsonObject.toString().toRequestBody())
                        }
                        .align(Alignment.BottomCenter)
                ) {
                    Text(
                        "提交",
                        color = Color(0xFFC2FF43),
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .wrapContentWidth()
                            .wrapContentHeight()
                            .padding(vertical = 12.dp)
                            .align(Alignment.Center)
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun PreviewFeedbackScreen(){
    FeedbackScreen(navController = rememberNavController())
}