package app.closer.ui.debug

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import app.closer.R
import app.closer.ui.components.CelebrationOverlay
import app.closer.ui.components.CloserActionButton
import app.closer.ui.components.CloserButtonStyle
import app.closer.ui.components.CloserCard
import app.closer.ui.settings.SettingsMuted
import app.closer.ui.settings.SettingsSubpage

/**
 * Debug-only gallery for the celebration art so it can be verified without pairing two devices
 * (the real surfaces are gated behind paired reveal / streak / game-finish states). Reachable
 * from Settings in debug builds only.
 */
@Composable
fun ArtPreviewScreen(onNavigate: (String) -> Unit = {}) {
    var celebrate by remember { mutableStateOf(false) }
    var showStreak by remember { mutableStateOf(false) }

    if (showStreak) {
        app.closer.ui.home.StreakMilestoneDialog(
            milestone = 7,
            partnerName = "Sofia",
            onDismiss = { showStreak = false }
        )
    }

    SettingsSubpage(title = "Art preview", onBack = { onNavigate("back") }) { padding ->
        Box(modifier = Modifier.fillMaxSize().padding(padding)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState())
                    .padding(horizontal = 20.dp, vertical = 16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(14.dp)
            ) {
                Text(
                    text = "A peek at the little moments you'll share — the art that shows up when you reveal, play, and reach milestones together.",
                    style = MaterialTheme.typography.bodyMedium,
                    color = SettingsMuted,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth().padding(bottom = 4.dp)
                )

                ArtCard("When you both reveal") {
                    Image(painterResource(R.drawable.illustration_reveal_celebration), null, Modifier.size(200.dp))
                }
                ArtCard("When you hit a streak") {
                    Image(painterResource(R.drawable.illustration_streak_milestone), null, Modifier.size(160.dp))
                }
                ArtCard("Your shared story, before it begins") {
                    Image(painterResource(R.drawable.illustration_together_empty), null, Modifier.size(200.dp))
                }
                ArtCard("Little hearts in the air") {
                    androidx.compose.foundation.layout.Row(
                        horizontalArrangement = Arrangement.spacedBy(18.dp)
                    ) {
                        Image(painterResource(R.drawable.particle_heart), null, Modifier.size(56.dp))
                        Image(painterResource(R.drawable.particle_petal), null, Modifier.size(56.dp))
                    }
                }

                CloserActionButton(
                    label = "Play the celebration",
                    onClick = { celebrate = true },
                    modifier = Modifier.fillMaxWidth().padding(top = 6.dp)
                )
                CloserActionButton(
                    label = "Show a streak milestone",
                    onClick = { showStreak = true },
                    style = CloserButtonStyle.Secondary,
                    modifier = Modifier.fillMaxWidth().padding(bottom = 12.dp)
                )
            }
            CelebrationOverlay(visible = celebrate, intensity = 1.6f, onFinished = { celebrate = false })
        }
    }
}

@Composable
private fun ArtCard(label: String, content: @Composable () -> Unit) {
    CloserCard(modifier = Modifier.fillMaxWidth()) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(vertical = 20.dp, horizontal = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(14.dp)
        ) {
            content()
            Text(
                text = label,
                style = MaterialTheme.typography.titleSmall,
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colorScheme.onSurface,
                textAlign = TextAlign.Center
            )
        }
    }
}
