package app.closer.ui.components

import app.closer.ui.theme.CloserPalette
import app.closer.ui.theme.closerCardColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

@Composable
fun LoadingState(
    message: String = "Loading…",
    modifier: Modifier = Modifier
) {
    val shimmer = closerSkeletonBrush()

    CloserCard(
        modifier = modifier.fillMaxWidth(),
        containerColor = closerCardColor(alpha = 0.8f)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(CloserSpacing.Xxxl),
            verticalArrangement = Arrangement.spacedBy(CloserSpacing.Md)
        ) {
            SkeletonLine(
                brush = shimmer,
                modifier = Modifier.fillMaxWidth(0.42f),
                height = 18.dp
            )
            SkeletonLine(
                brush = shimmer,
                modifier = Modifier.fillMaxWidth(),
                height = 13.dp
            )
            SkeletonLine(
                brush = shimmer,
                modifier = Modifier.fillMaxWidth(0.72f),
                height = 13.dp
            )
            Text(
                text = message,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                textAlign = TextAlign.Center
            )
            BrandMessageRotator(
                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.82f),
                style = MaterialTheme.typography.bodySmall
            )
        }
    }
}

@Composable
private fun closerSkeletonBrush(): Brush {
    val transition = rememberInfiniteTransition(label = "closerSkeleton")
    val shimmerOffset = transition.animateFloat(
        initialValue = -320f,
        targetValue = 640f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1200, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        ),
        label = "closerSkeletonOffset"
    )

    return Brush.linearGradient(
        colors = listOf(
            CloserPalette.PurpleMist.copy(alpha = 0.55f),
            CloserPalette.PurpleSoft.copy(alpha = 0.95f),
            CloserPalette.PinkMist.copy(alpha = 0.72f)
        ),
        start = Offset(shimmerOffset.value, 0f),
        end = Offset(shimmerOffset.value + 280f, 0f)
    )
}

@Composable
private fun SkeletonLine(
    brush: Brush,
    modifier: Modifier = Modifier,
    height: androidx.compose.ui.unit.Dp
) {
    Box(
        modifier = modifier
            .height(height)
            .clip(RoundedCornerShape(CloserRadii.Pill))
            .background(brush)
    )
}
