package app.closer.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import app.closer.domain.model.OutcomeScores
import app.closer.ui.settings.SettingsInk
import app.closer.ui.settings.SettingsMuted
import app.closer.ui.settings.SettingsOnPrimary
import app.closer.ui.settings.SettingsPrimary
import app.closer.ui.settings.SettingsPrimaryDeep
import app.closer.ui.settings.SettingsSoft

/**
 * Manual test flow:
 *  1. Trigger dialog from pairing completion, Home banner, or Settings → Your Progress.
 *  2. Adjust sliders; confirm Submit is disabled until all four answered.
 *  3. Submit and verify callable invoked with correct scores.
 *  4. Skip closes dialog without submission.
 */
@Composable
fun OutcomeCheckInDialog(
    title: String,
    subtitle: String,
    onDismiss: () -> Unit,
    onSubmit: (OutcomeScores) -> Unit
) {
    var connection by remember { mutableIntStateOf(5) }
    var communication by remember { mutableIntStateOf(5) }
    var intimacy by remember { mutableIntStateOf(5) }
    var happiness by remember { mutableIntStateOf(5) }

    Dialog(onDismissRequest = onDismiss) {
        Surface(
            shape = RoundedCornerShape(20.dp),
            color = SettingsSoft,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 20.dp)
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.headlineSmall,
                    fontWeight = FontWeight.SemiBold,
                    color = SettingsInk,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()
                )
                Text(
                    text = subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = SettingsMuted,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()
                )

                OutcomeSlider(
                    label = "How connected do you feel?",
                    value = connection,
                    onValueChange = { connection = it }
                )
                OutcomeSlider(
                    label = "How well do you communicate?",
                    value = communication,
                    onValueChange = { communication = it }
                )
                OutcomeSlider(
                    label = "How satisfied are you with intimacy?",
                    value = intimacy,
                    onValueChange = { intimacy = it }
                )
                OutcomeSlider(
                    label = "How happy are you overall?",
                    value = happiness,
                    onValueChange = { happiness = it }
                )

                Spacer(Modifier.height(8.dp))

                Button(
                    onClick = {
                        onSubmit(
                            OutcomeScores(
                                connection = connection,
                                communication = communication,
                                intimacy = intimacy,
                                happiness = happiness
                            )
                        )
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .heightIn(min = 52.dp),
                    shape = RoundedCornerShape(16.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = SettingsPrimary,
                        contentColor = SettingsOnPrimary
                    )
                ) {
                    Text("Submit", style = MaterialTheme.typography.labelLarge)
                }

                TextButton(
                    onClick = onDismiss,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        "Skip for now",
                        style = MaterialTheme.typography.bodyMedium,
                        color = SettingsPrimaryDeep
                    )
                }
            }
        }
    }
}

@Composable
private fun OutcomeSlider(
    label: String,
    value: Int,
    onValueChange: (Int) -> Unit
) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(6.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = label,
                style = MaterialTheme.typography.bodyLarge,
                color = SettingsInk
            )
            Text(
                text = value.toString(),
                style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold),
                color = SettingsPrimaryDeep
            )
        }
        Slider(
            value = value.toFloat(),
            onValueChange = { onValueChange(it.toInt().coerceIn(1, 10)) },
            valueRange = 1f..10f,
            steps = 8,
            modifier = Modifier.fillMaxWidth()
        )
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text("1", style = MaterialTheme.typography.labelSmall, color = SettingsMuted)
            Text("10", style = MaterialTheme.typography.labelSmall, color = SettingsMuted)
        }
    }
}
