package com.example.what_the_fantasy.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.what_the_fantasy.R
import coil.compose.AsyncImage
import com.example.what_the_fantasy.ui.components.NavBar
import com.example.what_the_fantasy.ui.theme.gradienBox
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import com.example.what_the_fantasy.data.model.Character
import com.example.what_the_fantasy.ui.states.CurrentUserState
import com.example.what_the_fantasy.ui.viewModels.CurrentUserViewModel


@Composable
fun RecapSubmitPage(
    navFavorite: () -> Unit,
    navAccueil: () -> Unit,
    navProfil:() -> Unit,
    navSearch: () -> Unit,
    navQuiz : () -> Unit,
    quoteContent : String,
    character: String,
    source: String,
    currentUserVM : CurrentUserViewModel,
    currentUserState : CurrentUserState,
) {
    NavBar(onQuiz = true,
        currentUserVM = currentUserVM,
        currentUserState = currentUserState,
        navControllerFavorite = navFavorite,
        navControllerAccueil = navAccueil,
        navControllerProfil = navProfil,
        navControllerQuiz = navQuiz,
        navControllerSearch = navSearch
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
        ) {
            // Contenu princiapl
            Column(
                modifier = Modifier
                    .weight(0.9f)
                    .fillMaxSize()
                    .padding(20.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "▶ Recap de la citation ◀",
                    color = MaterialTheme.colorScheme.onBackground,
                    style = TextStyle(
                        fontSize = 25.sp,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center
                    )
                )
                Spacer(Modifier.height(20.dp))
                Column(
                    modifier = Modifier
                        .background(brush = gradient, shape = RoundedCornerShape(20.dp))
                        .fillMaxSize()
                        .padding(vertical = 30.dp)
                        .verticalScroll(rememberScrollState()),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Column(modifier = Modifier
                        .padding(15.dp)
                        .drawBehind {
                            drawRoundRect(
                                gradienBox,
                                cornerRadius = CornerRadius(15.dp.toPx()),
                            )
                        }
                    ) {
                        Row(modifier = Modifier.padding(15.dp)) {
                            ImageQuote(
                                imageUrl = "https://img.freepik.com/vecteurs-libre/personnage-guerrier-fantaisie_1045-185.jpg?size=338&ext=jpg"
                            )
                            Column {
                                QuoteText(
                                    text = '"' + quoteContent + '"'
                                )
                            }
                        }
                        Column(modifier = Modifier
                            .padding(15.dp)
                            .fillMaxWidth()
                        ) {
                            InfoQuoteText(
                                nameId = R.string.source,
                                text = source
                            )
                            Text(
                                text = "Character : $character"
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun QuoteText2(text: String ){
    Text(
        text = text,
        modifier = Modifier.padding(start = 10.dp, top = 15.dp),
        fontWeight = FontWeight(1000),
        fontSize = 20.sp,
        color = MaterialTheme.colorScheme.background
    )
}

@Composable
fun ImageQuote2(imageUrl : String){
    AsyncImage(
        model = imageUrl,
        contentDescription = "exemple",
        modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(15.dp))
    )
}

@Composable
fun InfoQuoteText2(nameId : Int, text : String){
    Column(modifier = Modifier.padding(bottom = 20.dp)){

        Text(
            text = text,
            fontSize = 16.sp,
            fontWeight = FontWeight(400),
            modifier = Modifier
                .drawBehind {
                    drawRoundRect(
                        Color(255,255,255),
                        cornerRadius = CornerRadius(15.dp.toPx())
                    )
                }
                .padding(5.dp),
        )
    }
}